/* Rendik — landing
   Sin frameworks ni fuentes externas: la página carga de un solo archivo y no
   filtra visitas a terceros antes de que el usuario acepte nada. */

/* Los colores se nombran por su papel —acento, peligro, aviso— y no por el color
   que son. Es lo que permite que el modo oscuro cambie los valores acá sin tocar
   una sola regla más abajo: con nombres como `--verde-oscuro`, cada tema nuevo
   obliga a revisar el archivo entero. */
:root {
  color-scheme: light dark;

  --verde: #0f3d2e;
  --menta: #7fe7b0;
  --menta-suave: #e8f8f0;
  --texto: #14251d;
  --texto-suave: #5b6b63;
  --borde: #dfe7e2;
  --fondo: #ffffff;
  --fondo-alt: #f6faf8;
  --fondo-translucido: rgba(255, 255, 255, 0.92);

  --acento: #1b6b4f;
  --acento-fuerte: #17543f;
  --acento-tenue: #7fbfa4;
  /* Texto sobre un fondo de acento. No se llama "blanco" porque en oscuro es
     casi negro: el acento pasa a ser un verde claro. */
  --sobre-acento: #ffffff;

  --peligro: #b3261e;
  --peligro-fuerte: #8c1d18;
  --peligro-medio: #a03027;
  --peligro-texto: #7a1f18;
  --peligro-tenue: #d99b94;
  --peligro-borde: #f0c9c6;
  --peligro-fondo: #fdeceb;

  --exito: #2e7d32;
  /* Aclarado desde #d7f0df: con el verde de éxito encima daba 4,25:1 y
     no llegaba a AA. La pastilla "Activa" del panel es el único par que
     lo usaba, y era imposible de detectar a ojo. */
  --exito-fondo: #e6f7ec;

  --aviso-texto: #7a5b1f;
  --aviso-borde: #e8c99b;
  --aviso-fondo: #fdf6ec;

  --velo: rgba(20, 37, 29, 0.45);
  --sombra-modal: 0 24px 60px rgba(6, 30, 22, 0.28);

  /* La barra superior lleva el verde de marca en los dos temas: es el único
     elemento fijo de cada página y es donde vive la marca. Sus textos tienen
     tokens propios porque van sobre verde, no sobre el fondo. */
  --cabecera-fondo: #0f3d2e;
  --cabecera-texto: #f2fbf6;
  --cabecera-texto-suave: rgba(242, 251, 246, 0.72);

  /* La marca de "parte del plan completo". Dorado y no verde: debe leerse
     como distincion, no como estado. */
  --premium: #b8860b;

  /* Colores de datos. Uno por gráfico: dentro de un gráfico todas las barras
     comparten tono —son una sola serie y el largo ya dice el valor—, y el tono
     distinto es lo que separa un gráfico del siguiente. */
  --dato-gasto: #1b6b4f;
  --dato-comercio: #2b5f97;

  --max: 1080px;

  /* --- Escala tipográfica ---
     Seis pasos y no dieciséis. La página tenía dieciséis tamaños distintos
     puestos a mano, y esa es la razón real de que se viera plana: sin una
     escala, ningún texto se siente más importante que otro. Los saltos son
     grandes a propósito — una jerarquía que hay que medir para notarla no es
     una jerarquía. */
  --t-hero: clamp(2.6rem, 6.2vw, 4.4rem);
  --t-titulo: clamp(1.8rem, 3.6vw, 2.6rem);
  --t-seccion: clamp(1.15rem, 1.8vw, 1.35rem);
  --t-bajada: clamp(1.05rem, 1.5vw, 1.28rem);
  --t-cuerpo: 1rem;
  --t-chica: 0.875rem;
  --t-micro: 0.78rem;

  /* --- Radios ---
     Tres valores. Había siete, y mezclar 3px con 18px en la misma pantalla se
     lee como descuido aunque nadie sepa nombrarlo. */
  --r-chico: 8px;
  --r-medio: 14px;
  --r-grande: 24px;
  --r-pastilla: 999px;

  /* --- Profundidad ---
     No había ninguna sombra en toda la página: todo eran rectángulos de 1px al
     mismo nivel. Dos alturas alcanzan; más de dos y nada parece importante.
     Las sombras van teñidas de verde y no de negro puro, que sobre un fondo
     cálido se ve gris sucio. */
  --sombra-1: 0 1px 2px rgba(12, 45, 34, 0.05), 0 2px 8px rgba(12, 45, 34, 0.05);
  --sombra-2: 0 2px 4px rgba(12, 45, 34, 0.06), 0 12px 32px rgba(12, 45, 34, 0.09);
  /* Superficie que "sube" respecto de la página. En claro es blanco puro; en
     oscuro las sombras casi no se leen, así que la profundidad la da un gris
     más claro que el fondo. */
  --superficie: #ffffff;

  --ancho-lectura: 62ch;
}

