/* ==========================================================================
   TERRAPULSE · CAPA DE CONVERSIÓN E IMPACTO VISUAL
   ==========================================================================

   Esto NO sustituye a /ventas.css: se apila encima. La narrativa, el orden
   de las secciones y los argumentos de la página son los que ya estaban.
   Aquí solo vive lo que se añadió después:

     · el sistema de iconos
     · los tokens de movimiento
     · el sistema de llamadas a la acción
     · las preguntas incómodas
     · los cortes de urgencia y los números grandes
     · la historia de la emergencia
     · el ecosistema interactivo
     · la prueba de producto y el muro de testimonios
     · el resumen de valor y los bloques de los planes
     · las islas claras
     · los huecos de imagen emocional

   TRES REGLAS QUE ATRAVIESAN EL FICHERO
   --------------------------------------------------------------------------
   1. NADA PARPADEA EN BUCLE. Un elemento puede llamar la atención UNA vez al
      entrar en pantalla y callarse. Una animación infinita en una página de
      venta se lee como un anuncio, y esta página trata de un terremoto.

   2. LA URGENCIA VIENE DEL TEXTO, NO DEL RELOJ. Ni cuentas atrás, ni plazas
      que se acaban, ni «solo hoy». Si la condición no es real, no se enseña.

   3. MÓVIL PRIMERO. Cualquier efecto de escritorio que estropee 390 px se
      apaga en 390 px.
   ========================================================================== */

:root {
  --motion-fast: 180ms;
  --motion-ui: 260ms;
  --motion-story: 520ms;
  --motion-slow: 900ms;
  --motion-curva: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-salida: cubic-bezier(0.4, 0, 1, 1);
}

/* ==========================================================================
   EL SISTEMA DE ICONOS
   ==========================================================================

   Un emoji no es un icono: lo dibuja el sistema operativo, cambia de forma
   entre Windows, Android e iOS, no hereda el color de la marca y algunos ni
   siquiera se dibujan — salen como un cuadro vacío. Había cuarenta y dos
   formas distintas fuera de nuestro control.

   Ahora todo es el mismo trazo: lienzo de 24, grosor 1,8, extremos
   redondeados y `currentColor`, así que cada icono toma el color de lo que
   lo rodea sin una sola regla extra.

   El tamaño va en `em`. Un icono dentro de una frase mide lo que la frase;
   uno dentro del titular de una tarjeta, lo que el titular. No hay una
   tabla de tamaños que mantener.
   ========================================================================== */

.ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.16em;
  flex-shrink: 0;
}

/* Cuando el icono va suelto en una fila flex, el hueco lo pone el contenedor. */
.ico + span,
span > .ico {
  margin-right: 0;
}

/* ==========================================================================
   LLAMADAS A LA ACCIÓN
   ==========================================================================

   Cuatro estados y ninguno en bucle:

     reposo     el color de marca, la flecha quieta
     encima     sube 2 px, sombra suave, la flecha se adelanta 4
     pulsado    baja a 0.985 durante 120 ms
     atención   UN destello al entrar en pantalla, y se acabó

   El estado de atención se pone y se quita solo desde el script: si se
   quedara puesto, en cuanto la página tuviera cuatro botones a la vista
   sería una feria.
   ========================================================================== */

.cta {
  position: relative;
  border-radius: 16px;
  transition:
    transform var(--motion-ui) var(--motion-curva),
    box-shadow var(--motion-ui) var(--motion-curva),
    background var(--motion-fast) ease;
}

.cta .ico {
  transition: transform var(--motion-ui) var(--motion-curva);
}

@media (hover: hover) {
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(69, 174, 194, 0.42);
  }

  .cta:hover .ico {
    transform: translateX(4px);
  }
}

.cta:active {
  transform: scale(0.985);
  transition-duration: 120ms;
}

.cta:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

/* Una vez. El script quita la clase cuando la animación termina. */
.cta.is-attention {
  animation: ctaAtencion 900ms var(--motion-curva) both;
}

.cta.is-attention .ico {
  animation: ctaFlecha 900ms var(--motion-curva) both;
}

@keyframes ctaAtencion {
  0% {
    box-shadow: 0 0 0 0 rgba(69, 174, 194, 0);
  }
  40% {
    box-shadow: 0 8px 36px 4px rgba(69, 174, 194, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(69, 174, 194, 0);
  }
}

@keyframes ctaFlecha {
  0%,
  100% {
    transform: translateX(0);
  }
  42% {
    transform: translateX(6px);
  }
}

/* La línea de debajo del botón: una sola por sitio, nunca todas a la vez. */
.cta-micro {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 14px auto 0;
  max-width: 46ch;
}

/* ==========================================================================
   CORTES · urgencia y números grandes
   ==========================================================================

   Sirven para romper el ritmo. La página encadena muchas secciones con la
   misma forma —titular, párrafo, tarjetas— y a partir de la tercera seguida
   el ojo deja de leer y empieza a desplazarse. Un corte le devuelve el
   pulso.
   ========================================================================== */

.corte {
  padding: clamp(64px, 12vh, 120px) 0;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #0a0e12 0%, #0d1319 50%, #0a0e12 100%);
}

.corte p {
  font-size: clamp(1.35rem, 4.4vw, 2.5rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}

.corte p em {
  font-style: normal;
  color: var(--accent);
}

.corte small {
  display: block;
  font-size: clamp(0.9rem, 2.4vw, 1.02rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  max-width: 44ch;
  margin: 18px auto 0;
  text-wrap: pretty;
}

/* --- Números grandes ------------------------------------------------------ */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.cifra b {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(3rem, 9vw, 4.6rem);
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.03em;
}

.cifra strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-top: 12px;
  font-weight: 600;
}

.cifra span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* ==========================================================================
   PREGUNTAS INCÓMODAS
   ==========================================================================

   Casi negro y mucho aire. Es la única sección de la página que no explica
   nada: pregunta y se calla. Cada pregunta aparece cuando llega, no las
   cinco de golpe — leerlas seguidas las convierte en una lista, y una lista
   no incomoda a nadie.
   ========================================================================== */

#hard-questions {
  background: #06090c;
  padding: clamp(80px, 14vh, 150px) 0;
}

.hq-lista {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vh, 40px);
  max-width: 760px;
  margin: clamp(36px, 6vh, 60px) auto 0;
  padding: 0 4px;
  list-style: none;
}

