/* ==========================================================================
   NX GROWTH (13/10): la página del producto en nxhumans.com/nxgrowth, hermana
   de nxbrain/ (mismo esqueleto: barra, pie, letra y botones de base/). El color
   es el turquesa del logo de NX Growth (#00c6a0; tokens de nx-design en el
   repo de AION). Sin `filter: blur` dentro de cajas redondeadas (Safari).
   ========================================================================== */

:root {
  --marca:       #00c6a0;
  --marca-hover: #00b593;
  --marca-tinta: #006d58;
  --marca-suave: #e3f9f4;
  --marca-rojo:  #ff7a6b;
}

/* En esta página, los tokens de color de la web (azul NXHUMANS) pasan al
   turquesa de NX Growth: así los componentes compartidos (preguntas, enlaces,
   foco, cierre…) llevan su marca sin tocarlos. El tono de texto es el oliva
   del logo, que se lee sobre claro. */
body.nxgrowth {
  --nx-cyan:   #03b290;
  --nx-cyan-2: #03b290;
  --nx-blue:   #006d58;
  --nx-blue-2: #005a48;
  --nx-violet: #006d58;
  --nx-violet-2: #006d58;
  --g-brand: linear-gradient(120deg, #00c6a0 0%, #38e5c4 45%, #03b290 100%);
  --g-texto: linear-gradient(120deg, #03b290 0%, #008e72 48%, #006d58 100%);
}

/* ---------- La barra ---------- */
/* El botón del diagnóstico, en el turquesa de NX Growth (como el cobre en NX Build). */
.btn-turquesa {
  background: var(--marca); color: #14161d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 22px -10px rgba(0,198,160,0.7);
}
.btn-turquesa:hover { background: var(--marca-hover); transform: translateY(-1px); }
.nav-marca .brand-logo { height: 20px; }
.nav-marca .nav-right .btn-turquesa { padding: 10px 16px 10px 18px; font-size: 14px; }

/* ---------- El pie ---------- */
/* El remate se tiñe con el degradado turquesa del símbolo de NX Growth. */
.pie-growth .pie-logo { height: 22px; }
.pie-growth .pie-correo:hover { text-decoration-color: #03b290; }
.pie-growth .pie-remate-color {
  opacity: calc(var(--fin) * .55);
  background: linear-gradient(100deg, #00c6a0 0%, #38e5c4 40%, #03b290 70%, #006d58 100%);
  -webkit-mask: url("base/img/productos/nx-growth-positivo.svg") center / 100% 100% no-repeat;
          mask: url("base/img/productos/nx-growth-positivo.svg") center / 100% 100% no-repeat;
}

/* ---------- El hero (08/10, como NX Build) ---------- */
#hero.nx-hero { padding-top: 176px; text-align: center; }
.bh-cabeza { max-width: 980px; margin: 0 auto; }
.bh-h1 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 58px; line-height: 1.04; letter-spacing: -0.012em; color: var(--text); text-wrap: balance;
}
.bh-h1 .linea { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.bh-h1 .linea > span { display: block; animation: sube 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--paso, 0ms); }
.bh-sub { max-width: 54ch; margin: 28px auto 0; font-size: 18px; line-height: 1.625; color: var(--text-mute); text-wrap: pretty; }
.bh-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.nx-hero .nx-video { max-width: 1080px; margin: 56px auto 0; text-align: left; }
@media (max-width: 1023px) { .bh-h1 { font-size: 50px; } #hero.nx-hero { padding-top: 160px; } }
@media (max-width: 639px) { .bh-h1 { font-size: 38px; } #hero.nx-hero { padding-top: 128px; } }

/* Un punto turquesa que late: (sin uso de momento). */


/* El remate del titular, subrayado con el turquesa como un rotulador. */
.turquesa {
  background: linear-gradient(transparent 58%, var(--marca) 58%, var(--marca) 92%, transparent 92%);
  padding: 0 .06em; margin: 0 -.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- El vídeo de lanzamiento (en el hero) ---------- */
/* Un marco grafito con el vídeo dentro, como una pantalla; la portada con
   un botón turquesa. Al pulsar, el botón se va y salen los controles. */
.nx-video {
  position: relative; margin: 64px 0 0; padding: 10px;
  border-radius: 32px; background: var(--grafito); box-shadow: var(--sh-2xl);
}
.nx-video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 23px; background: #0d0f14; object-fit: cover;
}
.bv-play {
  position: absolute; inset: 10px; border: 0; border-radius: 23px; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 28px;
  background: linear-gradient(to top, rgba(10,12,16,0.5), transparent 40%);
  color: #fff; font: inherit; text-align: left;
}
/* Abajo a la izquierda, para no tapar el titular de la portada del vídeo. */
.bv-play-icono {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--marca); color: #14161d;
  box-shadow: 0 0 0 8px rgba(0,198,160,0.16), 0 20px 40px -12px rgba(0,0,0,0.6);
  transition: scale .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s;
}
.bv-play-icono svg { width: 26px; height: 26px; fill: currentColor; translate: 2px 0; }
.bv-play:hover .bv-play-icono, .bv-play:focus-visible .bv-play-icono { scale: 1.08; box-shadow: 0 0 0 13px rgba(0,198,160,0.14), 0 20px 40px -12px rgba(0,0,0,0.6); }
.bv-play:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; }
.bv-play-texto { display: grid; gap: 2px; margin-left: 18px; font-size: 17px; font-weight: 500; letter-spacing: -0.005em; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.bv-play-texto em { font-style: normal; font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,0.7); }
.nx-video.sonando .bv-play { display: none; }

/* ---------- Las secciones ---------- */
.nx-seccion { padding: 120px 0 0; }
.nx-cabeza { max-width: 760px; }
.nx-eyebrow { margin: 0 0 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.nx-cabeza h2 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance;
}
.nx-cabeza > p:last-child { margin: 20px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--text-mute); text-wrap: pretty; }

/* La cabecera a dos columnas, como el hero: el titular a la izquierda y la
   entradilla abajo a la derecha. */
.nx-cabeza-doble { max-width: none; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 56px; align-items: end; }
.nx-cabeza-doble h2 { font-size: clamp(34px, 4.1vw, 56px); }
/* Una frase por línea en pantalla ancha. */
@media (min-width: 1081px) { .nx-cabeza-doble h2 > span { display: block; white-space: nowrap; } }
.nx-cabeza-doble .nx-eyebrow { grid-column: 1 / -1; }
.nx-cabeza-doble > p:last-child { margin: 0; padding-bottom: 6px; }

/* ---------- Ajustes de sección ---------- */
#lista { padding-bottom: 120px; }
#faq .preguntas { margin-top: 0; }

@media (max-width: 860px) {
  .nx-cabeza-doble { grid-template-columns: minmax(0, 1fr); }
  .nx-cabeza-doble > p:last-child { margin-top: 20px; }
  .nx-video { margin-top: 44px; padding: 6px; border-radius: 22px; }
  .nx-video video { border-radius: 17px; }
  .bv-play { inset: 6px; border-radius: 17px; padding: 12px; }
  .bv-play-icono { width: 44px; height: 44px; box-shadow: 0 0 0 5px rgba(0,198,160,0.16); }
  .bv-play-icono svg { width: 18px; height: 18px; }
  .bv-play-texto { margin-left: 10px; font-size: 14px; }
  .nx-seccion { padding-top: 88px; }
  
  
  
  #lista { padding-bottom: 88px; }
}

/* El cierre: el de la web, con la luz en el turquesa de la marca. */
#lista .cierre::before { background: radial-gradient(closest-side, rgba(0,198,160,0.22), transparent); }
#lista .cierre-luz { background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(0,198,160,0.1), transparent 60%); }
body.nxgrowth .cierre-num { color: var(--marca); }
body.nxgrowth ::selection { background: rgba(0,198,160,0.35); }

/* La nota bajo los botones del hero. */
.bh-nota { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-mute); text-align: center; }


/* ---------- El hero: la pantalla real en el marco ---------- */
.nx-pantalla img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 23px; background: #f4f4f5;
}
/* Un halo turquesa debajo del marco, con sombra (sin filter). El hero recorta
   lo que pase de su margen de abajo (72 px; 48 en móvil): el halo tiene que
   apagarse antes, o se ve el corte en recto. */
