/* ============================================================
   ZENON ENERGÍA — custom-v5.css
   Base: la V4 (journey isométrico + scroll). Re-pintada con la
   identidad de marca facilitada por el cliente y con el logotipo
   vectorial cuya "E" se enciende como una etiqueta energética.
   ============================================================ */

/* ── Tipografías de marca ──────────────────────────────────────────────
   Se usan si están INSTALADAS en el equipo. Para servirlas desde la web,
   copia los .woff2 en /fonts y añade en el <head>:
       <link rel="stylesheet" href="css/zenon-fonts.css">
   Sin ellas la web cae a Archivo, grotesca de personalidad muy parecida
   y con eje de anchura variable para emular el trazo del logotipo.      */
@font-face {
  font-family: "TT Lakes Neue";
  src: local("TT Lakes Neue Light");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "TT Lakes Neue";
  src: local("TT Lakes Neue Regular"), local("TT Lakes Neue");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TT Lakes Neue";
  src: local("TT Lakes Neue Medium");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "TT Lakes Neue";
  src: local("TT Lakes Neue DemiBold"), local("TT Lakes Neue Bold");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "TT Lakes Neue";
  src: local("TT Lakes Neue ExtraBold");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Arian";
  src: local("Arian");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Arian";
  src: local("Arian Bold");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── Paleta corporativa ZENON ──────────────────────────────────────
     #00352F  verde ZENON      tinta y superficie protagonista
     #00594F  verde Aston M.   acento legible
     #CEDC00  lima             ÚNICO color vivo: rellenos y energía
     #FFFFFF  blanco                                                   */
  --v3-ink: #00352f; /* el verde corporativo ES la tinta */
  --v3-ink-soft: #55716b;
  --v3-bg: #e4ebe7; /* suelo del hero isométrico, con velo verde */
  --v3-bg-soft: #eff3f1;
  --v3-line: rgba(0, 53, 47, 0.11);
  --v3-elec: #00594f; /* acento "energía": legible sobre blanco */
  --v3-green: #6e7a00; /* familia lima en versión legible */
  --v3-lime: #cedc00; /* lima puro: SOLO fondos y rellenos */
  --v3-deep: #00211d; /* profundidad: secciones oscuras */
  --v3-font: "TT Lakes Neue", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --v3-font-alt: "Arian", "TT Lakes Neue", "Archivo", sans-serif;
  /* ancho de contenido único para todas las secciones del body: antes había
     dos familias de contenedores a anchos distintos (1340px las "v3-*" más
     antiguas, 1500px las "zn-*" del body de las interiores) y se notaba el
     salto de una sección a otra dentro de la misma página. */
  --zn-container: 1500px;
}

* {
  -webkit-font-smoothing: antialiased;
}

body.v3-body {
  margin: 0;
  background: var(--v3-bg);
  color: var(--v3-ink);
  font-family: var(--v3-font);
  overflow-x: hidden;
}

/* ══════════════════════════════ NAV ══════════════════════════════ */
.v3-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2.4rem;
  pointer-events: none;
}
.v3-nav > * {
  pointer-events: auto;
}

.v3-nav-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.v3-nav-link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-ink);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.v3-nav-link:hover {
  opacity: 1;
}
.v3-nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 50%;
  background: rgba(0, 53, 47, 0.07);
  color: var(--v3-ink);
  font-size: 0.92rem;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.v3-nav-social:hover {
  background: var(--v3-ink);
  color: #fff;
  transform: translateY(-1px);
}

.v3-nav-right {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.v3-btn-soft {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: rgba(0, 53, 47, 0.07);
  color: var(--v3-ink);
  transition: background 0.2s;
}
.v3-btn-soft:hover {
  background: rgba(0, 53, 47, 0.12);
}
.v3-btn-dark {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: var(--v3-ink);
  color: #fff;
  transition:
    transform 0.18s,
    opacity 0.18s;
}
.v3-btn-dark:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* ══════════════════════════════ HERO DE VÍDEO ══════════════════════════════
   Sustituye al recorrido isométrico en la home (ver home.cshtml y el bloque
   JOURNEY/STAGE más abajo, que se queda tal cual, sin usar, para poder
   recuperarlo en otro proyecto). Vídeo a sangre + velo de dos capas (oscurece
   arriba para la nav y abajo para el titular, deja respirar el vídeo en el
   centro — mismo criterio que .zn-show__scrim) + logo/titular como
   protagonistas, sin nada de scroll-driven. */
.v3-hero-video {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--v3-deep); /* red de seguridad mientras carga el vídeo */
  display: flex;
  align-items: flex-end;
}
.v3-hero-video__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v3-hero-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 33, 29, 0.9) 0%,
    rgba(0, 33, 29, 0.38) 28%,
    rgba(0, 33, 29, 0.08) 50%,
    rgba(0, 33, 29, 0.3) 75%,
    rgba(0, 33, 29, 0.62) 100%
  );
}
.v3-hero-video__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 0 2.4rem 8vh;
  color: #fff;
}
.v3-hero-video__title {
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 16ch;
}
.v3-hero-video__sub {
  margin: 1.6rem 0 0;
  max-width: 42ch;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  font-weight: 500;
  opacity: 0.86; /* reposo — el fundido de entrada llega hasta aquí, no hasta 1 */
}

/* ── Entrada del hero: el vídeo entra con un ligero zoom-out, el titular se
   revela línea a línea (máscara + subida, como una cortina) y el subtítulo
   llega detrás con un fundido. Todo por CSS puro, sin JS: como el hero vive
   dentro de #swup, se reinserta fresco cada vez que se vuelve a la home vía
   SPA, así que la animación se repite en cada visita — mismo criterio que
   la "E" del logotipo, que también se re-enciende siempre en la home. ── */
.v3-hero-video__media {
  animation: zn-hero-zoom 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes zn-hero-zoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
.v3-hero-video__line {
  display: block;
  overflow: hidden; /* la ventana de la máscara: recorta la línea mientras sube */
}
.v3-hero-video__line-in {
  display: block;
  animation: zn-hero-line 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.v3-hero-video__line:nth-child(1) .v3-hero-video__line-in {
  animation-delay: 0.2s;
}
.v3-hero-video__line:nth-child(2) .v3-hero-video__line-in {
  animation-delay: 0.36s; /* la segunda línea sale pisando la cola de la primera */
}
@keyframes zn-hero-line {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}
.v3-hero-video__sub {
  animation: zn-hero-fade 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}
@keyframes zn-hero-fade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 0.86;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v3-hero-video__media,
  .v3-hero-video__line-in,
  .v3-hero-video__sub {
    animation: none !important;
    transform: none !important;
  }
  .v3-hero-video__sub {
    opacity: 0.86 !important;
  }
}

@media (max-width: 820px) {
  /* La barra de CTA fija ("Solicitar estudio") flota sobre el hero en
     móvil/tablet (ver .v3-mobile-cta) — sin este hueco extra tapaba el
     subtítulo. 5.5rem es el mismo margen ya usado para que no tape el pie
     de página (ver "body { padding-bottom: 5.5rem }" más abajo). */
  .v3-hero-video__body {
    padding-bottom: calc(5.5rem + 2vh);
  }
}

/* ══════════════════════════════ JOURNEY / STAGE (sin usar, ver arriba) ══════════════════════════════ */
#v3-journey {
  position: relative;
  /* Duración de la animación: es scroll, no tiempo. Cada vh es recorrido que
     el usuario tiene que empujar, así que bajarlo la acorta directamente. */
  height: 400vh;
}
#v3-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--v3-bg);
}
#v3-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── HERO overlay ── */
.v3-hero {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 16vh;
  pointer-events: none;
  will-change: opacity, transform;
}
.v3-hero-title {
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--v3-ink);
  margin: 0;
}
.v3-hero-sub {
  margin-top: 1.8rem;
  max-width: 38ch;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--v3-ink);
  opacity: 0.78;
}

/* ── Scroll hint ── */
.v3-scrollhint {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-ink);
  opacity: 0.55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  will-change: opacity;
}
.v3-scrollhint::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--v3-ink), transparent);
  opacity: 0.5;
}

/* ── Saltar animación (abajo a la derecha del hero) ──
   Vive dentro de #v3-stage, que es sticky durante todo el journey, así que
   acompaña al recorrido sin necesidad de reposicionarlo con JS. */
.v3-skip {
  position: absolute;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid rgba(0, 53, 47, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v3-ink);
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s,
    opacity 0.4s,
    transform 0.3s;
}
.v3-skip .zn-ico {
  font-size: 0.8rem;
  opacity: 0.7;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.v3-skip:hover {
  background: var(--v3-ink);
  border-color: var(--v3-ink);
  color: #fff;
  transform: translateY(-2px);
}
.v3-skip:hover .zn-ico {
  opacity: 1;
  transform: translateY(2px);
}
.v3-skip:focus-visible {
  outline: 2px solid var(--v3-ink);
  outline-offset: 3px;
}
.v3-skip.is-gone {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* ── STEPS panel (bottom-left) ── */
.v3-steps {
  position: absolute;
  left: 2.8rem;
  bottom: 2.4rem;
  z-index: 25;
  width: min(42rem, 46vw);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.v3-steps.is-visible {
  opacity: 1;
  transform: none;
}

.v3-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: start;
  gap: 1.2rem;
  padding: 0.7rem 0;
}
.v3-step__num {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--v3-ink-soft);
  background: transparent;
  transition:
    background 0.35s,
    color 0.35s,
    box-shadow 0.35s;
}
.v3-step__num .zn-ico {
  font-size: 1rem;
}
.v3-step.is-active .v3-step__num {
  background: #fff;
  color: var(--v3-ink);
  box-shadow: 0 6px 18px rgba(0, 53, 47, 0.14);
}
.v3-step__title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
  opacity: 0.55;
  transition:
    opacity 0.35s,
    font-size 0.35s;
  padding-top: 0.45rem;
}
.v3-step.is-active .v3-step__title {
  opacity: 1;
  font-size: 2rem;
  padding-top: 0.15rem;
}
.v3-step__body {
  grid-column: 2 / 3;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--v3-ink-soft);
  border-left: 2px solid var(--v3-line);
  padding-left: 1.3rem;
  margin-left: 0.1rem;
  transition:
    max-height 0.5s ease,
    opacity 0.4s,
    margin-top 0.4s;
}
.v3-step.is-active .v3-step__body {
  max-height: 20rem;
  opacity: 1;
  margin-top: 0.8rem;
}

/* Enlace al servicio. El panel entero es pointer-events:none (para no robarle
   el scroll al journey), así que solo el enlace del paso activo lo recupera. */
.v3-step__link {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 53, 47, 0.25);
  padding-bottom: 0.25rem;
  pointer-events: none;
  transition:
    border-color 0.3s,
    gap 0.3s;
}
.v3-step.is-active .v3-step__link {
  pointer-events: auto;
}
.v3-step__link .zn-ico {
  font-size: 0.75rem;
}
.v3-step__link:hover {
  border-color: var(--v3-ink);
  gap: 0.8rem;
}

/* ── Progress rail (right side) ── */
.v3-progress {
  position: absolute;
  right: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.v3-progress.is-visible {
  opacity: 1;
}
.v3-progress span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 53, 47, 0.2);
  transition:
    background 0.3s,
    transform 0.3s;
}
.v3-progress span.on {
  background: var(--v3-ink);
  transform: scale(1.5);
}

/* ══════════════════════════════ SECCIONES GENERALES ══════════════════════════════ */
.v3-sec {
  background: #fff;
}
.v3-sec-inner {
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 7rem 2.4rem;
}

.v3-bighead {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--v3-ink);
  margin: 0;
}
.v3-lede {
  color: var(--v3-ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ── Features (4 columnas) ── */
.v3-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem;
  margin-top: 5rem;
}
.v3-feature {
  padding-top: 1.6rem;
  border-top: 1px solid var(--v3-line);
}
.v3-feature__icon {
  font-size: 3.1rem;
  color: var(--v3-ink);
  line-height: 1;
  display: block;
  margin-bottom: 2.4rem;
}
.v3-feature__title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
  margin: 0 0 0.7rem;
}
.v3-feature__body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--v3-ink-soft);
  margin: 0;
}

/* ── Split (imagen + texto) ── */
.v3-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.v3-split__media {
  border-radius: 1.4rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #c6d8d2 0%, #9db5ae 100%);
  position: relative;
}
.v3-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v3-split__media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: rgba(0, 53, 47, 0.45);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.v3-split__media-fallback .zn-ico {
  font-size: 3rem;
}

/* ── FAQ ── */
.v3-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  border-top: 1px solid var(--v3-line);
}
.v3-faq-grid > .v3-faq-left {
  padding-right: 2rem;
  padding-top: 56px;
}
.v3-faq-list {
  border-left: 1px solid var(--v3-line);
  padding-left: 5rem;
}
.v3-faq-list--full {
  border-left: none;
  padding-left: 0;
  border-top: 1px solid var(--v3-line);
}
.v3-faq-item {
  border-bottom: 1px solid var(--v3-line);
  padding: 1.6rem 0;
}
.v3-faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding: 0;
  /* un <button> no hereda font-family del user-agent stylesheet (cae en
     Arial): sin esto la pregunta se ve con una tipografía distinta al
     resto de la página, aunque el resto de reglas de aquí sí se apliquen */
  font-family: inherit;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.v3-faq-toggle {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
  flex-shrink: 0;
  background: var(--v3-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}
.v3-faq-item.open .v3-faq-toggle {
  transform: rotate(180deg);
}
.v3-faq-a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.45s ease,
    opacity 0.35s,
    margin-top 0.35s;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--v3-ink-soft);
}
.v3-faq-item.open .v3-faq-a {
  max-height: 18rem;
  opacity: 1;
  margin-top: 1.3rem;
}

/* ── Dark CTA + footer wordmark ── */
.v3-dark {
  background: var(--v3-deep);
  color: #fff;
  overflow: hidden;
}
.v3-dark-inner {
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 6rem 2.4rem 0;
}
.v3-dark-head {
  font-size: clamp(2.2rem, 5vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;
  margin: 0;
  max-width: 18ch;
}
.v3-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.2rem;
  background: #fff;
  color: var(--v3-ink);
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border-radius: 9999px;
  transition: transform 0.18s;
}
.v3-btn-white:hover {
  transform: translateY(-2px);
}