.hq-lista li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: clamp(1.15rem, 4.2vw, 1.75rem);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-align: left;
  text-wrap: pretty;

  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--motion-story) var(--motion-curva),
    transform var(--motion-story) var(--motion-curva);
}

.hq-lista li.visible {
  opacity: 1;
  transform: none;
}

/* El número no es decoración: dice cuántas van y cuántas quedan. */
.hq-lista li b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62em;
  font-weight: 500;
  color: var(--accent);
  padding-top: 0.22em;
  flex-shrink: 0;
}

/* ==========================================================================
   HUECOS DE IMAGEN EMOCIONAL
   ==========================================================================

   Cuando el archivo todavía no existe, NO se pone una imagen de banco: se
   deja el hueco con su medida real y dice qué falta. Una foto de archivo de
   una familia sonriendo delante de un portátil haría más daño que un hueco
   honesto, y además fija la composición para cuando llegue la buena.
   ========================================================================== */

/*
  Cuando el hueco ya tiene su fotografia deja de parecer un hueco: se le quita
  el borde discontinuo y el fondo de marcador de posicion. Sin esto se veia un
  contorno de puntos alrededor de cada imagen, como si siguiera pendiente.
*/
.emotional-asset-slot[data-lleno=1] {
  border-style: solid;
  border-color: rgba(127, 212, 228, 0.14);
  background: #0a121b;
  box-shadow:
    0 24px 60px -30px rgba(0, 0, 0, 0.95),
    0 0 70px -40px rgba(69, 174, 194, 0.6);
}

.emotional-asset-slot[data-lleno='1'] .slot-nota {
  display: none;
}

.emotional-asset-slot {
  position: relative;
  border-radius: var(--radius-md, 16px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(69, 174, 194, 0.06), rgba(69, 174, 194, 0) 60%), var(--bg-card);
  border: 1px dashed rgba(255, 255, 255, 0.12);

  /*
    `width: 100%` NO sobra: con `aspect-ratio` puesto y la anchura sin fijar,
    el navegador toma `min-height` como la medida buena y deduce la ANCHURA a
    partir de ella. Un hueco de 16:9 con 260 px de alto minimo salía de 462 px
    de ancho dentro de un contenedor de 398, y desplazaba la página entera.
  */
  width: 100%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px;
}

.emotional-asset-slot .ico {
  width: 34px;
  height: 34px;
  color: rgba(69, 174, 194, 0.55);
}

.emotional-asset-slot b {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.emotional-asset-slot span {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 34ch;
}

.emotional-asset-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Con imagen real dentro, el hueco deja de anunciarse. */
.emotional-asset-slot:has(img) {
  border-style: solid;
  border-color: var(--border-subtle);
}

.emotional-asset-slot:has(img) > .slot-nota {
  display: none;
}

/* --- La escena editorial: imagen a un lado, interfaz al otro -------------- */

.escena {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 32px;
  text-align: left;
}

@media (min-width: 900px) {
  .escena {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
  }

  .escena[data-lado='izquierda'] .escena-ui {
    order: -1;
  }
}

.escena-ui {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.escena-ui-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 16px;
}

.escena-ui-fila .ico {
  color: var(--accent);
  width: 20px;
  height: 20px;
}

.escena-ui-fila b {
  font-size: 0.95rem;
  font-weight: 600;
}

.escena-ui-fila span {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-left: auto;
  text-align: right;
}

/* ==========================================================================
   LA HISTORIA DE LA EMERGENCIA
   ==========================================================================

   Cuatro pantallas, cuatro momentos, un sistema. En escritorio NO van las
   cuatro alineadas y planas: el aviso es el protagonista y las otras tres
   se colocan alrededor, más pequeñas y más atrás. Cuatro capturas en fila
   son un catálogo; esto tiene que leerse como una campaña.
   ========================================================================== */

#emergency-story {
  overflow: hidden;
}

.es-momento {
  text-align: left;
}

.es-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.es-momento h3 {
  font-size: clamp(1.02rem, 3.4vw, 1.22rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 8px 0 0;
  text-transform: uppercase;
}

.es-momento p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 8px 0 0;
  text-wrap: pretty;
}

/* --- Móvil: un momento por tarjeta, en carrusel --------------------------- */

.es-pista {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -24px;
  padding: 8px 24px 16px;
  -webkit-overflow-scrolling: touch;
}

.es-pista::-webkit-scrollbar {
  display: none;
}

.es-carta {
  flex: 0 0 auto;
  width: min(268px, 74vw);
  scroll-snap-align: center;
}

.es-carta .tp-marco {
  margin-bottom: 18px;
}

.es-progreso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.es-puntos {
  display: flex;
  gap: 6px;
}

.es-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background var(--motion-ui) ease;
}

.es-punto[data-activo='1'] {
  background: var(--accent);
}

/* --- Escritorio: la composición ------------------------------------------ */

@media (min-width: 1024px) {
  .es-pista {
    display: block;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }

  .es-progreso {
    display: none;
  }

  /*
    La escena. El aviso al frente y en el centro; inicio detrás a la
    izquierda, el círculo a la derecha y el punto de encuentro abajo, todos
    girados hacia dentro. La perspectiva es de verdad: por eso los de los
    lados se ven más estrechos.
  */
  .es-escena {
    position: relative;
    height: 660px;
    perspective: 2000px;
    perspective-origin: 50% 45%;
    margin-top: 46px;
  }

  .es-carta {
    position: absolute;
    width: 226px;
    transition: transform var(--motion-story) var(--motion-curva);
  }

  .es-carta[data-momento='1'] {
    left: 4%;
    top: 40px;
    transform: rotateY(26deg) translateZ(-190px);
    z-index: 1;
  }

  .es-carta[data-momento='2'] {
    left: 50%;
    top: 0;
    width: 274px;
    margin-left: -137px;
    transform: translateZ(60px);
    z-index: 4;
  }

  .es-carta[data-momento='3'] {
    right: 4%;
    top: 40px;
    transform: rotateY(-26deg) translateZ(-190px);
    z-index: 1;
  }

  .es-carta[data-momento='4'] {
    left: 50%;
    bottom: -10px;
    margin-left: 60px;
    width: 200px;
    transform: rotateY(-16deg) rotateX(8deg) translateZ(-280px);
    z-index: 2;
  }

  .es-carta:hover {
    transform: translateZ(120px) rotateY(0deg);
    z-index: 6;
  }

  /* El pie de cada momento va debajo de su teléfono, no en una lista aparte. */
  .es-carta .es-momento {
    margin-top: 16px;
    max-width: 100%;
  }

  .es-carta[data-momento='2'] .es-momento h3 {
    font-size: 1.3rem;
  }
}

