/* Landing Nexo — CSS de produccion. Portado de 99-trabajo/nexo/nexo-artefacto.html
   (commit 87b1cb2), con un cambio respecto al artefacto:
     1. Sin la seccion 4 "Compatible con toda la gama" (eliminada 11/09/2026).
   Los huecos de imagen usan el mismo componente .nexo-img-slot del artefacto
   (degradado, icono SVG, badge flotante, variantes --dark/--pending y los
   modificadores de proporcion) — se probo una version simplificada en bloques
   de color planos (.nexo-ph) el 11/09/2026 y se revirtio el 14/09/2026 porque
   el resultado no se parecia al diseno aprobado del artefacto.
   Activado solo en paginas cuyo contenido lleva la clase marcadora .nexo-lp,
   via _deploy_snippet_nexo.php (patron de 09-guia-landings/GUIA-CONSTRUIR-LANDINGS.md). */

/* Montserrat servida desde el propio dominio, no desde Google (18/09/2026).

   Aqui habia un @import a fonts.googleapis.com, y un @import es lo peor
   que se puede poner en una hoja: el navegador no lo descubre hasta que
   ha descargado y empezado a leer ESTA hoja, asi que la fuente se pide
   EN SERIE detras de ella en vez de en paralelo. Y encima duplicaba lo
   que el tema ya pedia por su lado.

   El fichero es el mismo que ya usa la landing de Trydan desde el
   08/09/2026: un solo woff2 de 37 KB contra los 251 KB en 6 ficheros que
   servia Google, porque Montserrat es una fuente VARIABLE y un unico
   archivo cubre del peso 100 al 900. Subconjunto latin, que es cuanto
   necesita una pagina en español; el latin-ext para turco, checo o
   rumano es otra tarea, y global (13-optimizacion-velocidad, pendiente 5).

   El unicode-range no es adorno: sin el, el navegador da esta fuente por
   buena para CUALQUIER caracter y no recurre a la de respaldo cuando le
   falta uno. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/wp-content/uploads/v2c-fonts/montserrat-latin-var.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- reset del inner-container de GeneratePress — PRIMERO en el archivo (guia 2.2) --- */
.nexo-lp .wp-block-group__inner-container{padding:0;max-width:none;width:100%}

/* --- tokens — en TODAS las raices que los necesitan (guia 4.1) --- */
.nexo-lp,
.nexo-modal{
  --nexo-bg:#F5F4F3; --nexo-ink:#1E2422; --nexo-body:#5C6663; --nexo-linea:#E3E7E5;
  --nexo-blanco:#FFFFFF;
  --nexo-dark-bg:#12181A; --nexo-dark-bg-2:#182022; --nexo-dark-ink:#F4F6F5; --nexo-dark-body:#8FA09D;
  --nexo-dark-linea:#25302F;
  /* verde "pop" pedido explicitamente (19/09/2026), en TODO el verde de
     la pagina sin excepcion — incluido el texto, aunque falle contraste
     AA en varios sitios (kickers, datos pequeños): decision de diseño
     confirmada tras preguntar, no un descuido. --nexo-accent-dark se
     deja como esta, solo se usa para el estado :hover (un tono mas
     oscuro que el propio boton en reposo, no compite con "no quiero el
     oscuro" como color principal). */
  --nexo-accent:#00C269; --nexo-accent-dark:#094F33; --nexo-accent-soft:#DFF5EA;
  --nexo-accent-light:#18CD7E;
  /* ambar para el estado "en uso" de las animaciones de paso 1 — 7.09:1
     sobre --nexo-blanco y 6.45:1 sobre --nexo-bg, verificado (15/09/2026) */
  --nexo-status-busy:#92400E;
  --nexo-r-media:20px; --nexo-r-btn:6px; --nexo-r-pill:999px;
  --nexo-gutter:clamp(2rem,4vw,3rem); --nexo-gutter-sec:clamp(4rem,6.8vw,8.5rem);
  --nexo-ease:cubic-bezier(.22,1,.36,1);
  /* Curva APARTE para el revelado al scroll (18/09/2026). --nexo-ease
     es un ease-OUT: sale disparado y frena al final. Se pidio lo otro,
     suave al entrar, rapido en medio y suave al salir, asi que va su
     propia curva y no se toca la de siempre — la usan el odometro del
     paso 2 y el crecer de las fotos, que ya estan dados por buenos. */
  --nexo-ease-io:cubic-bezier(.65,0,.35,1);
  --nexo-ease-out:cubic-bezier(.22,1,.36,1);   /* revelado: la de recarga colectiva, arranca rapido y se posa */
}

.nexo-lp{background:var(--nexo-bg); color:var(--nexo-ink);}
.nexo-lp *{box-sizing:border-box;}
/* "Como funciona" pide fondo blanco, no el crema --nexo-bg de las demas
   secciones claras — id a proposito, gana por especificidad sin
   depender del orden en el archivo */
#como-funciona.nexo-lp{background:#FFFFFF;}
.nexo-lp img{max-width:100%; display:block;}

/* sangre completa (guia 4.3) */
.nexo-lp{width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw);}
html{overflow-x:clip;}

/* Huecos blancos ARRIBA Y ABAJO: no es la trampa 2.3, es GeneratePress —
   guia 2.3 bis. El tema trae ".one-container .site-content{padding:40px}"
   y el body de esta pagina lleva one-container (Trydan y RC no: van con
   full-width-content, por eso alli no hizo falta).

   En su dia se anulo solo el de arriba, que era el que se veia. El de
   ABAJO seguia ahi y dejaba una franja blanca entre la ultima seccion y
   el pie (14/10/2026). Blanca y no crema: las secciones sangran a 100vw
   pero el relleno es del contenedor, que va sobre el fondo del tema.

   40px en escritorio y 30 en movil — el valor de movil lo pisa el CSS
   dinamico del tema DENTRO de un @media (max-width:768px), asi que no es
   que gane por orden, es que son dos valores distintos. Poner 0 vale
   para los dos.

   Misma especificidad exacta que el tema mas una clase (0,3,0): un
   selector mas corto no le gana pase lo que pase con el orden de carga.
   No hace falta tocar el espacio de la ultima seccion: su propio
   padding-block ya le da aire, lo que sobraba era el blanco. */
body.one-container .site-content{padding-top:0; padding-bottom:0;}

/* .nexo-lp section{...} nunca coincidio con nada: cada <section> lleva
   .nexo-lp puesta a si misma (mismo elemento), no como ancestro de un
   <section> anidado — misma trampa que la 5.6 de la guia, esta vez en la
   regla base. Se fusiona en .nexo-lp directamente. */
.nexo-lp{padding-inline:var(--nexo-gutter); padding-block:var(--nexo-gutter-sec);}
.nexo-lp .nexo-inner{max-width:80vw; margin:0 auto;}

/* TANDA 2 (18/09/2026, guia 9 y 9.1): los titulares entran en la escala
   del sistema. Es el cambio que mas se nota de los dos, y va aparte a
   proposito para poder deshacerlo sin perder la tanda 1.

   Tres cosas cambian a la vez:

     TAMAÑO. clamp(1.625rem,3vw,3.5rem) — 56px a 1920 contra los 38 de
     antes. En movil no se mueve (26px), la diferencia estaba toda en
     escritorio: el tope de 2.35rem mordia mucho antes de tiempo.

     PESO 300. Esto es lo que de verdad cambia el caracter. Trydan y RC
     llevan los titulares en ligera, y es de donde les viene el aire
     editorial; Nexo no declaraba peso ninguno y heredaba el del tema.
     Sin esto, subir el tamaño solo habria hecho la pagina mas pesada.

     LETTER-SPACING -.02em, el del sistema, en vez de -.01em. A 56px un
     titular necesita mas apretado que a 38, si no se desarma.

   El h2 es UNO SOLO en toda la pagina, tambien por la guia 9: alli se
   llego a tener tres porque cada seccion "necesitaba" el suyo, y al
   unificar desaparecieron dos reglas que solo existian para corregir la
   primera. */
.nexo-lp h1,
.nexo-lp h2{
  font-size:clamp(1.625rem,3vw,3.5rem);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .6rem;
  text-wrap:balance;
}
.nexo-lp .nexo-kicker{
  display:inline-block;
  font-size:clamp(.75rem,.72vw,.8125rem);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--nexo-accent);
  margin:0 0 .8rem;
}
/* TANDA 1 de alineacion con el sistema (18/09/2026, guia 9 y 9.1).
   Estaba en 1.02rem FIJO = 16,3px a cualquier ancho. El sistema pide de
   18 a 25px, asi que en una pantalla grande se quedaba en el 65% de lo
   que le toca, y al ser fija no crecia nunca. Declaracion identica a la
   de Trydan y RC, que es lo que la convierte en sistema. */
.nexo-lp .nexo-lede{
  font-size:clamp(1.125rem,.8125rem + .625vw,1.625rem);
  color:var(--nexo-body);
  max-width:56ch;
  margin:0 0 2.6rem;
  line-height:1.55;
}
/* sangria de las intros alineadas a la izquierda (kicker+h2+lede).
   rem, NO em: em se calcula sobre el tamaño de fuente de CADA elemento,
   y el h2 es 2-3 veces mas grande que el kicker/lede — con em quedaban
   3 sangrias distintas (des alineados entre si) en vez de una sola. */
.nexo-lp .nexo-kicker,
.nexo-lp .nexo-kicker + h2,
.nexo-lp .nexo-lede{padding-left:4rem;}

/* --- botones (guia 2.6: los 5 estados, o el tema los recolorea al hover) --- */
.nexo-lp .nexo-boton,
.nexo-lp .nexo-boton:link,
.nexo-lp .nexo-boton:visited,
.nexo-lp .nexo-boton:hover,
.nexo-lp .nexo-boton:focus,
.nexo-lp .nexo-boton:active{
  text-decoration:none;
  color:#FFFFFF;
}
.nexo-lp .nexo-boton{
  display:inline-block;
  background:var(--nexo-accent);
  font-weight:600;
  font-size:.95rem;
  padding:13px 26px;
  border-radius:var(--nexo-r-btn);
  border:1px solid transparent;
  transition:background .18s var(--nexo-ease), transform .18s var(--nexo-ease);
}
.nexo-lp .nexo-boton:hover{background:var(--nexo-accent-dark); transform:translateY(-1px);}
.nexo-lp .nexo-boton:focus-visible{outline:2px solid var(--nexo-accent-light); outline-offset:3px;}

.nexo-lp .nexo-boton-ghost{
  display:inline-block;
  color:var(--nexo-ink);
  font-weight:600;
  font-size:.95rem;
  padding:12px 22px;
  border-radius:var(--nexo-r-btn);
  border:1px solid var(--nexo-linea);
  text-decoration:none;
}
.nexo-lp .nexo-boton-ghost:hover{border-color:var(--nexo-accent); color:var(--nexo-accent);}
.nexo-lp .nexo-boton-ghost:focus-visible{outline:2px solid var(--nexo-accent); outline-offset:3px;}

/* --- reveal on scroll — un solo IntersectionObserver (nexo-lp.js) --- */
/* --- revelado al hacer scroll (rehecho 18/09/2026) ---

   Antes habia UN solo movimiento (subir 18 px y aparecer), identico
   para el h2, para una tarjeta y para una foto, y todo lo de una
   seccion entraba a la vez. Se notaba de plantilla. Ahora:

   1. CASCADA. nexo-lp.js numera cada elemento DENTRO de su seccion y
      escribe --nexo-i; de ahi sale el retardo. El indice se cuenta por
      seccion y no por pagina (con uno global, lo de abajo del todo
      habria arrancado con varios segundos de retardo) y el propio JS lo
      tapa a 7.

   2. UN MOVIMIENTO DISTINTO SEGUN QUE SEA. El texto sube y se enfoca
      desde desenfocado; las tarjetas suben y crecen desde el 96%.
      NO hay barrido/clip en las fotos: se probo y el descubrirse de
      arriba abajo se leia brusco al lado del resto.

   3. SE VUELVE A ESCONDER al salir de pantalla (pedido expreso). Con
      banda muerta: aparece al entrar un 12% y no se esconde hasta estar
      a mas de un 35% de alto de pantalla fuera. Sin esa histeresis, un
      elemento parado justo en el borde parpadearia sin parar.

   CUIDADO AL TOCAR ESTO (guia 2.3, orden de fuente a igual
   especificidad): las reglas de ESCONDIDO de las variantes pesan
   (0,3,0), lo mismo que ".nexo-lp .nexo-reveal.is-in". Van TODAS antes
   que la de is-in a proposito. Una variante nueva escrita DESPUES
   ganaria y dejaria ese elemento invisible para siempre. */
.nexo-lp .nexo-reveal{
  --nexo-i:0;
  opacity:0;
  /* DESENFOQUE DESACTIVADO A MODO DE PRUEBA (18/09/2026) — la pagina se
     notaba lenta al desplazarse y este es el primer sospechoso: a
     diferencia de transform y opacity, filter:blur() NO se compone en la
     GPU, asi que cada fotograma obliga a repintar el elemento entero. Y
     aqui hay 46, muchos con imagen dentro, y el revelado es de ida y
     vuelta, asi que cada uno lo vuelve a disparar cada vez que entra o
     sale de pantalla.

     Para devolverlo: descomentar esta linea y la del @keyframes
     nexoFadeUp del hero, que es la otra. Si resulta que si era esto pero
     el efecto gusta, el punto medio es dejarlo SOLO en h2 y entradilla,
     que es donde estaba antes: son pocos, son texto y no llevan imagen.
  filter:blur(4px); */
  transform:translateY(26px);
  /* Acortado un punto el 18/09/2026 (.7/.75s y 80ms de paso antes). Se
     bajan LAS DOS cosas a la vez y en la misma proporcion, porque lo que
     se percibe es la suma: el ultimo elemento de una seccion larga
     esperaba 7 x 80ms = 560ms antes de empezar sus 750ms. Tocando solo
     la duracion, ese ultimo habria seguido llegando tarde igual. Ahora
     son 420 + 600 en vez de 560 + 750: un 22% menos de punta a punta. */
  transition:
    opacity .75s var(--nexo-ease-out) calc(var(--nexo-i, 0) * 90ms),
    transform .75s var(--nexo-ease-out) calc(var(--nexo-i, 0) * 90ms),
    filter .75s var(--nexo-ease-out) calc(var(--nexo-i, 0) * 90ms);
    /* 27/10/2026: los mismos .75s y 90ms de recarga colectiva. Con ease-out a .55s el movimiento
       se hacia casi entero en 0,2 s y no se veia */
    /* la linea de filter se deja: sin nada que animar no cuesta nada, y
       asi devolver el blur es descomentar una sola declaracion */
}
/* tarjetas y bloques con superficie: suben mas y crecen */
.nexo-lp .nexo-paso.nexo-reveal,
.nexo-lp .nexo-modo.nexo-reveal,
.nexo-lp .nexo-acordeon.nexo-reveal,
.nexo-lp .nexo-tabla-wrap.nexo-reveal,
.nexo-lp .nexo-cont-caja.nexo-reveal,
.nexo-lp .nexo-cloud-marco.nexo-reveal,
.nexo-lp .nexo-payments-banda.nexo-reveal{transform:translateY(34px) scale(.96);}
/* los cuatro puntos y los casos de uso, que el JS convierte de bloque
   unico en hijos sueltos: entran mas cortos, son piezas pequeñas */
.nexo-lp .nexo-payments-4 > li.nexo-reveal,
.nexo-lp .nexo-payments-list > li.nexo-reveal,
.nexo-lp .nexo-casos-usos > .nexo-uso.nexo-reveal{transform:translateY(20px);}
/* AL DESAPARECER, SOLO LA OPACIDAD (18/09/2026): ni subida ni escala ni
   desenfoque, que hacian el apagado demasiado aparatoso. La clase
   .se-va la pone el JS justo antes de quitar is-in; como deja transform
   y filter igual que los tenia estando visible, lo unico que queda por
   animar es la opacidad.

   El :not(.is-in) no sobra: sube el peso a (0,4,0), que es lo que hace
   falta para ganar a las reglas de escondido de los hijos repartidos
   —(0,3,1) por el selector de tipo li— y, empatando con la de .nexo-uso,
   para eso va escrita DESPUES.

   El JS retira .se-va cuando el apagado ha terminado y el elemento ya no
   se ve, asi que al volver a entrar recupera su entrada completa, con
   movimiento y desenfoque. El apagado es sobrio; la aparicion no. */