.v3-footrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.v3-footrow a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.1rem 2rem 2.1rem 2rem;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  transition: 300ms all;
}

.v3-footrow a:hover {
  background: #fff;
  color: var(--v3-ink);
}

.v3-footrow a:last-child {
  border-right: none;
}
.v3-footrow a .zn-ico {
  color: var(--v3-lime);
  font-size: 1.6rem;
  transition: transform 0.2s;
}
.v3-footrow a:hover .zn-ico {
  transform: translateX(6px);
}

/* ══════════════════════════════ RESPONSIVE ══════════════════════════════ */
@media (max-width: 980px) {
  .v3-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .v3-split,
  .v3-faq-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .v3-faq-list {
    border-left: none;
    padding-left: 0;
  }
}
@media (max-width: 820px) {
  .v3-nav-left {
    display: none;
  }
  .v3-steps {
    width: 78vw;
    left: 1.2rem;
    bottom: 4.6rem;
  }
  .v3-progress {
    display: none;
  }
  /* Sin raíl de progreso a la derecha, el botón cabe abajo a lo ancho sin
     pisar el panel de servicios (que sube con el bottom de arriba). */
  .v3-skip {
    right: 1.2rem;
    bottom: 1.2rem;
    padding: 0.6rem 0.95rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
  }
  .v3-nav {
    padding: 1.1rem 1.2rem;
  }
  .v3-features {
    grid-template-columns: 1fr;
  }
  .v3-footrow {
    grid-template-columns: 1fr;
  }
  .v3-footrow a {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ══════════════════════════════ EXTENSIONES MULTIPÁGINA ══════════════════════════════ */
:root {
  --v3-soft: #f2f6f4;
}

/* nav sólido (páginas interiores) */
.v3-nav.is-solid {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--v3-line);
}

/* enlaces con estilo de botón */
a.v3-btn-dark,
a.v3-btn-soft,
a.v3-btn-white,
a.v3-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

/* botones extra */
.v3-btn-outline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  background: transparent;
  color: var(--v3-ink);
  border: 1px solid rgba(0, 53, 47, 0.22);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.v3-btn-outline:hover {
  background: rgba(0, 53, 47, 0.05);
  border-color: rgba(0, 53, 47, 0.4);
}
.v3-btn-lg {
  padding: 0.95rem 1.9rem;
  font-size: 0.8rem;
}
.v3-btn-block {
  width: 100%;
  justify-content: center;
}

/* eyebrow / etiqueta */
.v3-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-soft);
  margin-bottom: 1.2rem;
}
.v3-eyebrow--elec {
  color: var(--v3-elec);
}
.v3-eyebrow--green {
  color: var(--v3-green);
}

/* cabecera de páginas interiores */
.v3-subhero {
  background: var(--v3-soft);
}
.v3-subhero-inner {
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 11rem 2.4rem 5rem;
}
.v3-subhero .v3-lede {
  margin-top: 1.6rem;
  max-width: 54ch;
}

/* variantes de sección */
.v3-sec--soft {
  background: var(--v3-soft);
}
/* Sección a sangre en el verde corporativo (#00352f): el "gran bloque
   verde" que pide el cliente como respiro entre tanta tarjeta. El lima solo
   aparece en el eyebrow — es la única nota de color permitida aquí, tal
   como se pidió: "con moderación, para que tenga más fuerza cuando
   aparezca". Más aire que una sección normal: el bloque tiene que sentirse
   como una pausa, no como una tarjeta más. */
.v3-sec--dark {
  background: var(--v3-ink);
  color: #fff;
}
.v3-sec--dark .v3-sec-inner {
  padding-top: 9rem;
  padding-bottom: 9rem;
}
.v3-sec--dark .v3-bighead {
  color: #fff;
}
.v3-sec--dark .v3-eyebrow--green {
  color: var(--v3-lime);
}
.v3-sec--dark .v3-stat {
  border-top-color: rgba(255, 255, 255, 0.18);
}
.v3-sec--dark .v3-stat__num {
  color: #fff;
}
.v3-sec--dark .v3-stat__label {
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 820px) {
  .v3-sec--dark .v3-sec-inner {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ── Franja de confianza: justo debajo del hero. Compacta a propósito —no
   es una sección más, es una ribbon de certificación— y en blanco puro
   para separarse con claridad del vídeo oscuro que tiene justo encima. ── */
.v3-trustbar {
  background: #fff;
  border-bottom: 1px solid var(--v3-line);
}
.v3-trustbar__inner {
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 1.8rem 2.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 3rem;
}
.v3-trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--v3-ink-soft);
}
.v3-trustbar__item .zn-ico {
  font-size: 1.05rem;
  color: var(--v3-elec);
  flex: none;
}
.v3-sec-head {
  max-width: 62ch;
  margin-bottom: 3.5rem;
}
.v3-sec-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* stats band */
.v3-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.v3-stat {
  border-top: 1px solid var(--v3-line);
  padding-top: 1.4rem;
}
.v3-stat__num {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--v3-ink);
}
.v3-stat__label {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--v3-ink-soft);
}

/* cards (soluciones / tarifas) */
.v3-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.v3-card {
  border: 1px solid var(--v3-line);
  border-radius: 1.2rem;
  padding: 2.2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.v3-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -24px rgba(0, 53, 47, 0.28);
  border-color: transparent;
}
.v3-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--v3-soft);
  color: var(--v3-ink);
  margin-bottom: 1.4rem;
}
.v3-card__tag {
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  background: rgba(110, 122, 0, 0.14);
  color: var(--v3-green);
  margin-bottom: 1rem;
}
.v3-card__tag--elec {
  background: rgba(0, 89, 79, 0.1);
  color: var(--v3-elec);
}
.v3-card__title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--v3-ink);
}
.v3-card__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--v3-ink-soft);
  margin: 0 0 1.4rem;
}
.v3-card__save {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--v3-ink);
  line-height: 1;
  margin-bottom: 1.6rem;
}
.v3-card__save span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--v3-ink-soft);
}
.v3-card__list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.v3-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--v3-ink);
}
.v3-card__list li .zn-ico {
  color: var(--v3-elec);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── Lista de canales de contacto: página de contacto ─────────────────
   .v3-card__list es una lista plana de una sola línea, pensada para
   checklists de beneficios; los canales de contacto (teléfono, email,
   oficina...) necesitan más peso — icono en caja, título y detalle en
   líneas separadas — o al lado del formulario se ven pobres. */
.v3-contact-list {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.v3-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.v3-contact-item__icon {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.8rem;
  background: var(--v3-soft);
  color: var(--v3-elec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.v3-contact-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.3rem;
}
.v3-contact-item__body b {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-ink-soft);
}
.v3-contact-item__body a {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--v3-ink);
  text-decoration: none;
  width: fit-content;
}
.v3-contact-item__body a:hover {
  color: var(--v3-elec);
  text-decoration: underline;
}
.v3-contact-item__note {
  font-family: var(--v3-font-alt);
  font-size: 0.85rem;
  color: var(--v3-ink-soft);
}
.v3-card__cta {
  margin-top: auto;
}
.v3-card--featured {
  border-color: transparent;
  box-shadow: 0 24px 60px -28px rgba(0, 53, 47, 0.32);
  position: relative;
}
.v3-card--featured::before {
  content: "Más popular";
  position: absolute;
  top: -0.7rem;
  left: 2.2rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--v3-ink);
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
}

/* proceso vertical (pasos numerados) */
.v3-plist {
  display: flex;
  flex-direction: column;
}
.v3-pstep {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.6rem;
  padding: 2rem 0;
  border-top: 1px solid var(--v3-line);
}
.v3-pstep__n {
  font-size: 1rem;
  font-weight: 800;
  color: var(--v3-ink-soft);
}
.v3-pstep__t {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--v3-ink);
}
.v3-pstep__d {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--v3-ink-soft);
  margin: 0;
  max-width: 62ch;
}

/* quote / testimonial */
.v3-quote-sec {
  max-width: 62rem;
}
.v3-quote__mark {
  font-size: 4rem;
  line-height: 0.5;
  font-weight: 900;
  color: var(--v3-green);
  display: block;
  margin-bottom: 1rem;
}
.v3-quote {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
  margin: 0;
}
.v3-quote__author {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.v3-quote__avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--v3-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}
.v3-quote__meta {
  font-size: 0.85rem;
}
.v3-quote__meta b {
  display: block;
  color: var(--v3-ink);
}
.v3-quote__meta span {
  color: var(--v3-ink-soft);
}

/* trust strip */
.v3-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3.5rem;
  align-items: center;
}
.v3-trust__item {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
  opacity: 0.45;
}

/* formularios */
.v3-form-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.v3-form-card {
  border: 1px solid var(--v3-line);
  border-radius: 1.3rem;
  padding: 2.4rem;
  background: #fff;
}
.v3-field {
  margin-bottom: 1.2rem;
}
.v3-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.v3-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--v3-ink);
  margin-bottom: 0.5rem;
}
.v3-input,
.v3-select,
.v3-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(0, 53, 47, 0.18);
  background: #fff;
  color: var(--v3-ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.v3-input:focus,
.v3-select:focus,
.v3-textarea:focus {
  outline: none;
  border-color: var(--v3-elec);
  box-shadow: 0 0 0 3px rgba(0, 89, 79, 0.16);
}
.v3-textarea {
  resize: vertical;
  min-height: 6rem;
}
.v3-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--v3-ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.v3-check input {
  margin-top: 0.2rem;
  accent-color: var(--v3-elec);
}
.v3-form-note {
  font-size: 0.8rem;
  color: var(--v3-ink-soft);
  margin-top: 1rem;
}
/* Estados de FvForms: enviando / ok / error. display:none por defecto —
   fvforms.js las muestra/oculta directamente por estilo inline (jQuery
   show()/hide()), así que no hace falta ninguna clase ".show". Al mostrarlo,
   jQuery fija "display:block" inline (pisando cualquier display:flex de
   aquí), así que el icono se alinea con inline-flex en vez de depender
   del display del contenedor padre. */
.v3-form-status {
  display: none;
  padding: 1.1rem 1.3rem;
  border-radius: 0.8rem;
  border: 1px solid transparent;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 1.2rem;
}
.v3-form-status .zn-ico {
  display: inline-flex;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin-right: 0.6rem;
  vertical-align: -0.35em;
}
.v3-form-status--loading {
  background: rgba(0, 53, 47, 0.06);
  border-color: rgba(0, 53, 47, 0.12);
  color: var(--v3-ink-soft);
}
.v3-form-status--success {
  background: rgba(0, 89, 79, 0.1);
  border-color: rgba(0, 89, 79, 0.22);
  color: #00594f;
}
.v3-form-status--error {
  background: rgba(225, 37, 27, 0.1);
  border-color: rgba(225, 37, 27, 0.22);
  color: #b5231b;
}
.v3-form-status--error a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* footer completo */
.v3-footer {
  background: var(--v3-ink);
  color: #fff;
}
.v3-footer-inner {
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 5rem 2.4rem 2.5rem;
}
.v3-footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.v3-footer-brand p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-top: 1rem;
  max-width: 34ch;
}
.v3-footer-col h4 {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.1rem;
}
.v3-footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
  transition: color 0.2s;
}
.v3-footer-col a:hover {
  color: #fff;
}
.v3-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}
.v3-footer-bottom a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  margin-left: 1.4rem;
}
.v3-footer-bottom a:hover {
  color: #fff;
}

/* CTA band claro */
.v3-cta {
  background: var(--v3-soft);
}
.v3-cta-inner {
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 6rem 2.4rem;
  text-align: center;
}

/* responsive extra */
@media (max-width: 980px) {
  .v3-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .v3-cards {
    grid-template-columns: 1fr;
  }
  .v3-form-wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .v3-footer-top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 820px) {
  .v3-subhero-inner {
    padding: 8.5rem 1.3rem 3.5rem;
  }
  .v3-sec-inner {
    padding: 4.5rem 1.3rem;
  }
  .v3-field-row {
    grid-template-columns: 1fr;
  }
  .v3-footer-top {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════ ANIMACIONES: reveal + contadores + eléctrico ══════════════════════════════ */

/* ── Reveal on scroll (cajas: features, cards, stats, pasos, cita, faq, formulario) ── */
.v3-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.v3-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── Tarjetas / features: solo el icono reacciona al pasar el ratón ── */
.v3-card,
.v3-feature {
  position: relative;
}
.v3-card__icon,
.v3-feature__icon {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.3s,
    background 0.3s;
}
.v3-feature:hover .v3-feature__icon {
  transform: translateY(-5px) scale(1.06);
  color: var(--v3-elec);
}
.v3-card:hover .v3-card__icon {
  background: var(--v3-lime);
  color: var(--v3-ink);
  transform: scale(1.1);
}

/* ── Eyebrow: punto pulsante estilo "corriente" en cada etiqueta ── */
.v3-eyebrow,
.v3-eyebrow--green,
.v3-eyebrow--elec {
  position: relative;
  padding-left: 1.1em;
}
.v3-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: v3-pulse-elec 2.2s ease-out infinite;
}
.v3-eyebrow--green::before {
  animation-name: v3-pulse-green;
}
@keyframes v3-pulse-elec {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 89, 79, 0.5);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(0, 89, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 89, 79, 0);
  }
}
@keyframes v3-pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(206, 220, 0, 0.75);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(206, 220, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(206, 220, 0, 0);
  }
}