.nx-pantalla { box-shadow: var(--sh-2xl), 0 28px 64px -28px rgba(0,198,160,0.42); }
@media (max-width: 760px) { .nx-pantalla { box-shadow: var(--sh-2xl), 0 18px 40px -20px rgba(0,198,160,0.38); } }
/* Las tarjetas que flotan sobre el marco: entran después de la pantalla. */
.hp-flota {
  position: absolute; z-index: 2; display: grid; text-align: left;
  background: #fff; border: 1px solid rgba(20,22,29,0.08); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 48px -18px rgba(20,22,29,0.35), 0 6px 14px -8px rgba(20,22,29,0.18);
  animation: hp-entra .9s cubic-bezier(0.16,1,0.3,1) both;
}
/* Solo el punto de partida: si la animación no corre, la tarjeta se ve igual. */
@keyframes hp-entra { from { opacity: 0; translate: 0 14px; } }
.hp-ia { left: -56px; bottom: 64px; width: 300px; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px 18px; animation-delay: 1.15s; }
.hp-ia-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-ia-motor { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.hp-ia-ok {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: var(--marca-suave); color: var(--marca-tinta); font-size: 12px; font-weight: 600;
}
.hp-ia-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); }
.hp-ia-pregunta { font-size: 13.5px; line-height: 1.4; font-weight: 500; color: var(--text); }
.hp-ia-respuesta { animation: hp-entra .7s cubic-bezier(0.16,1,0.3,1) 1.85s both; font-size: 13px; line-height: 1.5; color: var(--text-mute); padding-left: 10px; border-left: 2px solid var(--marca); }
.hp-ia-respuesta b { color: var(--text); font-weight: 600; }

