: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; }

  /* En el html tambien, no solo en el body: puesto solo en body, el navegador
     lo ignora cuando el desbordamiento viene de un hijo posicionado. */
  html { overflow-x: hidden; }

  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;
    /* El minimo bajo es lo que evita el desplazamiento lateral en el
       telefono: con 42px fijos, "LA FORMA MAS FACIL" mide 464px y no entra en
       una pantalla de 375. El 9vw hace que acompanie al ancho real. */
    /* MEDIDO, no estimado: con la tipografia real, "LA FORMA MAS FACIL"
       entra hasta 28px en una pantalla de 375 y hasta 24px en una de 320.
       Por encima de eso el navegador parte la palabra al medio —se leia
       "MAS FA / CIL"— o empuja la pagina de costado. */
    font-size: clamp(24px, 7.6vw, 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, h2, .titulo-pagina, .definicion, .bajada, p, li, td {
    /* Ninguna palabra puede ser mas ancha que su caja. Sin esto, un correo
       largo o una palabra sin espacios arrastra la pagina entera hacia el
       costado y hay que deslizar para leer. */
    overflow-wrap: break-word;
  }

  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; }

/* En el telefono el margen lateral se achica: 24px de cada lado en una
   pantalla de 320 se comen el 15% del ancho, y ese ancho es justo lo que le
   falta al titulo para entrar sin partirse. */
@media (max-width: 480px) {
  .marco { padding-inline: 18px; }
}

/* --------------------------------------------------------------------- */
/* LAS PREGUNTAS                                                          */
/* --------------------------------------------------------------------- */
/* Van con <details>, no con JavaScript. Tres razones, y la tercera es la
   que importa para lo que buscamos:
     1. funcionan sin scripts, en cualquier navegador
     2. el teclado y los lectores de pantalla ya saben abrirlos
     3. el texto de adentro esta en el HTML AUNQUE este cerrado, asi que un
        buscador lo lee igual. Con un acordeon de JavaScript que inserta el
        texto al abrirlo, el rastreador no ve nada. */
.pregunta-titulo {
  font-family: var(--display);
  font-size: clamp(24px, 4.6vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 72px 0 10px;
}
.preguntas { display: flex; flex-direction: column; gap: 10px; }
.preguntas details {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 16px 20px;
}
.preguntas summary {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* La flechita de fabrica se ve distinta en cada navegador. Se apaga y se
   dibuja una propia, que ademas gira al abrirse. */
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::before {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--verde);
  border-bottom: 2.5px solid var(--verde);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.preguntas details[open] summary::before { transform: rotate(45deg); }
.preguntas p { margin: 12px 0 0 21px; color: var(--tinta-sueve); }