/* Modo oscuro.

   No es una inversión de la paleta clara. Los valores están elegidos uno por uno
   contra el fondo oscuro: invertir mecánicamente produce rojos y verdes que
   vibran sobre negro, y hunde el contraste justo en el texto secundario, que es
   la mitad de lo que hay en pantalla.

   Los fondos no son negro puro. Un #000 con texto blanco produce halo en
   pantallas OLED y cansa en una app que se abre de noche, que es exactamente
   cuando alguien revisa sus gastos.

   Todos los pares texto/fondo se verificaron contra WCAG AA. */
/* El tema elegido a mano gana al del sistema. `tema.js` pone `data-tema` en
   <html> antes del primer pintado; sin el atributo, manda el sistema.

   ATENCIÓN: los dos bloques de tokens oscuros de abajo son EL MISMO listado.
   No hay forma de compartirlos sin preprocesador, así que si cambias un valor
   en uno, cámbialo en el otro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --verde: #9fe9c4;
    --menta: #1f4d3c;
    --menta-suave: #16302a;
    --texto: #e8f0ec;
    --texto-suave: #9db0a7;
    --borde: #2a3833;
    --fondo: #121816;
    --fondo-alt: #1a221f;
    --fondo-translucido: rgba(18, 24, 22, 0.92);

    --acento: #6fd6a5;
    --acento-fuerte: #8fe4bb;
    --acento-tenue: #3f7a63;
    /* Sobre un verde claro el texto tiene que ser oscuro. Dejarlo blanco daba
       1,6:1 —ilegible— en cada botón primario. */
    --sobre-acento: #0d1f18;

    --peligro: #ff9a90;
    --peligro-fuerte: #ffb3aa;
    --peligro-medio: #e57a70;
    --peligro-texto: #ffa79d;
    --peligro-tenue: #8c4038;
    --peligro-borde: #5e2a25;
    --peligro-fondo: #2a1614;

    --exito: #7fd18a;
    --exito-fondo: #1b3520;

    --aviso-texto: #e5c184;
    --aviso-borde: #5c4a2a;
    --aviso-fondo: #2a2318;

    --velo: rgba(0, 0, 0, 0.62);
    --sombra-modal: 0 24px 60px rgba(0, 0, 0, 0.6);

    /* Más profundo que el fondo, sigue siendo verde: la marca no desaparece
       de noche. */
    --cabecera-fondo: #10231d;
    --cabecera-texto: #e8f0ec;
    --cabecera-texto-suave: #9db0a7;
    --premium: #e2b13c;
    --dato-gasto: #6fd6a5;
    --dato-comercio: #7db3e8;

    /* En oscuro una sombra no se ve: el fondo ya es lo más oscuro que hay. La
       elevación se hace subiendo la superficie, y la sombra queda solo para
       separar el borde. */
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 4px 24px rgba(0, 0, 0, 0.5);
    --superficie: #1d2724;  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;

    --verde: #9fe9c4;
    --menta: #1f4d3c;
    --menta-suave: #16302a;
    --texto: #e8f0ec;
    --texto-suave: #9db0a7;
    --borde: #2a3833;
    --fondo: #121816;
    --fondo-alt: #1a221f;
    --fondo-translucido: rgba(18, 24, 22, 0.92);

    --acento: #6fd6a5;
    --acento-fuerte: #8fe4bb;
    --acento-tenue: #3f7a63;
    /* Sobre un verde claro el texto tiene que ser oscuro. Dejarlo blanco daba
       1,6:1 —ilegible— en cada botón primario. */
    --sobre-acento: #0d1f18;

    --peligro: #ff9a90;
    --peligro-fuerte: #ffb3aa;
    --peligro-medio: #e57a70;
    --peligro-texto: #ffa79d;
    --peligro-tenue: #8c4038;
    --peligro-borde: #5e2a25;
    --peligro-fondo: #2a1614;

    --exito: #7fd18a;
    --exito-fondo: #1b3520;

    --aviso-texto: #e5c184;
    --aviso-borde: #5c4a2a;
    --aviso-fondo: #2a2318;

    --velo: rgba(0, 0, 0, 0.62);
    --sombra-modal: 0 24px 60px rgba(0, 0, 0, 0.6);

    /* Más profundo que el fondo, sigue siendo verde: la marca no desaparece
       de noche. */
    --cabecera-fondo: #10231d;
    --cabecera-texto: #e8f0ec;
    --cabecera-texto-suave: #9db0a7;
    --premium: #e2b13c;
  --dato-gasto: #6fd6a5;
  --dato-comercio: #7db3e8;

    /* En oscuro una sombra no se ve: el fondo ya es lo más oscuro que hay. La
       elevación se hace subiendo la superficie, y la sombra queda solo para
       separar el borde. */
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 4px 24px rgba(0, 0, 0, 0.5);
    --superficie: #1d2724;}