.hp-nota { right: -44px; top: 30%; grid-template-columns: 52px auto; align-items: center; gap: 0 12px; padding: 12px 18px 12px 12px; animation-delay: 1.4s; }
.hp-anillo { grid-area: 1 / 1; width: 52px; height: 52px; rotate: -90deg; }
.hp-anillo circle { fill: none; stroke: #ececef; stroke-width: 4.5; }
.hp-anillo .hp-anillo-lleno { stroke: var(--marca); stroke-linecap: round; stroke-dasharray: 73 100; animation: hp-llena 1.6s cubic-bezier(0.16,1,0.3,1) 1.6s both; }
@keyframes hp-llena { from { stroke-dasharray: 0 100; } }
.hp-nota-num { grid-area: 1 / 1; place-self: center; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hp-nota-texto { display: grid; gap: 1px; font-size: 12.5px; line-height: 1.35; color: var(--text-mute); }
.hp-nota-texto b { font-size: 14px; font-weight: 600; color: var(--marca-tinta); }

@media (max-width: 1240px) { .hp-ia { left: -16px; } .hp-nota { right: -16px; } }
@media (max-width: 760px) {
  .hp-ia { position: relative; left: auto; bottom: auto; width: auto; margin: 12px 4px 4px; }
  .hp-nota { display: none; }
  /* En el teléfono, la pantalla del teléfono: la de escritorio no se lee. */
  .nx-pantalla img { aspect-ratio: 1170 / 1458; border-radius: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-flota, .hp-ia-respuesta, .hp-anillo .hp-anillo-lleno { animation: none; }
}
/* El marco entra sin desenfoque: un filter en una caja grande y redondeada da
   problemas en Safari (el «cuadradito» del iPad) y no repinta bien las
   tarjetas que sobresalen. Solo opacidad y subida. */
.nx-pantalla.entra { animation-name: entra-marco; }
@keyframes entra-marco { from { opacity: 0; transform: translateY(18px); } }

/* ---------- 2 · La misma pregunta, cinco IA ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pr-escena {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 48px;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px;
  padding: 10px; border-radius: 32px; background: var(--grafito); box-shadow: var(--sh-2xl);
}
/* Un brillo turquesa en la esquina del marcador: degradado, nunca blur. */
.pr-escena::before {
  content: ""; position: absolute; z-index: -1; right: -140px; top: -160px; width: 520px; height: 520px;
  background: radial-gradient(closest-side, rgba(0,198,160,0.22), rgba(0,198,160,0.06) 55%, transparent);
}
.pr-chat {
  display: grid; grid-template-rows: auto 1fr auto; min-height: 372px;
  border-radius: 23px; background: #fff; overflow: hidden;
}
.pr-motores { list-style: none; margin: 0; padding: 14px 16px 0; display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.pr-motor {
  position: relative; padding: 9px 12px 13px; font-size: 13.5px; font-weight: 500; color: var(--text-mute);
  white-space: nowrap; transition: color .3s;
}
.pr-motor::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); scale: 0 1; transition: scale .45s cubic-bezier(0.16,1,0.3,1); }
.pr-motor.activo { color: var(--text); }
.pr-motor.activo::after { scale: 1 1; }
.pr-motor.hecho { color: var(--text); }
.pr-motor.hecho::before { content: ""; position: absolute; right: 3px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--marca-rojo); }
.pr-hilo { display: grid; align-content: start; gap: 18px; padding: 28px 28px 8px; }
.pr-pregunta {
  justify-self: end; max-width: 80%; margin: 0; padding: 12px 18px; border-radius: 20px 20px 6px 20px;
  background: var(--grafito); color: #fff; font-size: 15.5px; line-height: 1.45;
}
.pr-respuesta { display: grid; gap: 10px; max-width: 92%; }
.pr-firma { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.pr-firma-punto { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 200deg, #d9dbe1, #9aa0ac, #d9dbe1); }
.pr-escena.escribiendo .pr-firma-punto { animation: pr-gira 1.2s linear infinite; }
@keyframes pr-gira { to { rotate: 1turn; } }
.pr-texto { margin: 0; min-height: 4.8em; font-size: 19px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.pr-texto mark {
  padding: 0 .16em; margin: 0 -.04em; border-radius: 4px; color: inherit; font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(18,21,31,0.12) 62%);
}
/* El cursor mientras escribe. */
.pr-escena.escribiendo .pr-texto::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: var(--text); animation: pr-cursor .9s steps(1) infinite; }
@keyframes pr-cursor { 50% { opacity: 0; } }
.pr-veredicto {
  display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; padding: 12px 16px; border-radius: 14px;
  background: #fff3f1; color: #b4382a; font-size: 14.5px; opacity: 0; translate: 0 6px; transition: opacity .4s, translate .4s cubic-bezier(0.16,1,0.3,1);
}
.pr-veredicto b { font-weight: 600; }
.pr-veredicto-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--marca-rojo); }
.pr-escena.respondida .pr-veredicto { opacity: 1; translate: 0 0; }