/* ── Divisor con chispa viajera (detalle de electricidad entre secciones) ── */
.v3-spark-divider {
  position: relative;
  height: 1px;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  background: var(--v3-line);
  overflow: hidden;
}
.v3-spark-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -80px;
  width: 80px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--v3-lime) 38%,
    var(--v3-elec) 62%,
    transparent
  );
  box-shadow: 0 0 10px 1px rgba(206, 220, 0, 0.6);
  animation: v3-spark-travel 3.6s ease-in-out infinite;
}
@keyframes v3-spark-travel {
  0% {
    left: -80px;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* ── Stat / card__save: leve resplandor al completar el contador ── */
.v3-stat__num,
.v3-card__save {
  /* transition: text-shadow 0.4s; */
}
.v3-stat.is-in .v3-stat__num,
.v3-card.is-in .v3-card__save {
  /* text-shadow: 0 0 18px rgba(0, 89, 79, 0.16); */
}

@media (prefers-reduced-motion: reduce) {
  .v3-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .v3-eyebrow::before,
  .v3-spark-divider::before {
    animation: none !important;
  }
}

/* ══════════════════════════════ TESTIMONIOS (Swiper) ══════════════════════════════ */
/* Autor de la cita queda alineado a la izquierda (ver .v3-quote__author) →
   controles (contador + flechas juntas) van agrupados a la DERECHA, lado opuesto. */
.v3-testi-wrap {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
}
.v3-testi-swiper {
  overflow: hidden;
}
.v3-testi-swiper .v3-quote-sec {
  max-width: none;
}

.v3-testi-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
  margin-top: 2.4rem;
}
.v3-testi-counter {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--v3-ink-soft);
  font-variant-numeric: tabular-nums;
}
.v3-testi-counter__current {
  color: var(--v3-ink);
}
.v3-testi-arrows {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.v3-testi-nav {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--v3-ink);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition:
    background 0.2s,
    transform 0.2s,
    opacity 0.2s;
}
.v3-testi-nav:hover {
  background: var(--v3-lime);
  color: var(--v3-ink);
}
.v3-testi-nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 820px) {
  .v3-testi-nav {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1rem;
  }
}

/* ══════════════════════════════ WIZARD "Solicitar estudio" ══════════════════════════════ */
.v3-wizard-steplabel {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-elec);
  margin-bottom: 0.6rem;
}
.v3-wizard-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
  margin: 0 0 1.4rem;
}

.v3-wizard-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
  background: #eaf0ed;
  border: 1px solid var(--v3-line);
  margin-bottom: 1.4rem;
}
.v3-wizard-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.v3-wizard-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.v3-wizard-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.5rem;
  border-radius: 0.8rem;
  border: 1.5px solid var(--v3-line);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.2s;
}
.v3-wizard-type .zn-ico {
  font-size: 1.4rem;
  color: var(--v3-ink-soft);
  transition: color 0.2s;
}
.v3-wizard-type span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--v3-ink-soft);
  transition: color 0.2s;
}
.v3-wizard-type:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 53, 47, 0.3);
}
.v3-wizard-type.is-active {
  border-color: var(--v3-elec);
  background: rgba(0, 89, 79, 0.07);
}
.v3-wizard-type.is-active .zn-ico,
.v3-wizard-type.is-active span {
  color: var(--v3-elec);
}

/* ══════════════════════════════════════════════════════════════════════
   AÑADIDOS V5
   ══════════════════════════════════════════════════════════════════ */

/* Tailwind ya no se carga (no se usaba). Esta clase sí la usa el wizard. */
.hidden {
  display: none !important;
}
[hidden] {
  display: none !important;
}

/* NO poner overflow-x:hidden en <html>: rompe position:sticky en #v3-stage
   (el escenario isométrico del hero deja de quedarse fijo y se desplaza
   como un elemento normal). Comprobado en directo: con overflow-x:hidden
   en html, stage.getBoundingClientRect().top se movía con el scroll en
   vez de quedarse en 0. body.v3-body ya trae su propio overflow-x:hidden
   (heredado de la V4) y ese no rompe el sticky, así que el recorte
   lateral se queda solo ahí. */

/* ── Iconografía propia ───────────────────────────────────────────────── */
.zn-ico {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
/* Los iconos grandes piden un trazo proporcionalmente más fino */
.v3-feature__icon.zn-ico {
  stroke-width: 1.15;
}
.v3-split__media-fallback .zn-ico {
  stroke-width: 1.2;
}

/* ══════════════════════════════════════════════════════════════════════
   LOGOTIPO ZENON  ·  la "E" como etiqueta de eficiencia energética
   La "E" son tres chevrons de longitud creciente. Se dibuja en dos capas:
   la base en color corporativo y, encima, la misma forma en los colores
   de una etiqueta energética, que se enciende de arriba abajo al entrar.
   ══════════════════════════════════════════════════════════════════ */
.zn-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.zn-logo__mark {
  height: 2em;
  width: auto;
  overflow: visible;
}
.zn-logo__mark .zn-lm {
  fill: currentColor;
}
.zn-e-base path {
  fill: currentColor;
}
/* El encendido de la E va barra a barra, de arriba abajo. La clave es que la
   transicion sea CORTA respecto al escalonado: con 0.5s de fundido y solo 0.07s
   entre barras, las tres solapaban casi por completo y se leia como un
   encendido simultaneo. Ahora cada barra termina antes de que arranque la
   siguiente, asi que la cascada se ve. */
.zn-el {
  opacity: 0;
  transition: opacity 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Los delays de aqui son los de APAGADO (sin :hover): se apagan en el mismo
   orden, arriba primero, y mas rapido que como se encienden. */
.zn-el--1 {
  fill: #00a651;
  transition-delay: 0s;
} /* verde   */
.zn-el--2 {
  fill: #ffed00;
  transition-delay: 0.05s;
} /* amarillo */
.zn-el--3 {
  fill: #e1251b;
  transition-delay: 0.1s;
} /* rojo    */

@keyframes zn-e-ignite {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  56% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes zn-e-halo {
  0%,
  100% {
    filter: none;
  }
  30%,
  60% {
    filter: drop-shadow(0 0 10px rgba(206, 220, 0, 0.45));
  }
}
/* Las cuatro reglas comparten especificidad: así el animation-delay de cada
   barra no lo pisa el shorthand y la E se enciende de verdad en cascada. */
.zn-logo.is-igniting .zn-el {
  animation: zn-e-ignite 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.zn-logo.is-igniting .zn-el--1 {
  animation-delay: 0.04s;
}
.zn-logo.is-igniting .zn-el--2 {
  animation-delay: 0.22s;
}
.zn-logo.is-igniting .zn-el--3 {
  animation-delay: 0.4s;
}
.zn-logo.is-igniting .zn-logo__mark {
  animation: zn-e-halo 1.95s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Guiño rápido al pasar el ratón. Mismo gesto en el logotipo de la barra de
   navegación y en los del pie. Acotado a dispositivos con hover real: en una
   pantalla táctil el :hover se queda pegado después del toque.
   Solo (hover: hover): con (pointer: fine) se perdería el guiño en portátiles
   con pantalla táctil, que declaran el puntero primario como "coarse". */
@media (hover: hover) {
  .zn-logo--tap:hover .zn-el {
    opacity: 1;
  }
  .zn-logo--tap:hover .zn-el--1 {
    transition-delay: 0s;
  }
  .zn-logo--tap:hover .zn-el--2 {
    transition-delay: 0.13s;
  }
  .zn-logo--tap:hover .zn-el--3 {
    transition-delay: 0.26s;
  }
}

/* El logotipo en la barra de navegación (sustituye al texto "ZENON") */
.v3-logo {
  position: absolute;
  left: 50%;
  /* top: 1.45rem; */
  transform: translateX(-50%);
  font-size: 2rem; /* controla la altura del SVG (1em) */
  color: var(--v3-ink);
  text-decoration: none;
  pointer-events: auto;
  padding-block: 0.5rem; /* área táctil cómoda en móvil */
  letter-spacing: 0;
  font-weight: 400;
  flex-direction: column;
  transition: font-size 0.25s ease;
}
/* ── Entrada del logotipo de la nav: ZENON letra a letra, la "E" se
   enciende igual que al pasar el ratón y "Energía" completa el conjunto.
   Solo se reproduce una vez por sesión (initLogoIntro en v5-app.js).
   Fuera de la ventana .is-intro-playing el logotipo está SIEMPRE completo
   y visible: ninguna letra depende de que la animación llegue a correr
   —si la pestaña pierde el foco a mitad, JS retira la clase igualmente
   por temporizador y todo vuelve a su estado final, igual que se resolvió
   el fundido de Swup.
   Las letras se solapan mucho más que se suceden (delay corto, duración
   larga) para que lean como una sola ola continua y no como golpes
   sueltos; fill-box + transform-origin:center hace que cada letra escale
   sobre su propio centro y no sobre el origen del viewBox entero. */
[data-zl] {
  transform-box: fill-box;
  transform-origin: center;
}
.zn-logo--intro.is-intro-playing [data-zl] {
  opacity: 0;
  transform: translateY(5px) scale(0.92);
  animation: zn-letter-in 0.85s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.zn-logo--intro.is-intro-playing [data-zl="1"] {
  animation-delay: 0s;
}
.zn-logo--intro.is-intro-playing [data-zl="2"] {
  animation-delay: 0.08s;
}
.zn-logo--intro.is-intro-playing [data-zl="3"] {
  animation-delay: 0.16s;
}
.zn-logo--intro.is-intro-playing [data-zl="4"] {
  animation-delay: 0.24s;
}
.zn-logo--intro.is-intro-playing [data-zl="5"] {
  animation-delay: 0.32s;
}
/* zl=6 · el bloque "ENERGÍA" del logotipo real del cliente (ver docMaster),
   remata la cascada de letras un paso por detrás de la última N. */
.zn-logo--intro.is-intro-playing [data-zl="6"] {
  animation-delay: 0.4s;
}
@keyframes zn-letter-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* El logotipo del footer */
.v3-footer-brand__logo {
  font-size: 1.45rem;
  letter-spacing: 0;
  color: #fff;
}

/* Wordmark gigante del pie: ahora es el logotipo real, no texto */
.v3-wordmark {
  display: block;
  width: 100%;
  color: #fff;
  margin: 3rem 0 -1.2vw;
  padding: 0 2.4rem;
  box-sizing: border-box;
  user-select: none;
  line-height: 0;
}
/* Dos bloques: a la izquierda el titular + CTA + confianza, a la derecha
   el banner de logos y los enlaces legales — cada uno su propia columna,
   no una fila compartida. */
.v3-dark-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: end;
}
.v3-dark-top__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  text-align: right;
}
/* Logo/sello en su versión "negativo blanco" (pensada para fondo oscuro).
   Ancho moderado y pegado al borde derecho de su columna —no sabemos aún
   la proporción real del SVG—; ajustar max-width cuando el archivo exista
   de verdad en el proyecto. */
.v3-partner-banner {
  /*max-width: 18rem;*/
  width: 100%;
}
.v3-partner-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.v3-legal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem 1.7rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.v3-legal-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.2s ease;
}
.v3-legal-row a .zn-ico {
  font-size: 0.82rem;
  color: var(--v3-lime);
  opacity: 0.75;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.v3-legal-row a:hover {
  color: #fff;
}
.v3-legal-row a:hover .zn-ico {
  opacity: 1;
  transform: translateY(-1px);
}
.v3-wordmark .zn-logo {
   display: block;
   width: 100%;
   height: 360px;
}
.v3-wordmark .zn-logo__mark {
  height: auto;
  width: 100%;
}

/* ── Titulares: eje de anchura extendido, eco del trazo del logotipo ──
   Cuando lleguen las tipografías reales, zenon-fonts.css lo desactiva.   */
.v3-hero-title,
.v3-bighead,
.v3-dark-head,
.v3-stat__num,
.v3-card__save,
.v3-quote {
  font-stretch: 112%;
}

/* ── Textos largos con la secundaria de marca ─────────────────────────── */
.v3-lede,
.v3-feature__body,
.v3-card__desc,
.v3-faq-a,
.v3-step__body,
.v3-pstep__d {
  font-family: var(--v3-font-alt);
}

/* ── Barras de etiqueta energética como recurso decorativo suelto ─────── */
.zn-elabel {
  display: grid;
  gap: 3px;
  width: max-content;
}
.zn-elabel i {
  display: block;
  height: 6px;
  clip-path: polygon(
    0 0,
    calc(100% - 4px) 0,
    100% 50%,
    calc(100% - 4px) 100%,
    0 100%
  );
}
.zn-elabel i:nth-child(1) {
  width: 26px;
  background: #00a651;
}
.zn-elabel i:nth-child(2) {
  width: 34px;
  background: #ffed00;
}
.zn-elabel i:nth-child(3) {
  width: 42px;
  background: #e1251b;
}

@media (prefers-reduced-motion: reduce) {
  .zn-logo.is-igniting .zn-el,
  .zn-logo.is-igniting .zn-logo__mark {
    animation: none !important;
  }
  .zn-logo--tap:hover .zn-el {
    opacity: 0;
  }
  .zn-logo--intro.is-intro-playing [data-zl] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MEGAMENU  ·  hamburguesa + panel a pantalla completa. Sustituye a los
   tres enlaces de texto de la nav y al botón "Acceder" (ahora dentro,
   como tarjeta de "Área de cliente"). Mismo lenguaje de marca —lima,
   verde ZENON, grano SVG, números fantasma del timeline— llevado a un
   overlay oscuro con más presencia. Toggle en initMegamenu (v5-app.js).
   ══════════════════════════════════════════════════════════════════ */

/* El toggle vive dentro de .v3-nav, que crea su PROPIO contexto de
   apilamiento (position:fixed + z-index). Un z-index alto en el botón
   solo compite con sus hermanos dentro de ese contexto: no basta para
   quedar por encima del megamenu, que es OTRO contexto de apilamiento
   con su propia raíz. Lo que hay que subir es la raíz —.v3-nav— por
   encima del z-index:100 del megamenu; así toda la nav (y con ella el
   botón, ya convertido en X) queda encima cuando el menú está abierto. */
.v3-nav {
  z-index: 110;
}

/* Botón hamburguesa: círculo un poco más grande que "Solicitar estudio" a
   propósito (más presencia), con el icono más pequeño dentro — y ese
   icono ya no son 3 barras iguales: son los mismos 3 chevrones de
   longitud creciente que la "E" del logotipo (la etiqueta de eficiencia
   energética), en tinta normal. Al abrir, se convierten en una X. */
.v3-nav-right {
  margin-left: auto;
}
.v3-menu-toggle {
  position: relative;
  z-index: 1;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 53, 47, 0.07);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: background 0.2s ease;
}
@media (hover: hover) {
  .v3-menu-toggle:hover {
    background: rgba(0, 53, 47, 0.12);
  }
}
.v3-menu-toggle__bar {
  display: block;
  height: 2px;
  background: var(--v3-ink);
  clip-path: polygon(
    0 0,
    calc(100% - 3px) 0,
    100% 50%,
    calc(100% - 3px) 100%,
    0 100%
  );
  transition:
    transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.2s ease,
    background 0.2s ease,
    width 0.2s ease;
}
.v3-menu-toggle__bar:nth-child(1) {
  width: 0.65rem;
}
.v3-menu-toggle__bar:nth-child(2) {
  width: 0.82rem;
}
.v3-menu-toggle__bar:nth-child(3) {
  width: 1rem;
}
.v3-menu-toggle[aria-expanded="true"] {
  /* En móvil la nav es SIEMPRE una barra blanca sólida (incluso con el
     megamenu abierto: .v3-nav sube por encima con z-index:110, ver nota
     arriba), así que una X blanca sobre blanco se volvía invisible. Con
     el verde corporativo (--v3-ink) queda legible sobre el fondo claro,
     tanto en móvil como en el estado no-solid de escritorio. */
  background: rgba(0, 53, 47, 0.1);
}
.v3-menu-toggle[aria-expanded="true"] .v3-menu-toggle__bar {
  background: var(--v3-ink);
  clip-path: none;
  width: 0.85rem;
}
.v3-menu-toggle[aria-expanded="true"] .v3-menu-toggle__bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.v3-menu-toggle[aria-expanded="true"] .v3-menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.v3-menu-toggle[aria-expanded="true"] .v3-menu-toggle__bar:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* overlay a pantalla completa */
.zn-mega {
  position: fixed;
  inset: 0;
  /* 100vh en móvil puede ser más alto que la zona visible real cuando la
     barra de direcciones está presente (ese "vh grande" es justo lo que
     deja hueco abajo y asoma el contenido de la página de detrás). dvh se
     ajusta a la zona visible de verdad; vh se queda como respaldo en
     navegadores que no entienden dvh. */
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  visibility: hidden;
}
.zn-mega.is-open {
  visibility: visible;
}

.zn-mega__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 18, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.zn-mega.is-open .zn-mega__backdrop {
  opacity: 1;
}

.zn-mega__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh; /* el contenedor mide justo la pantalla */
  height: 100dvh; /* ver nota de altura real en .zn-mega */
  overflow: hidden; /* sin scroll, ni vertical ni horizontal */
  background: radial-gradient(
    120% 140% at 85% 0%,
    #00423a 0%,
    var(--v3-deep) 45%,
    #001511 100%
  );
  transform: translateY(-2.5%);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.4s ease;
  display: flex;
  flex-direction: column;
}
.zn-mega.is-open .zn-mega__panel {
  transform: translateY(0);
  opacity: 1;
}

.zn-mega__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.zn-mega__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  top: -22%;
  right: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 220, 0, 0.16), transparent 70%);
  filter: blur(30px);
  animation: zn-mega-drift 16s ease-in-out infinite alternate;
}
@keyframes zn-mega-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-4%, 6%) scale(1.1);
  }
}