:root[data-tema="claro"] { color-scheme: light; }

* { box-sizing: border-box; }

/* `hidden` tiene que ganarle a cualquier `display` de una clase.

   El navegador aplica `[hidden] { display: none }` desde su hoja por omisión,
   que pierde contra cualquier `display` declarado por nosotros. Como el menú
   lateral es `display: flex`, `<nav hidden>` no ocultaba nada: la pantalla de
   acceso mostraba el menú completo —incluido el enlace al panel de
   administración— a cualquiera que abriera la página sin sesión.

   Eran nueve elementos, no uno: la tarjeta de logros, el gráfico, la barra de
   selección y varios más se pintaban vacíos cuando debían estar ocultos. Cada
   uno se habría "arreglado" con una regla propia —y de hecho `.velo[hidden]`
   existía en admin.css— pero el que viniera después habría vuelto a caer.

   `!important` es correcto acá: `hidden` significa "esto no se muestra", y
   ninguna clase debería poder contradecirlo. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.contenedor {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Salto de teclado ---
   Invisible hasta que recibe foco: quien navega con Tab no tiene por qué
   cruzar el menú entero para llegar al contenido, y quien usa mouse no tiene
   por qué verlo. */
.saltar {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--r-chico);
  background: var(--acento);
  color: var(--sobre-acento);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