.pr-marcador { display: grid; align-content: start; padding: 30px 26px 24px; color: #fff; }
.pr-duelo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pr-cuenta { display: grid; gap: 8px; margin: 0; padding: 18px 18px 16px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.pr-cuenta b { font-family: var(--font-display); font-size: 72px; font-weight: 500; line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pr-cuenta span { font-size: 14px; color: rgba(255,255,255,0.7); }
.pr-cuenta-tu b { color: #ffb3a9; }
.pr-cuenta-ellos b { color: rgba(255,255,255,0.92); transition: scale .35s cubic-bezier(0.16,1,0.3,1); }
.pr-cuenta-ellos b.salta { scale: 1.12; }
.pr-progreso { margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,0.55); }
.pr-filas { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.pr-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.09); font-size: 14.5px; }
.pr-fila-motor { color: rgba(255,255,255,0.88); }
.pr-fila-estado { position: relative; display: grid; justify-items: end; color: rgba(255,255,255,0.4); }
.pr-fila-estado > span { grid-area: 1 / 1; transition: opacity .3s; }
.pr-espera { opacity: 0; }
.pr-hecho { display: inline-flex; align-items: center; gap: 7px; opacity: 0; color: #ffb3a9; }
.pr-x { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,122,107,0.18); position: relative; }
.pr-x::before, .pr-x::after { content: ""; position: absolute; left: 4px; right: 4px; top: 7.25px; height: 1.5px; border-radius: 1px; background: var(--marca-rojo); rotate: 45deg; }
.pr-x::after { rotate: -45deg; }
.pr-fila.activa .pr-espera { opacity: 1; }
.pr-fila.activa .pr-fila-motor { color: #fff; }
.pr-fila.hecha .pr-hecho { opacity: 1; }
.pr-pie { margin: 18px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.4); }
.pr-remate { margin: 28px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-mute); text-align: center; text-wrap: balance; }
.pr-remate a { margin-left: 6px; color: var(--text); white-space: nowrap; }

@media (max-width: 960px) {
  .pr-escena { grid-template-columns: minmax(0, 1fr); }
  .pr-marcador { padding: 22px 18px 18px; }
  .pr-cuenta b { font-size: 60px; }
}
@media (max-width: 639px) {
  .pr-escena { margin-top: 36px; padding: 6px; border-radius: 22px; }
  .pr-chat { min-height: 0; border-radius: 17px; }
  .pr-hilo { padding: 20px 16px 4px; }
  .pr-texto { font-size: 15.5px; min-height: 6.4em; }
  .pr-pregunta { font-size: 14.5px; max-width: 90%; }
  .pr-veredicto { margin: 0 10px 10px; }
  /* Las cinco pestañas caben en el teléfono. */
  .pr-motores { padding: 8px 8px 0; gap: 0; justify-content: space-between; }
  .pr-motor { padding: 9px 6px 12px; font-size: 12.5px; }
  .pr-motor::after { left: 6px; right: 6px; }
  .pr-cuenta b { font-size: 54px; }
  .pr-remate { font-size: 15.5px; }
}

/* ---------- 3 · Las cinco áreas, con su pantalla ---------- */
.pl-bloque { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr); gap: 32px; align-items: center; margin-top: 48px; }
.pl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pl-tab {
  position: relative; width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 0 14px;
  padding: 14px 16px; border: 0; border-radius: 18px; background: transparent; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  transition: background .3s;
}
.pl-tab:hover { background: rgba(18,21,31,0.035); }
.pl-tab[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px -18px rgba(18,21,31,0.35), 0 0 0 1px var(--border); }
.pl-tab:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.pl-icono { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(18,21,31,0.05); color: var(--text-mute); transition: background .3s, color .3s; }
.pl-icono svg { width: 19px; height: 19px; }
.pl-tab[aria-selected="true"] .pl-icono { background: var(--marca-suave); color: var(--marca-tinta); }
.pl-nombre { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.pl-nota { font-family: var(--font-mono); font-size: 13px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pl-tab[aria-selected="true"] .pl-nota { color: var(--marca-tinta); }
/* La descripción y la barra solo en la activa: se despliegan con grid-rows. */
.pl-desc { grid-column: 2 / -1; display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.55; color: var(--text-mute); transition: max-height .5s cubic-bezier(0.16,1,0.3,1), opacity .4s, margin .4s; }
.pl-tab[aria-selected="true"] .pl-desc { max-height: 8em; opacity: 1; margin-top: 6px; }
.pl-barra { grid-column: 2 / -1; height: 2px; margin-top: 0; border-radius: 2px; background: transparent; overflow: hidden; }
.pl-tab[aria-selected="true"] .pl-barra { margin-top: 14px; background: rgba(18,21,31,0.08); }
.pl-barra span { display: block; height: 100%; width: 100%; background: var(--marca); transform-origin: left; scale: 0 1; }
.pl-bloque.avanza .pl-tab[aria-selected="true"] .pl-barra span { animation: pl-avanza var(--pl-tiempo, 6s) linear forwards; }
.pl-bloque.parado .pl-tab[aria-selected="true"] .pl-barra span { animation-play-state: paused; }
@keyframes pl-avanza { to { scale: 1 1; } }

.pl-marco { position: relative; padding: 10px; border-radius: 28px; background: var(--grafito); box-shadow: var(--sh-2xl); }
.pl-panel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 19px; background: #f4f4f5; }
.pl-panel:not([hidden]) { animation: pl-entra .6s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes pl-entra { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.pl-pie { position: absolute; right: 22px; bottom: -30px; margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--text-mute); }
.pl-remate { margin: 56px auto 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--text-mute); text-align: center; text-wrap: balance; }

@media (max-width: 1023px) {
  .pl-bloque { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pl-marco { order: -1; }
  .pl-pie { position: static; margin: 10px 4px 0; text-align: right; color: rgba(255,255,255,0.45); }
}
@media (max-width: 639px) {
  .pl-marco { padding: 6px; border-radius: 20px; }
  .pl-panel img { border-radius: 15px; }
  .pl-pie { font-size: 10.5px; letter-spacing: 0; }
  .pl-tab { padding: 12px; grid-template-columns: 34px 1fr auto; gap: 0 12px; }
  .pl-icono { width: 34px; height: 34px; border-radius: 10px; }
  .pl-nombre { font-size: 17px; }
  .pl-desc { font-size: 14.5px; }
  .pl-remate { margin-top: 36px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-panel:not([hidden]) { animation: none; }
}
/* El dato clave de cada pantalla, en una tarjeta que flota sobre el marco. */
.pl-panel { position: relative; }
.pl-dato {
  position: absolute; left: -28px; bottom: 28px; z-index: 2; margin: 0; display: grid; gap: 2px; min-width: 210px; max-width: 250px;
  padding: 14px 18px 15px; border-radius: 16px; background: #fff; border: 1px solid rgba(20,22,29,0.08); text-align: left;
  box-shadow: 0 24px 48px -18px rgba(20,22,29,0.35), 0 6px 14px -8px rgba(20,22,29,0.18);
  animation: pl-dato .7s cubic-bezier(0.16,1,0.3,1) .25s both;
}
@keyframes pl-dato { from { opacity: 0; translate: 0 10px; } }
.pl-dato b { font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--marca-tinta); font-variant-numeric: tabular-nums; }
.pl-dato span { margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--text); }
.pl-dato em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--text-mute); }
@media (max-width: 1240px) { .pl-dato { left: 16px; bottom: 16px; } }
@media (max-width: 639px) {
  .pl-dato { position: relative; left: auto; bottom: auto; min-width: 0; max-width: none; margin: 8px 0 0; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; padding: 12px 14px; box-shadow: none; }
  .pl-dato b { grid-row: span 2; font-size: 28px; }
  .pl-dato span { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .pl-dato { animation: none; } }

/* ---------- 4 · Frente a tu competencia ---------- */
.ps-bloque { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr); gap: 32px; align-items: center; margin-top: 48px; }
.ps-pesos { padding: 26px 24px 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px -18px rgba(18,21,31,0.25); }
.ps-titulo { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.ps-elige { margin: 6px 0 0; font-size: 14px; color: var(--text-mute); }
/* Un selector de verdad: carril gris y la opción elegida en blanco, levantada. */
.ps-perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 14px; background: rgba(18,21,31,0.06); }
.ps-perfil {
  padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text-mute); transition: background .25s, color .25s, box-shadow .25s;
}
.ps-perfil:hover { color: var(--text); background: rgba(255,255,255,0.55); }
.ps-perfil[aria-checked="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(18,21,31,0.08), 0 4px 12px -6px rgba(18,21,31,0.25); }
.ps-perfil:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.ps-filas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ps-fila { display: grid; grid-template-columns: 128px 1fr 44px; align-items: center; gap: 12px; }
.ps-nombre { font-size: 14.5px; color: var(--text); }
.ps-barra { height: 8px; border-radius: 999px; background: rgba(18,21,31,0.06); overflow: hidden; }
.ps-barra span { display: block; height: 100%; width: calc(var(--p) * 2%); max-width: 100%; border-radius: inherit; background: var(--marca); transition: width .7s cubic-bezier(0.16,1,0.3,1); }
.ps-num { justify-self: end; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--marca-tinta); font-variant-numeric: tabular-nums; }
.ps-pie { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-mute); }