/*
  El icono entra en la tarjeta que ya existía, encima del número. El número
  se queda —dice el orden de las seis capas— pero deja de ser lo más grande:
  ahora lo primero que se ve es de qué trata la capa.
*/
.system-node .n360-ico {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 8px;
  color: var(--accent);
}

.system-node .num {
  font-size: 1.05rem;
  opacity: 0.7;
}

@media (max-width: 767px) {
  .system-node .n360-ico {
    margin: 0;
  }
}

/* ==========================================================================
   MUNDO · el globo
   ==========================================================================

   Doscientos bytes de SVG: dos elipses y tres líneas. Dice de un vistazo lo
   que las seis pastillas de país dicen leyendo — que esto empieza cerca y
   llega a todas partes. Nada de mapas de imagen ni de una librería de 200 kB
   para dibujar un círculo.
   ========================================================================== */

.mundo-visual {
  width: min(260px, 62vw);
  margin: 8px auto 4px;
}

.mundo-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

.mundo-gira {
  transform-origin: 50% 50%;
  animation: mundoGira 90s linear infinite;
}

@keyframes mundoGira {
  to {
    transform: rotate(360deg);
  }
}

.mundo-pulso {
  transform-origin: 82px 118px;
  animation: mundoPulso 2.8s ease-out infinite;
}

@keyframes mundoPulso {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ==========================================================================
   CLIMA · la superficie, no cuatro pastillas sueltas
   ========================================================================== */

.clima-panel {
  max-width: 480px;
  margin: 8px auto 24px;
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  text-align: left;
}

.clima-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.clima-lugar {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.clima-estado {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.clima-grados {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
}

.clima-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}

.clima-dato {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.clima-dato b {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.98rem;
  font-weight: 600;
}

.clima-dato span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* El ámbar es el aviso. No el rojo: el rojo es de las alertas de verdad. */
.clima-aviso {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(229, 169, 60, 0.08);
  border: 1px solid rgba(229, 169, 60, 0.32);
}

.clima-aviso b {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warning, #e5a93c);
}

.clima-aviso span {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 5px;
}

/* ==========================================================================
   ECOSISTEMA · cada módulo se abre donde está
   ========================================================================== */

.eco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  max-width: 1000px;
  margin: 32px auto 0;
}

.eco-modulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  text-align: center;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    border-color var(--motion-ui) ease,
    transform var(--motion-ui) var(--motion-curva);
}

.eco-modulo .ico {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.eco-modulo b {
  font-size: 0.86rem;
  font-weight: 600;
}

.eco-modulo span {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.eco-modulo[aria-expanded='true'] {
  border-color: var(--accent);
  background: rgba(69, 174, 194, 0.08);
}

@media (hover: hover) {
  .eco-modulo:hover {
    border-color: rgba(69, 174, 194, 0.45);
    transform: translateY(-2px);
  }
}

.eco-modulo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* La ficha se abre debajo de la rejilla, no encima de nada. */
.eco-detalle {
  max-width: 1000px;
  margin: 16px auto 0;
  padding: 22px 24px;
  background: var(--bg-elevated);
  border: 1px solid rgba(69, 174, 194, 0.3);
  border-radius: 18px;
  text-align: left;
  animation: subeCorto var(--motion-story) var(--motion-curva) both;
}

.eco-detalle b {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
}

.eco-detalle p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 8px 0 0;
  text-wrap: pretty;
}

@keyframes subeCorto {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ==========================================================================
   PROCEDENCIA · de dónde sale cada dato
   ========================================================================== */

.proc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  max-width: 940px;
  margin: 30px auto 0;
}

.proc-paso {
  position: relative;
  padding: 20px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  text-align: left;
}

.proc-paso .ico {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.proc-paso b {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 12px;
}

.proc-paso span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: 6px;
}

.fuentes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px auto 0;
  max-width: 820px;
  padding: 0;
  list-style: none;
}

.fuente {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.fuente b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   PRUEBA DE PRODUCTO
   ==========================================================================

   Solo cifras verificables. Ninguna se escribe a mano en el marcado: salen
   de PRODUCT_METRICS y, si un valor no está confirmado, la tarjeta no se
   dibuja. Una cifra inventada en una página que habla de terremotos no es
   marketing agresivo, es mentir sobre una emergencia.
   ========================================================================== */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 30px auto 0;
}

.metrica {
  padding: 26px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
}

.metrica b {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
}

.metrica strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-top: 12px;
}

.metrica span {
  display: block;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* ==========================================================================
   MURO DE TESTIMONIOS
   ==========================================================================

   La infraestructura está entera y VACÍA a propósito. `TESTIMONIALS` no
   tiene ni una entrada, y mientras no la tenga la página enseña prueba de
   producto en su lugar.

   Publicar «María, Lima: esto salvó a mi familia» antes de que exista María
   sería inventar el testimonio de alguien sobre un terremoto. Eso no es una
   licencia de copy: es una falsificación, y encima de un tema donde la
   confianza es todo el producto.
   ========================================================================== */

.muro {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   ESCRITORIO · tres columnas, y NADA se recorta
   --------------------------------------------------------------------------
   Aquí había una marquesina vertical: tres columnas subiendo y bajando solas
   dentro de una caja de 620 px con `overflow: hidden` y una máscara que
   desvanecía los bordes.

   Con citas cortas se veía bien. Con estas, que tienen cuatro y cinco líneas,
   hacía justo lo que no puede hacer una sección de reseñas: cortar la frase a
   media palabra y desvanecer el final. Media reseña no es media prueba social;
   es una pista de que ahí no hay nada que leer.

   Ahora las tres columnas son tres pilas independientes. Cada una crece lo que
   necesite, las alturas quedan desiguales —y da igual, es lo que hace un muro
   de reseñas— y no hay ni un píxel oculto.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .muro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
  }

  .muro-columna {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
  }
}

/* ==========================================================================
   LA FICHA
   ==========================================================================
   Cabecera con la persona a la izquierda y la fuente a la derecha, la fila de
   estrellas debajo, la cita entera y un pie discreto. El mismo orden que
   cualquiera ha visto cien veces en una reseña, que es justo por lo que
   funciona: no hay que aprender a leerla.
   ========================================================================== */