.zn-mega__inner {
   position: relative;
   z-index: 1;
   flex: 1 1 auto;
   min-height: 0;
   overflow: hidden;
   width: 100%;
   max-width: 1340px;
   margin: 0 auto;
   box-sizing: border-box;
   padding: clamp(5rem, 11vh, 8rem) 2.4rem clamp(0.5rem, 2vh, 1.2rem);
   display: grid;
   grid-template-columns: 1.6fr 1fr;
   gap: clamp(1.2rem, 9vh, 7rem);
   align-content: center;
}

.zn-mega__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-lime);
  margin-bottom: clamp(0.6rem, 2vh, 1.4rem);
}

.zn-mega__list {
  display: flex;
  flex-direction: column;
}
.zn-mega__item {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  column-gap: 1.2rem;
  padding: clamp(0.5rem, 2vh, 1.05rem) 0;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 1;
  transform: none; /* visible por defecto: ver nota abajo */
}
.zn-mega__item:last-child {
  border-bottom: none;
}
/* is-animating-in es una clase APARTE de is-open, y solo dura lo que tarda
   la entrada (JS la retira por temporizador, no por evento de animación).
   Así, si el usuario abre el menú y la pestaña pierde el foco a mitad
   —poco probable aquí porque abrir el menú exige un clic, pero por si
   acaso—, el temporizador retira la clase igual y los enlaces vuelven a
   su opacity:1 normal. La visibilidad NUNCA depende de que la animación
   llegue a ejecutarse, misma cautela que en Swup y en el logotipo. */
.zn-mega.is-animating-in .zn-mega__item {
  opacity: 0;
  transform: translateY(16px);
  animation: zn-mega-item-in 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.zn-mega__item:nth-child(1) {
  animation-delay: 0.06s;
}
.zn-mega__item:nth-child(2) {
  animation-delay: 0.12s;
}
.zn-mega__item:nth-child(3) {
  animation-delay: 0.18s;
}
.zn-mega__item:nth-child(4) {
  animation-delay: 0.24s;
}
.zn-mega__item:nth-child(5) {
  animation-delay: 0.3s;
}
.zn-mega__item:nth-child(6) {
  animation-delay: 0.36s;
}
@keyframes zn-mega-item-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.zn-mega__item-n {
  grid-row: 1 / 3;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.14);
}
@supports (-webkit-text-stroke: 1px black) {
  .zn-mega__item-n {
    color: transparent;
    -webkit-text-stroke: 1.3px rgba(255, 255, 255, 0.4);
  }
}
.zn-mega__item-t {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.zn-mega__item-d {
  grid-column: 2 / 3;
  grid-row: 2;
  font-family: var(--v3-font-alt);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.3rem;
}
.zn-mega__item-icon {
  grid-row: 1 / 3;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.28);
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
@media (hover: hover) {
  .zn-mega__item:hover .zn-mega__item-t {
    color: var(--v3-lime);
    transform: translateX(6px);
  }
  .zn-mega__item:hover .zn-mega__item-icon {
    color: var(--v3-lime);
    transform: scale(1.15);
  }
  .zn-mega__item:hover .zn-mega__item-n {
    -webkit-text-stroke-color: var(--v3-lime);
    color: rgba(206, 220, 0, 0.3);
  }
}

.zn-mega__col--company {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.zn-mega__simple {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: clamp(0.8rem, 3vh, 2.2rem);
}
.zn-mega__simple a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: clamp(0.3rem, 1.4vh, 0.55rem) 0;
  transition: color 0.2s ease;
}
.zn-mega__simple a:hover {
  color: var(--v3-lime);
}

/* página actual, resaltada dentro del megamenu */
.zn-mega__item[aria-current="page"] .zn-mega__item-t,
.zn-mega__item[aria-current="page"] .zn-mega__item-icon {
  color: var(--v3-lime);
}
.zn-mega__item[aria-current="page"] .zn-mega__item-n {
  -webkit-text-stroke-color: var(--v3-lime);
  color: rgba(206, 220, 0, 0.3);
}
.zn-mega__simple a[aria-current="page"] {
  color: var(--v3-lime);
}

.zn-mega__client {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: clamp(0.8rem, 2.4vh, 1.3rem) 1.4rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: auto;
}
.zn-mega__client > .zn-ico {
  font-size: 1.3rem;
  color: var(--v3-lime);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.zn-mega__client-t {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.3rem;
}
.zn-mega__client-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.zn-mega__client-link .zn-ico {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}
.zn-mega__client-link:hover .zn-ico {
  transform: translateX(3px);
}

.zn-mega__foot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(0.8rem, 2.4vh, 1.6rem) 2.4rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.zn-mega__foot-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}

.zn-mega__foot .v3-btn-white {
  margin-top: initial;
}

.zn-mega__social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}
.zn-mega__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.zn-mega__social a:hover {
  background: var(--v3-lime);
  color: var(--v3-ink);
  transform: translateY(-2px);
}

/* Bloquea el scroll de la página de fondo mientras el megamenu está
   abierto. En html Y en body: uno solo no basta en todos los navegadores.
   Es temporal (JS quita la clase al cerrar), así que no es lo mismo que
   la regla permanente en <html> que rompía el sticky del hero: mientras
   dura, el menú ya está tapando toda la pantalla, así que no hay
   escenario que necesite sticky en ese momento. */
html.zn-mega-open,
body.zn-mega-open {
  overflow: hidden;
}
/* Cinturón y tirantes: si por lo que sea el panel del megamenu no llega
   a tapar el 100% real de la pantalla (barras de navegador raras, webviews
   in-app…), que al menos la barra fija de "Solicitar estudio" no se cuele
   por encima/por debajo del menú. */
body.zn-mega-open .v3-mobile-cta {
  display: none;
}