.ps-marco { position: relative; margin: 0; padding: 10px; border-radius: 28px; background: var(--grafito); box-shadow: var(--sh-2xl); }
.ps-marco img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 19px; background: #f4f4f5; }
.ps-dato { animation: none; left: auto; right: -28px; bottom: 32px; }

.ps-claves { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ps-claves li { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border); }
.ps-claves b { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.005em; }
.ps-claves span { font-size: 15px; line-height: 1.55; color: var(--text-mute); }

@media (max-width: 1240px) { .ps-dato { right: 16px; bottom: 16px; } }
@media (max-width: 1023px) {
  .ps-bloque { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ps-claves { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
}
@media (max-width: 639px) {
  .ps-pesos { padding: 20px 16px 18px; border-radius: 20px; }
  .ps-fila { grid-template-columns: 112px 1fr 40px; gap: 10px; }
  .ps-nombre { font-size: 14px; }
  .ps-marco { padding: 6px; border-radius: 20px; }
  .ps-marco img { border-radius: 15px; }
  .ps-dato { right: auto; }
}
@media (prefers-reduced-motion: reduce) { .ps-barra span { transition: none; } }

/* ---------- 5 · El plan ---------- */
.pn-bloque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.pn-marco { margin: 0; padding: 10px; border-radius: 28px; background: var(--grafito); box-shadow: var(--sh-2xl); }
.pn-marco img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1722; border-radius: 19px; background: #f4f4f5; }
.pn-pasos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; }
.pn-pasos li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 2px 16px; padding-bottom: 22px; }
.pn-pasos li:last-child { padding-bottom: 0; }
/* La línea que une los pasos, como un recorrido. */
.pn-marco { position: relative; }
.pn-dato { animation: none; left: auto; right: -28px; bottom: 36px; }
/* La línea que une los pasos crece a medida que se encienden. */
.pn-pasos li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 2px; width: 2px; border-radius: 2px; background: rgba(18,21,31,0.08); }
.pn-pasos li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--marca); transform-origin: top; scale: 1 0; transition: scale .6s cubic-bezier(0.16,1,0.3,1) .25s; }
.pn-punto { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgba(18,21,31,0.14); transition: background .4s, box-shadow .4s; }
.pn-pasos li > b, .pn-pasos li > span:last-child { transition: opacity .4s; }
.pn-pasos.anima li:not(.on) > b, .pn-pasos.anima li:not(.on) > span:last-child { opacity: .45; }
.pn-pasos li.on .pn-punto { background: var(--marca-suave); box-shadow: inset 0 0 0 2px var(--marca); }
.pn-pasos li.on:not(:last-child)::after { scale: 1 1; }
.pn-pasos li.on:last-child .pn-punto { background: var(--marca); box-shadow: 0 0 0 5px rgba(0,198,160,0.16); }
.pn-pasos b { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.005em; }
.pn-pasos li > span:last-child { font-size: 15.5px; line-height: 1.55; color: var(--text-mute); }
@media (max-width: 1023px) {
  .pn-bloque { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pn-marco { order: 2; }
}
@media (max-width: 1240px) { .pn-dato { right: 16px; bottom: 16px; } }
@media (max-width: 639px) {
  .pn-dato { right: auto; }
  .pn-marco { padding: 6px; border-radius: 20px; }
  .pn-marco img { border-radius: 15px; }
}

/* ---------- 6 · Cómo funciona ---------- */
.cm-pasos { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.cm-paso {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: 10px; padding: 18px 18px 22px;
  border-radius: 22px; background: var(--surface); border: 1px solid var(--border);
  transition: box-shadow .5s, border-color .5s, translate .5s cubic-bezier(0.16,1,0.3,1);
}
.cm-paso.on { border-color: rgba(0,198,160,0.45); box-shadow: 0 18px 40px -22px rgba(0,109,88,0.45); translate: 0 -4px; }
.cm-paso > b { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin-top: 6px; }
.cm-texto { font-size: 15px; line-height: 1.55; color: var(--text-mute); }
.cm-cabeza { display: flex; align-items: center; justify-content: space-between; }
.cm-num { font-family: var(--font-mono); font-size: 12px; color: var(--marca-tinta); }
.cm-tag { padding: 3px 9px; border-radius: 999px; background: rgba(18,21,31,0.05); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.cm-tag-sigue { background: var(--marca-suave); color: var(--marca-tinta); }
/* El hilo que une las cuatro tarjetas, bajo las cabeceras. */
.cm-paso:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; top: 28px; right: -17px; width: 18px; height: 2px; border-radius: 2px;
  background: rgba(18,21,31,0.1); transition: background .5s;
}
.cm-paso.hecho:not(:last-child)::after { background: var(--marca); }

/* Los dibujos: una mini pantalla de cada paso. */
.cm-dibujo {
  position: relative; display: grid; align-content: center; gap: 8px; height: 132px; padding: 14px; border-radius: 14px;
  background: linear-gradient(180deg, #f7f8fa, #f1f3f6); border: 1px solid rgba(18,21,31,0.06); overflow: hidden;
}
.cm-campo { display: block; height: 26px; border-radius: 8px; background: #fff; border: 1px solid rgba(18,21,31,0.1); }
.cm-campo-web { display: flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--text); }
.cm-campo-linea { height: 18px; opacity: .7; }
.cm-corta { width: 70%; }
.cm-escribe { display: inline-block; overflow: hidden; white-space: nowrap; width: 10ch; }
.cm-paso.on .cm-escribe { animation: cm-teclea 1.1s steps(10) both; }
.cm-paso.on .cm-escribe::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--text); animation: pr-cursor .9s steps(1) infinite; }
@keyframes cm-teclea { from { width: 0; } }
.cm-boton { justify-self: start; padding: 6px 12px; border-radius: 8px; background: var(--marca); color: #14161d; font-size: 12px; font-weight: 600; }
.cm-paso.on .cm-boton { animation: cm-pulsa .5s ease 1.2s both; }
@keyframes cm-pulsa { 50% { scale: .94; } }

.cm-fila-comp { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1px solid rgba(18,21,31,0.08); font-size: 13px; color: var(--text); }
.cm-check { position: relative; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(18,21,31,0.2); transition: background .25s, border-color .25s; }
.cm-check::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #14161d; border-width: 0 2px 2px 0; rotate: 45deg; opacity: 0; transition: opacity .2s; }
.cm-paso.on .cm-fila-comp:nth-child(1) .cm-check, .cm-paso.on .cm-fila-comp:nth-child(2) .cm-check, .cm-paso.on .cm-fila-comp:nth-child(3) .cm-check { animation: cm-marca .3s both; }
.cm-paso.on .cm-fila-comp:nth-child(1) .cm-check { animation-delay: .4s; }
.cm-paso.on .cm-fila-comp:nth-child(2) .cm-check { animation-delay: .9s; }
.cm-paso.on .cm-fila-comp:nth-child(3) .cm-check { animation-delay: 1.4s; }
.cm-paso.on .cm-fila-comp .cm-check::after { animation: cm-marca-v .2s both; animation-delay: inherit; }
@keyframes cm-marca { to { background: var(--marca); border-color: var(--marca); } }
.cm-paso.hecho .cm-check { background: var(--marca); border-color: var(--marca); }
.cm-paso.hecho .cm-check::after { opacity: 1; }
@keyframes cm-marca-v { to { opacity: 1; } }
.cm-paso.on .cm-fila-comp:nth-child(1) .cm-check::after { animation-delay: .4s; }
.cm-paso.on .cm-fila-comp:nth-child(2) .cm-check::after { animation-delay: .9s; }
.cm-paso.on .cm-fila-comp:nth-child(3) .cm-check::after { animation-delay: 1.4s; }

.cm-dibujo-nota { grid-template-columns: 76px 1fr; align-items: center; gap: 16px; }
.cm-anillo { grid-area: 1 / 1; width: 76px; height: 76px; rotate: -90deg; }
.cm-anillo circle { fill: none; stroke: rgba(18,21,31,0.08); stroke-width: 4.5; }
.cm-anillo .cm-anillo-lleno { stroke: var(--marca); stroke-linecap: round; stroke-dasharray: 31 100; }
.cm-paso.on .cm-anillo-lleno { animation: cm-llena 1.2s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes cm-llena { from { stroke-dasharray: 0 100; } }
.cm-nota-num { grid-area: 1 / 1; place-self: center; font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -0.03em; }
.cm-mini { display: grid; gap: 7px; }
.cm-mini span { display: block; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--marca) calc(var(--v) * 1%), rgba(18,21,31,0.08) 0); }
.cm-paso.on .cm-mini span { animation: cm-barra 1s cubic-bezier(0.16,1,0.3,1) both; }
.cm-paso.on .cm-mini span:nth-child(2) { animation-delay: .08s; } .cm-paso.on .cm-mini span:nth-child(3) { animation-delay: .16s; }
.cm-paso.on .cm-mini span:nth-child(4) { animation-delay: .24s; } .cm-paso.on .cm-mini span:nth-child(5) { animation-delay: .32s; }
@keyframes cm-barra { from { clip-path: inset(0 100% 0 0); } }

.cm-dibujo-semana { align-content: end; }
.cm-linea { width: 100%; height: 70px; overflow: visible; }
.cm-linea polyline { fill: none; stroke: var(--marca); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 200; stroke-dashoffset: 0; }
.cm-paso.on .cm-linea polyline { animation: cm-traza 1.6s cubic-bezier(0.45,0,0.2,1) both; }
@keyframes cm-traza { from { stroke-dashoffset: 200; } }
.cm-semana-dato { font-size: 13px; color: var(--text-mute); }
.cm-semana-dato b { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--marca-tinta); margin-right: 4px; }