.testimonio {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #121c28;
  border: 1px solid rgba(127, 212, 228, 0.14);
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.9);
  transition:
    transform 220ms var(--motion-curva),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

@media (min-width: 900px) {
  .testimonio:hover {
    transform: translateY(-3px);
    border-color: rgba(69, 174, 194, 0.35);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
  }
}

/* --- Cabecera ------------------------------------------------------------ */

.testimonio-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.testimonio-quien {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.testimonio-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(69, 174, 194, 0.34) 0%, rgba(24, 44, 62, 0.95) 100%);
  border: 1px solid rgba(127, 212, 228, 0.22);
  color: #d9eef4;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.testimonio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  El nombre y el lugar son DOS bloques, no dos palabras seguidas.

  Sin esta columna eran dos `span` en línea, y en pantalla se leía
  «Andrea L.Bogotá, Colombia» de corrido. `min-width: 0` es lo que deja que un
  nombre largo se corte con puntos suspensivos en vez de empujar la etiqueta de
  Trustpilot fuera de la ficha.
*/
.testimonio-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonio-nombre {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonio-lugar {
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.testimonio-fuente {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #d8e0e7;
  white-space: nowrap;
}

/* --- Estrellas ----------------------------------------------------------- */

/*
  EN FILA. Este es el defecto que más se veía.

  El contenedor llevaba la clase `flex-row` de Tailwind, y esta página no carga
  Tailwind: la clase no existía, así que los cinco cuadrados verdes eran cinco
  bloques uno debajo de otro. Aquí `display: flex` es una regla de verdad.
*/
.testimonio-estrellas {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
}

.testimonio-estrella {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  border-radius: 3px;
  background: #00b67a;
  color: #ffffff;
}

/* La que falta se deja hueca, no se convierte en verde. */
.testimonio-estrella[data-llena='0'] {
  background: rgba(127, 212, 228, 0.12);
  color: rgba(217, 238, 244, 0.3);
}

/* --- La cita ------------------------------------------------------------- */

/*
  Sin alto máximo, sin `overflow` y sin desvanecido.

  Que la ficha crezca lo que haga falta. Una reseña recortada obliga a decidir
  si merece la pena buscar el resto, y esa decisión casi siempre sale que no.
*/
.testimonio-cita {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.testimonio-cita p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #cdd5dd;
  text-wrap: pretty;
}

/* --- El pie -------------------------------------------------------------- */

.testimonio-pie {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(127, 212, 228, 0.1);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.testimonio-pie span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Los dos iconos van en CSS: son adorno y no tienen que pesar en el HTML. */
.testimonio-pie span:first-child::before {
  content: '\2713';
  font-size: 0.82rem;
}

.testimonio-pie span:last-child::before {
  content: '\2192';
  font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   MÓVIL · una ficha y el borde de la siguiente
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .muro {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -24px;
    padding: 4px 24px 12px;
  }

  .muro::-webkit-scrollbar {
    display: none;
  }

  .muro-columna {
    display: contents;
  }

  .testimonio {
    flex: 0 0 auto;
    width: 88vw;
    max-width: 360px;
    scroll-snap-align: center;
  }
}

/* ==========================================================================
   EL BLOQUE · lo que se activa con TerraPulse
   ==========================================================================

   Un teléfono al frente y las piezas del sistema alrededor. La intención es
   que se lea como el paquete de un programa, no como el «bonus stack» de un
   infoproducto: sin lazos, sin flechas amarillas y sin precios tachados
   flotando encima.
   ========================================================================== */

.bloque {
  position: relative;
  display: grid;
  gap: 22px;
  justify-items: center;
  margin-top: 36px;
}

.bloque-centro {
  width: min(238px, 62vw);
}

.bloque-piezas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 780px;
}

.bloque-pieza {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.bloque-pieza .ico {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

/*
  En escritorio, dos tarjetas de producto se apoyan sobre el teléfono. En
  móvil no: seis maquetas diminutas alrededor de una séptima no se leen en
  390 px, y lo que hay que leer son los nombres de los módulos.
*/
.bloque-satelite {
  display: none;
}

@media (min-width: 900px) {
  .bloque {
    min-height: 560px;
  }

  .bloque-centro {
    width: 250px;
  }

  .bloque-satelite {
    position: absolute;
    display: block;
    width: 200px;
    top: 90px;
    transition: transform var(--motion-story) var(--motion-curva);
  }

  .bloque-satelite[data-lado='izq'] {
    left: max(0px, calc(50% - 400px));
    transform: rotateY(22deg) translateZ(-90px);
  }

  .bloque-satelite[data-lado='der'] {
    right: max(0px, calc(50% - 400px));
    transform: rotateY(-22deg) translateZ(-90px);
  }

  .bloque-satelite:hover {
    transform: rotateY(0) translateZ(0);
  }

  .bloque-piezas {
    margin-top: 8px;
  }
}

/* ==========================================================================
   PLANES · el bloque encima del precio
   ==========================================================================

   El orden dentro de cada tarjeta es: qué recibes, cómo se llama, para
   quién es, cuánto cuesta. El precio va DESPUÉS del valor — abrir por la
   cifra obliga a decidir antes de saber qué se compra.
   ========================================================================== */

.plan-bloque {
  position: relative;
  height: 132px;
  margin: -6px -6px 18px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(69, 174, 194, 0.16) 0%, rgba(69, 174, 194, 0) 62%),
    #0d1319;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* El teléfono asoma por abajo: se ve que hay producto, sin robar altura. */
.plan-bloque .tp-marco {
  width: 96px;
  margin-bottom: -66px;
  border-radius: 18px;
  padding: 4px;
}

.plan-bloque .tp-cristal {
  border-radius: 15px;
}

.plan-bloque-chips {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.plan-bloque-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(11, 15, 19, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.66rem;
  color: var(--text-secondary);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.plan-bloque-chip .ico {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

/*
  ENTRADA UNA VEZ.

  Los planes suben diez píxeles y aparecen cuando la sección entra en
  pantalla. Después se quedan quietos: nada rebota, nada late y no hay
  ninguna cuenta atrás. La urgencia de esta página está en lo que dice, no
  en un reloj inventado.
*/
.plan-anim {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--motion-story) var(--motion-curva),
    transform var(--motion-story) var(--motion-curva);
}

.plan-anim.visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   LA RENDIJA DE LOS 768 PÍXELES
   ==========================================================================

   A partir de 768 px el bloque de tensión se abre en dos columnas de 332, y
   dentro va otra rejilla de dos columnas con las tarjetas de la familia.

   Una pista `1fr` tiene `min-width: auto`, así que NO baja del tamaño de su
   contenido: las tarjetas empujaban su columna hasta 490 px y la página
   entera se desplazaba 115 px a la derecha. Solo pasaba en tableta — en
   móvil hay una columna y en escritorio sobra sitio— que es justo la
   anchura que nadie mira.

   `min-width: 0` le devuelve a la pista el permiso para encoger, y el texto
   pasa a partirse en vez de a empujar.
   ========================================================================== */

.tension-grid,
.tension-grid > *,
.family-event-map,
.family-event-map .family-grid,
.family-event-map .family-grid > *,
.family-event-map .map-container {
  min-width: 0;
}

/*
  Y entre 768 y 1023 las fichas de la familia van en UNA columna. Ahí la
  sección ya está partida en dos y a cada ficha le quedan 156 px: la etiqueta
  de estado no cabe entera y vuelve a empujar. La regla que ya existía hacía
  justo esto por debajo de 600; este es el otro extremo del mismo problema.
*/
@media (min-width: 768px) and (max-width: 1023px) {
  .family-event-map .family-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ISLAS CLARAS
   ==========================================================================

   Dos, y ni una más. La página es oscura por identidad; una isla clara sirve
   para marcar un cambio de tema, y a la tercera deja de marcar nada.
   ========================================================================== */

/* ==========================================================================
   QUIEN PIDE MENOS MOVIMIENTO, RECIBE MENOS MOVIMIENTO
   ==========================================================================

   Se apagan el destello de los botones, la entrada
   de los planes y la aparición de las preguntas. No se esconde ni una
   palabra: lo que se veía moviéndose se ve quieto.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cta.is-attention,
  .cta.is-attention .ico {
    animation: none !important;
  }

  .hq-lista li,
  .plan-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .eco-detalle {
    animation: none !important;
  }

  .es-carta,
  .bloque-satelite,
  .testimonio {
    transition: none !important;
  }
}

/* ==========================================================================
   LAS FOTOGRAFÍAS DE SECCIÓN
   ==========================================================================
   Sustituyen a las maquetas dibujadas con CSS: los anillos del guardián, las
   seis casillas NAC/REG/INT, los tres teléfonos en abanico del bloque y las
   pastillas de cada plan.

   Todas comparten el mismo tratamiento —marco de un píxel en cian muy bajo,
   esquinas de 18, sombra profunda y un halo tenue— para que las cinco se lean
   como el mismo material y no como cinco imágenes traídas de sitios distintos.

   Las cuatro llevan `width` y `height` en el HTML. No es adorno: sin esas dos
   cifras el navegador no reserva el hueco, y cuando la imagen llega el texto
   de debajo salta. En una página que se lee bajando, un salto a media lectura
   es la forma más barata de perder a alguien.
   ========================================================================== */

.escena-foto {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(127, 212, 228, 0.14);
  box-shadow:
    0 24px 60px -30px rgba(0, 0, 0, 0.95),
    0 0 70px -40px rgba(69, 174, 194, 0.6);
  background: #0a121b;
}

.escena-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  El halo de cian por los bordes.

  Las cinco fotografías vienen con el fondo casi negro y un filo duro. Este
  degradado interior funde ese filo con la página: sin él se ven cinco
  rectángulos pegados encima, con él parecen ventanas abiertas en el fondo.
*/
.escena-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 50%,
    transparent 58%,
    rgba(7, 14, 19, 0.55) 100%
  );
}

/* Las que van centradas y a lo ancho de la sección. */
.escena-foto--ancha {
  max-width: 860px;
  margin: 24px auto 0;
}

/* La del bloque de «lo que se activa» ocupa su hueco entero. */
.bloque-foto {
  grid-column: 1 / -1;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   LA FOTO DE CADA PLAN
   --------------------------------------------------------------------------
   Va a sangre por arriba de la tarjeta, sin margen: se lee como la portada del
   plan y no como una ilustración metida dentro de una caja.
   -------------------------------------------------------------------------- */

.plan-foto {
  position: relative;
  margin: -28px -24px 20px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: #0a121b;
}

.plan-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Se funde con la tarjeta por abajo, para que no haya un corte recto. */
.plan-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 15, 19, 0.75) 100%);
}

/* --------------------------------------------------------------------------
   MÓVIL
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .escena-foto--ancha {
    margin-top: 18px;
  }

  .plan-foto {
    margin: -28px -24px 16px;
  }
}

/* ==========================================================================
   LOS ROTADORES DE LAS METRICAS
   ==========================================================================
   Bajo cada numero grande va una lista que pasa de uno en uno: los seis
   paises, los trece modulos, las ocho decisiones. La cifra dice cuantos son y
   la linea de debajo va ensenando cuales.

   Es DECORACION: lleva aria-hidden. Lo que un lector de pantalla anuncia es
   el numero y su titulo — «6, paises prioritarios» — que es la informacion.
   Cantarle un pais nuevo cada dos segundos seria ruido.
   ========================================================================== */

.metrica-rota {
  display: block;
  min-height: 1.5em;
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.metrica-rota[data-saliendo='1'] {
  opacity: 0;
  transform: translateY(4px);
}

.metrica-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.metrica-bandera {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  background: #223; 
}

.metrica-bandera[data-cc='PE'] { background: linear-gradient(90deg,#D91023 33%,#fff 33% 66%,#D91023 66%); }
.metrica-bandera[data-cc='MX'] { background: linear-gradient(90deg,#006847 33%,#fff 33% 66%,#CE1126 66%); }
.metrica-bandera[data-cc='CL'] { background: linear-gradient(180deg,#fff 50%,#D52B1E 50%); }
.metrica-bandera[data-cc='CO'] { background: linear-gradient(180deg,#FCD116 50%,#003893 50% 75%,#CE1126 75%); }
.metrica-bandera[data-cc='EC'] { background: linear-gradient(180deg,#FFDD00 50%,#0072C6 50% 75%,#EF3340 75%); }
.metrica-bandera[data-cc='AR'] { background: linear-gradient(180deg,#74ACDF 33%,#fff 33% 66%,#74ACDF 66%); }

@media (prefers-reduced-motion: reduce) {
  .metrica-rota {
    transition: none;
  }
}

/* ==========================================================================
   LA CINTA DE LOS TRECE MÓDULOS
   ==========================================================================
   Antes era una rejilla: en escritorio, cinco filas y 665 px de alto — y con
   los clones que necesita el bucle, VEINTISÉIS módulos a la vista. Trece
   módulos duplicados delante de alguien que está contando lo que compra es
   peor que no enseñarlos.

   Ahora es una sola fila que se desliza, en escritorio y en móvil. Solo se ven
   cinco o seis a la vez y el resto va llegando: la sección baja de 665 px a
   unos 140, y el que mira entiende que hay más de los que caben — que es
   justo el mensaje.

   Los clones existen —sin ellos el bucle daría un salto al volver— pero van
   con `aria-hidden` y fuera del tabulador. Un lector de pantalla cuenta
   trece, no veintiséis.
   ========================================================================== */

.eco {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 26px -24px 0;
  padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.eco-cinta {
  display: flex;
  gap: 12px;
  width: max-content;
  /*
    46 segundos para recorrer los trece.

    Es lento a propósito: a esta velocidad se lee cada nombre al pasar. Más
    rápido sería un teletipo de bolsa, y esto no es una cotización — es la
    lista de lo que alguien acaba de comprar.
  */
  animation: ecoCinta 46s linear infinite;
}

/* Se para al tocarla o al pasar por encima: un módulo en movimiento no se pulsa. */
.eco:hover .eco-cinta,
.eco:focus-within .eco-cinta,
.eco[data-parado='1'] .eco-cinta {
  animation-play-state: paused;
}

.eco-modulo {
  flex: 0 0 auto;
  width: 138px;
}

@keyframes ecoCinta {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (min-width: 900px) {
  .eco {
    margin: 30px 0 0;
    border-radius: 18px;
  }

  .eco-modulo {
    width: 152px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /*
    Sin movimiento: la cinta se para y se deja desplazar con el dedo. No se
    esconde ni un módulo — se ven los trece, moviéndolos a mano.
  */
  .eco {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .eco::-webkit-scrollbar {
    display: none;
  }

  .eco-cinta {
    animation: none;
  }
}

/* ==========================================================================
   EL BOTÓN FIJO DE MÓVIL
   ==========================================================================
   Aparece cuando ya se ha bajado una cuarta parte de la página y desaparece
   en cuanto los precios entran en pantalla: a partir de ahí ya hay un botón
   de verdad delante, y dos botones que hacen lo mismo compiten entre ellos.
   ========================================================================== */

.cta-fijo {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  border-radius: 15px;
  background: #45aec2;
  color: #0b0f13;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.8),
    0 0 34px -14px rgba(69, 174, 194, 0.8);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-fijo[data-ver='1'] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cta-fijo:active {
  transform: scale(0.985);
}

@media (min-width: 900px) {
  .cta-fijo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-fijo {
    transition: none;
  }
}

/* ==========================================================================
   EL SISTEMA DE MOVIMIENTO DE LOS BOTONES
   ==========================================================================
   Una clase para todos los botones principales. Tres estados y ninguno en
   bucle: el destello al entrar en pantalla ya estaba limitado a dos veces en
   toda la visita, y aqui solo se anaden el hover y el pulsado.

   Un boton que late sin parar deja de leerse como una invitacion a los diez
   segundos y empieza a leerse como un error — y esta pagina trata de un
   terremoto.
   ========================================================================== */

.conversion-cta,
.btn-primary,
.plan-comprar {
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease,
    background 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .conversion-cta:hover,
  .btn-primary:hover,
  .plan-comprar:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -12px rgba(69, 174, 194, 0.75);
  }

  .conversion-cta:hover .ico,
  .btn-primary:hover .ico,
  .plan-comprar:hover .ico {
    transform: translateX(3px);
  }
}

.conversion-cta .ico,
.btn-primary .ico,
.plan-comprar .ico {
  transition: transform 200ms ease;
}

.conversion-cta:active,
.btn-primary:active,
.plan-comprar:active {
  transform: scale(0.985);
  transition-duration: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .conversion-cta,
  .btn-primary,
  .plan-comprar,
  .conversion-cta .ico,
  .btn-primary .ico,
  .plan-comprar .ico {
    transition: none;
  }
}

/* ==========================================================================
   AIRE ENTRE SECCIONES · movil
   ==========================================================================
   Casi todas las secciones traian 80 px arriba y 80 abajo. Entre dos
   secciones seguidas eso son 160 px de nada, y con cuarenta secciones son
   varios miles de pixeles de scroll que no cuentan nada.

   Se bajan a 56. No es aplastar: es quitar el hueco muerto.
   ========================================================================== */

@media (max-width: 899px) {
  section[data-section]:not(.hero):not(.corte) {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Los clones del bucle: hijos de la fila para el flex, invisibles para un
   lector de pantalla. El aria-hidden va en el envoltorio, que no se pierde. */
.eco-clones {
  display: contents;
}

/* ==========================================================================
   LAS DOS ISLAS, AHORA OSCURAS
   ==========================================================================
   Preparación y Kit eran las dos únicas secciones claras de la página: fondo
   #F2F6F7 y texto negro. La intención era dar un respiro; el efecto, después
   de veinte pantallas en negro y en un móvil, era un fogonazo.

   Pasan a oscuro, pero no al mismo oscuro: cada una tiene su superficie para
   que dos bloques seguidos no se lean como uno solo de doble largo. Y no es
   «la misma sección blanca pintada de negro» — el aro, la lista, las
   pastillas y el botón están rehechos para fondo oscuro.

   Ni una palabra, ni un dato, ni una imagen cambian. Solo el color.
   ========================================================================== */

.isla-oscura {
  background: linear-gradient(180deg, #111820 0%, #0d141b 100%);
  color: #f5f7f9;
  border-top: 1px solid rgba(127, 212, 228, 0.08);
  border-bottom: 1px solid rgba(127, 212, 228, 0.08);
}

.isla-oscura .section-eyebrow {
  color: #45aec2;
}

.isla-oscura .section-title,
.isla-oscura h2,
.isla-oscura h3 {
  color: #f5f7f9;
}

.isla-oscura p,
.isla-oscura li {
  color: #a8b3bc;
}

.isla-oscura .ico {
  color: #7fd4e4;
}

/* --- El botón, sobre fondo oscuro ---------------------------------------- */

.isla-oscura .cta.btn-primary {
  background: #45aec2;
  color: #071014;
  border: 1px solid rgba(127, 212, 228, 0.35);
  box-shadow: 0 10px 26px -12px rgba(69, 174, 194, 0.7);
}

.isla-oscura .cta.btn-primary .ico {
  color: #071014;
}

/* ==========================================================================
   PREPARACIÓN · el aro y la lista
   ========================================================================== */

/*
  El aro se dibuja con un cónico: el arco de cian hasta el porcentaje y el
  resto en gris azulado. Sobre claro bastaba con dos grises; sobre oscuro, un
  anillo demasiado apagado desaparece y uno demasiado vivo se come el número.
*/
.isla-oscura .score-ring {
  background: conic-gradient(#45aec2 0 43%, #263540 43% 100%);
}

.isla-oscura .score-ring .inner {
  background: #0b0f13;
  color: #f5f7f9;
  border: 1px solid rgba(127, 212, 228, 0.12);
}

.isla-oscura .score-checklist .item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.isla-oscura .score-checklist .label {
  color: #d5dde3;
}

.isla-oscura .score-checklist .icon .ico {
  color: #45aec2;
}

/*
  Hecho y Pendiente NO se distinguen solo por el color.

  Cada uno lleva su palabra —«Hecho», «Pendiente»— y además su icono es
  distinto: círculo continuo frente a círculo de trazo discontinuo. Quien no
  distingue el verde del ámbar sigue sabiendo cuál es cuál, que es de lo que
  va esta sección.
*/
.isla-oscura .score-checklist .status.done {
  color: #59c77d;
  background: rgba(89, 199, 125, 0.12);
  border: 1px solid rgba(89, 199, 125, 0.26);
}

.isla-oscura .score-checklist .status.pending {
  color: #f2a23a;
  background: rgba(242, 162, 58, 0.12);
  border: 1px solid rgba(242, 162, 58, 0.26);
}

.isla-oscura .score-checklist .status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

/* El pie del aro: gris medio, no blanco — no compite con la cifra. */
.isla-oscura .score-dashboard p {
  color: #91a0ac;
}

/* ==========================================================================
   KIT · su propia superficie y sus pastillas
   ========================================================================== */

.isla-kit {
  background:
    radial-gradient(circle at 32% 60%, rgba(69, 174, 194, 0.08), transparent 48%),
    #0c1319;
}

/*
  Las pastillas necesitan PROFUNDIDAD, no solo otro negro.

  Una pastilla #0C1319 sobre un fondo #0C1319 no existe. Van una superficie
  por encima, con su filo de cian: se ven como piezas puestas sobre la
  sección, que es lo que son.
*/
.isla-kit .kit-pastilla,
.isla-kit .kit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #151f28;
  border: 1px solid rgba(127, 212, 228, 0.12);
  border-radius: 40px;
  color: #e5ebef;
  transition:
    border-color 200ms ease,
    background 200ms ease;
}

.isla-kit .kit-pastilla {
  padding: 7px 16px;
}

.isla-kit .kit-chip {
  padding: 6px 14px;
  font-size: 0.85rem;
}

.isla-kit .kit-pastilla .ico,
.isla-kit .kit-chip .ico {
  color: #7fd4e4;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .isla-kit .kit-pastilla:hover,
  .isla-kit .kit-chip:hover {
    background: #1a2733;
    border-color: rgba(127, 212, 228, 0.3);
  }
}

/* La fotografía: marco tenue y sombra. Sin velo encima de las caras. */
.isla-kit .emotional-asset-slot {
  border: 1px solid rgba(127, 212, 228, 0.14);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   LOS PUENTES NARRATIVOS
   ==========================================================================
   Cuatro pausas editoriales entre bloques. Alternan superficie para dar ritmo
   y ninguna pasa de 260 px: son una frase, no una pantalla.
   ========================================================================== */

.corte {
  position: relative;
  /* 58 y no 72: con el titular dentro salian a 288 px en escritorio y el
     objetivo eran 260. */
  padding: 58px 0 !important;
  min-height: 0 !important;
  border-top: 1px solid rgba(127, 212, 228, 0.06);
  border-bottom: 1px solid rgba(127, 212, 228, 0.06);
  background:
    radial-gradient(circle at 50% 50%, rgba(69, 174, 194, 0.07), rgba(11, 15, 19, 0) 62%),
    #0a1117;
}

/* El segundo y el cuarto cambian de superficie: así no se repiten. */
#corte-antes,
#corte-esperar {
  background:
    radial-gradient(circle at 50% 46%, rgba(69, 174, 194, 0.09), rgba(11, 15, 19, 0) 60%),
    #0d161e;
}

.corte p {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(1.7rem, 3.1vw, 3.25rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f5f7f9;
  text-wrap: balance;
}

.corte em {
  font-style: normal;
  color: #45aec2;
}

.corte small {
  display: block;
  max-width: 46ch;
  margin: 14px auto 0;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #a8b3bc;
}

/* El último antes del precio pesa un poco más: ahí cambia la conversación. */
#corte-esperar {
  padding: 76px 0 !important;
}

/*
  Aparecen una vez al entrar en pantalla, y ya está.

  `animation-timeline: view()` lo hace el navegador sin JavaScript donde
  existe; donde no, la regla se ignora y el puente simplemente se ve. Nadie se
  queda sin leerlo por no tener una función moderna.
*/
@supports (animation-timeline: view()) {
  .corte p {
    animation: corteEntra linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 26%;
  }
}

@keyframes corteEntra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 899px) {
  /* 44 y no 56: con el titular dentro salian a 245 px y el objetivo era 220. */
  .corte {
    padding: 44px 0 !important;
  }

  #corte-esperar {
    padding: 58px 0 !important;
  }

  .corte p {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
    line-height: 1.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corte p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   LA CABECERA, MÁS PEQUEÑA EN MÓVIL
   ==========================================================================
   Ocupaba 72 px con el logotipo, el botón «Preparar a mi familia» y el menú.
   Sobre una página que ya lleva su propio botón fijo abajo, eso era una barra
   robando el 9 % de la pantalla para repetir lo que ya está a mano.

   Se queda en 52 px y con lo imprescindible: la marca —hay que saber dónde
   se está— y el menú. El botón de arriba se va: el fijo de abajo hace ese
   trabajo, y está donde llega el pulgar.
   ========================================================================== */

@media (max-width: 899px) {
  :root,
  .ck {
    --header-height: 52px;
  }

  .header {
    height: 52px;
  }

  .header-inner {
    height: 52px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .logo {
    font-size: 1.02rem;
  }

  .logo svg {
    width: 24px;
    height: 24px;
  }

  /* El botón de la cabecera desaparece: abajo hay uno fijo que hace lo mismo. */
  .header-cta {
    display: none;
  }
}

/* ==========================================================================
   EL PRECIO · el equivalente por mes manda, el cargo real se dice entero
   ==========================================================================
   La cifra grande es lo que cuesta al mes; debajo, en dos líneas, lo que se
   cobra de verdad y cuándo.

   El orden importa y no es solo diseño: 1,42 se compara con un café y 17 se
   compara con una suscripción, así que la cifra que ancla la decisión tiene
   que ser la primera. Pero el cargo real va en la MISMA tarjeta y antes del
   botón — nunca escondido hasta el checkout. Quien pulsa creyendo que paga
   1,42 y ve 17 en el extracto pide la devolución, y tiene razón.
   ========================================================================== */

.plan-precio {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin-top: 18px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  line-height: 1;
  color: #f5f7f9;
}

.plan-cifra {
  font-size: clamp(2.6rem, 9vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan-periodo {
  align-self: flex-end;
  margin-bottom: 7px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.plan-periodo b {
  font-weight: 600;
}

/* «Equivale a $27 al año» — la cuenta, para que nadie tenga que hacerla. */
.plan-equivalente {
  margin-top: 8px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

/*
  «Facturado hoy: $27 USD · se renueva cada año».

  Esta línea es la que convierte el anclaje en algo honesto. Lleva borde y
  fondo propios para que no se lea como letra pequeña: es información, no un
  descargo de responsabilidad escondido.
*/
.plan-facturado {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(69, 174, 194, 0.07);
  border: 1px solid rgba(127, 212, 228, 0.14);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #a8b3bc;
}

.plan-facturado b {
  color: #f5f7f9;
  font-weight: 700;
}

/* ==========================================================================
   MÓVIL · las tres tarjetas completas, sin selector
   ==========================================================================
   Aquí había un selector compacto que enseñaba una tarjeta cada vez. Se quita
   por decisión de producto: con el precio anclado al mes, las tres se comparan
   mejor una debajo de otra que saltando entre pestañas.

   Cuesta scroll —unos 1.400 px— y se acepta a cambio de que las tres ofertas
   se lean seguidas.
   ========================================================================== */

@media (max-width: 899px) {
  .planes-selector {
    display: none;
  }

  .planes-grid > .plan {
    display: flex;
  }

  .plan-precio {
    margin-top: 14px;
  }

  .plan-cifra {
    font-size: clamp(2.5rem, 11vw, 3rem);
  }
}

/* ==========================================================================
   EL AHORRO, DELANTE DEL PRECIO
   ==========================================================================
   El patrón de las tarifas de hosting, que es el que pidió el propietario:
   arriba lo que costaría de otro modo, tachado, y al lado cuánto se ahorra;
   debajo, grande, lo que se paga.

   Funciona porque hace la resta por el lector. Y aquí se puede usar sin
   mentir: el precio tachado es la tarifa mensual de este mismo plan,
   publicada en esta misma página a un clic del interruptor. Eso es lo que
   separa un ancla comprobable de un «antes» inventado.
   ========================================================================== */

.plan-ahorro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    min-height: 26px;
}

.plan-ahorro[hidden] {
    display: none;
}

.plan-antes {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: #75828d;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(255, 107, 107, 0.75);
}

.plan-dto {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(46, 204, 113, 0.14);
    border: 1px solid rgba(46, 204, 113, 0.32);
    color: #6fe0a0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Con el ahorro justo encima, el precio ya no necesita separarse tanto. */
.plan-ahorro + .plan-precio {
    margin-top: 8px;
}

/*
  El dólar lo pone `.plan-cifra::before` desde ventas.css: pequeño y en alto,
  como en cualquier tarifa. Aquí solo se le sube el contraste — en gris apagado
  parecía una errata al lado de una cifra de 800.

  Un segundo símbolo en el marcado es justo lo que producía el «$$2.25» que se
  veía en pantalla. Uno solo, y que sea este.
*/
.plan-cifra::before {
    color: #cdd7df;
    margin-right: 3px;
}

/* ==========================================================================
   LA CHAPA DE RECOMENDADO, SOBRE LA FOTOGRAFÍA
   ==========================================================================
   Estaba colgada del borde superior de la tarjeta (`top: -13px`), invadiendo
   la sección de arriba. Ahora vive dentro de la figura, apoyada en la franja
   oscura del degradado, que es exactamente la zona que ese degradado estaba
   creando.

   Hace falta el z-index: el `::after` que oscurece la foto es un pseudo del
   mismo contenedor y va después en el orden de pintado, así que sin esto la
   chapa quedaría por debajo del velo.
   ========================================================================== */

.plan-foto .plan-insignia {
    top: 14px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

/*
  Y un velo arriba, igual que el que ya existia abajo.

  La ilustracion no es lisa en esa franja —hay caras y texto— y la chapa
  tiene que apoyarse en algo. Es el mismo recurso que el degradado inferior,
  aplicado al otro extremo.
*/
.plan-popular .plan-foto::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 92px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 12, 18, 0.68), transparent);
}

/*
  Cuando el quiz recomienda un plan, la chapa vuelve al borde superior de la
  tarjeta. Reservamos una franja antes de la fotografía para que quede al
  frente sin cubrir el mockup, y retiramos el velo que acompañaba a la antigua
  chapa «El más popular» dentro de la imagen.
*/
.plan-recomendado-quiz > .plan-foto {
    margin-top: -8px;
}

.plan-recomendado-quiz .plan-foto::before {
    content: none;
}

@media (max-width: 899px) {
    .plan-ahorro {
        margin-top: 14px;
        gap: 8px;
    }

    .plan-antes {
        font-size: 0.98rem;
    }

    .plan-foto .plan-insignia {
        top: 11px;
        font-size: 0.66rem;
        padding: 4px 11px;
    }

    .plan-popular .plan-foto::before {
        height: 70px;
    }
}