@media (max-width: 900px) {
  .zn-mega__inner {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 3vh, 2.6rem);
    row-gap: clamp(0.5rem, 2vh, 1.5rem);
  }
  .zn-mega__item-n {
    font-size: 1.5rem;
  }
  /* Antes esta simplificación solo entraba por debajo de 560px: entre
     560 y 900px el item seguía en su grid de 3 columnas (número/título/
     icono) de escritorio, y con la columna del menú ya a una sola pista
     (justo arriba) se veía todo apelotonado — el hueco real que describía
     el usuario. Se activa aquí, en el mismo punto en el que el megamenu
     pasa a una columna. */
  .zn-mega__item {
    grid-template-columns: 2.3rem 1fr;
  }
  .zn-mega__item-icon {
    display: none;
  }
  .zn-mega__item-d {
    display: none;
  } /* una línea menos por servicio: es lo que de verdad pesa */
}
@media (max-width: 560px) {
  .zn-mega__item-t {
    font-size: 1.25rem;
  }
  .zn-mega__label {
    font-size: 0.66rem;
  }
  .zn-mega__simple a {
    font-size: 0.95rem;
  }
  .zn-mega__client {
    padding: 0.7rem 1rem;
  }
  .zn-mega__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zn-mega__item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .zn-mega__glow {
    animation: none !important;
  }
  .zn-mega__panel,
  .zn-mega__backdrop {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ESCRITORIO: nav flotante en cuanto se activa is-solid (al hacer scroll
   en la home; en las páginas interiores, desde la primera carga). Deja de
   ir de borde a borde: se centra, se encoge a 90vw, se redondea y el
   fondo pasa a ser más de cristal (glass) que sólido.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 821px) {
  .v3-nav.is-solid {
    box-sizing: border-box; /* si no, el padding se suma al 90vw y no mide lo que dice medir */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 0.8rem;
    width: 90vw;
    max-width: 90vw;
    padding: 0.7rem 1.8rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 50px -26px rgba(0, 53, 47, 0.4);
  }
  /* Con la nav ya encogida a píldora, el logo grande de la home
     (2rem) desentona: vuelve a su tamaño de página interior. */
  .v3-nav.is-solid .v3-logo {
    font-size: 1.4rem;
  }

  /* Mientras la nav flota TRANSPARENTE sobre el hero de vídeo (antes de
     hacerse sólida al hacer scroll) el logo y los iconos pasan a blanco.
     Antes esto no hacía falta: la home transparente vivía sobre el hero
     isométrico CLARO; ahora vive sobre un vídeo con velo oscuro, así que
     necesita el mismo tratamiento que la nav ya usa sobre fondos oscuros
     al pasar el ratón (.v3-nav-social:hover ya va a tinta+blanco). Va
     dentro de este media query porque en móvil la nav es SIEMPRE una
     barra blanca sólida (ver @media max-width:820px) — ahí no aplica. */
  .v3-nav:not(.is-solid) .v3-logo,
  .v3-nav:not(.is-solid) .v3-nav-social {
    color: #fff;
  }
  .v3-nav:not(.is-solid) .v3-nav-social {
    background: rgba(255, 255, 255, 0.16);
  }
  .v3-nav:not(.is-solid) .v3-menu-toggle {
    background: rgba(255, 255, 255, 0.18);
  }
  .v3-nav:not(.is-solid) .v3-menu-toggle__bar {
    background: #fff;
  }
  /* Con el megamenu abierto la nav queda encima del panel oscuro (ver
     z-index:110 más arriba) sea cual sea su estado is-solid; la X debe
     seguir en verde corporativo, no volver a blanco por esta regla. */
  .v3-nav:not(.is-solid) .v3-menu-toggle[aria-expanded="true"] .v3-menu-toggle__bar {
    background: var(--v3-ink);
  }
  .v3-nav:not(.is-solid) .v3-btn-dark {
    background: rgba(255, 255, 255, 0.94);
    color: var(--v3-ink);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL: nav flotante (no a todo el ancho) + CTA fijo abajo del todo
   ══════════════════════════════════════════════════════════════════ */
.v3-mobile-cta {
  display: none;
}

@media (max-width: 820px) {
  /* El botón "Solicitar estudio" sale de aquí —vive ahora en la barra fija
     de abajo, siempre visible y a un pulgar de distancia—, pero la nav
     sigue yendo de borde a borde: encogerla a una píldora centrada dejaba
     un hueco vacío a los lados que parecía "nav corta, no ocupa el ancho". */
  .v3-nav {
    left: 0;
    right: 0;
    top: 0;
    transform: none;
    width: auto;
    max-width: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    box-shadow:
      0 14px 34px -18px rgba(0, 53, 47, 0.4),
      0 1px 0 rgba(0, 53, 47, 0.06);
    padding: 1rem 1.2rem;
    gap: 0.8rem;
  }
  .v3-nav.is-solid {
    box-shadow:
      0 14px 34px -18px rgba(0, 53, 47, 0.4),
      0 1px 0 rgba(0, 53, 47, 0.06);
  }
  .v3-logo {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-right: 0;
    font-size: 1.15rem;
  }
  .v3-nav-right .v3-btn-dark {
    display: none;
  }

  /* Barra de CTA fija: siempre visible, no se mueve con el scroll */
  .v3-mobile-cta {
    display: block;
    position: fixed;
    z-index: 55;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
  /* El héroe de las interiores repite "Solicitar estudio gratis" y aquí ya
     está la barra fija de arriba haciendo ese mismo trabajo siempre
     visible: dejarlo también en el héroe es el mismo CTA dos veces en la
     misma pantalla. Se queda solo el enlace secundario. */
  .zn-ihero__cta .v3-btn-white {
    display: none;
  }
  .v3-mobile-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1.05rem;
    border-radius: 9999px;
    background: var(--v3-ink);
    color: #fff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 16px 36px -14px rgba(0, 53, 47, 0.55);
    transition: transform 0.2s ease;
  }
  .v3-mobile-cta__btn:active {
    transform: scale(0.97);
  }
  /* que el pie de página no quede tapado detrás del CTA fijo */
  body {
    padding-bottom: 5.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   AJUSTES DE RITMO Y CORRECCIONES
   ══════════════════════════════════════════════════════════════════ */

/* El titular del hero: más contenido de tamaño y centrado en la pantalla
   (antes quedaba pegado arriba por el padding-top: 16vh).
   El padding-top empuja el bloque hacia abajo la mitad de su valor, así que
   compensa el peso del subtítulo y deja el TITULAR sobre el centro óptico. */
.v3-hero {
  justify-content: center;
  padding-top: 12vh;
}
.v3-hero-title {
  font-size: clamp(2.4rem, 6vw, 5.2rem);
}
.v3-hero-sub {
  margin-top: 1.5rem;
  max-width: 42ch;
}

/* Titulares grandes de sección: longitud de línea de 24 caracteres */
.v3-bighead {
  max-width: 24ch;
}
.v3-sec-head--center .v3-bighead {
  margin-inline: auto;
}
.v3-dark-head {
  max-width: 24ch;
}

/* CORRECCIÓN: los botones a ancho completo se salían de la tarjeta.
   width:100% + content-box sumaba los 48 px de padding horizontal por
   encima del ancho de contenido. */
.v3-btn-soft,
.v3-btn-dark,
.v3-btn-white,
.v3-btn-outline,
.v3-btn-block {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════
   TRANSICIONES ENTRE PÁGINAS (Swup)
   ══════════════════════════════════════════════════════════════════ */
/* El estado visible se declara en la regla base, no en la ausencia de una
   clase: así el contenido nunca puede quedarse translúcido si la transición
   se interrumpe. */
/* El contenido siempre visible por defecto: nunca puede quedarse en blanco
   si algo interrumpe la transicion. El fundido es una animacion decorativa
   que v5-app.js lanza al montar la pagina nueva, y NO bloquea la navegacion. */
.transition-main {
  opacity: 1;
}
@keyframes zn-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.transition-main.zn-in {
  animation: zn-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Sin fill-mode a proposito: si la animacion no llega a ejecutarse (por
   ejemplo con la pestana en segundo plano, donde el navegador la congela),
   el elemento se queda en su estado normal -visible-, no en el inicial.
   Con `both` se quedaria a opacidad 0 y la pagina apareceria en blanco. */
/* Barra de progreso finísima, en lima, mientras carga la página siguiente */
.zn-load {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  height: 2px;
  width: 0;
  background: var(--v3-lime);
  box-shadow: 0 0 10px 1px rgba(206, 220, 0, 0.7);
  opacity: 0;
  transition:
    width 0.3s ease,
    opacity 0.3s ease;
  pointer-events: none;
}
.zn-load.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .transition-main,
  .transition-main.zn-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ESCAPARATE DE MARCA
   Imagen grande a sangre con marco redondeado, velo verde ZENON,
   titular superpuesto y una tarjeta de datos flotante en cristal.
   El lenguaje de Trade Republic / N26 / Revolut, con nuestra paleta.
   ══════════════════════════════════════════════════════════════════ */
.zn-show {
  padding: 0 2.4rem;
  background: #fff;
}
.zn-show__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 2.6rem;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  background: linear-gradient(150deg, var(--v3-elec), var(--v3-deep));
  box-shadow: 0 50px 110px -60px rgba(0, 53, 47, 0.85);
}
/* Un filo lima muy tenue por dentro: el detalle que se nota sin verse */
.zn-show__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(206, 220, 0, 0.22);
}
.zn-show__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.zn-show__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(2.2); /* muchísimo margen: parallax exagerado a propósito */
  will-change: transform;
}
.zn-show__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(0, 33, 29, 0.94) 0%,
      rgba(0, 33, 29, 0.55) 38%,
      rgba(0, 53, 47, 0.18) 68%,
      rgba(0, 53, 47, 0.3) 100%
    ),
    linear-gradient(105deg, rgba(0, 53, 47, 0.72) 0%, transparent 62%);
}
/* Grano finísimo: quita el aspecto "foto de stock pegada" */
.zn-show__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.zn-show__body {
  position: relative;
  z-index: 3;
  color: #fff;
  padding: clamp(2rem, 5vw, 4.2rem);
  max-width: 40rem;
}
.zn-show__body .v3-eyebrow {
  color: var(--v3-lime);
}
.zn-show__head {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  color: #fff;
  font-stretch: 112%;
  max-width: 24ch;
}
.zn-show__lede {
  font-family: var(--v3-font-alt);
  margin: 1.3rem 0 0;
  max-width: 44ch;
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.8);
}
.zn-show__body .v3-btn-white {
  margin-top: 2rem;
}

/* Tarjeta de datos flotante */
.zn-show__card {
  position: absolute;
  z-index: 3;
  top: clamp(1.6rem, 4vw, 3.4rem);
  right: clamp(1.6rem, 4vw, 3.4rem);
  width: 15.5rem;
  padding: 1.25rem 1.35rem 1.15rem;
  border-radius: 1.3rem;
  color: #fff;
  background: rgba(0, 33, 29, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.8);
}
.zn-show__ctop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.zn-show__ctop em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--v3-lime);
}
.zn-show__ctop em::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v3-lime);
  animation: v3-pulse-green 2.2s ease-out infinite;
}
.zn-show__price {
  display: block;
  margin: 0.55rem 0 0.1rem;
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  font-stretch: 112%;
}
.zn-show__price small {
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0.6;
  margin-left: 0.3em;
}
.zn-show__spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  margin: 0.9rem 0 0.2rem;
}
.zn-show__spark i {
  flex: 1;
  display: block;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.26);
  height: var(--h, 40%);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.zn-show__spark i.on {
  background: var(--v3-lime);
}
.zn-show__card.is-in .zn-show__spark i {
  transform: none;
}
.zn-show__cfoot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.72);
}


/* SOLUTIONS · bloques grandes imagen/texto con fotografía real (sustituyen
   a las tarjetas antiguas). Reutiliza la tipografía de .zn-feat__eyebrow/h/p/
   link para no duplicar estilos; la animación de entrada (GSAP + ScrollTrigger)
   vive en initFeatBlocks(), en v5-app.js — el marcado ya es visible sin JS. */

.solutions-main-container{

}

   .solutions-main-container .solutions-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding-block: 48px;
      /* Cada bloque entra deslizándose ±56px desde el lateral (GSAP, ver
         initFeatBlocks en v5-app.js). En algunos navegadores móviles el
         overflow-x:hidden del <body> no basta para recortar ese desliz y
         se nota como un desplazamiento lateral de toda la página. Se
         recorta aquí mismo, en el propio bloque, que es lo único que se
         mueve. */
      overflow-x: hidden;
   }

      .solutions-main-container .solutions-container:nth-child(odd) .solutions-wrap .solutions-item img {

         border-radius: 64px 0px 0px 64px;
      }

      .solutions-main-container .solutions-container:nth-child(even) .solutions-wrap .solutions-item img {
         border-radius: 0px 64px 64px 0px;
      }

.solutions-container .solutions-wrap {
   width:50%;
}

.solutions-wrap .solutions-item {
   width: 100%;
}



   .solutions-wrap .solutions-item img {
      width: 100%;
      height: 850px;
      display: block;
      object-fit: cover;
      max-width: 100%;

   }

   .solutions-wrap .solutions-item .solutions-text{
      padding: clamp(2rem, 6vw, 7.75rem);
   }

@media (max-width: 900px) {
   .solutions-main-container .solutions-container {
      flex-direction: column;
      padding-block: 2rem;
      /* aire entre la imagen y el texto apilados: si no, quedan pegados
         el uno al otro (el padding vertical del texto se quita más abajo
         a propósito, para no duplicar aire con el de la imagen). */
      gap: 1.6rem;
   }
   .solutions-container .solutions-wrap {
      width: 100%;
   }
   /* En una columna el orden manda: primero el texto, luego la imagen
      (mismo criterio que .zn-feat en móvil). */
   .solutions-wrap:has(.solutions-text) {
      order: 0;
   }
   .solutions-wrap:has(img) {
      order: 1;
   }
   .solutions-main-container .solutions-container:nth-child(odd) .solutions-wrap .solutions-item img,
   .solutions-main-container .solutions-container:nth-child(even) .solutions-wrap .solutions-item img {
      border-radius: 1.6rem;
   }
   .solutions-wrap .solutions-item img {
      height: auto;
      aspect-ratio: 4 / 3;
   }
   .solutions-wrap .solutions-item .solutions-text {
      padding: 0 1.4rem;
   }
}

   @media (prefers-reduced-motion: reduce) {
      .zn-show__spark i {
         transform: none;
         transition: none;
      }

      .zn-show__img {
         transform: none;
      }
   }
@media (max-width: 980px) {
  .zn-show {
    padding: 0 1.3rem;
  }
  .zn-show__frame {
    border-radius: 1.8rem;
    min-height: 0;
  }
  .zn-show__card {
    position: static;
    width: auto;
    margin: clamp(2rem, 5vw, 4.2rem) clamp(2rem, 5vw, 4.2rem) 0;
    order: -1;
  }
  .zn-show__frame {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL  ·  el cliente pedía atención especial a esta versión
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* El logotipo ya no compite con nada a la izquierda (nav-left
     desapareció con el megamenu), así que sigue centrado en absoluto en
     cualquier ancho — ver la anulación de esta misma regla, más arriba,
     en el bloque del megamenu. Aquí solo queda el ajuste del wordmark. */
  .v3-wordmark {
    padding: 0 1.3rem;
    margin: 2rem 0 -1vw;
  }
  /* Dos columnas solo caben en escritorio: en una sola columna, alinear
     el bloque de la derecha al borde también-derecho queda descentrado
     respecto al resto de la página. */
  .v3-dark-top {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .v3-dark-top__right {
    align-items: flex-start;
    text-align: left;
  }
  .v3-partner-banner {
    max-width: 12rem;
  }
  .v3-legal-row {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  /* Logotipo un poco más pequeño en pantallas muy estrechas */
  .v3-logo {
    font-size: 0.95rem;
  }
  .v3-nav .v3-btn-soft,
  .v3-nav .v3-btn-dark {
    font-size: 0.6rem;
    padding: 0.62rem 0.9rem;
    letter-spacing: 0.06em;
  }
  /* Un poco más grande que el botón (~30px) a propósito, igual que en
     escritorio; el icono (los 3 chevrones) baja de tamaño con él */
  .v3-menu-toggle {
    width: 2.2rem;
    height: 2.2rem;
  }
  .v3-menu-toggle__bar:nth-child(1) {
    width: 0.55rem;
  }
  .v3-menu-toggle__bar:nth-child(2) {
    width: 0.7rem;
  }
  .v3-menu-toggle__bar:nth-child(3) {
    width: 0.85rem;
  }
  .v3-menu-toggle[aria-expanded="true"] .v3-menu-toggle__bar {
    width: 0.75rem;
  }
  /* Cifras: dos columnas de 150 px eran demasiado estrechas */
  .v3-stats {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .v3-trust {
    gap: 1.1rem 1.8rem;
  }
  .v3-trust__item {
    font-size: 0.95rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PIE DE PÁGINA: ensanchado, y las 4 cajas SIEMPRE en línea en escritorio
   ══════════════════════════════════════════════════════════════════════
   custom-v3.css colapsaba .v3-footer-top a 2 columnas ya a partir de
   980px de ancho — demasiado pronto: con las 6 soluciones que tiene ahora
   esa columna, a veces se notaba que "no cabían las 4 cajas". Se ensancha
   el contenedor y se anula ese colapso intermedio: por debajo de 821px
   sigue aplicando el colapso a 1 columna de custom-v3.css (tablet y
   móvil, donde el cliente ya esperaba que se apilase). */
@media (min-width: 821px) {
  .v3-footer-top {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 2rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BANNER CON FOTO + PARALLAX  ·  variante de .v3-subhero para páginas que
   quieren una imagen a sangre en vez del fondo plano (de momento, Nuestra
   misión). Mismo lenguaje que el escaparate de la home: velo + grano +
   parallax con GSAP ScrollTrigger (ver initSubheroParallax en v5-app.js).
   ══════════════════════════════════════════════════════════════════ */
.v3-subhero--photo {
  position: relative;
  overflow: hidden;
  background: var(--v3-deep); /* red de seguridad si la imagen no carga */
}
.v3-subhero--photo .v3-subhero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.v3-subhero--photo .v3-subhero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.14); /* margen de sobra para el parallax */
  will-change: transform;
}
.v3-subhero--photo .v3-subhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0, 33, 29, 0.55) 0%,
      rgba(0, 33, 29, 0.72) 55%,
      rgba(0, 33, 29, 0.88) 100%
    ),
    linear-gradient(100deg, rgba(0, 53, 47, 0.55) 0%, transparent 60%);
}
.v3-subhero--photo .v3-subhero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.v3-subhero--photo .v3-subhero-inner {
  position: relative;
  z-index: 2;
}
.v3-subhero--photo .v3-eyebrow--green {
  color: var(--v3-lime);
}
.v3-subhero--photo .v3-bighead {
  color: #fff;
}
.v3-subhero--photo .v3-lede {
  color: rgba(255, 255, 255, 0.82);
}

/* ══════════════════════════════════════════════════════════════════════
   TIMELINE DE PROCESO V2  ·  zigzag editorial con línea central que se
   rellena al hacer scroll (GSAP ScrollTrigger, igual mecanismo que el
   parallax del escaparate), números gigantes a modo de marca de agua y
   nodos con halo de pulso al entrar en pantalla. Sustituye a las cajas
   planas heredadas de v3 (mision / soluciones / colabora). El elemento
   .v3-plist__fill lo inserta js/v5-app.js — no forma parte del HTML.
   ══════════════════════════════════════════════════════════════════ */
.v3-plist {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 0;
}
.v3-plist::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--v3-line);
  transform: translateX(-50%);
}
.v3-plist__fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 0%;
  background: linear-gradient(to bottom, var(--v3-lime), var(--v3-elec));
  box-shadow: 0 0 14px rgba(206, 220, 0, 0.45);
  transform: translateX(-50%);
  border-radius: 2px;
}