@media (max-width: 1023px) {
  .cm-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-paso:not(:last-child)::after { display: none; }
}
@media (max-width: 639px) {
  .cm-pasos { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-paso, .cm-paso * { animation: none !important; transition: none !important; }
  .cm-check { background: var(--marca); border-color: var(--marca); }
  .cm-check::after { opacity: 1; }
}
/* Repaso: los dos tramos (gratis / cada semana) sobre las tarjetas. */
.cm-tramos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.cm-tramo {
  grid-column: 1 / 4; position: relative; padding: 0 0 12px; text-align: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-mute);
}
.cm-tramo b { font-weight: 600; color: var(--text); }
/* Una llave: línea con los extremos doblados hacia las tarjetas. */
.cm-tramo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border: 1.5px solid rgba(18,21,31,0.16); border-bottom: 0; border-radius: 6px 6px 0 0; }
.cm-tramo-sigue { grid-column: 4 / 5; }
.cm-tramo-sigue b { color: var(--marca-tinta); }
.cm-tramo-sigue::after { border-color: var(--marca); }
.cm-tramos + .cm-pasos { margin-top: 14px; }
.cm-tag { display: none; }
.cm-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 44px; }
.cm-cta span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-mute); }
@media (max-width: 1023px) {
  .cm-tramos { display: none; }
  .cm-tramos + .cm-pasos { margin-top: 40px; }
  .cm-tag { display: inline-block; }
}