/* --- Encabezado --- */
header {
  position: sticky;
  top: 0;
  /* Verde de marca, sólido: sobre un fondo con color el translúcido con blur
     se veía sucio, y el borde inferior ya no separa nada que se confunda. */
  background: var(--cabecera-fondo);
  z-index: 10;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.marca {
  font-size: var(--t-seccion);
  font-weight: 800;
  color: var(--cabecera-texto);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.barra nav a {
  color: var(--cabecera-texto-suave);
  text-decoration: none;
  margin-left: 28px;
  font-size: var(--t-chica);
}

.barra nav a:hover { color: var(--cabecera-texto); }

/* El único botón de la barra. Relleno menta sobre el verde: es la acción, no
   un enlace más. */
.boton-cabecera {
  background: var(--menta);
  color: #0f3d2e;
  border-radius: var(--r-pastilla);
  padding: 9px 20px !important;
  font-weight: 700;
  text-decoration: none;
  margin-left: 28px;
  font-size: var(--t-chica);
}
.barra nav a.boton-cabecera { color: #0f3d2e; }
.barra nav a.boton-cabecera:hover { background: #a8efc9; color: #0f3d2e; }

@media (max-width: 640px) {
  .barra nav { display: none; }
}

/* --- Hero --- */
.hero {
  padding: 88px 0 72px;
  text-align: center;
}

.hero h1 {
  font-size: var(--t-hero);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--verde);
}

.hero p.bajada {
  font-size: var(--t-bajada);
  color: var(--texto-suave);
  max-width: 640px;
  margin: 0 auto 36px;
}

.destacado {
  background: linear-gradient(180deg, transparent 62%, var(--menta) 62%);
  padding: 0 4px;
}

/* --- Formulario --- */
.captura {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

.captura input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-size: var(--t-cuerpo);
  font-family: inherit;
  min-width: 0;
}

.captura input:focus {
  outline: 2px solid var(--menta);
  border-color: var(--verde);
}

.boton {
  background: var(--verde);
  color: var(--sobre-acento);
  border: 0;
  border-radius: 10px;
  padding: 14px 24px;
  font-size: var(--t-cuerpo);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.boton:hover { background: var(--acento-fuerte); }
.boton:disabled { opacity: 0.6; cursor: default; }
/* El .boton nació <button>; como <a> necesita que el subrayado no vuelva. */
a.boton { display: inline-block; text-decoration: none; }

.boton-borde {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--t-cuerpo);
}
.boton-borde:hover { border-color: var(--acento-tenue); color: var(--acento-fuerte); }

.acciones-hero {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.aviso-form {
  margin-top: 14px;
  font-size: var(--t-chica);
  min-height: 1.4em;
}

.aviso-form.ok { color: var(--verde); font-weight: 600; }
.aviso-form.error { color: var(--peligro); }

.letra-chica {
  font-size: var(--t-chica);
  color: var(--texto-suave);
  margin-top: 12px;
}

@media (max-width: 560px) {
  .captura { flex-direction: column; }
}

/* --- Secciones --- */
section { padding: 72px 0; }

section.alt { background: var(--fondo-alt); border-block: 1px solid var(--borde); }

h2 {
  font-size: var(--t-titulo);
  letter-spacing: -0.02em;
  color: var(--verde);
  margin: 0 0 14px;
  text-align: center;
}

.subtitulo {
  text-align: center;
  color: var(--texto-suave);
  max-width: 620px;
  margin: 0 auto 48px;
}

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.paso {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 28px;
}

.paso .numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--menta);
  color: var(--verde);
  font-weight: 800;
  margin-bottom: 14px;
}

.paso h3 { margin: 0 0 8px; font-size: var(--t-seccion); color: var(--verde); }
.paso p { margin: 0; color: var(--texto-suave); font-size: var(--t-cuerpo); }

/* --- Privacidad --- */
.privacidad {
  background: var(--verde);
  color: var(--sobre-acento);
  border-radius: 18px;
  padding: 48px;
}

.privacidad h2 { color: var(--menta); text-align: left; }
.privacidad ul { margin: 24px 0 0; padding-left: 22px; }
.privacidad li { margin-bottom: 14px; }
.privacidad strong { color: var(--menta); }

@media (max-width: 640px) { .privacidad { padding: 32px 24px; } }

/* --- Honestidad --- */
.honestidad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 8px;
}

.tarjeta {
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 26px;
  background: var(--fondo);
}

.tarjeta h3 { margin: 0 0 14px; font-size: var(--t-seccion); }
.tarjeta ul { margin: 0; padding-left: 20px; color: var(--texto-suave); }
.tarjeta li { margin-bottom: 10px; }

.si h3 { color: var(--verde); }
.aun-no h3 { color: var(--texto-suave); }

/* --- Pie --- */
footer {
  border-top: 1px solid var(--borde);
  padding: 40px 0;
  color: var(--texto-suave);
  font-size: var(--t-chica);
}

.pie {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

footer a { color: var(--texto-suave); }

/* --- Vistazo al producto (landing) ---
   Tres paneles que reproducen la UI real con cifras de ejemplo, rotuladas como
   tales. Mostrar el producto convence más que describirlo, pero una captura
   inventada presentada como real prometería algo que el usuario no va a ver. */

#vistazo .contenedor { max-width: 1180px; }

.vistazo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 32px;
}
@media (min-width: 900px) {
  .vistazo { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.vistazo-panel {
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--fondo);
  text-align: left;
}

.vp-etiqueta { font-size: var(--t-micro); color: var(--texto-suave); }
.vp-monto {
  font-size: 2rem;
  font-weight: 800;
  color: var(--verde);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.vp-detalle { font-size: var(--t-micro); color: var(--texto-suave); margin-top: 6px; }

.vp-titulo { font-size: var(--t-chica); font-weight: 600; margin-bottom: 14px; }
.vp-par { display: flex; gap: 18px; }
.vp-sub { font-size: var(--t-micro); color: var(--texto-suave); }
.vp-cifra {
  font-size: var(--t-seccion);
  font-weight: 800;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.vp-cifra.alerta { color: var(--peligro-texto); }
.vp-brecha { font-size: var(--t-micro); color: var(--peligro-texto); margin: 12px 0 0; font-weight: 600; }

.vp-barra {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.vp-nombre { font-size: var(--t-micro); color: var(--texto-suave); }
.vp-pista { display: block; height: 14px; background: var(--fondo-alt); border-radius: 3px; }
.vp-marca { display: block; height: 14px; background: var(--acento); border-radius: 0 3px 3px 0; }

.letra-chica.centrado { text-align: center; margin-top: 14px; }

/* La marca lleva el logo al lado de la palabra. Alineado por la línea base
   óptica, no por la caja: el logo es un cuadrado y el texto tiene ascendentes,
   así que centrarlos por caja los deja visiblemente desalineados. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.marca img {
  display: block;
  border-radius: 6px;
}

/* --- Movimiento ---
   Todo lo de abajo respeta `prefers-reduced-motion`. No es un detalle de
   accesibilidad opcional: hay gente para quien el movimiento de entrada produce
   mareo real, y una landing que se mueve entera es de los peores casos.

   Ninguna animación mueve `top`, `left`, `width` ni `height`: solo `transform`
   y `opacity`, que el navegador compone sin recalcular el layout. Animar
   geometría en una lista larga produce saltos visibles en un teléfono de gama
   media, que es donde va a mirarse esto. */

@media (prefers-reduced-motion: no-preference) {
  /* Entrada al hacer scroll. El estado inicial se aplica solo si hay soporte
     de animation-timeline; si no, el elemento queda visible y quieto, nunca
     invisible — un contenido que no aparece es peor que uno que no se anima. */
  @supports (animation-timeline: view()) {
    .aparece {
      animation: aparecer linear both;
      animation-timeline: view();
      /* Termina de aparecer cuando lleva un tercio de pantalla: si terminara
         al centro, el usuario leería la mitad del texto en transición. */
      animation-range: entry 0% cover 30%;
    }
  }

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

  /* El héroe no espera al scroll: ya está a la vista al cargar. */
  .hero h1, .hero .bajada, .hero .captura {
    animation: entrar 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero .bajada { animation-delay: 0.08s; }
  .hero .captura { animation-delay: 0.16s; }

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

  /* Las barras del vistazo crecen desde la base, como lo haría el dato real. */
  @supports (animation-timeline: view()) {
    .vp-marca {
      animation: crecer 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
      transform-origin: left center;
    }
  }
  @keyframes crecer {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .boton, .paso, .tarjeta, .vistazo-panel {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .paso:hover, .tarjeta:hover, .vistazo-panel:hover {
    transform: translateY(-3px);
  }
  .boton:hover { transform: translateY(-1px); }
  .boton:active { transform: translateY(0); }
}

/* Sin preferencia declarada el navegador cae acá igual; esto es para quien la
   declaró explícitamente. */
@media (prefers-reduced-motion: reduce) {
  .aparece, .hero h1, .hero .bajada, .hero .captura, .vp-marca {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* El foco visible nunca se anima ni se esconde: es cómo navega quien usa
   teclado, y una transición acá hace perder de vista dónde está. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  transition: none;
}

/* ==========================================================================
   Sistema aplicado
   ==========================================================================

   Lo de arriba declaró la escala, los radios y la profundidad. Esto los usa.
   Va al final para que gane sin tener que reescribir cada regla anterior una
   por una: el objetivo era arreglar el sistema, no reformatear el archivo. */

/* --- Tipografía ---
   Los tamaños ahora salen de la escala; acá solo va lo que la escala no puede
   decidir sola: el ritmo vertical y el apriete de los titulares grandes. Un
   titular de 70px con el interlineado de un párrafo se ve suelto y débil. */
h1, .hero h1 { line-height: 1.02; letter-spacing: -0.035em; }
h2 { line-height: 1.14; letter-spacing: -0.02em; }
h3 { line-height: 1.3; }

.bajada, .subtitulo {
  line-height: 1.55;
  /* Medida de lectura: una línea de cien caracteres se pierde al volver. */
  max-width: var(--ancho-lectura);
}
.hero .bajada, .subtitulo { margin-left: auto; margin-right: auto; }

/* --- El hero deja de empezar en un vacío blanco ---
   Un lavado de color muy suave detrás del titular. No es decoración: sin él la
   página arranca sin foco y el ojo no sabe dónde posarse. Se hace con
   gradientes y no con una imagen para no pedir un archivo más. */
.hero {
  position: relative;
  padding-top: 72px;
  padding-bottom: 88px;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 0%, var(--menta-suave) 0%, transparent 70%),
    radial-gradient(40% 40% at 85% 10%, var(--menta-suave) 0%, transparent 65%);
  /* En oscuro el mismo lavado sería un manchón: se apaga bastante. */
  opacity: 1;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .hero::before { opacity: 0.5; }
}
:root[data-tema="oscuro"] .hero::before { opacity: 0.5; }

.hero .destacado {
  /* El verde de marca solo en la mitad que importa del titular. */
  color: var(--verde);
}

/* --- El formulario del hero como una pieza, no dos campos sueltos --- */
.captura {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra-2);
  padding: 10px;
  gap: 8px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.captura input {
  border: 0;
  background: transparent;
  padding: 14px 16px;
}
.captura input:focus { outline: 2px solid var(--menta); border-radius: var(--r-medio); }

/* --- Profundidad en las tarjetas ---
   Antes eran rectángulos de 1px todos al mismo nivel. Ahora las que contienen
   algo que el usuario debe mirar se levantan; las de apoyo se quedan abajo. */
.paso, .tarjeta, .vista-previa {
  border-radius: var(--r-grande);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .paso:hover, .tarjeta:hover {
    box-shadow: var(--sombra-2);
    transform: translateY(-2px);
  }
}

.privacidad { border-radius: var(--r-grande); box-shadow: var(--sombra-2); }

/* --- Ritmo entre secciones ---
   Las secciones medían más de mil píxeles de alto sin respiro interno. Con
   aire y una separación clara, bajar por la página se siente como avanzar. */
section { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
.hero { padding-top: clamp(48px, 6vw, 80px); }

/* Botones y campos comparten el radio del sistema. */
.boton { border-radius: var(--r-medio); box-shadow: var(--sombra-1); }
.boton:hover { box-shadow: var(--sombra-2); }


/* --- Planes ---
   Dos tarjetas y la de pago destacada: el gratis existe y se dice, pero la
   página trabaja para el que duda entre pagar o no. */
.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  gap: 20px;
  justify-content: center;
  margin-top: 32px;
}
.plan-tarjeta { text-align: left; padding: 28px; }
.plan-tarjeta h3 { margin: 0 0 4px; font-size: var(--t-seccion); }
.plan-tarjeta ul {
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--texto-suave);
  font-size: var(--t-chica);
}
.plan-tarjeta li { margin-bottom: 8px; }
.plan-tarjeta.destacada {
  border: 2px solid var(--acento);
  box-shadow: var(--sombra-2);
}
.plan-precio {
  font-size: var(--t-titulo);
  font-weight: 800;
  color: var(--verde);
  letter-spacing: -0.02em;
  margin: 0;
}
.plan-precio small { font-size: var(--t-cuerpo); font-weight: 500; color: var(--texto-suave); }
.plan-anual { margin: 4px 0 0; color: var(--texto-suave); font-size: var(--t-chica); }


/* --- Crédito y versión --- */
.credito {
  font-size: var(--t-micro);
  color: var(--texto-suave);
  text-align: center;
  margin: 8px 0 16px;
}
.credito a { color: var(--texto-suave); }
.pie-app { margin-top: 48px; }


/* --- Marca de plan completo --- */
.premium {
  color: var(--premium);
  font-size: 0.8em;
  margin-left: 6px;
}
.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* Anchos de la maqueta de la vista previa. Clases y no style= en el HTML:
   deja el camino libre para endurecer style-src cuando el boton de Google
   lo permita. */
.vp-w100 { width: 100%; }
.vp-w71 { width: 71%; }
.vp-w43 { width: 43%; }
.vp-w16 { width: 16%; }