.v3-pstep {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.2rem;
  min-height: 6rem;
  padding: 2.4rem 0;
}
.v3-pstep:first-child {
  padding-top: 0.6rem;
}
.v3-pstep:last-child {
  padding-bottom: 0.6rem;
}

.v3-pstep::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--v3-bg);
  border: 2px solid var(--v3-ink-soft);
  transform: translate(-50%, -50%);
  z-index: 2;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}
.v3-pstep.is-in::before {
  background: var(--v3-lime);
  border-color: var(--v3-lime);
  animation: v3-node-pulse 1s ease-out;
}
@keyframes v3-node-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(206, 220, 0, 0.55);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(206, 220, 0, 0);
  }
}

/* número gigante a modo de marca de agua, hueco si el navegador soporta
   text-stroke y solo tintado en el resto (sin dejarlo invisible) */
.v3-pstep__n {
  flex: 0 0 auto;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(0, 53, 47, 0.1);
  white-space: nowrap;
}
@supports (-webkit-text-stroke: 1px black) {
  .v3-pstep__n {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 53, 47, 0.18);
  }
}

.v3-pstep > div {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 44%;
  background: #fff;
  border: 1px solid var(--v3-line);
  border-radius: 1.2rem;
  padding: 1.8rem 2rem;
  box-shadow: 0 24px 55px -34px rgba(0, 53, 47, 0.35);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.v3-pstep:hover > div {
  transform: translateY(-3px);
  box-shadow: 0 28px 60px -30px rgba(0, 53, 47, 0.42);
}

.v3-pstep__t {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.55rem;
  color: var(--v3-ink);
}
.v3-pstep__d {
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--v3-ink-soft);
  margin: 0;
}

/* zigzag: alterna qué lado ocupa la tarjeta, el número queda siempre
   pegado al lado que mira a la línea central */
.v3-pstep:nth-child(odd) {
  justify-content: flex-start;
}
.v3-pstep:nth-child(odd) > div {
  order: 1;
}
.v3-pstep:nth-child(odd) .v3-pstep__n {
  order: 2;
  text-align: left;
}

.v3-pstep:nth-child(even) {
  justify-content: flex-end;
}
.v3-pstep:nth-child(even) > div {
  order: 2;
}
.v3-pstep:nth-child(even) .v3-pstep__n {
  order: 1;
  text-align: right;
}

@media (max-width: 760px) {
  .v3-plist {
    max-width: none;
    padding-left: 3.6rem;
  }
  .v3-plist::before,
  .v3-plist__fill {
    left: 0.9rem;
    transform: none;
  }
  .v3-pstep {
    display: block;
    min-height: 0;
    gap: 0;
    padding: 0 0 2.2rem;
  }
  .v3-pstep:last-child {
    padding-bottom: 0;
  }
  /* el nodo debe quedar centrado sobre la línea: como ::before usa
     translateX(-50%), su "left" final coincide con el centro del punto,
     así que left = (inset de la línea) - (padding-left de .v3-plist) */
  .v3-pstep::before {
    left: -2.7rem;
    top: 0.35rem;
    transform: translateX(-50%);
    width: 0.8rem;
    height: 0.8rem;
  }
  .v3-pstep__n,
  .v3-pstep > div {
    order: 0 !important;
  }
  .v3-pstep__n {
    display: block;
    font-size: 1.9rem;
    margin: 0 0 0.35rem;
    text-align: left !important;
  }
  .v3-pstep > div {
    width: auto;
    padding: 1.3rem 1.4rem 1.4rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   WIZARD "Solicitar estudio" V2  ·  indicador de progreso, transición
   entre pasos y calculadora de ahorro en vivo (paso "Consumo")
   ══════════════════════════════════════════════════════════════════ */
.v3-wizard-progress {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.v3-wizard-progress__step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.v3-wizard-progress__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--v3-line);
  z-index: 0;
  transition: background 0.4s ease;
}
.v3-wizard-progress__step.is-done:not(:last-child)::after {
  background: var(--v3-lime);
}
.v3-wizard-progress__dot {
  position: relative;
  z-index: 1;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--v3-ink-soft);
  background: #fff;
  border: 2px solid var(--v3-line);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}
.v3-wizard-progress__dot .zn-ico {
  font-size: 1rem;
}
.v3-wizard-progress__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--v3-ink-soft);
  transition: color 0.3s ease;
}
.v3-wizard-progress__step.is-active .v3-wizard-progress__dot {
  border-color: var(--v3-elec);
  color: var(--v3-elec);
  transform: scale(1.1);
}
.v3-wizard-progress__step.is-active .v3-wizard-progress__label {
  color: var(--v3-ink);
}
.v3-wizard-progress__step.is-done .v3-wizard-progress__dot {
  border-color: var(--v3-lime);
  background: var(--v3-lime);
  color: var(--v3-ink);
}

/* transición entre pasos: la visibilidad NUNCA depende de que la animación
   llegue a ejecutarse (misma lección que la transición de Swup) — el panel
   ya es visible por su estado base; wiz-enter solo decora la entrada. */
.wiz-panel.wiz-enter {
  opacity: 0;
  transform: translateY(10px);
}
.wiz-panel.wiz-enter-active {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.v3-wizard-estimate {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: 1rem;
  margin: 0.3rem 0 1.5rem;
  background: var(--v3-ink);
  color: #fff;
}
.v3-wizard-estimate__icon {
  font-size: 1.6rem;
  color: var(--v3-lime);
  flex-shrink: 0;
}
.v3-wizard-estimate__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.2rem;
}
.v3-wizard-estimate__value {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.v3-wizard-estimate__value span {
  font-size: 1rem;
  font-weight: 700;
}
.v3-wizard-estimate__period {
  color: rgba(255, 255, 255, 0.55);
  margin-left: 0.15rem;
}

@keyframes wiz-shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }
  40%,
  60% {
    transform: translateX(4px);
  }
}
.v3-input.is-shake {
  animation: wiz-shake 0.4s;
  border-color: #e1251b;
}

@media (max-width: 480px) {
  .v3-wizard-progress__label {
    font-size: 0.6rem;
  }
  .v3-wizard-estimate {
    padding: 0.9rem 1rem;
    gap: 0.8rem;
  }
  .v3-wizard-estimate__value {
    font-size: 1.4rem;
  }
}

/* ZENON-404-START */
/* ══════════════════════════════════════════════════════════════════════
   PÁGINA 404 · "SE HA IDO LA LUZ"

   El error se cuenta en el idioma del cliente: un corte de suministro.
   Reutiliza el fondo oscuro de la marca (--v3-deep), el grano y el halo
   del megamenu, y la etiqueta energética (.zn-elabel) como indicador.

   El "0" NO es un cero tipográfico: es el rectángulo redondeado de la "O"
   del logotipo (rx=36, el mismo del SVG de la nav). Y es lo único que
   parpadea — el resto de la red sigue dando servicio.
   ══════════════════════════════════════════════════════════════════ */
.zn-404 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--v3-deep);
  color: #fff;
  /* CORRECCIÓN: sin border-box, el min-height de 100vh se mide sobre la caja
     de contenido y el padding se suma por encima — la sección medía 1107 px
     en una ventana de 900 y obligaba a hacer scroll para ver los botones. */
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* despeja la nav flotante arriba y respira abajo, sin obligar a hacer
     scroll en pantallas cortas */
  padding: clamp(7rem, 15vh, 10.5rem) 0 clamp(3rem, 8vh, 5.5rem);
}

/* ── Texturas de fondo (las tres decorativas, sin eventos) ───────────── */
.zn-404__grain,
.zn-404__glow,
.zn-404__rays {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.zn-404__grain {
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.zn-404__glow {
  width: 70vw;
  height: 70vw;
  max-width: 980px;
  max-height: 980px;
  top: -26%;
  right: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 220, 0, 0.17), transparent 68%);
  filter: blur(34px);
  animation: zn-404-drift 18s ease-in-out infinite alternate;
}
/* Chevrons gigantes en diagonal: el trazo de la "E" convertido en trama. */
.zn-404__rays {
  inset: -20% -10%;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px 96px
  );
  mask-image: radial-gradient(115% 90% at 15% 45%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(115% 90% at 15% 45%, #000 15%, transparent 72%);
}
@keyframes zn-404-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-5%, 5%, 0) scale(1.12);
  }
}

.zn-404__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 2.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.zn-404__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-lime);
  margin-bottom: clamp(1rem, 3vh, 1.8rem);
}
.zn-404__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v3-lime);
  box-shadow: 0 0 0 4px rgba(206, 220, 0, 0.18);
  animation: zn-404-pulse 2.4s ease-in-out infinite;
}
@keyframes zn-404-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(206, 220, 0, 0.18);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(206, 220, 0, 0);
  }
}

/* ── El 404 ──────────────────────────────────────────────────────────── */
.zn-404__num {
  display: flex;
  align-items: center;
  gap: 0.06em;
  font-size: clamp(5.5rem, 17vw, 14rem);
  line-height: 0.8;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.05em;
  margin-bottom: clamp(1.2rem, 3.5vh, 2.4rem);
}
.zn-404__d {
  color: #fff;
  text-shadow: 0 0 60px rgba(255, 255, 255, 0.12);
}
.zn-404__o {
  position: relative;
  display: block;
  width: 0.66em;
  flex: none;
  margin: 0 0.02em;
}
.zn-404__o svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.zn-404__o rect {
  fill: none;
  stroke: var(--v3-lime);
  stroke-width: 11;
  animation: zn-404-flicker 5.5s steps(1, end) infinite;
}
/* Halo detrás de la "O": el destello que queda cuando algo se funde. */
.zn-404__halo {
  position: absolute;
  z-index: -1;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 220, 0, 0.45), transparent 62%);
  filter: blur(26px);
  animation: zn-404-flicker 5.5s steps(1, end) infinite;
}
@keyframes zn-404-flicker {
  0%,
  6%,
  9%,
  53%,
  56%,
  100% {
    opacity: 1;
  }
  7%,
  8% {
    opacity: 0.12;
  }
  54%,
  55% {
    opacity: 0.2;
  }
}

.zn-404__title {
  font-size: clamp(1.9rem, 4.4vw, 3.5rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;
  margin: 0;
  max-width: 18ch;
}
.zn-404__lede {
  font-family: var(--v3-font-alt);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
  margin: 1.4rem 0 0;
  max-width: 52ch;
}

/* ── Botonera ───────────────────────────────────────────────────────── */
.zn-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}
.zn-404__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border-radius: 9999px;
  cursor: pointer;
  transition:
    transform 0.2s,
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.zn-404__btn .zn-ico {
  width: 1em;
  height: 1em;
}
.zn-404__btn--solid {
  background: #fff;
  color: var(--v3-ink);
  border: 1px solid #fff;
}
.zn-404__btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.zn-404__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.zn-404__btn:hover {
  transform: translateY(-2px);
}

/* ── Tarjeta de diagnóstico ─────────────────────────────────────────── */
.zn-404__diag {
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: clamp(1.3rem, 3vh, 1.9rem);
}
.zn-404__diag-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.zn-404__diag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00a651;
  box-shadow: 0 0 10px rgba(0, 166, 81, 0.8);
}
.zn-404__diag-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zn-404__diag-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
}
.zn-404__diag-list li:last-child {
  border-bottom: none;
}
.zn-404__diag-list b {
  flex: none;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.zn-404__diag-list .is-ok b {
  color: #8fd6a8;
}
.zn-404__diag-list .is-down {
  color: #fff;
}
.zn-404__diag-list .is-down b {
  color: var(--v3-lime);
}
.zn-404__diag-path {
  margin: 0.4rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  /* la ruta puede ser larguísima: que corte, no que ensanche la tarjeta */
  overflow-wrap: anywhere;
}
.zn-404__diag-path code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.zn-404__diag-path #err-path {
  color: var(--v3-lime);
}
.zn-404__elabel {
  margin-top: 1.2rem;
  opacity: 0.55;
}

/* ── Sección clara de atajos ────────────────────────────────────────── */
.zn-404__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.8rem;
}
.zn-404__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--v3-line);
  border-radius: 1rem;
  background: #fff;
  text-decoration: none;
  transition:
    transform 0.22s,
    border-color 0.22s,
    box-shadow 0.22s;
}
.zn-404__link:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 53, 47, 0.24);
  box-shadow: 0 22px 40px -28px rgba(0, 53, 47, 0.45);
}
.zn-404__link-n {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--v3-ink-soft);
  opacity: 0.6;
}
.zn-404__link-b {
  display: block;
  min-width: 0;
}
.zn-404__link-t {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
}
.zn-404__link-d {
  display: block;
  font-family: var(--v3-font-alt);
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--v3-ink-soft);
  margin-top: 0.2rem;
}
.zn-404__link-i {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--v3-elec);
  opacity: 0.55;
  transition:
    transform 0.22s,
    opacity 0.22s;
}
.zn-404__link:hover .zn-404__link-i {
  opacity: 1;
  transform: scale(1.08);
}

.zn-404__more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.zn-404__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--v3-line);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--v3-ink);
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.zn-404__more a .zn-ico {
  font-size: 0.85rem;
  opacity: 0.5;
}
.zn-404__more a:hover {
  background: var(--v3-soft);
  border-color: rgba(0, 53, 47, 0.24);
}

/* ── Adaptación ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .zn-404__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .zn-404__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .zn-404 {
    min-height: 0;
    padding-top: clamp(8rem, 18vh, 11rem);
  }
  .zn-404__diag {
    max-width: 30rem;
  }
}
/* Portátiles de pantalla corta: el 404 gigante es lo primero que cede, para
   que los botones sigan cayendo por encima de la línea de scroll. */