/* ---------- 7 · Dentro: el mosaico ---------- */
.bt-mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 440px 440px; gap: 16px; margin-top: 48px; }
.bt-tile {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-width: 0;
  border-radius: 24px; background: var(--surface); border: 1px solid var(--border);
  transition: box-shadow .4s, translate .4s cubic-bezier(0.16,1,0.3,1);
}
.bt-tile:hover { translate: 0 -3px; box-shadow: 0 22px 44px -26px rgba(18,21,31,0.35); }
.bt-alto { grid-row: span 2; }
.bt-ancho { grid-column: span 2; }
.bt-texto { padding: 24px 24px 18px; }
.bt-texto h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.bt-texto p { margin: 8px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--text-mute); text-wrap: pretty; }
/* La pantalla asoma por abajo y se corta con el borde de la tarjeta. */
.bt-pantalla { position: relative; min-height: 0; margin: 0 0 0 24px; overflow: hidden; border-radius: 14px 0 0 0; border: 1px solid rgba(18,21,31,0.08); border-right: 0; border-bottom: 0; background: #f4f4f5; box-shadow: 0 -8px 24px -18px rgba(18,21,31,0.3); }
.bt-alto .bt-pantalla, .bt-ancho .bt-pantalla { margin-left: 24px; }
.bt-pantalla img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: scale .8s cubic-bezier(0.16,1,0.3,1); transform-origin: left top; }
.bt-tile:hover .bt-pantalla img { scale: 1.025; }
.bt-ancho { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); grid-template-rows: 1fr; }
.bt-ancho .bt-texto { align-self: center; padding: 28px 8px 28px 28px; }
.bt-ancho .bt-pantalla { margin: 28px 0 0 0; }

@media (max-width: 1023px) {
  .bt-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 380px; }
  .bt-alto { grid-row: span 2; }
  .bt-ancho { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .bt-ancho .bt-texto { padding: 24px 24px 18px; }
  .bt-ancho .bt-pantalla { margin: 0 0 0 24px; }
}
@media (max-width: 639px) {
  .bt-mosaico { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 360px; gap: 12px; margin-top: 36px; }
  .bt-alto { grid-row: span 1; }
  .bt-texto { padding: 20px 18px 14px; }
  .bt-pantalla, .bt-ancho .bt-pantalla, .bt-alto .bt-pantalla { margin-left: 18px; }
  .bt-texto h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .bt-tile, .bt-pantalla img { transition: none; } }
.bt-alto .bt-pantalla img { height: auto; }
.bt-icono { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 11px; background: var(--marca-suave); color: var(--marca-tinta); }
.bt-icono svg { width: 18px; height: 18px; }

/* ---------- 8 · Evolución: la línea de Orvella ---------- */
.ev-grafico { margin: 48px 0 0; padding: 22px 24px 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 44px -30px rgba(18,21,31,0.35); }
.ev-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--text-mute); }
.ev-cabeza b { color: var(--text); font-weight: 600; }
.ev-leyenda { display: flex; align-items: center; gap: 8px; margin: 34px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); }
.ev-leyenda i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px var(--marca); }
.ev-lienzo { position: relative; margin-top: 18px; aspect-ratio: 1000 / 400; }
.ev-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ev-rejilla line { stroke: rgba(18,21,31,0.07); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; }
.ev-area { fill: url(#ev-degradado); transition: opacity 1.2s ease .6s; }
.ev-linea { fill: none; stroke: var(--marca); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ev-grafico.anima .ev-linea { stroke-dashoffset: 1; }
.ev-grafico.anima .ev-area { opacity: 0; }
.ev-grafico.anima.dibuja .ev-linea { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(0.45, 0, 0.25, 1); }
.ev-grafico.anima.dibuja .ev-area { opacity: 1; }
.ev-eje-y { position: absolute; left: 0; top: var(--y); translate: 0 -50%; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }
.ev-eje-x { position: absolute; left: var(--x); bottom: -24px; translate: -50% 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); white-space: nowrap; }
/* Las acciones: un punto en la línea y su etiqueta encima o debajo. */
.ev-marca { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.ev-marca > i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--marca), 0 2px 6px rgba(0,109,88,0.25); }
.ev-marca > span { position: absolute; left: 0; translate: -50% 0; display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 24px -14px rgba(18,21,31,0.35); white-space: nowrap; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--marca-tinta); }
.ev-marca > span b { font-family: var(--font-body, inherit); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }
.ev-arriba > span { bottom: 16px; }
.ev-abajo > span { top: 16px; }
.ev-m5 > span { translate: -88% 0; }
.ev-m1 > span { translate: -20% 0; }
.ev-grafico.anima .ev-marca { opacity: 0; scale: .8; }
.ev-grafico.anima .ev-marca.on { opacity: 1; scale: 1; transition: opacity .4s, scale .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ev-final { position: absolute; left: var(--x); top: var(--y); translate: -100% calc(-100% - 18px); display: grid; justify-items: end; line-height: 1; text-align: right; }
.ev-final b { font-family: var(--font-display); font-size: 44px; font-weight: 500; letter-spacing: -0.04em; color: var(--marca-tinta); }
.ev-final span { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); white-space: nowrap; }
.ev-grafico.anima .ev-final { opacity: 0; }
.ev-grafico.anima .ev-final.on { opacity: 1; transition: opacity .6s; }
#evolucion .ps-claves { margin-top: 44px; }
@media (max-width: 760px) {
  .ev-grafico { padding: 16px 14px 30px; border-radius: 20px; }
  .ev-marca > span { padding: 5px 7px; font-size: 9px; }
  .ev-marca > span b { font-size: 11px; }
  .ev-m1 > span, .ev-m2 > span, .ev-m3 > span, .ev-m4 > span { display: none; }
  .ev-lienzo { aspect-ratio: 1000 / 720; margin-top: 56px; }
  .ev-final b { font-size: 30px; }
  .ev-cabeza { flex-direction: column; align-items: flex-start; }
}