.nexo-lp .nexo-reveal.se-va:not(.is-in){transform:none; filter:none;}

/* === el estado visible, SIEMPRE por detras de los escondidos === */
.nexo-lp .nexo-reveal.is-in{opacity:1; transform:none; filter:none;}
/* Estos tres necesitan su propio is-in y no les basta el de arriba: sus
   reglas de escondido pesan mas que ".nexo-lp .nexo-reveal.is-in"
   —(0,3,1) las de li, porque el selector de TIPO tambien suma, y (0,4,0)
   la de .nexo-uso, que son cuatro clases—, asi que ganaban y los dejaban
   plantados a 20 px. Cazado midiendo con Chrome sin cabeza, no leyendo. */
.nexo-lp .nexo-payments-4 > li.nexo-reveal.is-in,
.nexo-lp .nexo-payments-list > li.nexo-reveal.is-in,
.nexo-lp .nexo-casos-usos > .nexo-uso.nexo-reveal.is-in{transform:none;}

@media (prefers-reduced-motion:reduce){
  .nexo-lp .nexo-reveal,
  .nexo-lp .nexo-paso.nexo-reveal,
  .nexo-lp .nexo-modo.nexo-reveal,
  .nexo-lp .nexo-acordeon.nexo-reveal,
  .nexo-lp .nexo-tabla-wrap.nexo-reveal,
  .nexo-lp .nexo-cont-caja.nexo-reveal,
  .nexo-lp .nexo-cloud-marco.nexo-reveal,
  .nexo-lp .nexo-payments-banda.nexo-reveal,
  .nexo-lp .nexo-casos-foto.nexo-reveal{
    opacity:1; transform:none; filter:none; transition:none;
  }
}

/* --- placeholder de imagen reutilizable (foto/render pendiente o ya
   existente pero no embebido) — portado tal cual del artefacto --- */
.nexo-lp .nexo-img-slot{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  text-align:center;
  padding:1.6rem;
  border-radius:var(--nexo-r-media);
  border:1px solid var(--nexo-linea);
  background:
    repeating-linear-gradient(135deg, var(--nexo-linea) 0 1px, transparent 1px 16px),
    linear-gradient(155deg, var(--nexo-accent-soft) 0%, var(--nexo-bg) 68%);
}
.nexo-lp .nexo-img-slot svg{
  width:clamp(26px,3.4vw,38px);
  height:clamp(26px,3.4vw,38px);
  color:var(--nexo-accent-dark);
  opacity:.5;
  flex:none;
}
.nexo-lp .nexo-img-slot__label{
  font-size:.76rem;
  font-weight:600;
  color:var(--nexo-body);
  line-height:1.45;
  max-width:28ch;
}
.nexo-lp .nexo-img-slot__badge{
  position:absolute;
  top:.85rem; left:.85rem;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--nexo-body);
  background:var(--nexo-blanco);
  border:1px solid var(--nexo-linea);
  border-radius:999px;
  padding:.3rem .7rem;
}
/* variante: foto genuinamente pendiente de encargo (no existe todavía) */
.nexo-lp .nexo-img-slot--pending{border-style:dashed;}
.nexo-lp .nexo-img-slot--pending svg{color:var(--nexo-body); opacity:.45;}
.nexo-lp .nexo-img-slot--pending .nexo-img-slot__badge{border-style:dashed;}
/* variante: sobre fondo oscuro (hero) */
.nexo-lp .nexo-img-slot--dark{
  border-color:var(--nexo-dark-linea);
  background:
    radial-gradient(ellipse at 30% 15%, rgba(95,198,196,.18), transparent 60%),
    repeating-linear-gradient(135deg, var(--nexo-dark-linea) 0 1px, transparent 1px 16px),
    linear-gradient(165deg, var(--nexo-dark-bg-2) 0%, var(--nexo-dark-bg) 78%);
}
.nexo-lp .nexo-img-slot--dark .nexo-img-slot__label{
  color:var(--nexo-dark-body);
  background:var(--nexo-dark-bg);
  border:1px solid var(--nexo-dark-linea);
  border-radius:10px;
  padding:.55rem .9rem;
}
.nexo-lp .nexo-img-slot--dark svg{color:var(--nexo-accent-light); opacity:.6;}
.nexo-lp .nexo-img-slot--dark .nexo-img-slot__badge{
  background:var(--nexo-dark-bg);
  border-color:var(--nexo-dark-linea);
  color:var(--nexo-dark-body);
}
/* proporciones */
.nexo-lp .nexo-img-slot--portrait{aspect-ratio:4/5;}
.nexo-lp .nexo-img-slot--tall{aspect-ratio:3/4;}
.nexo-lp .nexo-img-slot--square{aspect-ratio:1/1;}
.nexo-lp .nexo-img-slot--wide{aspect-ratio:4/3;}
.nexo-lp .nexo-img-slot--banner{aspect-ratio:21/9;}
.nexo-lp .nexo-img-slot--dashboard{aspect-ratio:16/10;}
.nexo-lp .nexo-img-slot--fill{aspect-ratio:auto; height:100%;}

.nexo-lp .nexo-img-slot-caption{
  font-size:.78rem;
  color:var(--nexo-body);
  line-height:1.55;
  margin:.9rem 0 0;
}

/* --- 1. Hero en tarjeta (14/10/2026) ---
   Pedido del jefe: la foto deja de ir debajo del texto y pasa a ser el
   FONDO de una tarjeta redondeada, separada de los bordes, con el titular
   encima a la izquierda y un boton. El hero claro anterior (texto arriba,
   foto ancha debajo que crece al bajar) esta guardado en
   nexo-hero-anterior.css / .html. La cabecera del sitio NO se toca.

   La foto sigue dentro de .nexo-hero-device a proposito: asi conserva el
   flotado (selector `.nexo-hero-device img` mas abajo). Ya no lleva
   data-nexo-crece, asi que el JS del crecimiento no actua. */