@media (min-width: 901px) and (max-height: 780px) {
  .zn-404__num {
    font-size: clamp(4.5rem, 13vh, 9rem);
  }
  .zn-404__title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  }
}

@media (max-width: 640px) {
  .zn-404__links {
    grid-template-columns: minmax(0, 1fr);
  }
  .zn-404__inner {
    padding: 0 1.4rem;
  }
  .zn-404__actions .zn-404__btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  /* "Abrir el menú" sobra en móvil: la hamburguesa está a un dedo, en la nav
     flotante. Y con el CTA fijo abajo ya hay botones de sobra en pantalla. */
  #err-menu {
    display: none;
  }
  .zn-404__title,
  .zn-404__lede {
    max-width: none;
  }
}

/* El parpadeo es lo primero que sobra si el usuario ha pedido menos
   movimiento: el mensaje se sostiene solo con el texto. */
@media (prefers-reduced-motion: reduce) {
  .zn-404__o rect,
  .zn-404__halo,
  .zn-404__glow,
  .zn-404__eyebrow::before {
    animation: none !important;
  }
}
/* ZENON-404-END */

/* ZENON-INT-START */
/* ══════════════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES · ESTRUCTURA DE REFERENCIA

   Medido sobre las páginas interiores de N26 y Trade Republic:

     · Héroe con foto a sangre y titular enorme abajo a la izquierda
       (N26: H1 de 80 px · Trade Republic: 58 px con interlineado 0,9).
     · Una pila larga de bloques 50/50 «texto grande + imagen vertical»
       (N26: 5 bloques de 716 px exactos, contenedor de 1464 px,
       padding 32/80, imagen de 552×652).
     · Cierre con FAQ y CTA.

   De Revolut se toma el carrusel de tarjetas altas con puntos —usado aquí
   para las reseñas— y el conmutador de vídeo con botones que se rellenan
   solos (el patrón de /business/accept-payments/).

   Se adapta a ZENON en dos cosas: los titulares van en el peso 800 de la
   marca (no en el 400 ligero de N26) y todo lleva las esquinas redondeadas
   que ya usa el resto del sitio.

   ⚠️ Todas las cajas con medida explícita + padding llevan border-box
   escrito: en esta hoja NO hay border-box global.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · Héroe de página interior ───────────────────────────────────── */
.zn-ihero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  min-height: min(88vh, 52rem);
  display: flex;
  align-items: flex-end;
  background: var(--v3-deep);
  color: #fff;
  /* Arriba, despeja la nav flotante. Abajo, tiene que dejar sitio a la caja
     de cifras, que sube clamp(-5.5rem,-7vh,-3.5rem) por encima del borde:
     con menos padding la caja se comía los botones (13 px, medido). */
  padding: clamp(9rem, 18vh, 13rem) 0 clamp(5.5rem, 12vh, 8rem);
}
.zn-ihero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.zn-ihero__media img,
.zn-ihero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Cuando la página no tiene imagen de banner: un detalle muy discreto
   arriba a la derecha (el titular vive abajo a la izquierda), en vez del
   verde liso de --v3-deep sin más. Dos manchas de color de marca a muy poca
   opacidad y una retícula de puntos, todo desvanecido con una máscara para
   que no compita con el texto. */
.zn-ihero__deco {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34rem 34rem at 88% 8%, color-mix(in srgb, var(--v3-lime) 24%, transparent), transparent 62%),
    radial-gradient(24rem 24rem at 74% 46%, color-mix(in srgb, var(--v3-elec) 20%, transparent), transparent 68%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
  -webkit-mask-image: radial-gradient(52rem 40rem at 84% 16%, #000 0%, transparent 72%);
  mask-image: radial-gradient(52rem 40rem at 84% 16%, #000 0%, transparent 72%);
}
/* Doble velo: oscurece arriba para que se lea la nav y abajo para el
   titular, dejando la foto limpia en la franja central. */
.zn-ihero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(0, 33, 29, 0.62) 0%,
      rgba(0, 33, 29, 0.14) 30%,
      rgba(0, 33, 29, 0.42) 52%,
      rgba(0, 33, 29, 0.9) 100%
    );
}
.zn-ihero__inner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 0 2.4rem;
}
.zn-ihero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-lime);
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}
.zn-ihero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v3-lime);
}
.zn-ihero__h1 {
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: 0.97;
  letter-spacing: -0.042em;
  font-weight: 800;
  font-stretch: 112%;
  color: #fff;
  margin: 0;
  max-width: 19ch;
}
.zn-ihero__lede {
  font-family: var(--v3-font-alt);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  margin: clamp(1.1rem, 2.6vh, 1.8rem) 0 0;
  max-width: 46ch;
}
.zn-ihero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem);
}
.zn-ihero__cta .v3-btn-white,
.zn-ihero__cta .v3-btn-dark {
  margin-top: 0;
}
.zn-ihero__ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border-radius: 9999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.zn-ihero__ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-2px);
}

/* ── 2 · Banda de cifras «cajeada» montando sobre el héroe ──────────── */
.zn-band {
  background: #fff;
  padding-bottom: clamp(1rem, 3vh, 2rem);
}
.zn-band__inner {
  box-sizing: border-box;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 0 2.4rem;
}
.zn-band__box {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  /* monta sobre la foto del héroe: es lo que da el aire de «cajeado» */
  margin-top: clamp(-5.5rem, -7vh, -3.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--v3-line);
  border-radius: 1.6rem;
  box-shadow: 0 44px 90px -56px rgba(0, 53, 47, 0.5);
  overflow: hidden;
}
.zn-band__i {
  box-sizing: border-box;
  padding: clamp(1.5rem, 2.6vw, 2.3rem);
  border-right: 1px solid var(--v3-line);
}
.zn-band__i:last-child {
  border-right: none;
}
.zn-band__n {
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--v3-ink);
}
.zn-band__l {
  font-family: var(--v3-font-alt);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--v3-ink-soft);
  margin-top: 0.6rem;
}

/* ── 3 · El bloque grande: texto enorme + imagen vertical ───────────── */
.zn-feat {
  background: #fff;
  /* mismo recorte que .solutions-container: el bloque entra con un
     desliz lateral (GSAP) que no debe empujar el ancho de la página. */
  overflow-x: hidden;
}
.zn-feat--soft {
  background: var(--v3-soft);
}
.zn-feat--dark {
  background: var(--v3-deep);
  color: #fff;
}
.zn-feat__inner {
  box-sizing: border-box;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 7rem) 2.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  /* el aire de N26: el bloque nunca es más bajo que esto */
  min-height: clamp(28rem, 58vh, 42rem);
}
/* Alterna el lado de la imagen sin duplicar marcado. */
.zn-feat--flip .zn-feat__body {
  order: 2;
}
.zn-feat__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-green);
  margin-bottom: 1.1rem;
}
.zn-feat--dark .zn-feat__eyebrow {
  color: var(--v3-lime);
}
.zn-feat__h {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.038em;
  font-weight: 800;
  font-stretch: 112%;
  color: var(--v3-ink);
  margin: 0;
  max-width: 17ch;
}
.zn-feat--dark .zn-feat__h {
  color: #fff;
}
.zn-feat__p {
  font-family: var(--v3-font-alt);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.62;
  color: var(--v3-ink-soft);
  margin: 1.4rem 0 0;
  max-width: 42ch;
}
.zn-feat--dark .zn-feat__p {
  color: rgba(255, 255, 255, 0.68);
}
.zn-feat__list {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 42ch;
}
.zn-feat__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--v3-ink);
}
.zn-feat--dark .zn-feat__list li {
  color: rgba(255, 255, 255, 0.86);
}
.zn-feat__list .zn-ico {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18rem;
  color: var(--v3-elec);
}
.zn-feat--dark .zn-feat__list .zn-ico {
  color: var(--v3-lime);
}
.zn-feat__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--v3-elec);
  border-bottom: 1px solid rgba(0, 89, 79, 0.3);
  padding-bottom: 0.3rem;
  transition:
    gap 0.2s,
    border-color 0.2s;
}
.zn-feat--dark .zn-feat__link {
  color: var(--v3-lime);
  border-bottom-color: rgba(206, 220, 0, 0.35);
}
.zn-feat__link:hover {
  gap: 0.85rem;
  border-bottom-color: currentColor;
}
.zn-feat__link .zn-ico {
  width: 0.95rem;
  height: 0.95rem;
}

/* La imagen: vertical y con esquina redondeada (N26 la deja a escuadra;
   aquí se redondea para no romper con el resto del sitio). */
.zn-feat__media {
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
  aspect-ratio: 1 / 1;
  background: var(--v3-bg);
}
.zn-feat__media img,
.zn-feat__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zn-feat__tag {
  position: absolute;
  z-index: 2;
  left: 1.1rem;
  bottom: 1.1rem;
  right: 1.1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--v3-ink);
  width: fit-content;
}
.zn-feat__tag .zn-ico {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--v3-elec);
}

/* Variante sin foto: panel gráfico con la «E» y una cifra grande. Se usa
   donde no hay fotografía definitiva y no queremos otro marcador más. */
.zn-feat__panel {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.6rem;
  aspect-ratio: 5 / 6;
  background: var(--v3-ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.zn-feat__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -14%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 220, 0, 0.22), transparent 68%);
  filter: blur(26px);
}
.zn-feat__panel-n {
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--v3-lime);
}
.zn-feat__panel-t {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 1rem;
  max-width: 20ch;
}
.zn-feat__panel-d {
  font-family: var(--v3-font-alt);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 0.7rem;
  max-width: 30ch;
}
.zn-feat__panel .zn-elabel {
  margin-bottom: auto;
}

/* ── 4 · Rejilla «cajeada» de lo que además incluye ─────────────────── */
.zn-grid {
  background: #fff;
}
.zn-grid__inner {
  box-sizing: border-box;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 6.5rem) 2.4rem;
}
.zn-grid__head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4.5vh, 3.2rem);
}
.zn-grid__h {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  font-stretch: 112%;
  color: var(--v3-ink);
  margin: 0;
}
.zn-grid__box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--v3-line);
  border-radius: 1.6rem;
  overflow: hidden;
  background: #fff;
}
.zn-grid__i {
  box-sizing: border-box;
  padding: clamp(1.6rem, 2.6vw, 2.3rem);
  border-right: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
}
/* Sin bordes colgando: se quitan los de la última columna y última fila. */
.zn-grid__i:nth-child(3n) {
  border-right: none;
}
.zn-grid__i:nth-last-child(-n + 3) {
  border-bottom: none;
}
.zn-grid__i .zn-ico {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--v3-elec);
}
.zn-grid__t {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
  margin: 1rem 0 0.5rem;
}
.zn-grid__d {
  font-family: var(--v3-font-alt);
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--v3-ink-soft);
  margin: 0;
}

/* ── 5 · Carrusel de reseñas (el patrón de la captura de Revolut) ───── */
.zn-cara {
  background: #fff;
  overflow: hidden;
}
.zn-cara__inner {
  box-sizing: border-box;
  max-width: var(--zn-container);
  margin: 0 auto;
  /* sin padding a la derecha: las tarjetas salen por el borde a propósito */
  padding: clamp(3.5rem, 8vh, 6.5rem) 0 clamp(3rem, 6vh, 4.5rem) 2.4rem;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.zn-cara__body {
  padding-right: 2.4rem;
}
.zn-cara__h {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
  font-weight: 800;
  font-stretch: 112%;
  color: var(--v3-ink);
  margin: 0;
  max-width: 16ch;
}
.zn-cara__p {
  font-family: var(--v3-font-alt);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.62;
  color: var(--v3-ink-soft);
  margin: 1.5rem 0 0;
  max-width: 42ch;
}
.zn-cara__viewport {
  min-width: 0;
  /* Swiper mete dentro un carril flex con 5 tarjetas a ancho fijo: eso le da
     un tamaño de contenido (max-content) mayor que la columna del grid, y
     sin forzar el ancho aquí el item del grid crece para acomodarlo en vez
     de quedarse en su fracción (comprobado: sin esto, .zn-cara__viewport
     medía 1690px en vez de los ~674px de su columna). width:100% lo ata a
     la columna que le corresponde y dentro Swiper hace el resto. */
  width: 100%;
  /* .zn-cara__inner tiene max-width:var(--zn-container) y se centra: en
     pantallas más anchas eso deja un hueco en blanco entre la última
     tarjeta y el borde real de la ventana, y las tarjetas dejan de "salir
     por el borde" como dice el comentario de arriba. Se cancela ese hueco
     solo en este lado. */
  margin-right: calc(-1 * max(0px, (100vw - var(--zn-container)) / 2));
}
.zn-cara__track {
  /* el propio Swiper (v5-app.js) pone display:flex, el transform del
     arrastre y el cursor "grab"; aquí solo queda lo puramente visual */
}
.zn-cara__card {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 clamp(14rem, 25vw, 20rem);
  aspect-ratio: 3 / 4;
  border-radius: 1.5rem;
  background: var(--v3-deep);
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  text-decoration: none;
}
.zn-cara__card img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.zn-cara__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 33, 29, 0.86) 0%,
    rgba(0, 33, 29, 0.52) 46%,
    rgba(0, 33, 29, 0.9) 100%
  );
}
/* La cita arriba, dentro de la tarjeta, como el titular de la captura. */
.zn-cara__q {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.zn-cara__stars {
  display: flex;
  gap: 0.15rem;
  margin-top: auto;
  color: var(--v3-lime);
}
.zn-cara__stars .zn-ico {
  width: 0.95rem;
  height: 0.95rem;
}
.zn-cara__who {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
.zn-cara__what {
  font-family: var(--v3-font-alt);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.15rem;
}
.zn-cara__dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  /* centrados sobre el carril visible, no sobre el desbordamiento */
  padding-right: 2.4rem;
}
.zn-cara__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 53, 47, 0.2);
  cursor: pointer;
  transition:
    background 0.25s,
    width 0.25s;
}
.zn-cara__dot.is-on {
  width: 22px;
  border-radius: 9999px;
  background: var(--v3-ink);
}