/* Repaso: el selector de áreas, la guía y la etiqueta de cada lunes. */
.ev-cabeza { flex-wrap: wrap; }
.ev-chips { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(18,21,31,0.05); }
.ev-chip { padding: 6px 11px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-mute); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.ev-chip:hover { color: var(--text); background: rgba(255,255,255,0.6); }
.ev-chip[aria-checked="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(18,21,31,0.08), 0 4px 12px -6px rgba(18,21,31,0.25); }
.ev-chip:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.ev-lienzo { cursor: crosshair; touch-action: pan-y; }
.ev-guia { stroke: rgba(18,21,31,0.18); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; opacity: 0; transition: opacity .2s; }
.ev-punto { position: absolute; left: var(--x, 0); top: var(--y, 0); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 4px rgba(0,198,160,0.2); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ev-tip { position: absolute; left: var(--x, 0); top: var(--y, 0); translate: -50% calc(-100% - 16px); display: grid; gap: 2px; padding: 8px 11px; border-radius: 10px; background: var(--grafito); color: #fff; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 3; }
.ev-tip b { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.ev-tip span { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.7); }
.ev-lienzo.consulta .ev-guia, .ev-lienzo.consulta ~ * .ev-guia { opacity: 1; }
.ev-lienzo.consulta .ev-punto, .ev-lienzo.consulta .ev-tip { opacity: 1; }
.ev-lienzo.consulta .ev-marca > span, .ev-lienzo.consulta .ev-final { opacity: .25 !important; transition: opacity .2s; }
.ev-marca.fuera { opacity: 0 !important; scale: .6 !important; transition: opacity .3s, scale .3s; }
@media (max-width: 760px) { .ev-chip { padding: 5px 8px; font-size: 12px; } }
.ev-grafico:not(.anima) .ev-linea { stroke-dasharray: none; }

/* ---------- 10 · El cierre ---------- */
.cierre-correo a:hover { text-decoration-color: var(--marca); }
/* La lista de espera (13/10): el formulario de NX Brain, en turquesa. */
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-opcional { font-style: normal; font-weight: 400; color: var(--text-mute); }
body.nxgrowth .input:focus, body.nxgrowth .textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 4px rgba(0,198,160,0.18); }
body.nxgrowth .tema[aria-pressed="true"] { background: var(--marca-suave); border-color: rgba(0,198,160,0.55); color: var(--marca-tinta); }
@media (max-width: 520px) { .form-fila { grid-template-columns: 1fr; } }
body.nxgrowth [hidden] { display: none !important; }

/* ==========================================================================
   LAS PÁGINAS LEGALES (13/10): aviso-legal/ y privacidad/, texto para leer
   a unos 68 caracteres, como las de NX Build.
   ========================================================================== */
.legal { max-width: 768px; padding-top: 156px; padding-bottom: 120px; }
.legal-etiqueta { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.legal-titulo { margin: 12px 0 0; font-family: var(--font-display); font-size: 52px; font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.legal-fecha { margin: 16px 0 0; font-size: 14px; color: var(--text-mute); }
.legal-entrada { margin: 32px 0 0; font-size: 18px; line-height: 1.65; color: var(--text); text-wrap: pretty; }
.legal-cuerpo { margin-top: 48px; display: grid; gap: 44px; font-size: 16px; line-height: 1.75; color: var(--text-mute); }
.legal-cuerpo section { padding: 0; scroll-margin-top: 100px; }
.legal-cuerpo h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.legal-cuerpo p { margin: 0; }
.legal-cuerpo p + p, .legal-cuerpo ul + p, .legal-cuerpo p + ul, .legal-cuerpo .legal-botones + ul { margin-top: 12px; }
.legal-cuerpo ul { margin: 0; padding-left: 20px; }
.legal-cuerpo li + li { margin-top: 8px; }
.legal-cuerpo strong { font-weight: 600; color: var(--text); }
.legal-cuerpo a { color: var(--marca-tinta); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--marca-tinta) 40%, transparent); text-underline-offset: 3px; }
.legal-cuerpo a:hover { text-decoration-color: var(--marca-tinta); }
.legal-ficha { margin: 4px 0 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.legal-ficha div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
.legal-ficha div + div { border-top: 1px solid var(--border); }
.legal-ficha dt { font-size: 14px; color: var(--text-mute); }
.legal-ficha dd { margin: 0; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.legal-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 760px) {
  .legal { padding-top: 120px; padding-bottom: 88px; }
  .legal-titulo { font-size: 38px; }
  .legal-ficha div { grid-template-columns: 1fr; gap: 2px; }
}

/* «Cookies» en el pie: un botón (abre el aviso) con aspecto de enlace (13/10). */
.pie-cookies { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pie-cookies:hover { color: var(--text); }