.nexo-hero{
  box-sizing:border-box;
  background:#E8E9E9;
  color:#fff;
  /* arriba va holgado a proposito: la cabecera del sitio flota sobre el contenido
     y sin este hueco la tarjeta nacia por detras de ella (14/10/2026) */
  padding:7.5rem clamp(.75rem,5.5vw,4.8rem) clamp(.75rem,5.5vw,4.8rem);
}
.nexo-lp .nexo-hero-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:calc(var(--nexo-r-media) + 4px);
  min-height:clamp(30rem,78vh,46rem);
  display:flex;
  align-items:center;
  background:var(--nexo-dark-bg);
}
.nexo-lp .nexo-hero-device{
  position:absolute; inset:0; z-index:-2;
  padding:0; margin:0; width:auto; aspect-ratio:auto;
  border:0; border-radius:0; overflow:hidden;
  animation:nexoFadeUp .8s var(--nexo-ease-io) .18s both;
}
.nexo-lp .nexo-hero-device img{width:100%; height:100%; object-fit:cover; object-position:70% 100%; display:block;}
/* velo para que el texto lea sobre cualquier parte de la foto */
.nexo-lp .nexo-hero-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(10,14,15,.82) 0%, rgba(10,14,15,.55) 38%, rgba(10,14,15,0) 68%);
}
.nexo-lp .nexo-hero-copy{
  width:min(42rem,100%);
  padding:clamp(2rem,5vw,4rem);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(1rem,1.6vw,1.4rem);
}
/* el h1 del hero tiene su propia declaracion en la tabla: 64/32 px */
.nexo-hero h1{
  font-size:clamp(2rem,3.6vw,4rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
  color:#fff;
  text-wrap:balance;
  animation:nexoFadeUp .72s var(--nexo-ease-io) .06s both;
}
.nexo-hero h1 .nexo-hero-marca{color:var(--nexo-accent); font-weight:600;}
.nexo-hero p.nexo-sub{
  /* mismo rol que .nexo-lede, un peldano menos porque va sobre la foto */
  font-size:clamp(1rem,.8rem + .5vw,1.25rem);
  color:#fff;
  line-height:1.6;
  margin:0;
  animation:nexoFadeUp .72s var(--nexo-ease-io) .12s both;
}
.nexo-lp .nexo-hero-cta{
  display:inline-block;
  background:var(--nexo-accent);
  color:#000;
  font-weight:600;
  font-size:clamp(1rem,.9rem + .3vw,1.125rem);
  line-height:1;
  text-decoration:none;
  padding:1.05em 1.5em;
  border-radius:20px;
  animation:nexoFadeUp .72s var(--nexo-ease-io) .18s both;
  transition:filter .2s ease;
}
.nexo-lp .nexo-hero-cta:hover{filter:brightness(1.08);}
.nexo-lp .nexo-hero-cta:focus-visible{outline:3px solid #fff; outline-offset:3px;}
/* MOVIL (14/10/2026): dos cajas separadas, no una foto con texto encima.
   La foto va ENTERA (su proporcion natural, 2002x1117, sin recorte) y el
   texto en su propia caja oscura debajo, con un hueco entre las dos. Sobre
   la foto nunca queda texto, asi que no hace falta el velo. */
@media (max-width:820px){
  .nexo-hero{padding-top:6.5rem; padding-bottom:4rem;}
  .nexo-lp .nexo-hero-card{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    min-height:0; overflow:visible; isolation:auto; background:none; border-radius:0;
  }
  .nexo-lp .nexo-hero-card::before{display:none;}
  .nexo-lp .nexo-hero-card .nexo-hero-device{
    position:relative; inset:auto; z-index:auto;
    aspect-ratio:3/2; width:100%;
    border-radius:calc(var(--nexo-r-media) + 4px); background:var(--nexo-dark-bg);
  }
  /* sin el escalado del flotado: ese zoom del 9% recortaria la foto */
  .nexo-lp .nexo-hero-card .nexo-hero-device img{transform:none; object-position:92% 50%;}
  .nexo-lp .nexo-hero-copy{
    /* la caja de texto es mas estrecha que la foto y sube sobre su borde
       inferior (14/10/2026) */
    position:relative; z-index:1;
    width:auto; margin:-2.25rem .75rem 0; align-items:stretch;
    padding:1.25rem 1.1rem 1.15rem;
    gap:.8rem;
    background:var(--nexo-dark-bg);
    border-radius:var(--nexo-r-media);
    box-shadow:0 14px 34px rgba(0,0,0,.25);
  }
  .nexo-hero h1{font-size:clamp(1.625rem,7vw,2rem);}
  .nexo-hero p.nexo-sub{font-size:.9375rem; line-height:1.55;}
  .nexo-lp .nexo-hero-cta{text-align:center; padding:.95em 1.2em; margin-top:1em;}
}

/* --- las fotos FLOTAN al desplazarse (18/09/2026) ---

   Se mueven un poco arriba y abajo segun donde esten en pantalla, con
   un desplazamiento que persigue a su objetivo en vez de seguirlo al
   pie de la letra: cada fotograma recorre una fraccion de lo que le
   falta, asi que arranca rapido y va frenando solo. De ahi la sensacion
   de flotar, y por eso NO hay transition aqui — el frenado lo hace el
   propio JS fotograma a fotograma, una transition encima lo unico que
   haria seria arrastrarlo por detras.

   Va en la IMAGEN, nunca en su marco: el marco ya usa transform para el
   revelado, y ademas es quien recorta. Si flotara el marco entero se
   moveria el hueco, no la foto dentro.

   El scale fijo es el margen de maniobra. La imagen cubre su caja
   exacta (object-fit:cover al 100%), asi que sin agrandarla un poco,
   moverla 14px destaparia una franja del fondo arriba o abajo. Al 1.09
   sobra por los dos lados hasta en la caja mas baja de todas, la de
   .nexo-modo-foto. La foto de V2C Cloud se queda FUERA a proposito: ahi
   la imagen manda el alto del marco (height:auto), no lo rellena, asi
   que flotarla dejaria franjas blancas. */
.nexo-lp .nexo-hero-device img,
.nexo-lp .nexo-casos-foto img,
.nexo-lp .nexo-modo-foto img,
.nexo-lp .nexo-viz--photo img{
  --nexo-flota:0px;
  transform:translate3d(0, var(--nexo-flota), 0) scale(1.09);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .nexo-lp .nexo-hero-device img,
  .nexo-lp .nexo-casos-foto img,
  .nexo-lp .nexo-modo-foto img,
  .nexo-lp .nexo-viz--photo img{transform:none; will-change:auto;}
}

/* La entrada del hero habla el MISMO idioma que el revelado al scroll
   del resto de la pagina (18/09/2026): el mismo recorrido de 26px, el
   mismo desenfoque de 4px y la misma curva --nexo-ease-io. Antes eran
   14px, sin desenfoque, con la curva de ease-out y medio segundo largo:
   la opacidad estaba —siempre estuvo— pero pasaba tan rapido y tan corta
   que el hero entraba mas seco que todo lo que venia despues.

   Sigue siendo una animacion de CARGA y no de scroll, que es lo que le
   toca: el hero ya se ve al abrir la pagina, no hay nada que esperar. */
@keyframes nexoFadeUp{
  /* el blur va comentado por la misma prueba — ver .nexo-reveal */
  from{opacity:0; transform:translateY(26px); /* filter:blur(4px); */}
  to{opacity:1; transform:translateY(0); /* filter:blur(0); */}
}
@media (prefers-reduced-motion:reduce){
  .nexo-lp .nexo-hero-eyebrow, .nexo-hero h1, .nexo-hero p.nexo-sub,
  .nexo-lp .nexo-hero-device{animation:none !important;}
}

/* --- 2. Cómo funciona --- */
.nexo-lp .nexo-pasos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6rem;
}
@media (max-width:760px){ .nexo-lp .nexo-pasos{grid-template-columns:1fr;} }
/* alineacion de los "01/02/03" entre columnas: no a base de igualar
   min-heights a mano (se desalinea cada vez que cambia el contenido de
   una), sino estructural. El grid ya estira las 3 celdas .nexo-paso a la
   altura de la mas alta (align-items:stretch por defecto); con
   .nexo-paso en columna flex y .nexo-viz creciendo (flex:1), la
   ilustracion absorbe el sobrante y el numero/titulo/parrafo arrancan
   siempre en el mismo punto, se mueva lo que se mueva el contenido de
   dentro de cada .nexo-viz. */
.nexo-lp .nexo-paso{position:relative; display:flex; flex-direction:column;}
/* las tres ilustraciones se miden en alto de PANTALLA, no en rem fijos
   (peticion expresa): media pantalla cada una, asi escalan con el
   monitor en vez de quedarse clavadas a un numero que hay que reajustar
   a mano cada vez que cambia el contenido. Acotado por los dos lados:
   nunca por debajo de 26rem (donde el paso 2 dejaria de caber) ni por
   encima de 34rem (en una ventana muy alta, 50vh se iba a ~970px y el
   paso 2 quedaba con huecos enormes entre pieza y pieza). */
.nexo-lp .nexo-paso .nexo-viz{flex:1 0 auto; min-height:clamp(26rem,50vh,34rem);}
/* padding a izquierda Y derecha (no solo sangria) del numero/titulo/
   parrafo de cada paso — solo el texto, no la ilustracion .nexo-viz de
   arriba (esa se queda a todo el ancho de la columna) */
.nexo-lp .nexo-paso-num,
.nexo-lp .nexo-paso h3,
.nexo-lp .nexo-paso p{padding-inline:1.25rem;}
.nexo-lp .nexo-paso-num{
  font-size:.78rem;
  font-weight:700;
  color:var(--nexo-accent);
  letter-spacing:.05em;
  margin:1.1rem 0 .5rem;
}
/* Los tres titulos de TARJETA (paso, caso de uso, modo de instalacion)
   comparten tamaño: 17px/600, el "Nombre de tarjeta" de RC. Estaban en
   1.12, 1 y 1.15rem, tres valores a ojo para el mismo rol — el error
   que la guia 9 describe literalmente ("cada seccion necesitaba el
   suyo"). El h3 de "Activa el cobro" NO entra aqui: ese no es un titulo
   de tarjeta sino un subtitular de seccion, y va con el .rc-h3 de RC. */
.nexo-lp .nexo-paso h3{font-size:1.0625rem; font-weight:600; margin:0 0 .5rem;}
.nexo-lp .nexo-paso p{font-size:.93rem; color:var(--nexo-body); line-height:1.55; margin:0 0 1rem;}

/* ── animaciones de "Cómo funciona" (15/09/2026) ────────────────────────
   Sustituyen a los tres placeholders .nexo-img-slot de los pasos 1-3: ya
   no son "asset sin incrustar", son el contenido real. Contenedor comun,
   mas simple y silencioso que el placeholder (sin degradado ni patron
   rayado): tarjeta blanca, borde fino, misma proporcion 4/5 que tenian los
   placeholders para no descuadrar la fila de 3 columnas. */
.nexo-lp .nexo-viz{
  position:relative;
  border-radius:var(--nexo-r-media);
  background:var(--nexo-blanco);
  border:1px solid var(--nexo-linea);
  min-height:19rem;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:1.5rem;
}
/* foto en vez de la ilustracion — misma caja/radio/tamaño que los demas
   pasos (paso 3, foto provisional 19/09/2026). El archivo real mide
   406x647 (vertical). Dos intentos previos, los dos mal:
   aspect-ratio 4/3 (mas ancho que alto) dejaba un recorte demasiado
   corto, mucho fondo crema vacio arriba/abajo; height:100%+cover
   llenaba toda la caja pero recortando los lados de la foto (no se
   veia entera). Punto medio: object-fit:CONTAIN en vez de cover —
   llena la caja entera en ALTO (ocupa el hueco) sin recortar nada de
   la foto (se ve completa), dejando el sobrante como fondo crema a los
   lados en vez de arriba/abajo. No hace falta border-radius en el img:
   al no tocar los bordes de la caja, sus propias esquinas no se ven. */
/* sin borde: la foto va a sangre dentro del marco, y con el borde de
   1px de la base .nexo-viz la imagen (absoluta, inset:0) se colocaba
   por dentro y dejaba un filo de fondo visible alrededor. El redondeo
   se mantiene igual via border-radius + overflow:hidden. */
.nexo-lp .nexo-viz--photo{padding:0; border:0; background:var(--nexo-bg);}
.nexo-lp .nexo-viz--photo img{
  /* FUERA DEL FLUJO a proposito (medido en navegador, 17/09/2026): con
     la imagen en flujo, su "height:100%" se resuelve contra una caja de
     altura indefinida (el marco solo tiene min-height), asi que el
     navegador lo trata como "auto" y usa el tamaño natural del archivo
     — que es vertical (406x647) — - a ~445px de ancho pedia ~709px de
     alto y estiraba la fila entera de los tres pasos.
     Con position:absolute la foto no aporta NADA al alto: la caja mide
     lo que dice el 50vh y la foto se adapta dentro. */
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* cover, no contain: la foto llena el cuadro entero (recorta lo que
     sobra por los lados, no deforma) — peticion expresa, 17/09/2026 */
  object-fit:cover;
  display:block;
}

/* --- paso 1: lista de cargadores desplazandose en vertical, pantalla de
   app igual que el paso 2 (spec Pencil, 19/09/2026) — sustituye la cinta
   horizontal de plazas. Mismo mecanismo que el marquee horizontal que
   tenia antes (guia 6.2/6.10): lista duplicada 2x para bucle sin costura,
   animando translateY(-50%) en vez de translateX. Reutiliza SIN cambios
   los componentes que ya construyo el paso 2 para la fila de cargador
   (.nexo-viz-dur-charger-left, .nexo-viz-dur-dot, .nexo-viz-dur-charger-name,
   .nexo-viz-dur-pill, .nexo-viz-dur-rates) — misma tarjeta, mismo idioma
   visual, no una version nueva. */
.nexo-lp .nexo-viz--chargers{
  background:var(--nexo-bg);
  padding:0;
  align-items:stretch;
  /* altura EXPLICITA (height, no min-height) a proposito: la lista
     interior mide 40rem fijos para tener siempre tarjeta de sobra que
     mostrar, asi que si dependiera del contenido este marco pediria
     ~700px y el grid estiraria los otros dos pasos a ESE alto. Con
     height fijo manda el marco y el overflow:hidden heredado de la
     base .nexo-viz recorta la lista, no al reves. El valor va en vh
     igual que los otros dos. */
  height:clamp(26rem,50vh,34rem);
  /* es una ilustracion decorativa (aria-hidden), no una lista real que se
     pueda tocar: sin esto, hacer clic o arrastrar sobre una tarjeta —
     sobre todo una cortada a medias por el degradado — deja el
     resaltado azul de seleccion de texto del navegador, o el gris del
     tap-highlight en movil. */
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:default;
}
.nexo-lp .nexo-viz-chargers-app{
  display:flex;
  flex-direction:column;
  width:100%;
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.nexo-lp .nexo-viz-chargers-header{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:1.1rem 1.2rem .9rem;
}
.nexo-lp .nexo-viz-chargers-back{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem;
  border-radius:50%;
  background:var(--nexo-blanco);
  color:var(--nexo-ink);
  font-size:1.3rem;
  line-height:1;
}
.nexo-lp p.nexo-viz-chargers-title{
  margin:0;
  font-size:1.15rem;
  font-weight:800;
  color:var(--nexo-ink);
  letter-spacing:-.3px;
}
/* la ventana solo enseña el alto de unas 2 tarjetas y media — el resto se
   desplaza por detras, ocultandose bajo la cabecera con un degradado en
   vez de un corte duro (peticion expresa: "que pasen por detras... con
   un fondo en degradado") */
.nexo-lp .nexo-viz-chargers-list{
  /* Ni flex:1 (el min-height:auto de un flex item usa el tamaño del
     CONTENIDO como suelo, ignora el overflow:hidden) ni una altura fija
     "adivinada" (23rem seguia dejando hueco: solo UNA tarjeta lleva la
     tarifa abierta cada vez, asi que cuanto cabe varia segun el instante
     de la animacion — a veces son 4 tarjetas, a veces menos). Altura
     GENEROSA en su lugar (40rem, mas de las que jamas se van a ver
     completas): siempre sobra tarjeta real por debajo, y quien de verdad
     recorta al alto exacto del paso 2 es el marco exterior
     (.nexo-viz--chargers, overflow:hidden heredado de la base .nexo-viz,
     estirado por el flex:1 de .nexo-paso .nexo-viz). El corte cae limpio
     en el borde de la tarjeta, nunca en un hueco vacio. */
  position:relative;
  overflow:hidden;
  height:40rem;
  padding-top:.4rem;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 4%, #000 92%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 4%, #000 92%, transparent 100%);
}
/* deja de ser una cinta continua: avanza tarjeta a tarjeta (6 paradas,
   una por cada cargador real — las 6 copias del final nunca se resaltan,
   el bucle reinicia justo antes de alcanzarlas) y hace una pausa en cada
   una para "leerla", en vez de una correa sin fin (peticion expresa:
   "que vaya pasando suavemente"). El primer hijo empieza ya resaltado
   (0% del ciclo = parada 1), asi que al cargar la pagina "se ve como el
   primero que esta seleccionado" sin esperar a que arranque nada. */
.nexo-lp .nexo-viz-chargers-track{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:0 1.2rem 1.2rem;
  will-change:transform;
  animation:nexoChargersScroll 26s var(--nexo-ease) infinite;
}
@keyframes nexoChargersScroll{
  0%, 12.5%{transform:translateY(0);}
  16.67%, 29.17%{transform:translateY(-8.333%);}
  33.33%, 45.83%{transform:translateY(-16.667%);}
  50%, 62.5%{transform:translateY(-25%);}
  66.67%, 79.17%{transform:translateY(-33.333%);}
  83.33%, 95.83%{transform:translateY(-41.667%);}
  100%{transform:translateY(-50%);}
}
.nexo-lp .nexo-viz-charger-card{
  position:relative;
  flex:none;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  background:var(--nexo-blanco);
  border-radius:16px;
  padding:1rem;
  border:2px solid transparent;
  animation:nexoChargerPick 26s var(--nexo-ease) infinite;
}
/* el resaltado "seleccionado" se turna entre las 6 tarjetas reales, cada
   una en su propia parada — mismo reloj de 26s que el desplazamiento
   (nunca signo negativo en el delay: eso invierte el orden, guia 5.9 lo
   dejo documentado la ultima vez que paso). Las copias del bucle
   (nth-child 7 en adelante) no llevan esta regla: nunca llegan a activarse. */
.nexo-lp .nexo-viz-charger-card:nth-child(1){animation-delay:0s;}
.nexo-lp .nexo-viz-charger-card:nth-child(2){animation-delay:4.333s;}
.nexo-lp .nexo-viz-charger-card:nth-child(3){animation-delay:8.667s;}
.nexo-lp .nexo-viz-charger-card:nth-child(4){animation-delay:13s;}
.nexo-lp .nexo-viz-charger-card:nth-child(5){animation-delay:17.333s;}
.nexo-lp .nexo-viz-charger-card:nth-child(6){animation-delay:21.667s;}
.nexo-lp .nexo-viz-charger-card:nth-child(n+7){animation:none;}
@keyframes nexoChargerPick{
  0%{border-color:transparent; box-shadow:0 0 0 0 rgba(0,194,105,0);}
  4%{border-color:#00C269; box-shadow:0 0 0 4px rgba(0,194,105,.14);}
  11%{border-color:#00C269; box-shadow:0 0 0 4px rgba(0,194,105,.14);}
  16.67%, 100%{border-color:transparent; box-shadow:0 0 0 0 rgba(0,194,105,0);}
}
/* el circulo de "toque" — mismo lenguaje visual que el anillo del paso 2
   (nexoNfcAnillo), pero UN solo circulo y disparado una vez por parada en
   vez de en bucle propio, sincronizado con el mismo reloj de 26s */
/* el "toque" ya no es un circulito flotando por encima: visto en
   navegador, se plantaba justo encima del nombre o de las tarifas segun
   creciera la tarjeta. Ahora es la propia tarjeta la que emite un aro
   con su misma forma, que se expande y se apaga — no puede taparle el
   texto a nada porque siempre va por fuera del contenido. */
.nexo-lp .nexo-viz-charger-tap{
  position:absolute;
  inset:0;
  width:auto; height:auto;
  border-radius:16px;
  border:1.5px solid var(--nexo-accent);
  opacity:0;
  pointer-events:none;
  animation:nexoChargerTap 26s var(--nexo-ease) infinite;
}
.nexo-lp .nexo-viz-charger-card:nth-child(1) .nexo-viz-charger-tap{animation-delay:0s;}
.nexo-lp .nexo-viz-charger-card:nth-child(2) .nexo-viz-charger-tap{animation-delay:4.333s;}
.nexo-lp .nexo-viz-charger-card:nth-child(4) .nexo-viz-charger-tap{animation-delay:13s;}
.nexo-lp .nexo-viz-charger-card:nth-child(5) .nexo-viz-charger-tap{animation-delay:17.333s;}
.nexo-lp .nexo-viz-charger-card:nth-child(6) .nexo-viz-charger-tap{animation-delay:21.667s;}
@keyframes nexoChargerTap{
  0%{opacity:0; transform:scale(.99);}
  2%{opacity:.85; transform:scale(1);}
  9%{opacity:0; transform:scale(1.05);}
  16.67%, 100%{opacity:0; transform:scale(.99);}
}
.nexo-lp .nexo-viz-charger-card--busy{background:#F1F5F9; border-color:#E2E8F0; animation:none;}
.nexo-lp .nexo-viz-charger-card--busy p.nexo-viz-dur-charger-name{color:#334155;}
/* la tarifa aparece con el mismo cargador que se resalta y se pliega
   otra vez al deseleccionarse — mismo reloj de 26s, mismos delays
   positivos que el borde y el circulo. max-height en vez de height
   porque el contenido real (dos lineas) es fijo y conocido, no hace
   falta medirlo. */
.nexo-lp .nexo-viz-charger-rates-wrap{
  max-height:0;
  opacity:0;
  overflow:hidden;
  animation:nexoChargerRates 26s var(--nexo-ease) infinite;
}
.nexo-lp .nexo-viz-charger-rates-wrap .nexo-viz-dur-rates{padding-top:.6rem;}
.nexo-lp .nexo-viz-charger-card:nth-child(1) .nexo-viz-charger-rates-wrap{animation-delay:0s;}
.nexo-lp .nexo-viz-charger-card:nth-child(2) .nexo-viz-charger-rates-wrap{animation-delay:4.333s;}
.nexo-lp .nexo-viz-charger-card:nth-child(4) .nexo-viz-charger-rates-wrap{animation-delay:13s;}
.nexo-lp .nexo-viz-charger-card:nth-child(5) .nexo-viz-charger-rates-wrap{animation-delay:17.333s;}
.nexo-lp .nexo-viz-charger-card:nth-child(6) .nexo-viz-charger-rates-wrap{animation-delay:21.667s;}
@keyframes nexoChargerRates{
  0%{max-height:0; opacity:0;}
  4%{max-height:5rem; opacity:1;}
  11%{max-height:5rem; opacity:1;}
  16.67%, 100%{max-height:0; opacity:0;}
}
.nexo-lp .nexo-viz-charger-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  /* nowrap: con wrap, los nombres largos ("Pole Pro B7") mandaban la
     pastilla a una segunda linea y unas tarjetas quedaban mas altas que
     otras — visto en navegador. Cabe de sobra en los ~262px utiles. */
  flex-wrap:nowrap;
}
.nexo-lp .nexo-viz-charger-meta{display:flex; flex-direction:column; gap:.2rem;}
.nexo-lp p.nexo-viz-charger-id{
  margin:0;
  font-size:.68em;
  font-weight:700;
  color:#64748B;
}

/* paso 2: pantalla de app — cargador + tarifas + stepper + total.
   Precios NO inventados (regla V2C): 0,42€/kWh, 0,05€/min, price(h)=5,80×h
   con 5,80€/1h como dato de referencia real -> 2,90/5,80/8,70€ para
   0,5/1/1,5h. Comprobacion: 1h aparcamiento=3,00€, energia=2,80€ ->
   ~6,7kW de potencia implicita, coherente con la gama Trydan/Pole Pro.
   Arquitectura de animacion (slots, no bloques enteros) documentada mas
   abajo junto a .nexo-viz-dur-slot. Pantalla: marco gris, tarjetas en
   blanco (guia 10.2). */
.nexo-lp .nexo-viz--duracion{
  background:var(--nexo-bg);
  /* el suelo real lo pone .nexo-paso .nexo-viz (50vh, mas arriba); aqui
     solo queda el minimo de emergencia para pantallas muy bajas */
  min-height:22rem;
  padding:1.2rem 1.3rem;
  align-items:stretch;
}
.nexo-lp .nexo-viz-dur-app{
  display:flex;
  flex-direction:column;
  align-items:center;
  /* space-between, no flex-start: al medir la caja en vh puede sobrar
     alto respecto al contenido, y entonces las tres piezas se reparten
     el aire (cargador arriba, stepper en medio, pie abajo pegado al
     borde, como una pantalla de movil de verdad) en vez de amontonarse
     arriba con un hueco muerto debajo */
  justify-content:space-between;
  gap:.9rem;
  width:100%;
  /* fuente propia de esta maqueta — ver el @font-face arriba del archivo */
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ya no es una tarjeta propia: la cabecera (Rectangle 2061 del spec) es
   SU PROPIA tarjeta blanca, y las tarifas van sueltas debajo sobre el
   fondo gris de la pantalla — ver .nexo-viz-dur-charger. */
.nexo-lp .nexo-viz-dur-card{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

/* cabecera: circulo + cargador seleccionado + badge — Rectangle 2061 del
   spec de Figma (18/09/2026): 369x59, blanco solido, radio 20. Aqui al
   100% del ancho de la tarjeta en vez del px fijo, porque vive en una
   columna de grid responsive, no en un frame fijo. */
.nexo-lp .nexo-viz-dur-charger{
  display:flex;
  /* NO wrap: medido en navegador (19/09/2026), la pastilla
     "Seleccionado" se iba a una segunda linea en esta columna y la
     tarjeta pasaba de ~56px a 87px. Sin envolver cabe de sobra y
     ademas queda como el diseño: nombre a la izquierda, pastilla a la
     derecha, en la misma linea. */
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  background:#FFFFFF;
  border-radius:20px;
  padding:10px 14px;
}
.nexo-lp .nexo-viz-dur-charger-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
/* circulo verde antes del nombre — "Background", 16x16, #00C269 */
.nexo-lp .nexo-viz-dur-dot{
  flex:none;
  width:8px; height:8px;
  border-radius:9999px;
  background:#00C269;
}
.nexo-lp p.nexo-viz-dur-charger-name{
  font-size:1.1em;
  font-weight:500;
  line-height:1;
  letter-spacing:-.6px;
  color:#424242;
  /* medido en navegador: sin esto "Pole Pro A1" partia en dos lineas al
     poner la fila en nowrap, y volvia a engordar la tarjeta */
  white-space:nowrap;
  /* !important: ya llevaba margin:0 y seguia viendose separacion — algo
     del tema (GeneratePress/editor) lo estaba ganando */
  margin:0 !important;
}
/* pastilla #00C269 solida, texto BLANCO a peticion expresa del usuario
   (19/09/2026) — anotado: blanco sobre #00C269 da 2,36:1, por debajo de
   los 4,5:1 de la AA para texto de este tamaño; se aplica igualmente
   porque es una decision de diseño explicita, no un olvido.
   110.3x28, padding 6px 14px, gap 6px — spec de Figma (18/09/2026). */
.nexo-lp .nexo-viz-dur-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:none;
  line-height:1;
  padding:3px 9px;
  border-radius:var(--nexo-r-pill);
  background:#00C269;
  color:#FFFFFF;
  font-size:.59em;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
/* variantes de punto y pastilla que el paso 2 no necesitaba (ahi solo
   existia el estado "seleccionado") — DESPUES de la base a proposito:
   misma especificidad (0,1,0), y con estas reglas antes de la base (como
   estaban) la base ganaba por orden y el naranja de "en uso" nunca se
   veia — tapado por el verde. Misma trampa de la guia 5.6, otra vez. */
.nexo-lp .nexo-viz-dur-dot--available{background:#10B981;}
.nexo-lp .nexo-viz-dur-dot--busy{background:#F59E0B;}
.nexo-lp .nexo-viz-dur-pill--available{background:rgba(74,222,128,.22); color:#047857;}
.nexo-lp .nexo-viz-dur-pill--busy{background:#FFEDD5; color:#EA580C;}
.nexo-lp .nexo-viz-dur-pill svg{flex:none;}

/* fila de tarifas */
.nexo-lp .nexo-viz-dur-rates{
  display:flex;
  gap:.6rem;
}
.nexo-lp .nexo-viz-dur-rate{flex:1;}
.nexo-lp p.nexo-viz-dur-rate-label{
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--nexo-body);
  margin:0 0 .3rem;
}
.nexo-lp p.nexo-viz-dur-rate-value{
  /* .92rem, no 1rem: medido en navegador, la fila de tarifas pedia
     307px dentro de una tarjeta de 258px utiles y se cortaba
     "APARCAMIENTO" por la derecha. Con esto + el separador acortado
     ("0,42 €/kWh" en vez de "0,42 € · kWh") entra con holgura. */
  font-size:.82rem;
  font-weight:700;
  color:var(--nexo-ink);
  margin:0;
  font-variant-numeric:tabular-nums;
  /* medido en navegador: "0,42 € · kWh" partia en dos lineas dentro de
     la tarjeta del paso 1 y la segunda quedaba cortada por la ventana
     de la tarifa */
  white-space:nowrap;
}

/* ciclo de estados (stepper + pie) */
.nexo-lp .nexo-viz-duracion{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
}

/* rehecho de cero (19/09/2026): la version anterior "aparecia/desaparecia"
   con opacidad, con dos fallos reales — el signo de animation-delay
   (-4s/-8s) dejaba el ORDEN mal (mostraba estado 1, 3, 2 en vez de 1, 2, 3
   siempre que los 3 valores eran distintos, como en el precio) y encima
   dejaba un hueco en blanco entre estado y estado. Sustituido por un
   contador de verdad: cada valor es una CINTA vertical (.nexo-viz-dur-track)
   con sus N estados apilados EN ORDEN mas una copia extra del primero al
   final, dentro de un .nexo-viz-dur-slot que solo enseña la altura de un
   estado (overflow:hidden). La cinta se desplaza hacia arriba con un unico
   translateY continuo — nunca desaparece nada, siempre hay numero visible,
   entrando o asentado. Al llegar a la copia extra (visualmente identica al
   primer estado) el bucle reinicia y no se nota el salto. */
.nexo-lp .nexo-viz-dur-slot{
  position:relative;
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  /* tiene que ir SIEMPRE igual que .nexo-viz-dur-num: el alto de la
     ventana es 1lh, calculado sobre ESTE font-size, no sobre el del
     hijo */
  font-size:2.1rem;
  line-height:1.2;
  height:1lh;
}
.nexo-lp .nexo-viz-dur-track{
  display:flex;
  flex-direction:column;
  animation:nexoOdometro 12s var(--nexo-ease) infinite;
}
/* el porcentaje de translateY se resuelve sobre el alto DE LA PROPIA CINTA
   (4 estados apilados), asi que -25%/-50%/-75% equivalen siempre a 1/2/3
   estados exactos sin importar el tamaño real de fuente de cada variante
   (numero, subtitulo o precio comparten este mismo @keyframes) */
@keyframes nexoOdometro{
  0%, 25%{transform:translateY(0);}
  33.3%, 58.3%{transform:translateY(-25%);}
  66.6%, 91.6%{transform:translateY(-50%);}
  100%{transform:translateY(-75%);}
}
/* stepper a tamaño real (spec Pencil, 16/09/2026): circulos 56px, cifras
   60px — antes iba a ~55% de esa escala. Los ratios internos (gap boton-
   cifra, margin-top del separador) se recalculan a partir de las medidas
   nuevas, no se dejan en el valor viejo. */
.nexo-lp .nexo-viz-dur-stepper{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
}
.nexo-lp .nexo-viz-dur-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.nexo-lp .nexo-viz-dur-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2rem; height:2rem;
  border-radius:50%;
  /* relleno, no borde: el propio color de fondo marca el borde del
     circulo (guia 10.2 — una superficie distinta, no una linea) */
  background:var(--nexo-blanco);
  color:var(--nexo-ink);
  font-size:1.1rem;
  font-weight:600;
  line-height:1;
}
.nexo-lp .nexo-viz-dur-num{
  /* ancho MINIMO (2 cifras + tabular-nums), no fijo: un width:2ch exacto
     resulto mas estrecho que el ancho real de dos digitos en Montserrat
     Bold a este tamaño y partia "01" en dos lineas ("0" / "1"). */
  min-width:2.4ch;
  white-space:nowrap;
  text-align:center;
  font-size:2.1rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--nexo-ink);
  line-height:1.2; /* line-height:1 recortaba el remate — guia 5.9 */
}
.nexo-lp .nexo-viz-dur-lbl{
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--nexo-body);
}
.nexo-lp .nexo-viz-dur-colon{
  font-size:1.7rem;
  font-weight:700;
  color:var(--nexo-linea);
  line-height:1.2;
  /* centrado con la fila de cifras, no con la columna entera. Recalculado
     al reducir el stepper: arranque = boton 2rem + gap .5rem = 2.5rem;
     fila de cifras = 2.1rem x 1.2 = 2.52rem; su centro cae en 3.76rem;
     el propio ":" mide 1.7 x 1.2 = 2.04rem, asi que margen = 3.76 - 1.02 */
  margin-top:2.74rem;
}

/* toque simulado sobre el "+" de minutos: reutiliza EXACTAMENTE el mismo
   efecto de anillos concentricos del paso 3 (mismo @keyframes,
   nexoNfcAnillo), mas pequeño, para no inventar un segundo lenguaje visual.
   Solo en los dos bloques que SUBEN la duracion (00:30->01:00->01:30); el
   ultimo bloque no lleva anillos porque ahi el ciclo ya no sube, se relaja
   de vuelta al principio (ver mas abajo). */
.nexo-lp .nexo-viz-dur-tap-ring{
  position:absolute;
  inset:0;
  margin:auto;
  width:1.6rem; height:1.6rem;
  border-radius:50%;
  border:1.5px solid var(--nexo-accent);
  opacity:0;
  pointer-events:none;
  animation:nexoNfcAnillo 4.6s var(--nexo-ease) infinite;
}
.nexo-lp .nexo-viz-dur-tap-ring:nth-of-type(2){animation-delay:2.3s;}

/* hoja blanca de fondo (spec Pencil, 16/09/2026): la mitad de abajo de la
   pantalla (total + boton) va sobre una base blanca con las esquinas de
   arriba redondeadas, no sobre el gris liso de .nexo-viz--duracion. El
   margen negativo sangra hasta los bordes del padding del abuelo
   (1.3rem lados, 1.6rem abajo); .nexo-viz recorta con overflow:hidden y
   comparte el mismo radio (--nexo-r-media), asi que encaja sin desbordar. */
.nexo-lp .nexo-viz-dur-sheet{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  width:100%;
  background:var(--nexo-blanco);
  border-radius:var(--nexo-r-media) var(--nexo-r-media) 0 0;
  padding:.85rem .9rem 1.2rem;
  margin-inline:-1.3rem;
  /* tiene que casar con el padding-bottom de .nexo-viz--duracion, mas
     arriba (bajado de 1.6rem a 1.2rem en el mismo cambio) */
  margin-bottom:-1.2rem;
}
.nexo-lp .nexo-viz-dur-footer{
  width:100%;
  /* sin min-height: medido en navegador, el contenido real ya pedia mas
     que los 92px que habia puestos, asi que el minimo no hacia nada
     salvo despistar */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  /* 10px, no 6: con el precio a 30px los remates del subtitulo y del
     precio se tocaban (visto en navegador) */
  gap:10px;
  background:#FAFAFA;
  border-radius:16px;
  padding:12px 18px;
}
.nexo-lp .nexo-viz-dur-footer-info{
  width:100%;
}
/* variantes del slot generico: el align-self del precio vive aqui porque
   el slot, no el <p>, es ahora el hijo directo del flex del pie */
.nexo-lp .nexo-viz-dur-slot--sub{display:block; width:100%; font-size:12px; line-height:16px; height:1lh;}
.nexo-lp .nexo-viz-dur-slot--price{align-self:flex-end; font-size:30px; line-height:1.2; height:1lh;}
.nexo-lp p.nexo-viz-dur-footer-caption{
  font-size:14px;
  font-weight:800;
  line-height:20px;
  color:#1E293B;
  margin:0 0 4px;
}
.nexo-lp p.nexo-viz-dur-footer-sub{
  font-size:12px;
  font-weight:500;
  line-height:16px;
  color:#64748B;
  margin:0;
  /* la ventana del slot mide 1 linea (1lh): si el texto se parte en dos,
     la segunda queda cortada */
  white-space:nowrap;
}
.nexo-lp p.nexo-viz-dur-footer-price{
  /* spec Figma pedia height:28px — recortaba el texto, guia 5.9 */
  align-self:flex-end;
  width:130px;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-size:30px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.7px;
  color:#0F172A;
  font-variant-numeric:tabular-nums;
  text-align:right;
  margin:0;
  white-space:nowrap;
}

/* CTA fuera del ciclo. #00C269 + texto blanco da 2,36:1 (falla AA 4,5:1)
   — mantenido en blanco a peticion expresa del usuario, sin cambios */
.nexo-lp .nexo-viz-dur-cta{
  width:100%;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:.9rem;
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight:700;
  background:#00C269;
  color:#FFFFFF;
  gap:8px;
  box-shadow:0 8px 20px rgba(0,194,105,.3);
  border-radius:9999px;
}
.nexo-lp .nexo-viz-dur-cta:hover,
.nexo-lp .nexo-viz-dur-cta:focus-visible{background:#00C269; color:#FFFFFF; transform:none;}
.nexo-lp .nexo-viz-dur-cta svg{flex:none;}

/* --- paso 3: lector NFC, dos anillos (no tres) y check en calma ---
   Anillos que crecen y se desvanecen, desfasados a mitad del ciclo entre
   si; la tarjeta se acerca y se retira; el check aparece justo cuando la
   tarjeta "toca" el lector. Todo en el mismo periodo de 4,6s para que
   quede sincronizado sin necesitar JS. */
.nexo-lp .nexo-viz-nfc{
  position:relative;
  width:6.5rem;
  height:6.5rem;
}
.nexo-lp .nexo-viz-nfc__pad{
  position:absolute;
  inset:0;
  margin:auto;
  z-index:2;
  width:2.75rem; height:2.75rem;
  border-radius:.65rem;
  background:var(--nexo-accent-soft);
  border:1px solid var(--nexo-accent);
}
.nexo-lp .nexo-viz-nfc__ring{
  position:absolute;
  inset:0;
  margin:auto;
  z-index:1;
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  border:1.5px solid var(--nexo-accent);
  opacity:0;
  animation:nexoNfcAnillo 4.6s var(--nexo-ease) infinite;
}
.nexo-lp .nexo-viz-nfc__ring:nth-child(2){animation-delay:2.3s;}
@keyframes nexoNfcAnillo{
  0%{transform:scale(1); opacity:.5;}
  70%{transform:scale(1.85); opacity:0;}
  100%{transform:scale(1.85); opacity:0;}
}
.nexo-lp .nexo-viz-nfc__card{
  position:absolute;
  z-index:3;
  top:.1rem; right:-.3rem;
  width:2.15rem; height:1.4rem;
  border-radius:.3rem;
  background:var(--nexo-blanco);
  border:1px solid var(--nexo-linea);
  animation:nexoNfcTarjeta 4.6s var(--nexo-ease) infinite;
}
@keyframes nexoNfcTarjeta{
  0%, 20%{transform:translate(.9rem,-.9rem); opacity:0;}
  38%{transform:translate(.9rem,-.9rem); opacity:1;}
  50%, 58%{transform:translate(0,0); opacity:1;}
  76%{transform:translate(.9rem,-.9rem); opacity:0;}
  100%{transform:translate(.9rem,-.9rem); opacity:0;}
}
.nexo-lp .nexo-viz-nfc__check{
  position:absolute;
  inset:0;
  margin:auto;
  z-index:4;
  width:1.4rem; height:1.4rem;
  color:var(--nexo-accent-dark);
  opacity:0;
  animation:nexoNfcCheck 4.6s var(--nexo-ease) infinite;
}
@keyframes nexoNfcCheck{
  0%, 56%{opacity:0; transform:scale(.85);}
  64%, 74%{opacity:1; transform:scale(1);}
  86%, 100%{opacity:0; transform:scale(.85);}
}

/* --- reduced motion: el ESTADO se queda correcto, solo se apaga el
   movimiento (guia 6.12) — nunca una tarjeta a medio camino o un anillo a
   medio desvanecer. --- */
@media (prefers-reduced-motion:reduce){
  .nexo-lp .nexo-viz-chargers-list{
    height:auto; max-height:23rem; overflow-y:auto;
    -webkit-mask-image:none; mask-image:none;
  }
  .nexo-lp .nexo-viz-chargers-track{animation:none; transform:none;}
  .nexo-lp .nexo-viz-charger-card{animation:none;}
  .nexo-lp .nexo-viz-charger-card:first-child{border-color:#00C269;}
  .nexo-lp .nexo-viz-charger-tap{animation:none; opacity:0;}
  /* el stepper se congela en el bloque 01:00 / 5,80€ — cifras y precio
     del MISMO bloque estatico, nunca a medias entre dos estados, y el
     anillo de "toque" se apaga del todo (settled, sin pulsar) */
  .nexo-lp .nexo-viz-dur-track{animation:none; transform:translateY(-25%);}
  .nexo-lp .nexo-viz-dur-tap-ring{animation:none; opacity:0;}
  .nexo-lp .nexo-viz-nfc__ring{animation:none; opacity:0;}
  .nexo-lp .nexo-viz-nfc__card{animation:none; transform:translate(0,0); opacity:1;}
  .nexo-lp .nexo-viz-nfc__check{animation:none; opacity:1; transform:scale(1);}
}

/* --- 3. V2C Payments ---
   Fondos alternados a partir de aqui (peticion expresa, 19/09/2026):
   payments=crema, casos-de-uso=blanco, comparativa=crema,
   instalacion=blanco, contacto=crema (.nexo-cont, mas abajo — sustituyo
   a "cierre" en este puesto de la alternancia). La ficha tecnica se
   queda fuera del patron — oscura a proposito, no forma parte de la
   alternancia clara. */
.nexo-payments{
  background:var(--nexo-bg);
}
/* La parrilla es de la PRIMERA fila de la seccion y solo de ella, de ahi
   la clase propia. Antes colgaba de ".nexo-payments .nexo-inner" a secas
   y se defendia con un :not() de la segunda fila; en cuanto la seccion
   sumo mas .nexo-inner (la comparativa de "Activa el cobro"), ese :not()
   dejaba de cubrir y los bloques nuevos se volvian parrilla de dos
   columnas sin pedirlo. Con clase propia el problema no existe. */
.nexo-payments .nexo-payments-top{
  display:flex;
  flex-direction:column;
  gap:2.25rem;
}
/* la entradilla cierra el bloque de intro: el aire hasta la banda lo
   pone el gap del contenedor, no su margin de 2.6rem */
.nexo-lp .nexo-payments-intro .nexo-lede{margin-bottom:0; max-width:62ch;}
.nexo-lp .nexo-payments-list{list-style:none; margin:1.5rem 0 0; padding:0; padding-left:4rem; display:grid; gap:1.1rem;}
.nexo-lp .nexo-payments-list li{display:flex; gap:.8rem; font-size:.94rem; color:var(--nexo-body); line-height:1.5;}
.nexo-lp .nexo-payments-list b{color:var(--nexo-ink); display:block; font-size:.95rem;}
.nexo-lp .nexo-payments-icon{
  flex:none; width:34px; height:34px; border-radius:9px;
  background:var(--nexo-accent-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--nexo-accent-dark);
}
/* La cifra pasa a una BANDA a todo el ancho (18/09/2026), en lugar del
   panel de cuatro filas que habia antes a la derecha. Ese panel repetia
   literalmente tres de los cuatro puntos de la lista de al lado; lo
   unico suyo era el 95%, y para un dato solo no hacen falta una
   cabecera, un bloque destacado y una tabla. Mantiene el tratamiento de
   superficie del panel que sustituye: verde de cabecera y la misma
   sombra.

   Blanco sobre #00C269 da 2,36:1 y no pasa AA, igual que en el CTA del
   paso 2 y que en la cabecera del panel anterior: decision de diseño
   explicita ("el verde pop en todo, sin excepcion"), no un olvido. */
.nexo-lp .nexo-payments-banda{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.5rem 2rem;
  border-radius:var(--nexo-r-media);
  background:var(--nexo-accent);
  color:var(--nexo-blanco);
  box-shadow:0 1px 3px rgba(30,36,34,.05), 0 14px 40px -12px rgba(30,36,34,.16);
}
.nexo-lp .nexo-payments-banda-id{display:flex; align-items:center; gap:.9rem;}
.nexo-lp .nexo-payments-banda-ic{
  box-sizing:content-box; flex:none;
  width:20px; height:20px; padding:9px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.nexo-lp .nexo-payments-banda-id b{display:block; font-size:1.05rem; font-weight:600; line-height:1.3;}
.nexo-lp .nexo-payments-banda-id span{display:block; font-size:.85rem; color:rgba(255,255,255,.85); line-height:1.4;}
.nexo-lp .nexo-payments-banda-num{
  margin:0; flex:none;
  font-size:3.25rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}
.nexo-lp .nexo-payments-banda-num span{font-size:1.65rem; font-weight:600;}
@media (max-width:640px){
  .nexo-lp .nexo-payments-banda{flex-direction:column; align-items:flex-start; gap:1rem;}
}

/* Los cuatro puntos, en FILA de cuatro y con el icono encima del titulo
   (no al lado, como en .nexo-payments-list): en columna ocupaban el alto
   que justificaba la parrilla de dos columnas, que es justo lo que se
   queria quitar. Conserva la sangria de 4rem de las intros alineadas a
   la izquierda. */
.nexo-lp .nexo-payments-4{
  list-style:none; margin:0; padding:0 0 0 4rem;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem;
}
/* cada punto en su propia caja, no un panel con todos dentro (14/10/2026) */
.nexo-lp .nexo-payments-4 li{
  font-size:.9rem; line-height:1.5; color:var(--nexo-body);
  padding:1em;
  background:rgba(223,245,234,.35);   /* --nexo-accent-soft al 35% */
  border:1px solid var(--nexo-accent);
  border-radius:10px;
}
.nexo-lp .nexo-payments-4 b{
  display:block; margin:.85rem 0 .35rem;
  font-size:.95rem; font-weight:600; color:var(--nexo-ink); line-height:1.35;
}
.nexo-lp .nexo-payments-4 .nexo-payments-icon{width:38px; height:38px; border-radius:10px;}
@media (max-width:900px){ .nexo-lp .nexo-payments-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .nexo-lp .nexo-payments-4{grid-template-columns:1fr; padding-left:0;} }

/* --- "Activa el cobro en 2 pasos" ---
   La captura es una interfaz con texto de 12-14 px. En la mitad de un
   .nexo-inner de 80vw le tocaban 544 px de ancho contra un original de
   1432: nitida, pero ilegible. No era cuestion de subir la calidad del
   fichero — sobran pixeles de origen, falta tamano en pantalla. Se
   descarto la variante a ancho completo (texto arriba, captura suelta a
   90vw) en favor de esta. */

/* Se conservan las dos columnas, pero la captura va en un
   marco de navegador que SE SALE por la derecha hasta el borde de la
   pantalla. El .nexo-inner acaba a 10vw del borde, asi que el marco
   pide 10vw de mas; el overflow-x:clip del envoltorio (clip y no
   hidden: hidden obligaria al otro eje a auto y crearia un contenedor
   de scroll) se come el sobrante que meta la barra de scroll, que
   cuenta dentro de 1vw pero no dentro del ancho del documento. */
/* El margen negativo NO es para sangrar: es para mover el borde del
   recorte. El sangrado lo da el width del marco; lo que lo frenaba era
   que .nexo-cloud-c medía lo que el padding lateral de la seccion le
   dejaba, y el clip cortaba ahi. Anulando ese padding a los DOS lados
   (nunca solo a la derecha: .nexo-inner va centrado dentro y se
   descuadraria del texto de las demas secciones) el recorte se va hasta
   el borde del contenedor del tema y el marco gana ~50 px mas. */
.nexo-lp .nexo-cloud-c{overflow-x:clip; margin-inline:calc(var(--nexo-gutter) * -1);}
.nexo-lp .nexo-cloud-c-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  /* 9rem de aire con V2C Payments (antes 6rem, subido a peticion el
     18/09/2026). Hace falta MAS que antes: ahora la fila de arriba
     termina en una parrilla de cuatro columnas de texto suelto, no en
     el borde limpio de un panel, asi que con la separacion de antes las
     dos filas se leian como una sola pieza. */
  margin-top:5.5rem;
  padding-top:3.5rem;
}
@media (max-width:820px){
  .nexo-lp .nexo-cloud-c{overflow-x:visible; margin-inline:0;}
  .nexo-lp .nexo-cloud-c-grid{grid-template-columns:1fr;}
}
/* subtitular de seccion, no titulo de tarjeta: declaracion de .rc-h3 */
.nexo-lp .nexo-cloud-c-grid h3{
  font-size:clamp(1.0625rem,1.35vw,1.5rem); font-weight:500;
  line-height:1.3; letter-spacing:-.01em;
  margin:0 0 .7rem; padding-left:4rem;
}
.nexo-lp .nexo-cloud-marco{
  margin:0;
  width:calc(100% + 10vw);
  background:var(--nexo-blanco);
  border:1px solid var(--nexo-linea);
  border-radius:var(--nexo-r-media);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(30,36,34,.05), 0 24px 60px -18px rgba(30,36,34,.24);
}
@media (max-width:820px){ .nexo-lp .nexo-cloud-marco{width:100%;} }
.nexo-lp .nexo-cloud-marco img{display:block; width:100%; height:auto;}
.nexo-lp .nexo-cloud-barra{
  display:flex; align-items:center; gap:.4rem;
  padding:.6rem .9rem;
  background:var(--nexo-bg);
  border-bottom:1px solid var(--nexo-linea);
}
.nexo-lp .nexo-cloud-punto{
  width:9px; height:9px; border-radius:50%;
  background:var(--nexo-linea);
  flex:none;
}
.nexo-lp .nexo-cloud-url{
  margin-left:.7rem;
  padding:.18rem .8rem;
  border-radius:var(--nexo-r-pill);
  background:var(--nexo-blanco);
  border:1px solid var(--nexo-linea);
  font-size:.7rem; color:var(--nexo-body);
}

/* --- 5. Casos de uso ---
   La parrilla de 5 huecos "foto pendiente" se sustituye por una sola
   foto (real, 19/09/2026), mismo patron que el hero: la foto ocupa MAS
   ancho que el texto de arriba (90vw contra el 80vw estandar de
   .nexo-inner), no el mismo ancho — peticion expresa "como el hero". */
.nexo-lp .nexo-casos-foto{
  /* crece al bajar, mismo mecanismo que el hero (data-nexo-crece-vista
     en nexo-lp.js) — interpola el ancho entre 75vw en reposo y los
     90vw finales */
  --abre:0;
  --nexo-casos-foto-ini:75vw;
  --nexo-casos-foto-fin:90vw;
  width:calc(var(--nexo-casos-foto-ini) + (var(--nexo-casos-foto-fin) - var(--nexo-casos-foto-ini)) * var(--abre));
  margin:1.5rem auto 0;
  padding:0;
  overflow:hidden;
  aspect-ratio:1.9/1;
}
.nexo-lp .nexo-casos-foto img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}
.nexo-lp .nexo-casos-usos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem;
  /* sin borde (guia 10.2), margin+padding ajustados a la baja por el mismo
     motivo que en la segunda fila de V2C Payments. */
  margin-top:2.2rem;
  padding-top:1.8rem;
}
@media (max-width:760px){ .nexo-lp .nexo-casos-usos{grid-template-columns:1fr;} }
.nexo-lp .nexo-uso h3{
  display:flex; align-items:center; gap:.55rem;
  font-size:1.0625rem; font-weight:600; margin:0 0 .4rem;
}
.nexo-lp .nexo-uso-icon{flex:none; width:19px; height:19px; color:var(--nexo-accent);}
.nexo-lp .nexo-uso p{font-size:.88rem; color:var(--nexo-body); margin:0; line-height:1.55;}

/* --- 6. Comparativa --- */
.nexo-comparativa{background:var(--nexo-bg);}
#casos-de-uso.nexo-lp{background:var(--nexo-blanco);}
#instalacion.nexo-lp{background:var(--nexo-blanco);}
/* mismo lenguaje visual que la tabla de 10-landing-recarga-colectiva
   (rc-lp.css, "LA COMPARATIVA"): tarjeta blanca con sombra en vez de
   borde fino, filas alternas en vez de lineas divisorias, insignia
   circular junto al encabezado de columna. RC no destaca ninguna
   columna (sus dos modelos son alternativas simetricas, comentario
   propio en su CSS) — aqui SI hay un ganador (Nexo), asi que ese tinte
   de columna se queda, pero pasa a cubrir TODAS las filas por igual
   (antes solo se activaba junto con el reveal; ahora es fijo, para que
   no compita con el rayado de cebra en las filas pares/impares). */
.nexo-lp .nexo-tabla-wrap{
  border-radius:var(--nexo-r-media);
  overflow-x:auto; overflow-y:hidden;
  background:var(--nexo-blanco);
  box-shadow:0 2px 6px rgba(30,36,34,.05), 0 18px 44px -22px rgba(30,36,34,.26);
}
.nexo-lp table.nexo-tabla{
  width:100%; border-collapse:collapse; min-width:560px;
  font-size:.9rem;
}
.nexo-lp table.nexo-tabla th, .nexo-lp table.nexo-tabla td{
  padding:1.1rem 1.4rem;
  text-align:left;
  vertical-align:top;
}
/* cabecera diferenciada del cuerpo (antes se leia casi igual que una
   fila mas) — fondo propio + una linea de separacion mas marcada que
   el rayado de cebra de las filas */
.nexo-lp table.nexo-tabla thead th{
  padding:1.3rem 1.4rem 1.1rem;
  background:var(--nexo-bg);
  border-bottom:2px solid var(--nexo-linea);
  font-size:.98rem;
  font-weight:700;
  color:var(--nexo-ink);
  vertical-align:bottom;
}
.nexo-lp table.nexo-tabla thead th .nexo-tabla-badge{
  display:inline-grid; place-items:center; margin-right:.5rem;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--nexo-accent); color:#FFFFFF;
  font-size:.76rem; font-weight:700;
}
/* insignia neutra en la cabecera de TPV integrado, simetrica al check
   de Nexo — sin ella el encabezado se veia desequilibrado, un check a
   un lado y nada al otro */
.nexo-lp table.nexo-tabla thead th .nexo-tabla-badge--neutro{
  background:var(--nexo-linea); color:var(--nexo-body);
}
.nexo-lp table.nexo-tabla tbody th{font-weight:600; color:var(--nexo-ink); width:26%;}
.nexo-lp table.nexo-tabla td{color:var(--nexo-body); line-height:1.5;}
/* filas alternas en vez de bordes — el mismo recurso que RC, y que ya
   usan las filas de las tarjetas de cargador de esta misma pagina */
.nexo-lp table.nexo-tabla tbody tr:nth-child(odd) th,
.nexo-lp table.nexo-tabla tbody tr:nth-child(odd) td{background:var(--nexo-bg);}
.nexo-lp table.nexo-tabla td.nexo-col-nexo,
.nexo-lp table.nexo-tabla th.nexo-col-nexo{
  color:var(--nexo-ink);
  background:var(--nexo-accent-soft);
  box-shadow:inset 4px 0 0 var(--nexo-accent);
}
/* la respuesta de Nexo en negrita — refuerza que es la opcion buena,
   no solo el tinte de fondo lo dice */
.nexo-lp table.nexo-tabla td.nexo-col-nexo{font-weight:600;}
.nexo-lp table.nexo-tabla td.nexo-col-fused{color:var(--nexo-body); font-style:italic; background:var(--nexo-blanco);}

/* --- 7. Instalación --- */
.nexo-lp .nexo-instalacion{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem;
}
@media (max-width:760px){ .nexo-lp .nexo-instalacion{grid-template-columns:1fr;} }
.nexo-lp .nexo-modo{
  border:1px solid var(--nexo-linea);
  border-radius:var(--nexo-r-media);
  overflow:hidden;
  background:var(--nexo-blanco);
}
/* foto de cada modo de instalacion: apaisada (16/10) y a sangre dentro
   de la tarjeta. object-fit:cover -> llena la caja entera recortando lo
   que sobra, nunca deforma. La proporcion la fija la caja, no el
   archivo, asi que las dos fotos casan aunque vengan con tamaños
   distintos. */
.nexo-lp .nexo-modo-foto{
  aspect-ratio:16/10;
  border-bottom:1px solid var(--nexo-linea);
  background:var(--nexo-bg);
  overflow:hidden;
}
.nexo-lp .nexo-modo-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nexo-lp .nexo-modo-body{padding:1.5rem 1.7rem 1.8rem;}
.nexo-lp .nexo-modo-body h3{font-size:1.0625rem; font-weight:600; margin:0 0 .5rem;}
.nexo-lp .nexo-modo-body p{font-size:.875rem; color:var(--nexo-body); line-height:1.55; margin:0;}

/* --- 8. Ficha técnica (oscura) --- */
.nexo-specs{background:var(--nexo-dark-bg); color:var(--nexo-dark-ink);}
.nexo-specs .nexo-lede{color:var(--nexo-dark-body);}
.nexo-specs .nexo-kicker{color:var(--nexo-accent-light);}
.nexo-lp .nexo-specs-note{
  font-size:.82rem;
  color:var(--nexo-dark-body);
  border:1px solid var(--nexo-dark-linea);
  border-radius:10px;
  padding:.9rem 1.1rem;
  margin:0 0 2rem;
  max-width:60ch;
}
.nexo-lp .nexo-specs-note b{color:var(--nexo-dark-ink);}
.nexo-lp details.nexo-acordeon{border-top:1px solid var(--nexo-dark-linea);}
.nexo-lp details.nexo-acordeon:last-of-type{border-bottom:1px solid var(--nexo-dark-linea);}
.nexo-lp details.nexo-acordeon summary{
  cursor:pointer;
  list-style:none;
  padding:1.1rem .2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  font-size:1rem;
  color:var(--nexo-dark-ink);
}
.nexo-lp details.nexo-acordeon summary::-webkit-details-marker{display:none;}
.nexo-lp details.nexo-acordeon summary::after{
  content:"+";
  font-size:1.3rem;
  color:var(--nexo-accent-light);
  transition:transform .25s var(--nexo-ease);
}
.nexo-lp details.nexo-acordeon[open] summary::after{transform:rotate(45deg);}
/* Ficha tecnica en fichas: icono, que es y su valor (27/10/2026, sustituye a los acordeones) */
.nexo-lp .nexo-specs-grid{list-style:none; margin:clamp(2rem,4vw,3rem) 0 0 4rem;   /* misma sangria que el titulo */ padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--nexo-dark-linea); border:1px solid var(--nexo-dark-linea); border-radius:var(--nexo-r-media); overflow:hidden;}
.nexo-lp .nexo-spec{margin:0; padding:1.75rem 1.5rem 1.6rem; background:var(--nexo-dark-bg); display:flex; flex-direction:column; gap:.3rem;}
.nexo-lp .nexo-spec-ico{width:44px; height:44px; margin:0 0 .9rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,194,105,.12); color:var(--nexo-accent-light);}
.nexo-lp .nexo-spec-ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.nexo-lp .nexo-spec-etq{margin:0; font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--nexo-accent-light);}
.nexo-lp .nexo-spec-val{margin:0; font-size:1.05rem; font-weight:500; line-height:1.35; color:var(--nexo-dark-ink);}
@media (max-width:960px){ .nexo-lp .nexo-specs-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:420px){ .nexo-lp .nexo-spec{padding:1.3rem 1.1rem 1.2rem;} .nexo-lp .nexo-spec-val{font-size:.95rem;} }
.nexo-lp .nexo-specs-tabla{width:100%; border-collapse:collapse; margin:0 0 1.4rem; font-size:.88rem;}
.nexo-lp .nexo-specs-tabla th, .nexo-lp .nexo-specs-tabla td{
  text-align:left;
  padding:.6rem .2rem;
  border-bottom:1px solid var(--nexo-dark-linea);
  vertical-align:top;
}
.nexo-lp .nexo-specs-tabla th{color:var(--nexo-dark-body); font-weight:500; width:42%;}
.nexo-lp .nexo-specs-tabla td{color:var(--nexo-dark-ink);}

/* --- 9/10. Contacto (sustituye a "Cierre de marca" + "CTA final",
   19/09/2026) — mismo patron que 10-landing-recarga-colectiva/rc-lp.css
   §16-17 (kicker+h2+lede a la izquierda, formulario CF7 real en tarjeta
   blanca a la derecha), con los tokens de Nexo en vez de los de RC. */
.nexo-cont{background:var(--nexo-bg);}
.nexo-lp .nexo-cont-caja{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  padding:clamp(1.4rem,3.2vw,2.25rem);
  border-radius:var(--nexo-r-media);
  background:var(--nexo-blanco);
  box-shadow:0 2px 6px rgba(30,36,34,.05), 0 18px 44px -22px rgba(30,36,34,.26);
}
@media (min-width:56rem){
  .nexo-lp .nexo-cont-grid{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    column-gap:clamp(2rem,5vw,4.5rem);
    align-items:center;
  }
  .nexo-lp .nexo-cont-caja{margin-top:0;}
}

/* El formulario en si — Contact Form 7 imprime su propio HTML en
   servidor (no esta en este archivo). Dos snippets globales del sitio
   diseñan TODOS los formularios en oscuro (texto blanco, campos negros
   con borde blanco — guia 4.13); se anula todo anclado en .nexo-form,
   incluyendo el selector por id que usa el snippet global para ganar
   especificidad (#responsive-form). */
.nexo-form #responsive-form{max-width:none; width:100%; margin:0;}
.nexo-form #responsive-form .form-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 clamp(.6rem,1.6vw,.9rem); width:100%; color:var(--nexo-body);
}
.nexo-form #responsive-form .column-half,
.nexo-form #responsive-form .column-full{float:none; width:auto; min-width:0; padding:0;}
/* el email es el tercer .column-half y va a lo ancho, igual que en RC */
.nexo-form #responsive-form .column-half:nth-child(3),
.nexo-form #responsive-form .column-full{grid-column:1 / -1;}

.nexo-form .wpcf7 p{margin:0 0 .85rem!important; font-size:.8125rem; font-weight:600; line-height:1.4; color:var(--nexo-ink);}
.nexo-form .wpcf7 .wpcf7-form-control-wrap{display:block; margin-top:.3rem;}
.nexo-form .wpcf7 input[type="text"],
.nexo-form .wpcf7 input[type="tel"],
.nexo-form .wpcf7 input[type="email"],
.nexo-form .wpcf7 textarea{
  box-sizing:border-box; width:100%; padding:.7rem .85rem;
  font:inherit; font-size:1rem; font-weight:400; line-height:1.4;
  border:1px solid var(--nexo-linea);
  border-radius:10px!important;
  background:var(--nexo-blanco); color:var(--nexo-ink);
}
.nexo-form .wpcf7 textarea{height:7.5rem; min-height:4rem; resize:vertical; line-height:1.5;}
.nexo-form .wpcf7 input::placeholder,
.nexo-form .wpcf7 textarea::placeholder{color:var(--nexo-body); opacity:1;}
.nexo-form .wpcf7 input[type="text"]:focus,
.nexo-form .wpcf7 input[type="tel"]:focus,
.nexo-form .wpcf7 input[type="email"]:focus,
.nexo-form .wpcf7 textarea:focus{
  outline:none; border-color:var(--nexo-accent);
  box-shadow:0 0 0 3px rgba(12,107,68,.16);
}

.nexo-form .wpcf7 input[type="submit"]{
  box-sizing:border-box; width:100%; margin-top:.35rem;
  padding:.9rem 1.6rem;
  border:1px solid var(--nexo-accent); border-radius:var(--nexo-r-pill)!important;
  background:var(--nexo-accent); color:#fff;
  font:inherit; font-size:1rem; font-weight:600; cursor:pointer;
}
.nexo-form .wpcf7 input[type="submit"]:focus-visible{outline:2px solid var(--nexo-accent); outline-offset:3px;}

.nexo-form .wpcf7 .wpcf7-not-valid-tip{margin-top:.3rem; font-size:.8125rem; font-weight:400; color:#C22B24;}
.nexo-form .wpcf7 .wpcf7-not-valid{border-color:#C22B24;}
.nexo-form .wpcf7 .wpcf7-response-output{display:none;}
.nexo-form .wpcf7 form.sent .wpcf7-response-output,
.nexo-form .wpcf7 form.invalid .wpcf7-response-output,
.nexo-form .wpcf7 form.unaccepted .wpcf7-response-output,
.nexo-form .wpcf7 form.spam .wpcf7-response-output,
.nexo-form .wpcf7 form.failed .wpcf7-response-output,
.nexo-form .wpcf7 form.aborted .wpcf7-response-output{
  display:block;
  margin:1rem 0 0!important; padding:.8rem 1rem!important;
  border:0!important; border-radius:var(--nexo-r-media);
  font-size:.875rem; line-height:1.5;
  background:var(--nexo-bg); color:var(--nexo-ink);
}
.nexo-form .wpcf7 form.sent .wpcf7-response-output{background:var(--nexo-accent-soft);}
.nexo-form .wpcf7 form.invalid .wpcf7-response-output,
.nexo-form .wpcf7 form.unaccepted .wpcf7-response-output,
.nexo-form .wpcf7 form.spam .wpcf7-response-output,
.nexo-form .wpcf7 form.failed .wpcf7-response-output,
.nexo-form .wpcf7 form.aborted .wpcf7-response-output{background:#FBEFEE;}
/* El velo de carga, en claro (18/09/2026). Lo monta el snippet global 7
   ("Summit cf7") con JS al enviar: mete un .cf7-overlay dentro del .wpcf7
   y le pone un .cf7-spinner. De fabrica es un velo NEGRO al 70% con el
   aro blanco, pensado para los formularios oscuros del resto del sitio;
   sobre esta tarjeta blanca cae como un telon.

   Se puede revestir desde CSS sin pelearse con nada porque ese JS solo
   toca "display" en linea: el color no lo pone el elemento, lo pone su
   hoja, y basta una clase mas (.nexo-form) para ganarle.

   El aro NO se queda blanco: sobre un velo blanco no se veria. Pasa al
   verde de la pagina, con el resto del circulo en la linea gris de
   siempre para que se lea el giro. */
.nexo-form .cf7-overlay{
  background:rgba(255,255,255,.86);
  border-radius:var(--nexo-r-media);
}
.nexo-form .cf7-spinner{
  border:5px solid var(--nexo-linea);
  border-top:5px solid var(--nexo-accent);
}
.nexo-form .grecaptcha-badge{display:none;}

@media (max-width:32rem){
  .nexo-form #responsive-form .form-row{grid-template-columns:1fr;}
  .nexo-form #responsive-form .column-half:nth-child(3),
  .nexo-form #responsive-form .column-full{grid-column:1;}
}

/* --- MOVIL: sin sangrias ni anchos de escritorio (14/10/2026) ---
   En escritorio las intros llevan 4rem de sangria y las cajas un 80vw de
   ancho; en movil eso sumado al gutter dejaba el texto metido ~80px y con
   el ancho comido. Aqui el texto arranca en el gutter y usa todo el ancho.
   Va al FINAL del archivo a proposito: las reglas de escritorio de arriba
   tienen la misma especificidad y gana la ultima. */
@media (max-width:820px){
  .nexo-lp{--nexo-gutter:2rem;}
  .nexo-lp .nexo-inner{max-width:none;}
  .nexo-lp .nexo-kicker,
  .nexo-lp .nexo-kicker + h2,
  .nexo-lp .nexo-lede,
  .nexo-lp .nexo-cloud-c-grid h3{padding-left:0;}
  .nexo-lp .nexo-specs-grid{margin-left:0;}
  .nexo-lp .nexo-payments-list{padding-left:0;}
  .nexo-lp .nexo-payments-4{padding-left:0;}
  .nexo-lp .nexo-paso-num,
  .nexo-lp .nexo-paso h3,
  .nexo-lp .nexo-paso p{padding-inline:0;}
  .nexo-lp .nexo-pasos{gap:3rem;}
  /* Tabla comparativa: entera en pantalla, SIN desplazar. En escritorio
     lleva min-width:560px y por eso en movil se salia; aqui las tres
     columnas se reparten el ancho, con texto mas pequeno y menos relleno. */
  .nexo-lp table.nexo-tabla{min-width:0; table-layout:fixed; font-size:.8rem;}
  .nexo-lp table.nexo-tabla th, .nexo-lp table.nexo-tabla td{
    padding:.75rem .6rem; overflow-wrap:anywhere; hyphens:auto;
  }
  .nexo-lp table.nexo-tabla thead th{padding:.9rem .6rem .75rem; font-size:.85rem;}
  .nexo-lp table.nexo-tabla thead th .nexo-tabla-badge{
    width:1.2rem; height:1.2rem; margin-right:.3rem; font-size:.65rem;
  }
  .nexo-lp table.nexo-tabla thead th:nth-child(1), .nexo-lp table.nexo-tabla tbody th{width:32%; font-size:.74rem;}
  .nexo-lp table.nexo-tabla thead th:nth-child(2){width:26%;}
  .nexo-lp table.nexo-tabla td.nexo-col-nexo,
  .nexo-lp table.nexo-tabla th.nexo-col-nexo{box-shadow:inset 3px 0 0 var(--nexo-accent);}
  /* Activa el cobro: la captura va ARRIBA y el texto debajo */
  .nexo-lp .nexo-cloud-c-grid .nexo-cloud-marco{order:-1;}
}

/* ==========================================================================
   Simulador del terminal Nexo (seccion «Como funciona»).
   La pantalla mide 450 x 750, como en los disenos de Pencil (08-nexo), y se
   escala entera con transform para caber en el ancho disponible. Todas las
   medidas de dentro (.nxs-lienzo) son las del diseno, en px de ese lienzo.
   Todo lleva el prefijo nxs- para no chocar con el tema ni con la landing.
   ========================================================================== */

.nxs {
  --nxs-fondo: #F8F8F8;
  --nxs-tinta: #1A1C1C;
  --nxs-verde: #00C269;
  --nxs-verde-titulo: #0E9F6E;
  --nxs-verde-borde: #00C37A;
  --nxs-gris: #737373;
  --nxs-gris-claro: #A3A3A3;
  --nxs-linea: #EAEAEA;
  --nxs-sombra: 0 8px 26.25px rgba(0, 0, 0, .02);
  display: grid;
  grid-template-columns: minmax(0, 404px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 880px) {
  .nxs { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; }
  .nxs-panel { max-width: 520px; width: 100%; }
}

/* ---- El aparato ---- */
.nxs-dispositivo {
  width: 100%;
  max-width: 404px;
  padding: 12px;
  border-radius: 36px;
  background: #15181A;
  box-shadow: 0 30px 60px -20px rgba(16, 24, 20, .35), 0 2px 6px rgba(16, 24, 20, .15);
}
.nxs-pantalla {
  position: relative;
  width: 100%;
  aspect-ratio: 450 / 750;
  overflow: hidden;
  overflow: clip;
  border-radius: 24px;
  background: var(--nxs-fondo);
  isolation: isolate;
}
.nxs-lienzo {
  position: absolute;
  left: 0; top: 0;
  width: 450px; height: 750px;
  transform-origin: 0 0;
  transform: scale(var(--nxs-k, .84));
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  color: var(--nxs-tinta);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nxs-lienzo *, .nxs-lienzo *::before, .nxs-lienzo *::after { box-sizing: border-box; }
.nxs-lienzo p, .nxs-lienzo h3 { margin: 0; padding: 0; }
.nxs-lienzo button {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  font: inherit; color: inherit; text-transform: none; letter-spacing: normal;
  line-height: normal; min-height: 0; min-width: 0; border-radius: 0; cursor: pointer;
}
.nxs-lienzo button:focus-visible { outline: 3px solid var(--nxs-verde-borde); outline-offset: 2px; }
.nxs-lienzo svg { display: block; }

/* ---- Pantallas y paso entre ellas ---- */
.nxs-scr {
  position: absolute; inset: 0;
  background: var(--nxs-fondo);
  opacity: 1;
  transition: opacity .22s cubic-bezier(0.37, 0, 0.63, 1);
}
.nxs-scr.is-entrando { opacity: 0; }
.nxs-scr.is-saliendo { opacity: 0; pointer-events: none; }

/* ---- Cabecera comun ---- */
.nxs-cab {
  position: absolute; left: 24px; top: 23px; width: 402px; height: 46px;
  display: flex; align-items: center; gap: 24px;
}
.nxs-atras { width: 32px; height: 44px; margin: 0 -12px 0 -12px; display: grid; place-items: center; flex: none; }
.nxs-cab-titulo { flex: 1; min-width: 0; font-size: 24px; font-weight: 400; letter-spacing: -0.8px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxs-cab-titulo.is-largo { font-size: 19px; letter-spacing: -0.5px; }
.nxs-cab-id { flex: 1; font-size: 20px; font-weight: 600; line-height: .9; color: var(--nxs-gris-claro); }
.nxs-logo { width: 51px; height: 22px; flex: none; margin-left: auto; }
.nxs-logo svg { width: 51px; height: 22px; }

/* ---- Botones ---- */
.nxs-btn {
  position: absolute; left: 20px; top: 666px; width: 410px; height: 64px;
  border-radius: 9999px !important; background: var(--nxs-verde) !important; color: #fff !important;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: 1.5px !important;
  display: grid; place-items: center; text-align: center; text-transform: uppercase !important;
  transition: transform .12s ease, filter .12s ease;
}
.nxs-btn:active { transform: scale(.98); filter: brightness(.95); }
.nxs-btn-texto {
  position: absolute; left: 50%; top: 676px; height: 44px; padding: 0 22px !important;
  transform: translateX(-50%);
  font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1px !important; color: var(--nxs-gris) !important; text-transform: uppercase !important;
}
.nxs-fundido { position: absolute; left: 0; top: 650px; width: 450px; height: 100px; pointer-events: none;
  background: linear-gradient(rgba(248, 248, 248, 0), var(--nxs-fondo) 60%); }

/* ---- Inicio ---- */
.nxs-inicio-fondo { position: absolute; inset: 0; }
.nxs-inicio-fondo > svg { width: 450px; height: 750px; }
.nxs-pulsable { transform-box: view-box; transform-origin: 225px 292px; transition: transform .12s cubic-bezier(0.3, 0, 0.7, 1); }
.nxs-pulsable.is-hundido { transform: scale(.97); }
.nxs-arco-inicio { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s cubic-bezier(0.37, 0, 0.63, 1); }
.nxs-arco-inicio.is-visible { opacity: 1; }
.nxs-arco-inicio .nxs-gira { transform-box: view-box; transform-origin: 225px 292px; animation: nxs-gira 1.8s linear infinite; }
@keyframes nxs-gira { to { transform: rotate(360deg); } }
.nxs-tocar { position: absolute; inset: 0; width: 450px; height: 750px; }
.nxs-idioma-btn {
  position: absolute; left: 24px; top: 24px; width: 82px; height: 44px; z-index: 2;
  background: #fff !important; border-radius: 10px !important; padding: 12px !important;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--nxs-sombra);
}
.nxs-idioma-btn .nxs-bandera { width: 30px; height: 20px; border-radius: 3px; overflow: hidden; flex: none; }
.nxs-idioma-btn span { font-size: 15px; font-weight: 700; color: var(--nxs-tinta); }
.nxs-bandera svg { width: 100%; height: 100%; }
.nxs-p-inicio .nxs-logo { position: absolute; left: 375px; top: 35px; }
.nxs-titulo-inicio {
  position: absolute; left: 73px; top: 462px; width: 301px;
  font-size: 31px; font-weight: 500; line-height: 1.08; letter-spacing: -0.8px; color: var(--nxs-verde-titulo);
  text-align: center; transition: opacity .2s ease; pointer-events: none;
}
.nxs-titulo-inicio.is-oculto { opacity: 0; }
.nxs-aviso-cable {
  position: absolute; left: 20px; top: 624px; width: 410px; height: 80px; pointer-events: none;
  background: #fff; border-radius: 16px; padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--nxs-sombra);
}
.nxs-insignia { width: 44px; height: 44px; border-radius: 50%; background: var(--nxs-verde-titulo); display: grid; place-items: center; flex: none; }
.nxs-insignia svg { width: 24px; height: 24px; }
.nxs-aviso-cable p { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--nxs-verde-titulo); }

/* ---- Idioma ---- */
.nxs-lista-idiomas { position: absolute; left: 20px; top: 100px; width: 410px; display: flex; flex-direction: column; gap: 16px; }
.nxs-fila-idioma {
  width: 410px; height: 64px; padding: 0 16px !important; background: #fff !important; border-radius: 16px !important;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--nxs-sombra) !important; text-align: left;
}
.nxs-fila-idioma.is-elegido { box-shadow: inset 0 0 0 2px var(--nxs-verde-borde), var(--nxs-sombra) !important; }
.nxs-fila-idioma .nxs-bandera { width: 42px; height: 28px; border-radius: 4px; overflow: hidden; flex: none; }
.nxs-fila-idioma .nxs-nombre { flex: 1; font-size: 20px; font-weight: 700; color: var(--nxs-tinta); }
.nxs-radio { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px #D4D4D4; display: grid; place-items: center; flex: none; }
.is-elegido .nxs-radio { box-shadow: inset 0 0 0 2px var(--nxs-verde-borde); }
.is-elegido .nxs-radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--nxs-verde-borde); }

/* ---- Listado de cargadores ---- */
.nxs-lista {
  position: absolute; left: 0; top: 80px; width: 450px; height: 670px; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 20px 110px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: none;
}
.nxs-lista::-webkit-scrollbar { display: none; }
.nxs-cargador {
  flex: none; width: 410px; height: 96px; padding: 16px !important; border-radius: 16px !important;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  background: #fff !important; box-shadow: var(--nxs-sombra) !important; transition: transform .12s ease;
}
.nxs-cargador:active { transform: scale(.985); }
.nxs-cargador.is-ocupado { background: transparent !important; box-shadow: inset 0 0 0 1px var(--nxs-linea) !important; cursor: default; }
.nxs-cargador.is-ocupado:active { transform: none; }
.nxs-cargador.is-elegido { box-shadow: inset 0 0 0 2px var(--nxs-verde-borde), var(--nxs-sombra) !important; cursor: default; }
.nxs-cargador.is-elegido:active { transform: none; }
.nxs-cargador b { font-size: 25px; font-weight: 700; line-height: 1.12; color: var(--nxs-tinta); }
.nxs-fila { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nxs-cod { font-size: 20px; font-weight: 600; line-height: .9; color: var(--nxs-gris-claro); }
.nxs-pastilla { display: inline-flex; align-items: center; gap: 8px; height: 23px; padding: 4px 8px; border-radius: 9999px; font-size: 14px; font-weight: 700; line-height: 15px; white-space: nowrap; }
.nxs-pastilla svg { width: 15px; height: 15px; }
.nxs-pastilla.is-FREE { background: #61FAAB; color: #007145; padding-left: 4px; }
.nxs-pastilla.is-BUSY { background: #FFD27A; color: #7A3B00; }
.nxs-pastilla.is-OFFLINE, .nxs-pastilla.is-UNAVAILABLE { background: #F1F1F1; color: #B6B6B6; }
.nxs-desliza {
  position: absolute; left: 50%; top: 709px; transform: translateX(-50%); height: 23px; padding: 4px 12px; border-radius: 9999px;
  background: #fff; font-size: 12px; font-weight: 500; color: var(--nxs-gris); white-space: nowrap; pointer-events: none; transition: opacity .2s;
}
.nxs-desliza.is-oculto { opacity: 0; }
.nxs-fundido-arriba { position: absolute; left: 0; top: 0; width: 450px; height: 88px; pointer-events: none; background: linear-gradient(var(--nxs-fondo) 70%, rgba(248, 248, 248, 0)); }

/* ---- Tarifas ---- */
.nxs-tarifas { position: absolute; left: 20px; top: 100px; width: 410px; display: flex; flex-direction: column; gap: 16px; }
.nxs-tarjeta { background: #fff; border-radius: 16px; box-shadow: var(--nxs-sombra); }
.nxs-energia { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.nxs-etq { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .6px; color: var(--nxs-tinta); }
.nxs-etq svg { width: 22px; height: 22px; }
.nxs-precio { display: flex; align-items: flex-end; gap: 3px; }
.nxs-precio b { font-size: 72px; font-weight: 800; line-height: 1.1; color: var(--nxs-tinta); letter-spacing: -1px; }
.nxs-precio span { font-size: 18px; font-weight: 600; color: var(--nxs-gris-claro); margin-bottom: 12px; }
.nxs-ayuda { font-size: 14px; font-weight: 500; color: var(--nxs-gris); }
.nxs-dos { display: flex; gap: 12px; }
.nxs-dos .nxs-tarjeta { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.nxs-dos .nxs-etq { font-size: 13px; }
.nxs-dos .nxs-etq svg { width: 20px; height: 20px; }
.nxs-dos .nxs-precio b { font-size: 38px; }
.nxs-dos .nxs-precio span { font-size: 14px; margin-bottom: 6px; }
.nxs-dos .nxs-ayuda { font-size: 12px; }
.nxs-siguiente { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--nxs-linea); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.nxs-siguiente-cab { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--nxs-tinta); }
.nxs-siguiente-cab svg { width: 16px; height: 16px; }
.nxs-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nxs-tres > div { display: flex; flex-direction: column; gap: 4px; }
.nxs-tres .nxs-etq { font-size: 11px; letter-spacing: .5px; color: var(--nxs-gris); gap: 4px; }
.nxs-tres .nxs-etq svg { width: 12px; height: 12px; }
.nxs-tres .nxs-precio { gap: 2px; }
.nxs-tres .nxs-precio b { font-size: 22px; letter-spacing: 0; }
.nxs-tres .nxs-precio span { font-size: 12px; margin-bottom: 3px; }

/* ---- Duracion ---- */
.nxs-reloj { position: absolute; left: 20px; top: 108px; width: 410px; height: 366px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.nxs-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nxs-mas { width: 48px; height: 48px; border-radius: 50% !important; background: #F1F1F1 !important; display: grid; place-items: center; }
.nxs-mas svg { width: 24px; height: 24px; }
.nxs-mas[disabled] { cursor: default; }
.nxs-mas[disabled] svg { opacity: .3; }
.nxs-num { font-size: 80px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--nxs-tinta); }
.nxs-col-etq { font-size: 12px; font-weight: 600; letter-spacing: .8px; color: var(--nxs-gris-claro); }
.nxs-sep { font-size: 64px; font-weight: 800; line-height: 1; color: var(--nxs-gris-claro); margin-bottom: 24px; }
.nxs-rapida { position: absolute; left: 20px; top: 497px; width: 410px; display: flex; flex-direction: column; gap: 10px; }
.nxs-rapida > p { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--nxs-gris); }
.nxs-opciones { display: flex; gap: 8px; }
.nxs-opcion { flex: 1; height: 52px; border-radius: 12px !important; background: #F1F1F1 !important; color: var(--nxs-gris) !important; font-size: 15px !important; font-weight: 700 !important; }
.nxs-opcion.is-elegido { background: #000 !important; color: #fff !important; }
.nxs-info-dur { position: absolute; left: 20px; top: 589px; width: 410px; min-height: 62px; padding: 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--nxs-linea); display: flex; align-items: center; gap: 12px; }
.nxs-info-dur svg { width: 20px; height: 20px; flex: none; }
.nxs-info-dur p { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--nxs-gris); }

/* ---- Pago (esperas, tarjeta, aceptado) ---- */
.nxs-orbe { position: absolute; left: 55px; top: 150px; width: 340px; height: 256px; }
.nxs-orbe svg { width: 340px; height: 256px; overflow: visible; }
.nxs-textos-pago { position: absolute; left: 73px; top: 400px; width: 304px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.nxs-titulo { font-size: 26px; font-weight: 500; letter-spacing: -0.6px; line-height: 1.15; color: #0E9E6E; text-wrap: balance; }
.nxs-sub { font-size: 16px; font-weight: 500; color: var(--nxs-gris); max-width: 260px; text-wrap: balance; }
.nxs-tocar-tarjeta { position: absolute; left: 0; top: 80px; width: 450px; height: 580px; }
.nxs-ondas { position: absolute; left: 225px; top: 278px; width: 0; height: 0; pointer-events: none; }
.nxs-ondas i { position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(26, 202, 129, .55); animation: nxs-onda 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.nxs-ondas i + i { animation-delay: 1.2s; }
@keyframes nxs-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* ---- Carga iniciada ---- */
.nxs-textos-carga { position: absolute; left: 73px; top: 135px; width: 304px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.nxs-qr { position: absolute; left: 73px; top: 257px; width: 304px; height: 304px; background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 13px 28.4px rgba(138, 138, 138, .25); }
.nxs-qr svg { width: 264px; height: 264px; }
.nxs-cuenta { position: absolute; left: 112px; top: 597px; width: 226px; font-size: 16px; font-weight: 500; color: #A8A8A8; text-align: center; text-wrap: balance; }

/* ---- Panel de la derecha (texto de la landing) ---- */
.nxs-panel { display: flex; flex-direction: column; gap: 22px; }
.nxs-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: nxs; }
.nxs-paso {
  counter-increment: nxs; position: relative; padding: 14px 16px 14px 60px; border-radius: 16px;
  transition: background-color .25s ease, opacity .25s ease; opacity: .55;
}
.nxs-paso::before {
  content: counter(nxs, decimal-leading-zero); position: absolute; left: 16px; top: 15px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #737373; box-shadow: inset 0 0 0 1.5px #D4D4D4;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.nxs-paso h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.nxs-paso p { margin: 0; font-size: 15px; line-height: 1.5; color: #5b6360; }
.nxs-paso.is-activo { opacity: 1; background: #fff; box-shadow: 0 8px 26px rgba(0, 0, 0, .05); }
.nxs-paso.is-activo::before { background: #00C269; color: #fff; box-shadow: none; }
.nxs-paso.is-hecho { opacity: 1; }
.nxs-paso.is-hecho::before { content: "✓"; background: #E3F9EE; color: #007145; box-shadow: none; font-size: 14px; }
.nxs-pista {
  margin: 0; min-height: 3em; display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: #0E7A55;
}
.nxs-pista[hidden] { display: none; }
.nxs-pista::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #00C269; flex: none; animation: nxs-latido 1.6s ease-in-out infinite; }
@keyframes nxs-latido { 50% { transform: scale(1.5); opacity: .5; } }
.nxs-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; color: #737373; }
.nxs-pie p { margin: 0; flex: 1 1 240px; }
.nxs-reiniciar {
  font: inherit; font-size: 13px; font-weight: 700; color: #1A1C1C; cursor: pointer;
  background: #fff; border: 1px solid #DADADA; border-radius: 9999px; padding: 8px 16px; line-height: 1.2;
}
.nxs-reiniciar:hover { border-color: #737373; }
.nxs-reiniciar:focus-visible { outline: 3px solid #00C37A; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nxs-scr, .nxs-arco-inicio, .nxs-pulsable, .nxs-titulo-inicio, .nxs-paso, .nxs-paso::before { transition: none !important; }
  .nxs-arco-inicio .nxs-gira, .nxs-ondas i, .nxs-pista::before { animation: none !important; }
  .nxs-ondas { display: none; }
}


/* ==========================================================================
   Seccion «Como funciona» con el Nexo en 3D (visor3d.js). Prefijo nx3-.
   La seccion mide 300vh y lo de dentro se queda fijo (sticky): el
   desplazamiento mueve la camara. Sin WebGL (.nx3-plano), terminal plano.
   ========================================================================== */
/* El tema pone overflow-x:hidden en html y body (contra el desplazamiento lateral). Eso convierte
   el body en un contenedor que no se desplaza y position:sticky deja de funcionar: la escena se iba
   con la pagina. clip corta igual lo que sobresale pero no crea contenedor. Solo en esta pagina. */
html:has(.nx3),body:has(.nx3){overflow-x:clip!important;overflow-y:visible!important}
#como-funciona.nx3.nexo-lp{position:relative;height:300vh;padding:0;
  background:radial-gradient(110% 85% at 68% 32%,#F2EFEF 0%,#E5E1E2 55%,#D5D1D2 100%)}
/* WordPress mete un div.wp-block-group__inner-container entre la seccion y la escena; si mide
   solo lo que la escena, el sticky no tiene recorrido. Tiene que medir lo que la seccion */
#como-funciona.nx3 > .wp-block-group__inner-container{height:100%}
/* recorrido hecho (visor3d.js): una sola pantalla */
#como-funciona.nx3.nx3-corto.nexo-lp{height:100vh}
.nx3 .nx3-fijo.nxs{position:sticky;top:0;height:100vh;overflow:hidden;display:block;margin:0}
.nx3-escena{position:absolute;inset:0}
.nx3-escena canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.nx3-libre .nx3-escena canvas{cursor:grab}   /* tactil: pan-y siempre; un dedo desplaza la pagina, dos giran el Nexo (visor3d.js) */
.nx3-libre .nx3-escena canvas:active{cursor:grabbing}

/* Pantalla viva: el simulador se pinta a 900 px (nitido al reducirlo) dentro de un marco negro del
   tamaño del cristal. Encima, un anillo negro con el canto interior difuminado: tapa los bordes que
   el navegador inclina sin suavizar y deja el borde de la pantalla recto */
.nx3-capa{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.nx3-marco{position:absolute;left:0;top:0;width:934px;height:1534px;box-sizing:border-box;padding:17px;border-radius:40px;
  background:#050506;transform-origin:0 0;pointer-events:auto;transition:opacity .25s ease;visibility:hidden}
.nx3-marco::after{content:"";position:absolute;inset:0;border-radius:40px;border:17px solid #050506;
  box-shadow:inset 0 0 9px 2px rgba(5,5,6,.9);pointer-events:none;z-index:5}
.nx3 .nx3-marco .nxs-pantalla{width:900px;border-radius:25px}

.nx3-texto{position:absolute;left:max(24px,6vw);top:50%;transform:translateY(-50%);width:min(400px,32vw);z-index:2;pointer-events:none}
.nx3-texto .nexo-kicker{margin:0 0 12px}
.nx3-texto h2{margin:0 0 14px}

/* Burbuja al lado del TPV con la pista del paso (la cambia nexo-sim.js). El pico señala la pantalla;
   si no cabe al lado (movil), va encima con el pico hacia abajo. Mientras invita, se mece */
.nx3-toca{position:absolute;left:0;top:0;width:224px;box-sizing:border-box;pointer-events:none;opacity:0;transition:opacity .5s;z-index:3;
  background:#fff;border-radius:16px;padding:13px 16px;box-shadow:0 1px 2px rgba(21,19,20,.06),0 12px 32px rgba(21,19,20,.12)}
.nx3-toca::before{content:"";position:absolute;left:-6px;top:50%;width:12px;height:12px;margin-top:-6px;background:#fff;border-radius:2px;transform:rotate(45deg)}
.nx3-toca.nx3-arriba::before{left:50%;top:auto;bottom:-6px;margin:0 0 0 -6px}
.nx3-toca .nxs-pista{min-height:0;align-items:flex-start;font:600 14px/1.45 Montserrat,sans-serif;position:relative}
.nx3-toca .nxs-pista::before{margin-top:6px}
.nx3-toca{opacity:calc(var(--nx3-llegada,0) * var(--nx3-mira,1))}
.nx3-invita .nx3-toca .nxs-pista{animation:nx3Mece 1.6s cubic-bezier(.37,0,.63,1) infinite}
.nx3-invita .nx3-toca.nx3-arriba .nxs-pista{animation:none}
@keyframes nx3Mece{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}

/* Menu: entra con el desplazamiento, al ritmo del dedo o la rueda (--nx3-llegada, visor3d.js) */
.nx3-vistas{position:absolute;left:0;right:0;bottom:max(20px,4vh);display:flex;justify-content:center;pointer-events:none;z-index:3;
  opacity:var(--nx3-llegada,0);transform:translateY(calc((1 - var(--nx3-llegada,0)) * 18px)) scale(calc(.96 + var(--nx3-llegada,0) * .04))}
.nx3-vistas{flex-direction:column;align-items:center;gap:8px}
.nx3-dedos{display:none;margin:0;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.78);font:500 12px/1.3 Montserrat,sans-serif;color:#3f3a3d;transition:opacity .4s}
@media (hover:none),(pointer:coarse){ .nx3-dedos{display:block} }
.nx3-girado .nx3-dedos{opacity:0}
.nx3-libre .nx3-barra{pointer-events:auto}
.nx3-barra{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(21,19,20,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nexo-lp .nx3-barra button{font:600 12px/1 Montserrat,sans-serif;letter-spacing:.04em;text-transform:none;color:#151314;
  background:transparent;border:0;border-radius:999px;padding:10px 16px;margin:0;cursor:pointer;box-shadow:none}
.nexo-lp .nx3-barra button:hover{background:rgba(21,19,20,.08)}
.nexo-lp .nx3-barra button[aria-pressed="true"]{background:#151314;color:#fff}
.nexo-lp .nx3-barra button:focus-visible{outline:2px solid #00C269;outline-offset:2px}
.nx3-barra .nx3-sep{width:1px;background:rgba(21,19,20,.12);margin:6px 4px}
/* Zoom: dos botones en su propia capsula, con lupa. Un clic acerca un poco; mantenido, sigue */
.nx3-zoom{display:flex;gap:2px;padding:2px;border-radius:999px;background:rgba(21,19,20,.06)}
.nexo-lp .nx3-barra .nx3-zoom button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;touch-action:none;user-select:none;-webkit-user-select:none}
.nexo-lp .nx3-barra .nx3-zoom button:hover{background:#fff}
.nexo-lp .nx3-barra .nx3-zoom button:active{background:#151314;color:#fff}
.nexo-lp .nx3-barra .nx3-zoom button:disabled{opacity:.35;cursor:default;background:transparent;color:#151314}
.nx3-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}

/* Tarjeta del pago sin contacto (visor3d.js la mueve en 3D). Negra mate, chip dorado, numeros en relieve */
.nx3-tarjeta{position:absolute;left:0;top:0;width:856px;height:540px;box-sizing:border-box;border-radius:34px;transform-origin:0 0;
  visibility:hidden;pointer-events:none;z-index:2;overflow:hidden;
  background:radial-gradient(130% 150% at 12% -10%,#3b393c 0%,#232124 42%,#141315 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.07),inset 0 3px 0 rgba(255,255,255,.07),0 40px 90px rgba(0,0,0,.38),0 8px 24px rgba(0,0,0,.25)}
.nx3-tarjeta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 60%)}
.nx3-chip{position:absolute;left:92px;top:176px;width:124px;height:96px;border-radius:16px;
  background:linear-gradient(135deg,#f0d995 0%,#c49a45 45%,#e9cd83 70%,#b38a3c 100%);box-shadow:inset 0 0 0 2px rgba(90,60,10,.35)}
.nx3-chip::before{content:"";position:absolute;inset:26px 0;border-top:2px solid rgba(90,60,10,.35);border-bottom:2px solid rgba(90,60,10,.35)}
.nx3-chip::after{content:"";position:absolute;inset:0 40px;border-left:2px solid rgba(90,60,10,.35);border-right:2px solid rgba(90,60,10,.35)}
.nx3-sin-contacto{position:absolute;right:84px;top:64px;width:72px;height:72px;fill:none;stroke:rgba(255,255,255,.5);stroke-width:4;stroke-linecap:round}
.nx3-numero{position:absolute;left:92px;bottom:118px;font:600 60px/1 Montserrat,sans-serif;letter-spacing:.09em;color:#8e8a8f;
  text-shadow:0 -2px 0 rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.16)}

@media (min-width:761px){ .nx3-vistas{left:32vw} }
@media (max-width:760px){
  .nexo-lp .nx3-barra .nx3-zoom button{padding:8px}
  .nx3-zoom button span{display:none}
  /* texto arriba, bajo la cabecera fija (16 + 80), sobre un velo del color del fondo que se funde
     hacia abajo: se lee aunque el Nexo pase por detras */
  .nx3-texto{top:0;left:0;right:0;transform:none;width:auto;padding:112px 24px 64px;
    background:linear-gradient(180deg,rgba(233,230,231,.97) 0%,rgba(233,230,231,.94) 70%,rgba(233,230,231,0) 100%)}
  .nx3-texto .nexo-lede{font-size:16px;line-height:1.5;margin:0}
  .nexo-lp .nx3-barra button{padding:9px 9px;letter-spacing:.02em}
  .nx3-barra .nx3-sep{display:none}
  /* encima de la barra flotante «Encuentra tu instalador» del tema */
  .nx3-vistas{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .nx3-toca{width:min(250px,calc(100vw - 48px))}
}
@media (prefers-reduced-motion:reduce){ .nx3-invita .nx3-toca .nxs-pista{animation:none} }

/* ---- Movil: recorrido de imagenes (secuencia.js) y el 3D a pantalla completa a peticion ---- */
.nx3-ver3d,.nx3-cerrar{display:none}
#como-funciona.nx3.nx3-secuencia.nexo-lp{height:250vh}
.nx3-secuencia .nx3-escena canvas.nx3-gl,.nx3-secuencia .nx3-barra,.nx3-secuencia .nx3-dedos{display:none}
.nx3-secuencia .nx3-texto{transition:none}
.nexo-lp.nx3-secuencia:not(.nx3-completa):not(.nx3-sin3d) .nx3-ver3d,
.nx3-secuencia:not(.nx3-completa):not(.nx3-sin3d) .nx3-ver3d{display:inline-flex;align-items:center;gap:8px;margin:0;padding:12px 20px;border:0;border-radius:999px;
  background:#151314;color:#fff;font:600 14px/1 Montserrat,sans-serif;letter-spacing:.02em;box-shadow:0 10px 28px rgba(21,19,20,.22);cursor:pointer}
.nx3-ver3d svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.nx3-secuencia.nx3-llego .nx3-ver3d{pointer-events:auto}
/* pantalla completa */
html.nx3-bloqueo:has(.nx3),html.nx3-bloqueo:has(.nx3) body{overflow:hidden!important}
.nx3.nx3-completa .nx3-fijo.nxs{position:fixed;inset:0;width:100%;height:100%;z-index:100000;
  background:radial-gradient(110% 85% at 68% 32%,#F2EFEF 0%,#E5E1E2 55%,#D5D1D2 100%)}
.nx3-completa .nx3-escena canvas.nx3-gl{display:block}
.nx3-completa .nx3-fotos,.nx3-completa .nx3-texto{display:none}
/* Movil: el Nexo y su pantalla entran fundidos cuando llega la primera imagen, no de golpe sobre el fondo */
.nx3-secuencia .nx3-fotos,.nx3-secuencia .nx3-capa{transition:opacity .7s ease}
.nx3-secuencia:not(.nx3-fotos-listas):not(.nx3-completa) .nx3-fotos,.nx3-secuencia:not(.nx3-fotos-listas):not(.nx3-completa) .nx3-capa{opacity:0}
/* Durante el recorrido la pantalla de inicio va pintada en los fotogramas y se mueve pegada al TPV; la viva
   (encima, en el mismo sitio) entra fundida al llegar al ultimo, con el Nexo ya quieto */
.nx3-secuencia:not(.nx3-completa):not(.nx3-final) .nx3-marco{opacity:0!important;visibility:hidden!important;transition:opacity .35s ease,visibility 0s linear .35s}
.nx3-secuencia.nx3-final:not(.nx3-completa) .nx3-marco{transition:opacity .35s ease}
.nx3-completa .nx3-barra{display:flex}
.nx3-completa .nx3-vistas{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.nexo-lp.nx3-completa .nx3-cerrar,.nx3-completa .nx3-cerrar{display:grid;place-items:center;position:absolute;z-index:6;right:16px;top:calc(16px + env(safe-area-inset-top,0px));
  width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:#151314;box-shadow:0 6px 20px rgba(21,19,20,.16);cursor:pointer}
.nx3-cerrar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* Cargador: el paso real (texto del HTML, para WPML) y, si se sabe, cuanto falta. Entra con 0,2 s de
   retraso para no parpadear cuando la carga es instantanea (secuencia.js) */
.nx3-carga{position:absolute;left:50%;top:52%;z-index:7;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:220px;
  padding:20px 26px 18px;border-radius:20px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 2px rgba(21,19,20,.05),0 18px 50px rgba(21,19,20,.14);pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(-50%,-50%) translateY(10px) scale(.98);
  transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s}
.nx3-carga.is-visible{opacity:1;visibility:visible;transform:translate(-50%,-50%);
  transition:opacity .45s ease .2s,transform .5s cubic-bezier(.22,1,.36,1) .2s,visibility 0s}
.nx3-carga-anillo{width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(0,194,105,.16);border-top-color:#00C269;animation:nx3Gira .9s linear infinite}
.nx3-carga-textos [data-paso]{display:none;font:600 13px/1.3 Montserrat,sans-serif;color:#2a2628;letter-spacing:.01em;text-align:center}
.nx3-carga[data-paso="fotos"] [data-paso="fotos"],.nx3-carga[data-paso="descarga"] [data-paso="descarga"],
.nx3-carga[data-paso="materiales"] [data-paso="materiales"],.nx3-carga[data-paso="pantalla"] [data-paso="pantalla"]{display:block;animation:nx3Entra .4s ease}
.nx3-carga-barra{width:140px;height:3px;border-radius:3px;background:rgba(21,19,20,.08);overflow:hidden}
.nx3-carga-barra i{display:block;height:100%;border-radius:3px;background:#00C269;transform-origin:0 50%;transform:scaleX(.04);transition:transform .35s ease}
.nx3-carga.sin-barra .nx3-carga-barra i{width:35%;transform:none;transition:none;animation:nx3Barrido 1.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes nx3Gira{to{transform:rotate(360deg)}}
@keyframes nx3Entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes nx3Barrido{0%{translate:-110% 0}100%{translate:300% 0}}
@media (min-width:761px){ .nx3:not(.nx3-completa) .nx3-carga{left:66%} }
@media (prefers-reduced-motion:reduce){ .nx3-carga-anillo,.nx3-carga.sin-barra .nx3-carga-barra i{animation:none} }
.nx3-plano .nx3-carga{display:none}

/* ---- Sin WebGL: el terminal plano, la seccion a su altura natural ---- */
#como-funciona.nx3.nx3-plano.nexo-lp{height:auto;padding-block:var(--nexo-gutter-sec,96px)}
.nx3-plano .nx3-fijo.nxs{position:relative;height:auto;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) 402px;
  gap:48px;align-items:center;max-width:1100px;margin:0 auto;padding:0 24px}
.nx3-plano .nx3-escena,.nx3-plano .nx3-vistas,.nx3-plano .nx3-tarjeta{display:none}
.nx3-plano .nx3-texto{position:static;transform:none;width:auto;padding:0;background:none;grid-column:1;grid-row:1;align-self:end}
/* la burbuja, bajo el texto y con el pico hacia el terminal */
.nx3-plano .nx3-toca{position:relative;transform:none!important;opacity:1;grid-column:1;grid-row:2;align-self:start;width:auto;max-width:400px}
.nx3-plano .nx3-toca::before{left:auto;right:-6px}
.nx3-plano .nx3-capa{position:relative;inset:auto;width:402px;height:660px;grid-column:2;grid-row:1/span 2;overflow:visible}
.nx3-plano .nx3-marco{visibility:visible;transform:scale(.43)}
@media (max-width:760px){
  .nx3-plano .nx3-fijo.nxs{grid-template-columns:minmax(0,1fr);justify-items:center}
  .nx3-plano .nx3-capa{grid-column:1;grid-row:3}
  .nx3-plano .nx3-toca::before{left:50%;right:auto;top:auto;bottom:-6px;margin:0 0 0 -6px}
  .nx3-plano .nx3-capa{width:325px;height:534px}
  .nx3-plano .nx3-marco{transform:scale(.348)}
}

/* Pausa al llegar (secuencia.js): la pagina quieta unos segundos; una linea bajo los controles marca lo que
   queda. En pantallas tactiles el overflow corta tambien la inercia del dedo */
@media (hover:none){ html.nx3-freno:has(.nx3){overflow:hidden!important} }   /* solo html: con el body oculto el sticky se suelta y la escena desaparece */
.nx3-vistas::after{content:"";position:absolute;left:50%;bottom:-10px;width:72px;height:3px;margin-left:-36px;border-radius:3px;
  background:linear-gradient(#00C269,#00C269) 0 0/0 100% no-repeat,rgba(21,19,20,.12);opacity:0;transition:opacity .3s ease;pointer-events:none}
.nx3-pausa .nx3-vistas::after{opacity:1;animation:nx3Pausa var(--nx3-pausa,2600ms) linear forwards}
@keyframes nx3Pausa{to{background-size:100% 100%,auto}}

/* Durante la pausa (secuencia.js), una invitacion encima de la pantalla: el borde late y una onda sale del
   boton de inicio. Van dentro del marco, asi que siguen a la pantalla en perspectiva (unidades del marco) */
.nx3-pulso,.nx3-mano{position:absolute;pointer-events:none;opacity:0;visibility:hidden}
.nx3-pulso{inset:-26px;border-radius:62px;border:9px solid #1FE08A;box-shadow:0 0 34px 4px rgba(0,194,105,.45)}
.nx3-pausa .nx3-pulso{visibility:visible;animation:nx3Late 1.3s cubic-bezier(.22,1,.36,1) 2}
@keyframes nx3Late{0%{opacity:0;transform:scale(.985)}25%{opacity:.95}100%{opacity:0;transform:scale(1.045)}}
/* sin yema: solo una onda verde que sale del boton de inicio (el circulo blanco tapaba el rayo) */
.nx3-mano{left:392px;top:525px;width:150px;height:150px;border-radius:50%}
.nx3-mano::after{content:"";position:absolute;inset:0;border-radius:50%;border:6px solid #1ACA81;opacity:0}
.nx3-pausa .nx3-mano{visibility:visible;opacity:1}
.nx3-pausa .nx3-mano::after{animation:nx3Onda 1.3s cubic-bezier(.22,1,.36,1) 2}
@keyframes nx3Onda{0%{opacity:0;transform:scale(.9)}12%{opacity:.9}100%{opacity:0;transform:scale(2.4)}}
@media (prefers-reduced-motion:reduce){ .nx3-pausa .nx3-pulso,.nx3-pausa .nx3-mano,.nx3-pausa .nx3-mano::after{animation:none} }