/* ── 6 · Conmutador con vídeo (el patrón de accept-payments) ────────── */
.zn-switch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--v3-deep);
  color: #fff;
}
.zn-switch__glow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -20%;
  left: -10%;
  width: 60vw;
  aspect-ratio: 1;
  max-width: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 220, 0, 0.14), transparent 68%);
  filter: blur(34px);
}
.zn-switch__inner {
  box-sizing: border-box;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 6.5rem) 2.4rem;
}
.zn-switch__head {
   max-width: 100%;
   margin-bottom: clamp(2rem, 10.5vh, 8.2rem);
   display: flex;
   align-items: start;
   justify-content: space-between;
   width: 100%;
   gap: 64px;
}

   .zn-switch__head > div{
      max-width: 40%;
   }

   .zn-switch__h {
      font-size: clamp(1.9rem, 4vw, 3.1rem);
      line-height: 1.04;
      letter-spacing: -0.038em;
      font-weight: 800;
      font-stretch: 112%;
      color: #fff;
      margin: 0;
   }
.zn-switch__p {
  font-family: var(--v3-font-alt);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
  margin: 1.3rem 0 0;
}
.zn-switch__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Los botones: uno por slide, con la descripción que se despliega y una
   barra de progreso que se rellena sola. Al llenarse, pasa al siguiente. */
.zn-switch__tabs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.zn-switch__tab {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  text-align: left;
  font: inherit;
  color: rgba(255, 255, 255, 0.58);
  background: transparent;
  border: none;
  border-radius: 1.1rem;
  padding: 1.1rem 1.3rem 1.25rem;
  cursor: pointer;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
.zn-switch__tab:hover {
  color: rgba(255, 255, 255, 0.85);
}
.zn-switch__tab.is-on {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.zn-switch__tab-n {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--v3-lime);
  opacity: 0.7;
}
.zn-switch__tab-t {
  display: block;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0.25rem;
}
/* max-height animable en lugar de height:auto, que no interpola. */
.zn-switch__tab-d {
  display: block;
  font-family: var(--v3-font-alt);
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.5s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.35s ease,
    margin-top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.zn-switch__tab.is-on .zn-switch__tab-d {
  max-height: 8rem;
  opacity: 1;
  margin-top: 0.5rem;
}
.zn-switch__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}
.zn-switch__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--v3-lime);
}
.zn-switch__tab.is-on .zn-switch__bar i {
  animation: zn-switch-fill var(--zn-dur, 7s) linear forwards;
}
/* En pausa (ratón encima o el usuario ha elegido a mano) la barra se queda
   quieta donde esté en vez de reiniciarse. */
.zn-switch.is-paused .zn-switch__tab.is-on .zn-switch__bar i {
  animation-play-state: paused;
}
@keyframes zn-switch-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.zn-switch__panes {
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
  aspect-ratio: 16 / 11;
  background: #000;
}
.zn-switch__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.zn-switch__pane.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.zn-switch__pane img,
.zn-switch__pane video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zn-switch__cap {
   width: fit-content;
  position: absolute;
  z-index: 2;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  box-sizing: border-box;
  padding: 0.9rem 1.2rem;
  border-radius: 1rem;
  background: rgba(0, 33, 29, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

/* ── 7 · Adaptación ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .zn-grid__box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zn-grid__i:nth-child(3n) {
    border-right: 1px solid var(--v3-line);
  }
  .zn-grid__i:nth-child(2n) {
    border-right: none;
  }
  .zn-grid__i:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--v3-line);
  }
  .zn-grid__i:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

@media (max-width: 900px) {
  .zn-feat__inner,
  .zn-cara__inner,
  .zn-switch__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .zn-feat__inner {
    min-height: 0;
    gap: 2.2rem;
  }
  /* En una columna el orden manda: primero el texto, luego la imagen. */
  .zn-feat--flip .zn-feat__body {
    order: 0;
  }
  .zn-feat__media,
  .zn-feat__panel {
    aspect-ratio: 4 / 3;
  }
  .zn-feat__h,
  .zn-feat__p,
  .zn-feat__list,
  .zn-cara__h,
  .zn-cara__p {
    max-width: none;
  }
  .zn-cara__inner {
    padding-top: clamp(3rem, 7vh, 4.5rem);
  }
  .zn-cara__body {
    padding-right: 2.4rem;
  }
  .zn-switch__panes {
    aspect-ratio: 16 / 10;
  }
  /* Los botones pasan a fila con scroll: en vertical ocupaban media pantalla */
  .zn-switch__tabs {
    flex-direction: row;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.3rem;
  }
  .zn-switch__tabs::-webkit-scrollbar {
    display: none;
  }
  .zn-switch__tab {
    flex: 0 0 min(72vw, 20rem);
  }
  .zn-switch__tab-d {
    display: none;
  }
}

@media (max-width: 820px) {
  .zn-band__box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zn-band__i:nth-child(2n) {
    border-right: none;
  }
  .zn-band__i:nth-child(-n + 2) {
    border-bottom: 1px solid var(--v3-line);
  }
  .zn-ihero {
    min-height: min(84vh, 44rem);
  }
}

@media (max-width: 640px) {
  .zn-ihero__inner,
  .zn-band__inner,
  .zn-feat__inner,
  .zn-grid__inner,
  .zn-switch__inner {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
  .zn-cara__inner {
    padding-left: 1.4rem;
  }
  .zn-cara__body,
  .zn-cara__track,
  .zn-cara__dots {
    padding-right: 1.4rem;
  }
  .zn-ihero__h1 {
    max-width: none;
  }
  .zn-ihero__cta > * {
    flex: 1 1 100%;
    justify-content: center;
  }
  .zn-grid__box {
    grid-template-columns: minmax(0, 1fr);
  }
  .zn-grid__i {
    border-right: none !important;
    border-bottom: 1px solid var(--v3-line) !important;
  }
  .zn-grid__i:last-child {
    border-bottom: none !important;
  }
  .zn-band__box {
    grid-template-columns: minmax(0, 1fr);
  }
  .zn-band__i {
    border-right: none !important;
    border-bottom: 1px solid var(--v3-line);
  }
  .zn-band__i:last-child {
    border-bottom: none;
  }
  .zn-cara__card {
    flex: 0 0 min(78vw, 17rem);
  }
}

/* El conmutador se queda quieto en la slide activa y el carrusel deja de
   deslizarse solo: se navega igual, pero sin movimiento automático. */
@media (prefers-reduced-motion: reduce) {
  .zn-switch__tab.is-on .zn-switch__bar i {
    animation: none;
    width: 100%;
  }
  .zn-switch__pane {
    transition: none;
  }
  .zn-switch__glow {
    animation: none;
  }
}
/* ZENON-INT-END */

/* ══════════════════════════════════════════════════════════════════════
   V6 · DIRECCIÓN DE MARCA (email de Leo tras la primera propuesta)
   "Menos efecto startup + menos tarjetas + más marca + más fotografía +
   más espacio + más verde ZENON + más peso empresarial."
   Paleta de trabajo: verde ZENON (--v3-ink) + blanco/blanco roto +
   negro/antracita. Los colores de la etiqueta energética (.zn-elabel)
   solo como firma puntual: kicker del hero y bloque de Empresas.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tono institucional en detalles globales ───────────────────────── */
/* El punto que latía en cada eyebrow y la chispa viajera del divisor
   eran recursos muy de "producto digital": se quedan quietos. */
.v3-eyebrow::before {
  animation: none;
  width: 14px;
  height: 2px;
  border-radius: 0;
}
.v3-eyebrow,
.v3-eyebrow--green,
.v3-eyebrow--elec {
  padding-left: 1.6em;
}
.v3-spark-divider::before {
  display: none;
}

.zn-elabel--sm {
  gap: 2px;
}
.zn-elabel--sm i {
  height: 4px;
}
.zn-elabel--sm i:nth-child(1) {
  width: 14px;
}
.zn-elabel--sm i:nth-child(2) {
  width: 19px;
}
.zn-elabel--sm i:nth-child(3) {
  width: 24px;
}

/* ── HERO de campaña ───────────────────────────────────────────────── */
/* Velo verde ZENON sobre el vídeo: el verde oscuro tiene presencia en la
   primera imagen sin convertirla en un bloque plano. Degradado lateral
   para asentar el titular a la izquierda y dejar respirar la ciudad. */
.v3-hero-video__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 53, 47, 0.78) 0%,
    rgba(0, 53, 47, 0.42) 42%,
    rgba(0, 53, 47, 0) 75%
  );
  mix-blend-mode: multiply;
}
.v3-hero-video__body {
  /* width:100% + padding lateral sin border-box desbordaba la pantalla
     (420px de cuerpo en un móvil de 375px: texto cortado a la derecha) */
  box-sizing: border-box;
  padding-bottom: calc(8vh + 4.5rem);
}
.v3-hero-video__title {
  font-size: clamp(2.8rem, 7vw, 7.2rem);
  line-height: 0.93;
  max-width: none; /* los saltos los marcan las dos líneas del marcado */
}
.zn-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  animation: zn-hero-fade-full 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.zn-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin-top: 2.4rem;
  animation: zn-hero-fade-full 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}
.zn-hero-cta .v3-btn-white {
  margin-top: 0;
}
@keyframes zn-hero-fade-full {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Enlace secundario: texto con filete en lugar de un segundo botón
   pastilla — un solo botón por pantalla se lee más sobrio. */
.zn-btn-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s ease;
}
.zn-btn-line:hover {
  border-color: #fff;
}
.zn-hero-creds {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.78);
  animation: zn-hero-fade-full 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}
.zn-hero-creds__inner {
  box-sizing: border-box;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: 1.35rem 2.4rem;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.zn-hero-creds__inner span {
  white-space: nowrap;
}

/* ── EMPRESAS: el gran bloque verde ────────────────────────────────── */
.zn-biz {
  position: relative;
  background: var(--v3-ink);
  color: #fff;
  overflow: hidden;
}
.zn-biz::before {
  /* velo de profundidad: el verde gana matiz sin salir de la paleta */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(0, 33, 29, 0.45));
}
.zn-biz__inner {
  position: relative;
  box-sizing: border-box;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: clamp(6rem, 14vh, 10rem) 2.4rem;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.zn-biz .v3-eyebrow--green {
  color: var(--v3-lime);
}
.zn-biz__h {
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.96;
  margin: 0;
  max-width: 11ch;
}
.zn-biz__lede {
  font-family: var(--v3-font-alt);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
  margin: 1.8rem 0 0;
  max-width: 44ch;
}
.zn-biz__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin-top: 2.6rem;
}
.zn-biz__cta .v3-btn-white {
  margin-top: 0;
}
.zn-biz__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.zn-biz__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: baseline;
  padding: clamp(1.5rem, 3.4vh, 2.2rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.zn-biz__tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}
.zn-biz__t {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.zn-biz__d {
  font-family: var(--v3-font-alt);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: 0.5rem 0 0;
  max-width: 48ch;
}
@media (hover: hover) {
  .zn-biz__row .zn-biz__t {
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .zn-biz__row:hover .zn-biz__t {
    transform: translateX(6px);
  }
}

/* ── SOLIDEZ: datos + credenciales ─────────────────────────────────── */
.zn-trust {
  background: var(--v3-soft);
}
.zn-trust__inner {
  box-sizing: border-box;
  max-width: var(--zn-container);
  margin: 0 auto;
  padding: clamp(6rem, 13vh, 10rem) 2.4rem;
}
.zn-trust__head {
  max-width: 62ch;
  margin-bottom: clamp(3.5rem, 8vh, 5.5rem);
}
.zn-trust__head .v3-bighead {
  max-width: 22ch;
}
.zn-trust__stats .v3-stat {
  border-top-color: var(--v3-ink);
}
.zn-trust__stats .v3-stat__num {
  font-size: clamp(3rem, 6vw, 5.4rem);
  letter-spacing: -0.045em;
}
.zn-trust__list {
  list-style: none;
  margin: clamp(5rem, 11vh, 8rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.zn-trust__row {
  border-top: 1px solid var(--v3-line);
  padding-top: 1.4rem;
}
.zn-trust__t {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--v3-ink);
  margin: 0 0 0.6rem;
}
.zn-trust__d {
  font-family: var(--v3-font-alt);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--v3-ink-soft);
  margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .zn-hero-creds__inner {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }
  .zn-trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.6rem;
  }
}
@media (max-width: 900px) {
  .zn-biz__inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  /* En móvil la nav es una barra blanca sólida: el hero pasa a columna,
     crece con su contenido (mínimo una pantalla) y las credenciales se
     apilan debajo del titular en lugar de flotar sobre el vídeo. */
  .v3-hero-video {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }
  .v3-hero-video__tint {
    background: linear-gradient(
      0deg,
      rgba(0, 53, 47, 0.8) 0%,
      rgba(0, 53, 47, 0.35) 60%,
      rgba(0, 53, 47, 0.1) 100%
    );
  }
  .v3-hero-video__body {
    padding: 8rem 1.4rem 2.2rem;
  }
  .zn-hero-kicker {
    margin-bottom: 1.2rem;
    font-size: 0.64rem;
  }
  .zn-hero-cta {
    margin-top: 1.8rem;
  }
  .zn-hero-creds {
    position: relative;
  }
  .zn-hero-creds__inner {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 1.2rem 1.4rem 1.6rem;
    font-size: 0.74rem;
  }
  .zn-hero-creds__inner span {
    white-space: normal;
  }
  .zn-biz__inner,
  .zn-trust__inner {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
  .zn-biz__row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .zn-trust__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2rem 1.4rem;
  }
}
@media (max-width: 820px) {
  /* La barra fija es verde ZENON: sin filete se fundía con el bloque de
     Empresas y con el pie, que son del mismo verde. */
  .v3-mobile-cta__btn {
    box-shadow:
      0 16px 36px -14px rgba(0, 53, 47, 0.55),
      inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
}
@media (max-width: 560px) {
  .zn-trust__list {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .zn-trust__stats .v3-stat__num {
    font-size: 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zn-hero-kicker,
  .zn-hero-cta,
  .zn-hero-creds {
    animation: none;
  }
}