:root {
    /* La paleta, tal cual */
    --pino:      #17380F;
    --pino-hondo:#0C1F08;
    --verde:     #2CAF41;
    --pera:      #6BB42A;
    --lima:      #9CF659;
    --pepinillo: #5D8437;

    /* El blanco NO es blanco puro: lleva un pelín de verde adentro. Un
       #FFFFFF al lado de estos verdes se ve azulado y despegado. */
    --papel:     #FAFDF6;
    --papel-2:   #F1F7EA;

    /* Sobre claro manda el pino. El lima acá NO se usa para texto: sobre
       blanco tiene un contraste de 1.6:1, es ilegible. Va como relleno de
       bloques grandes y nada más. */
    --tinta:     #14300D;
    --tinta-sueve:#40613A;
    --tinta-tenue:#7E9877;

    --display: 'Archivo', 'Arial Narrow', Impact, sans-serif;
    --texto: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'Consolas', monospace;

    --borde: rgba(23, 56, 15, 0.13);
    --panel: rgba(255, 255, 255, 0.72);

    color-scheme: light;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .marco {
    max-width: 1080px;
    margin: 0 auto;
    padding-inline: 24px;
  }

  /* ── LA AURORA ───────────────────────────────────────────────────────
     Tres manchas de color muy difuminadas que se mueven despacio, como
     una aurora. Van detrás de todo y no capturan el mouse. */
  .aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  /* SOBRE BLANCO LA AURORA VA MUCHO MÁS SUAVE.
     Contra el pino oscuro las manchas al 50% se leían como luz; contra el
     papel, cualquier cosa por encima del 20% ensucia y le come contraste
     al texto. Son un tinte, no un fondo. */
  .luz {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.2;
  }
  .luz.a {
    width: 60vw; height: 60vw; min-width: 420px; min-height: 420px;
    background: radial-gradient(circle, var(--verde) 0%, transparent 68%);
    top: -24vw; left: -16vw;
    animation: derivaA 26s ease-in-out infinite alternate;
  }
  .luz.b {
    width: 52vw; height: 52vw; min-width: 360px; min-height: 360px;
    background: radial-gradient(circle, var(--lima) 0%, transparent 66%);
    top: 2vw; right: -20vw;
    opacity: 0.3;
    animation: derivaB 32s ease-in-out infinite alternate;
  }
  .luz.c {
    width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
    background: radial-gradient(circle, var(--pera) 0%, transparent 70%);
    top: 52vh; left: 24vw;
    opacity: 0.16;
    animation: derivaC 38s ease-in-out infinite alternate;
  }

  @keyframes derivaA { to { transform: translate(8vw, 6vw) scale(1.12); } }
  @keyframes derivaB { to { transform: translate(-7vw, 10vw) scale(1.08); } }
  @keyframes derivaC { to { transform: translate(10vw, -8vw) scale(1.15); } }

  @media (prefers-reduced-motion: reduce) {
    .luz { animation: none; }
  }

  /* ── LAS PARTÍCULAS QUE SUBEN ────────────────────────────────────
     Cientos de puntos chiquitos que flotan hacia arriba, muy despacio.
     Van en canvas y no en el DOM: con 200 divs animados el ventilador de
     la computadora del gimnasio se escucharía desde la calle. */
  .polvo {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .encima { position: relative; z-index: 1; }

  /* ── ENCABEZADO ─────────────────────────────────────────────────── */
  header {
    padding-block: 24px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    flex-wrap: wrap;
  }
  /* El dibujo al lado del nombre, no debajo.
     El logo original es vertical —dibujo arriba, nombre abajo— y metido en
     una barra de 50px dejaria el nombre en letra ilegible. Separados, el
     dibujo se lee a cualquier tamano y el nombre lo dibuja Archivo, nitida. */
  .logo .marca {
    width: 38px;
    height: 38px;
    flex: none;
    display: block;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--display);
    font-weight: 900;
    font-size: 21px;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--tinta);
  }
  /* El lima sobre blanco tiene 1.6:1 de contraste: es ilegible. Va el
     verde, que llega a 3.4:1 y sigue siendo el verde de la marca. */
  .logo i { font-style: normal; color: var(--verde); }

  .menu {
    display: flex;
    gap: 6px 22px;
    flex-wrap: wrap;
    align-items: center;
  }
  .menu a {
    color: var(--tinta-sueve);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    padding: 6px 2px;
    /* El subrayado se dibuja con un degradado que crece de 0 a 100%: una
       transición sobre `width` de un ::after obligaría a recalcular el
       layout en cada cuadro del hover. */
    background-image: linear-gradient(var(--verde), var(--verde));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size .22s ease, color .22s ease;
  }
  .menu a:hover, .menu a:focus-visible {
    color: var(--tinta);
    background-size: 100% 2px;
  }

  /* Que al saltar a una sección el título no quede tapado ni pegado al
     borde de arriba. */
  section[id], div[id] { scroll-margin-top: 24px; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* La firma. Vive en el pie, no arriba: el encabezado es del producto. */
  .por {
    font-size: 12px;
    color: var(--tinta-tenue);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* ── HERO ───────────────────────────────────────────────────────── */
  .hero { padding-block: 48px 72px; }

  .etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pino);
    border: 1px solid rgba(23, 56, 15, 0.18);
    background: rgba(156, 246, 89, 0.3);
    padding: 7px 15px;
    border-radius: 100px;
    margin-bottom: 28px;
  }
  .punto {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--verde);
  }

  h1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(42px, 8.5vw, 86px);
    line-height: 0.94;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
    text-wrap: balance;
    text-transform: uppercase;
    /* Reserva el alto de las tres líneas desde el principio: si no, al
       escribirse el texto la página entera salta hacia abajo. */
    min-height: calc(3 * 0.94em);
  }
  /* El resaltado no es el lima puro, que sobre blanco no se lee: es el
     verde, y el lima queda como subrayado grueso por detrás. Se ve tan
     marcado como antes pero el texto sigue siendo legible. */
  h1 em {
    font-style: normal;
    color: var(--verde);
    background: linear-gradient(transparent 62%, rgba(156, 246, 89, 0.55) 62%);
    padding-inline: 0.04em;
  }

  /* El cursor que acompaña a la escritura. Desaparece cuando termina. */
  .cursor {
    display: inline-block;
    width: 0.055em;
    height: 0.78em;
    background: var(--verde);
    margin-left: 0.06em;
    vertical-align: baseline;
    animation: latir 1s steps(2, start) infinite;
  }
  .cursor.quieto { display: none; }
  @keyframes latir { 50% { opacity: 0; } }

  /* Lo que aparece DESPUÉS de que el título terminó de escribirse. */
  .entra {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .entra.puesto { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; display: none; }
    .entra { opacity: 1; transform: none; transition: none; }
  }

  .bajada {
    font-size: clamp(17px, 2.3vw, 21px);
    color: var(--tinta-sueve);
    max-width: 30em;
    margin: 0 0 36px;
    line-height: 1.6;
  }

  .botones { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

  .boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--texto);
    font-weight: 700;
    font-size: 16px;
    padding: 15px 28px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  /* Verde sólido con texto blanco: 3.4:1 contra el papel y el texto se lee
     nítido. El lima de fondo con texto oscuro también funcionaría, pero
     entonces el botón y el resaltado del título pelearían por la atención. */
  .boton.fuerte {
    background: var(--verde);
    color: #fff;
    box-shadow: 0 6px 22px rgba(44, 175, 65, 0.3);
  }
  .boton.fuerte:hover {
    transform: translateY(-2px);
    background: #249437;
    box-shadow: 0 10px 30px rgba(44, 175, 65, 0.38);
  }
  .boton.suave {
    border-color: rgba(23, 56, 15, 0.2);
    color: var(--tinta);
    background: var(--panel);
  }
  .boton.suave:hover { border-color: var(--verde); }
  .boton:focus-visible { outline: 2px solid var(--pino); outline-offset: 3px; }

  .nota-boton {
    font-size: 14px;
    color: var(--tinta-tenue);
    margin-top: 16px;
  }

  /* ── EL MOSTRADOR ───────────────────────────────────────────────── */
  section { padding-block: 72px; }

  .rotulo {
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pera);
    margin-bottom: 14px;
  }

  h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    text-wrap: balance;
    text-transform: uppercase;
  }

  /* Cuando una sección no lleva título grande, el rótulo queda pegado al
     párrafo y los dos se leen como una sola frase cortada. Este aire los
     separa sin necesidad de inventarle un título a la sección. */
  .rotulo + .intro { margin-top: 10px; }

  /* LA RESPUESTA A LA PREGUNTA DEL TÍTULO, en cuerpo más grande.
     Quien entra a "¿qué es?" quiere una frase, no un párrafo entre otros
     tres iguales. El tamaño le dice cuál leer primero sin subrayar nada. */
  .definicion {
    font-size: clamp(19px, 2.6vw, 25px);
    line-height: 1.5;
    color: var(--tinta);
    max-width: 26em;
    margin: 10px 0 20px;
    text-wrap: pretty;
  }
  .definicion b { color: var(--verde); }

  .intro {
    color: var(--tinta-sueve);
    max-width: 34em;
    margin: 0 0 44px;
    font-size: 18px;
  }

  /* El recorrido: pasos numerados porque ES una secuencia real */
  .pasos {
    display: grid;
    gap: 2px;
    background: var(--borde);
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
  }
  .paso {
    background: rgba(255, 255, 255, 0.78);
    padding: 26px 26px 28px;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
    align-items: start;
  }
  .num {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--pino);
    border-radius: 8px;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    background: var(--lima);
  }
  .paso h3 {
    font-family: var(--texto);
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 6px;
  }
  .paso p { margin: 0; color: var(--tinta-sueve); font-size: 15.5px; }
  .tecla {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 700;
    background: var(--pino);
    color: var(--lima);
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
  }

  /* ── LO QUE TRAE ────────────────────────────────────────────────── */
  .rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 18px;
  }
  .ficha {
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 26px;
    background: var(--panel);
  }
  .ficha h3 {
    font-family: var(--texto);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
  }
  .ficha p { margin: 0; color: var(--tinta-sueve); font-size: 15px; }
  .ficha .marca {
    width: 26px; height: 3px; border-radius: 2px;
    background: var(--verde);
    display: block;
    margin-bottom: 18px;
  }

  /* ── EL PRECIO ──────────────────────────────────────────────────────
     LA ÚNICA SECCIÓN OSCURA DE LA PÁGINA, y por eso funciona.
     Después de scrollear por blanco, este bloque corta y se lleva la
     atención sin necesidad de gritar. Si toda la página fuera verde
     oscuro, este bloque no diría nada. */
  .precio-caja {
    border-radius: 18px;
    padding: clamp(28px, 5vw, 48px);
    background: linear-gradient(155deg, var(--pino) 0%, var(--pino-hondo) 100%);
    color: #EAF7E2;
    box-shadow: 0 18px 50px rgba(23, 56, 15, 0.22);
  }
  .cifra {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .tachado {
    font-family: var(--mono);
    font-size: 22px;
    color: rgba(234, 247, 226, 0.45);
    text-decoration: line-through;
  }
  /* Acá sí el lima, que es donde de verdad rinde: sobre el pino tiene
     13:1 de contraste y se ve desde la otra punta de la página. */
  .grande {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(54px, 11vw, 88px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--lima);
  }
  .almes { color: rgba(234, 247, 226, 0.7); font-size: 18px; font-weight: 600; }

  .fundador {
    font-size: 15.5px;
    color: rgba(234, 247, 226, 0.75);
    margin: 0 0 30px;
  }
  .fundador b { color: #fff; }

  /* Va separada del resto por una línea a la izquierda: se lee como una
     aclaración y no como un renglón más de la letra chica, que es donde
     nadie mira. */
  .centavos {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(234, 247, 226, 0.62);
    margin: -18px 0 30px;
    padding-left: 14px;
    border-left: 2px solid rgba(156, 246, 89, 0.35);
    max-width: 44em;
  }
  .centavos b { color: rgba(234, 247, 226, 0.92); font-weight: 600; }

  .precio-caja .incluye li { color: rgba(234, 247, 226, 0.8); }
  .precio-caja .tic { color: var(--lima); }
  .precio-caja .nota-boton { color: rgba(234, 247, 226, 0.55); }
  .precio-caja .boton.fuerte {
    background: var(--lima);
    color: var(--pino-hondo);
    box-shadow: 0 6px 26px rgba(156, 246, 89, 0.26);
  }
  .precio-caja .boton.fuerte:hover { background: #AEFF74; }

  .incluye {
    list-style: none;
    padding: 0;
    margin: 0 0 34px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px 26px;
  }
  .incluye li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 15.5px;
    color: var(--tinta-sueve);
  }
  .tic { color: var(--verde); font-weight: 700; }

  /* ── COMPARATIVA ───────────────────────────────────────────────── */
  .tabla-caja {
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
  }
  table { border-collapse: collapse; width: 100%; min-width: 420px; }
  th, td { text-align: left; padding: 15px 20px; font-size: 15.5px; }
  thead th {
    font-family: var(--display);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    font-weight: 700;
    border-bottom: 1px solid var(--borde);
  }
  tbody tr + tr td { border-top: 1px solid rgba(23, 56, 15, 0.07); }
  td.plata { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
  tr.nuestro td { background: rgba(156, 246, 89, 0.22); }
  tr.nuestro td:first-child { font-weight: 700; box-shadow: inset 3px 0 0 var(--verde); }
  tr.nuestro td.plata { color: #1C7A2C; }
  .fuente { font-size: 13px; color: var(--tinta-tenue); margin-top: 14px; }

  /* ── CIERRE ─────────────────────────────────────────────────────── */
  .cierre { text-align: center; padding-block: 90px 100px; }
  .cierre h2 { margin-bottom: 20px; }
  .cierre .intro { margin-inline: auto; }
  .cierre .botones { justify-content: center; }

  footer {
    border-top: 1px solid var(--borde);
    padding-block: 32px 44px;
    color: var(--tinta-tenue);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }
  footer a { color: var(--tinta-sueve); text-decoration: none; }
  footer a:hover { color: var(--verde); }

  .solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (max-width: 560px) {
    .paso { grid-template-columns: 1fr; gap: 12px; }
    section { padding-block: 56px; }
  }

/* ── PÁGINAS INTERNAS ────────────────────────────────────────────────
   Cada apartado es ahora su propia página. El título va con el peso de
   un h1 pero NO con el tamaño del de la portada: ese está pensado para
   ser lo único que se ve al abrir, y acá arriba ya está el encabezado. */
.pagina { padding-block: 26px 40px; }

.titulo-pagina {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 5.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 6px;
  text-wrap: balance;
}

/* La página en la que estás parado, marcada en el menú. Se apoya en el
   mismo aria-current que usa un lector de pantalla para decirlo en voz
   alta: una sola fuente para la marca visual y para la accesible. */
.menu a[aria-current="page"] {
  color: var(--tinta);
  background-size: 100% 2px;
}

/* Sin la página larga, la primera sección ya no necesita su separación
   de arriba: el título de la página cumple esa función. */
.pagina > section { padding-top: 0; }

/* Las tarjetas del índice de la portada: una ficha que además es enlace. */
.ficha.enlace {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.ficha.enlace:hover {
  border-color: var(--verde);
  transform: translateY(-2px);
}
.ficha.enlace h3 { color: var(--tinta); }

/* El segundo renglón de botones, pegado al de arriba pero separado lo
   suficiente para que se lean como dos filas y no como una que se partió. */
.botones + .botones { margin-top: 12px; }