/* ============================================================
   Arbo — for a Better world.
   Dos luces del mismo jardín: día (papel) y noche (tierra oscura).
   Los componentes SOLO leen tokens; los temas solo redefinen tokens.
   ============================================================ */

:root {
  /* — papel de día — */
  --papel:       #f5efe3;
  --papel-alto:  #fbf7ee;
  --papel-hondo: #ece3d0;
  --tinta:       #23201a;
  --tinta-suave: #6e6455;
  --tinta-tenue: #96897a;
  --linea:       #dcd2be;
  --sombra:      rgba(60, 48, 25, .14);

  /* — las hojas y el sello — */
  --verde:   #4c6b45;
  --celeste: #4f82a3;
  --rosa:    #c4647f;
  --oro:     #a9822f;
  --oro-suave: #c9a558;
  --oro-rosa: #b76e79;
  --oro-rosa-suave: #d99aa3;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mano: "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #131610;
    --papel-alto:  #1b1f16;
    --papel-hondo: #0e110b;
    --tinta:       #ede6d4;
    --tinta-suave: #a79c86;
    --tinta-tenue: #7d7361;
    --linea:       #2e3325;
    --sombra:      rgba(0, 0, 0, .5);
    --verde:   #7fa576;
    --celeste: #7faecb;
    --rosa:    #de8fa4;
    --oro:     #d3ac5c;
    --oro-suave: #a9822f;
  }
}
/* El conmutador manda sobre la preferencia del sistema, en ambas direcciones. */
:root[data-theme="light"] {
  --papel: #f5efe3; --papel-alto: #fbf7ee; --papel-hondo: #ece3d0;
  --tinta: #23201a; --tinta-suave: #6e6455; --tinta-tenue: #96897a;
  --linea: #dcd2be; --sombra: rgba(60, 48, 25, .14);
  --verde: #4c6b45; --celeste: #4f82a3; --rosa: #c4647f;
  --oro: #a9822f; --oro-suave: #c9a558;
  --oro-rosa: #b76e79; --oro-rosa-suave: #d99aa3;
}
:root[data-theme="dark"] {
  --papel: #131610; --papel-alto: #1b1f16; --papel-hondo: #0e110b;
  --tinta: #ede6d4; --tinta-suave: #a79c86; --tinta-tenue: #7d7361;
  --linea: #2e3325; --sombra: rgba(0, 0, 0, .5);
  --verde: #7fa576; --celeste: #7faecb; --rosa: #de8fa4;
  --oro: #d3ac5c; --oro-suave: #a9822f;
  --oro-rosa: #d99aa3; --oro-rosa-suave: #b76e79;
}

/* ============ base ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 17.5px/1.7 var(--serif);
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
img { max-width: 100%; }
a { color: var(--verde); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 3px; }

.caja { max-width: 1040px; margin: 0 auto; padding: 0 28px; }
.medida { max-width: 620px; }

/* texto metálico: oro que pasa por oro rosa, como el filo de los temas lujo */
.metal {
  background: linear-gradient(105deg, var(--oro-suave) 0%, var(--oro) 34%,
              var(--oro-rosa) 62%, var(--oro-suave) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* rótulos pequeños en mayúsculas */
.rotulo {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oro);
  margin: 0 0 14px;
}

/* ============ barra superior ============ */
.barra {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.barra .caja {
  display: flex; align-items: center; gap: 20px;
  padding-top: 13px; padding-bottom: 13px;
}
.barra .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.barra .logo img { width: 26px; height: 26px; }
.barra .logo b { font-family: var(--serif); font-size: 20px; letter-spacing: .01em; }
.barra nav { display: flex; gap: 14px; margin-left: auto; }
.barra nav a {
  font-family: var(--sans); font-size: 13.5px; color: var(--tinta-suave);
  text-decoration: none;
}
.barra nav a:hover { color: var(--tinta); }
.idiomas {
  display: flex; gap: 2px; font-family: var(--sans); font-size: 12.5px;
  border: 1px solid var(--linea); border-radius: 999px; padding: 3px;
  background: var(--papel-alto);
}
.idiomas a {
  text-decoration: none; color: var(--tinta-suave); padding: 4px 10px; border-radius: 999px;
}
.idiomas a[aria-current="true"] {
  background: linear-gradient(120deg, var(--oro-suave), var(--oro-rosa));
  color: #241c14; font-weight: 700;
}
#tema {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--oro); background: var(--papel-alto); color: var(--tinta);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; flex: none;
}
#tema .icono { font-size: 14px; line-height: 1; color: var(--oro); }
#tema:hover { border-color: var(--oro-rosa); }
/* Un enlace del menú nunca se parte en dos líneas ("La / mémoire"). Con siete
   secciones, entre 900 y 1240 px no cabían: se junta el menú y el botón del
   tema queda solo con su icono (su aria-label lo sigue nombrando).
   Con el cuarto idioma (DE) el conmutador creció ~40px y ya no cabía ni con el
   botón completo (sobre 1240 px el logo se encogía en español e inglés): los
   enlaces van a 14px y los bloques a 20px a todo ancho, y el menú se esconde
   desde 960px en vez de 900px (entre 900 y 960 no cabía en ningún idioma). */
.barra nav a { white-space: nowrap; }
@media (max-width: 1240px) {
  #tema .t { display: none; }
  #tema { padding: 7px 10px; }
}
/* En francés los nombres son más largos y la caja tiene ancho fijo: a ningún
   ancho de pantalla cabe el menú con el botón del tema completo. Va compacto
   siempre (el botón conserva su aria-label). */
html[lang="fr"] .barra nav { gap: 14px; }
html[lang="fr"] #tema .t { display: none; }
html[lang="fr"] #tema { padding: 7px 10px; }
/* En alemán, igual que en francés: compacto siempre (el botón conserva su
   aria-label), para que el menú tenga holgura a cualquier ancho aunque las
   palabras alemanas sean largas («Versprechen», «Fürsorge»). */
html[lang="de"] .barra nav { gap: 14px; }
html[lang="de"] #tema .t { display: none; }
html[lang="de"] #tema { padding: 7px 10px; }
@media (max-width: 960px) { .barra nav { display: none; } }
@media (max-width: 560px) { #tema .t { display: none; } #tema { padding: 7px 10px; } }

/* ============ hero ============ */
.hero { position: relative; overflow: hidden; }
.hero .caja {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px;
  align-items: center; padding-top: 92px; padding-bottom: 100px;
}
.hero-texto .marca-linea {
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
}
.hero-texto .marca-linea img { width: 58px; height: 58px; }
.hero-texto .marca-linea span {
  font-family: var(--sans); font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.hero h1 {
  font-size: clamp(44px, 6vw, 68px); line-height: 1.04;
  letter-spacing: -.015em; margin: 0; text-wrap: balance; font-weight: 600;
}
.hero h1 em { font-style: italic; color: var(--verde); }
.hero .lema {
  font-size: 21px; font-style: italic; color: var(--oro);
  margin: 18px 0 0;
}
.hero .bajada {
  font-size: 19px; color: var(--tinta-suave); max-width: 46ch; margin: 18px 0 0;
}
.hero .acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.boton {
  display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent;
}
.boton.lleno {
  background: linear-gradient(135deg, var(--oro-suave), var(--oro) 55%, var(--oro-rosa));
  color: #241c0f; box-shadow: 0 8px 22px var(--sombra);
}
.boton.lleno:hover { filter: brightness(1.06); }
.boton.borde { border-color: var(--oro); color: var(--tinta); background: var(--papel-alto); }
.boton.borde:hover { border-color: var(--oro-rosa); }
/* — insignias de tienda: negras con filo dorado, como corresponde — */
.tiendas-fila { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.insignia-tienda {
  display: inline-flex; align-items: center; gap: 11px;
  background: #16130d; color: #f4ead6; text-decoration: none;
  border: 1px solid var(--oro); border-radius: 13px;
  padding: 9px 18px 9px 14px; min-width: 168px;
  box-shadow: 0 8px 20px var(--sombra);
  transition: transform .15s ease, border-color .15s ease;
}
.insignia-tienda:hover { transform: translateY(-2px); border-color: var(--oro-rosa); }
/* Mientras la app no está en las tiendas, la insignia es un rótulo ("Muy pronto
   en…") y no un enlace: sin mano, sin salto al pasar el mouse. Al publicarse,
   vuelve a ser <a class="insignia-tienda" href="…"> con la URL de la tienda. */
.insignia-tienda.pronto { cursor: default; }
.insignia-tienda.pronto:hover { transform: none; border-color: var(--oro); }
.insignia-tienda svg { width: 26px; height: 26px; flex: none; }
.insignia-tienda .letras { display: flex; flex-direction: column; line-height: 1.15; }
.insignia-tienda .arriba { font-family: var(--sans); font-size: 10.5px; letter-spacing: .04em; opacity: .8; }
.insignia-tienda .abajo { font-family: var(--sans); font-size: 16.5px; font-weight: 700; }
.hero .nota-tiendas {
  margin-top: 12px; font-family: var(--sans); font-size: 12.5px; color: var(--tinta-tenue);
}

/* — abanico de polaroids: la firma visual de la app, sin fotos de stock — */
.abanico { position: relative; height: 430px; }
.polaroid {
  position: absolute; width: 218px; padding: 12px 12px 46px;
  background: #fdfcf8; border: 1px solid #e6e0d0;
  box-shadow: 0 14px 34px var(--sombra);
  transform: rotate(var(--giro)) translateY(var(--desliza, 0px));
  border-radius: 3px; will-change: transform;
}
.polaroid .cinta {
  position: absolute; top: -12px; left: 50%; width: 92px; height: 26px;
  transform: translateX(-50%) rotate(var(--giro-cinta, -3deg));
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--oro-rosa-suave) 82%, #fff) 0%,
    var(--oro-rosa) 55%, var(--oro-suave) 100%);
  opacity: .85; border-radius: 2px;
  box-shadow: 0 2px 6px var(--sombra);
}
:root[data-theme="dark"] .polaroid,
.polaroid { color: #3d372c; } /* el marco del polaroid es blanco en ambas luces */
.polaroid .foto {
  height: 190px; border-radius: 2px; overflow: hidden;
  /* el degradado queda de respaldo: si el dibujo aún no cargó, el hueco sigue
     teniendo el color de su escena en vez de un rectángulo vacío */
  background:
    radial-gradient(120px 90px at 30% 25%, color-mix(in srgb, var(--tono) 55%, #fff) 0%, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--tono) 80%, #fff) 0%, var(--tono) 90%);
}
.polaroid .foto img { width: 100%; height: 100%; display: block; }
.polaroid figcaption {
  font-family: var(--mano); font-size: 17px; text-align: center;
  margin-top: 12px; color: #4a4335;
}
.p1 { --giro: -7deg; --tono: #8fb2c9; top: 26px; left: 4%; }
.p2 { --giro: 4deg;  --tono: #d9a3b4; top: 0;    left: 40%; z-index: 2; }
.p3 { --giro: -2deg; --tono: #9ab892; top: 208px; left: 22%; z-index: 3; }
@media (max-width: 900px) {
  .hero .caja { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; }
  .abanico { height: 400px; max-width: 460px; margin: 8px auto 0; }
}
/* En el teléfono los tres polaroids de 218px no caben en ~330px y el del medio
   se salía por la derecha: más chicos, dos arriba y uno centrado abajo. */
@media (max-width: 560px) {
  /* ancho explícito: como elemento de la rejilla con margin:auto se encogía a su
     contenido (todo absoluto, o sea cero) y los porcentajes no tenían de dónde medir */
  .abanico { width: 100%; height: 440px; }
  /* margin: 0 — <figure> trae 40px por lado del navegador, y en el teléfono
     juntaba los dos de arriba uno encima del otro */
  .polaroid { width: min(158px, calc(50% - 8px)); padding: 9px 9px 34px; margin: 0; }
  .polaroid .foto { height: 136px; }
  .polaroid figcaption { font-size: 14px; margin-top: 7px; }
  .polaroid .cinta { width: 70px; height: 20px; top: -10px; }
  .p1 { left: 0; top: 18px; }
  .p2 { left: auto; right: 0; top: 0; }
  .p3 { left: 50%; margin-left: -79px; top: 244px; }
}

/* ============ la línea de vida (el tallo que recorre la página) ============
   Un riel CONTINUO en el margen izquierdo, nunca sobre el texto. Antes iba por
   el centro exacto de la página: cruzaba los títulos por la mitad, y las
   secciones con fondo lo tapaban, así que se veía cortado en pedazos.
   Ahora va por fuera de la columna de contenido y se dibuja POR ENCIMA de los
   fondos de las secciones: una sola línea de arriba abajo, con una hoja en cada
   sección, a la altura de su rótulo.
   --riel es la posición de la línea; las hojas la usan para quedar encima. */
.vida {
  position: relative;
  /* pantallas grandes: en el margen de la página, 40px antes del texto */
  --riel: calc((100% - 1040px) / 2 - 12px);
}
.vida::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  left: var(--riel); width: 2px; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--verde) 140px,
              var(--verde) calc(100% - 140px), transparent);
  opacity: .42; pointer-events: none;
}
/* ventanas medianas: no hay margen de página; la línea va a 30px y el
   contenido de las secciones se corre para dejarle aire */
@media (max-width: 1159px) {
  .vida { --riel: 30px; }
  .vida .caja { padding-left: 70px; }
}
/* teléfono: la línea a 15px, el texto desde 42px */
@media (max-width: 900px) {
  .vida { --riel: 15px; }
  .vida .caja { padding-left: 42px; }
}

/* cada sección brota con su hoja, sobre la línea y a la altura del rótulo */
.brote { position: relative; padding: 84px 0; }
.brote.hondo { background: var(--papel-hondo); }
.hoja-marca {
  position: absolute; z-index: 3; left: var(--riel); top: 81px;
  width: 26px; height: 26px;
  /* quieta: una hoja que flota se despega del rótulo que marca */
  transform: translateX(-50%) rotate(-45deg);
  border-radius: 0 55% 45% 55%;
  background: var(--tono-hoja, var(--verde));
  box-shadow: 0 3px 10px var(--sombra);
}
.hoja-marca::after {
  content: ""; position: absolute; inset: 30% 45% 12% 45%;
  background: color-mix(in srgb, var(--papel-alto) 70%, transparent);
  border-radius: 999px;
}
@media (max-width: 900px) { .hoja-marca { width: 20px; height: 20px; top: 84px; } }

/* ============ bloques de función ============ */
.funcion {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px; align-items: start;
}
.funcion + .funcion { margin-top: 76px; }
.funcion.girada .texto { order: 2; }
.funcion h3 {
  font-size: clamp(26px, 3vw, 33px); line-height: 1.15; margin: 0 0 14px;
  letter-spacing: -.01em; text-wrap: balance;
}
.funcion .detalle { color: var(--tinta-suave); margin: 0 0 16px; }
.funcion .texto ul { margin: 0; padding: 0; list-style: none; }
.funcion .texto li {
  padding: 9px 0 9px 26px; position: relative;
  border-bottom: 1px dashed var(--linea); font-size: 16px;
}
.funcion .texto li:last-child { border-bottom: 0; }
.funcion .texto li::before {
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 9px; height: 9px; border-radius: 0 50% 45% 50%;
  transform: rotate(-45deg); background: var(--tono-hoja, var(--verde));
}
.funcion .texto li b { color: var(--tinta); }
@media (max-width: 900px) {
  .funcion { grid-template-columns: 1fr; gap: 26px; }
  .funcion.girada .texto { order: 0; }
}

/* — viñetas ilustradas de función (dibujadas, no stock) — */
.escena {
  border: 1px solid var(--linea); border-radius: 18px; overflow: hidden;
  background: var(--papel-alto); box-shadow: 0 18px 44px var(--sombra);
  transform: translateY(var(--desliza, 0px)); will-change: transform;
}
.escena .cielo {
  height: 10px;
  background: linear-gradient(90deg, var(--oro-suave), var(--oro-rosa), var(--oro));
  opacity: .9;
}
.escena .cuerpo { padding: 26px; }
.escena .titulo-mini {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 16px;
}

/* curva OMS dibujada */
.curva { width: 100%; height: auto; display: block; }
.curva .banda { fill: var(--verde); opacity: .13; }
.curva .p50 { stroke: var(--verde); stroke-width: 2; fill: none; stroke-dasharray: 4 5; }
.curva .nino { stroke: var(--oro); stroke-width: 2.5; fill: none; }
.curva .punto { fill: var(--oro); }
.curva text { font-family: var(--sans); font-size: 10px; fill: var(--tinta-tenue); }

/* fila de emociones */
.emociones { display: flex; gap: 10px; flex-wrap: wrap; }
.emocion {
  font-family: var(--sans); font-size: 13.5px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-suave);
  background: var(--papel);
}
.emocion.viva { border-color: var(--rosa); color: var(--rosa); font-weight: 600; }
.burbuja-consejo {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px 14px 14px 4px;
  background: var(--papel-hondo); font-size: 15px; color: var(--tinta-suave);
  border: 1px solid var(--linea); font-style: italic;
}

/* barras RIASEC */
.riasec { display: grid; gap: 9px; }
.riasec .fila { display: grid; grid-template-columns: 22px 1fr 34px; gap: 10px; align-items: center; }
.riasec .letra { font-family: var(--serif); font-weight: 700; color: var(--oro); }
.riasec .pista { height: 9px; border-radius: 5px; background: var(--papel-hondo); overflow: hidden; }
.riasec .lleno { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--verde), var(--celeste)); }
.riasec .valor { font-family: var(--sans); font-size: 12.5px; color: var(--tinta-tenue); text-align: right; font-variant-numeric: tabular-nums; }
.codigo-riasec {
  margin-top: 18px; text-align: center; font-family: var(--serif);
  font-size: 34px; letter-spacing: .3em; color: var(--oro);
}
.codigo-riasec small { display: block; letter-spacing: .05em; font-size: 13px; font-family: var(--sans); color: var(--tinta-tenue); margin-top: 2px; }

/* chat del círculo */
.chat { display: grid; gap: 10px; }
.chat .msj {
  max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 16px 5px;
  background: var(--papel); border: 1px solid var(--linea); font-size: 15px;
}
.chat .msj b { font-size: 12.5px; font-family: var(--sans); color: var(--verde); display: block; }
.chat .mio {
  margin-left: auto; border-radius: 16px 16px 5px 16px;
  background: var(--verde); color: var(--papel-alto); border-color: transparent;
}
.chat .codigo {
  text-align: center; font-family: var(--sans); font-size: 12.5px;
  color: var(--tinta-tenue); margin-top: 6px;
}
.chat .codigo b { letter-spacing: .25em; color: var(--oro); font-size: 14px; }

/* ============ beneficios ============ */
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; background: var(--papel-alto); }
.beneficio { padding: 30px 28px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.beneficio:nth-child(3n) { border-right: 0; }
.beneficio:nth-last-child(-n+3) { border-bottom: 0; }
.beneficio .num {
  font-family: var(--serif); font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--oro-suave), var(--oro-rosa));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.beneficio h4 { margin: 12px 0 6px; font-size: 18.5px; }
.beneficio p { margin: 0; font-size: 15px; color: var(--tinta-suave); }
@media (max-width: 820px) {
  .beneficios { grid-template-columns: 1fr; }
  .beneficio { border-right: 0 !important; border-bottom: 1px solid var(--linea) !important; }
  .beneficio:last-child { border-bottom: 0 !important; }
}

/* ============ promesa de datos ============ */
.promesa-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; margin: 0; padding: 0; list-style: none; }
.promesa-lista li { padding: 13px 0 13px 30px; position: relative; border-bottom: 1px solid var(--linea); font-size: 16px; }
.promesa-lista li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 11px; height: 11px; border-radius: 0 50% 45% 50%;
  transform: rotate(-45deg); background: var(--oro);
}
.promesa-lista b { display: block; }
.promesa-lista span { color: var(--tinta-suave); font-size: 15px; }
@media (max-width: 820px) { .promesa-lista { grid-template-columns: 1fr; } }

/* ---------- planes: gratis y Premium ----------
   Misma grilla con hairlines que los beneficios; el Premium solo se distingue
   por una línea de oro arriba, no por un recuadro que grite. */
.planes {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--linea); border-radius: 18px; overflow: hidden;
  background: var(--papel-alto);
}
.plan { padding: 30px 30px 32px; }
.plan + .plan { border-left: 1px solid var(--linea); }
.plan-premium { position: relative; }
.plan-premium::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--oro-suave), var(--oro-rosa));
}
.plan-nombre {
  margin: 0 0 10px; font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oro);
}
.plan-precio { margin: 0; font-size: 17px; color: var(--tinta-suave); }
.plan-precio .cifra {
  margin-right: 6px; font-family: var(--serif); font-size: 40px; line-height: 1.1;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.plan-alterno { margin: 4px 0 0; font-size: 15px; color: var(--tinta-suave); }
.plan-alterno b { color: var(--tinta); font-weight: 600; }
.plan-lema { margin: 14px 0 16px; font-style: italic; font-size: 16px; color: var(--tinta-suave); }
.plan-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.plan-lista li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; }
.plan-lista li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border-radius: 0 50% 45% 50%;
  transform: rotate(-45deg); background: var(--verde);
}
.plan-premium .plan-lista li::before { background: var(--oro-rosa); }
.planes-letra {
  margin: 18px 0 0; max-width: 72ch; font-family: var(--sans);
  font-size: 12.5px; line-height: 1.6; color: var(--tinta-tenue);
}
@media (max-width: 820px) {
  .planes { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--linea); }
}
.sello-pruebas {
  margin-top: 34px; display: flex; align-items: center; gap: 16px;
  /* con papel debajo del degradado: sin él, el tallo se veía a través del sello */
  border: 1px solid var(--oro); border-radius: 14px; background: linear-gradient(115deg, color-mix(in srgb, var(--oro) 8%, transparent), color-mix(in srgb, var(--oro-rosa) 8%, transparent)), var(--papel-alto); padding: 16px 20px;
  color: var(--tinta-suave); font-size: 15px;
}
.sello-pruebas .n { font-family: var(--serif); font-size: 34px; color: var(--oro); line-height: 1; font-variant-numeric: tabular-nums; }

/* ============ cierre ============ */
.cierre { text-align: center; padding: 96px 0 88px; }
.cierre h2 { font-size: clamp(32px, 4.6vw, 48px); margin: 0 0 12px; letter-spacing: -.01em; text-wrap: balance; }
.cierre .lema { font-style: italic; color: var(--oro); font-size: 20px; margin: 0 0 26px; }

/* — el friso del paseo: va montado como una lámina, con marco claro en las dos
     luces (igual que los polaroids), para que se lea como un cuadro colgado y
     no como un rectángulo que se apaga con el tema oscuro — */
.friso-marco {
  max-width: 880px; margin: 0 auto 30px; padding: 10px 18px 4px;
  background: #fbf7ee; border: 1px solid #e6e0d0; border-radius: 16px;
  box-shadow: 0 14px 34px var(--sombra);
  /* flota al hacer scroll como los polaroids y las viñetas: sin esto la lámina
     era lo único quieto de la página */
  transform: translateY(var(--desliza, 0px)); will-change: transform;
}
.friso-marco img { width: 100%; height: auto; display: block; }
.friso-marco figcaption {
  font-family: var(--mano); font-size: 17px; color: #4a4335;
  margin: 6px 0 8px;
}
@media (max-width: 620px) { .friso-marco { padding: 8px 10px 2px; } }

/* títulos de sección */
.brote h2 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 10px; letter-spacing: -.012em; text-wrap: balance; }
.brote .sub { font-style: italic; color: var(--tinta-suave); font-size: 18px; margin: 0 0 46px; max-width: 60ch; }

/* ============ las raíces: la palabra del día y el dicho de la semana ============ */
.reto { text-align: center; }
.reto .palabra {
  font-size: 46px; line-height: 1.05; font-weight: 700;
  letter-spacing: -.01em; margin: 2px 0 10px;
}
.reto .escuchar {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--celeste);
  border: 1px solid color-mix(in srgb, var(--celeste) 45%, var(--linea));
  border-radius: 999px; padding: 6px 14px; background: var(--papel);
}
.reto .escuchar svg { width: 15px; height: 15px; }
.reto .opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 10px; }
.reto .opcion {
  font-size: 42px; line-height: 1; padding: 16px 0 14px;
  border-radius: 18px; border: 1px solid var(--linea); background: var(--papel);
}
.reto .opcion.apagada { opacity: .32; }
.reto .opcion.bien {
  border: 2px solid var(--verde);
  background: color-mix(in srgb, var(--verde) 13%, var(--papel));
}
.reto .traduccion {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--verde); margin: 0;
}
.reto .ejemplo {
  margin: 10px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--tinta-suave);
}
.reto .ejemplo i { color: var(--tinta); }
.reto .manana {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--linea);
  font-family: var(--sans); font-size: 12.5px; color: var(--tinta-tenue);
}

.dicho-tarjeta .bandera { font-size: 16px; margin-right: 6px; letter-spacing: 0; }
.dicho-tarjeta blockquote {
  margin: 0 0 18px; font-size: 25px; line-height: 1.28; font-weight: 700;
  letter-spacing: -.005em; text-wrap: balance;
}
.dicho-tarjeta .par { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--tinta-suave); }
.dicho-tarjeta .par b {
  display: block; margin-bottom: 1px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oro);
}
.dicho-tarjeta .equivalentes {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--linea);
  display: grid; gap: 7px; font-size: 15px;
}
.dicho-tarjeta .equivalentes p { margin: 0; }
.dicho-tarjeta .equivalentes span {
  display: block; font-family: var(--sans); font-size: 11.5px; letter-spacing: .08em;
  color: var(--tinta-tenue);
}
.dicho-tarjeta .equivalentes .sin-par { color: var(--tinta-suave); font-style: italic; }

/* ============ pie ============ */
footer {
  border-top: 1px solid var(--linea); background: var(--papel-hondo);
  padding: 40px 0 52px; font-family: var(--sans); font-size: 14px; color: var(--tinta-suave);
}
footer .caja { display: grid; grid-template-columns: 1fr auto; gap: 20px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--verde); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .firma i { color: var(--oro); font-style: italic; }
@media (max-width: 720px) { footer .caja { grid-template-columns: 1fr; } }

/* ============ revelado al hacer scroll ============ */
.revela { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Páginas de texto (privacidad, términos, eliminar cuenta)
   ============================================================ */
/* Solo arriba y abajo: el "0" lateral de un padding abreviado pisaba el de
   .caja (28px) y en el teléfono el texto legal quedaba pegado a los bordes. */
main.texto { padding-top: 48px; padding-bottom: 64px; max-width: 860px; margin: 0 auto; }
main.texto h1 { font-size: 34px; letter-spacing: -.01em; }
main.texto h2 { font-size: 24px; margin-top: 36px; }
main.texto h3 { font-size: 19px; margin-top: 26px; }
main.texto blockquote {
  margin: 16px 0; padding: 10px 18px; border-left: 3px solid var(--verde);
  background: var(--papel-alto); color: var(--tinta-suave);
}
main.texto table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; }
main.texto th, main.texto td { border: 1px solid var(--linea); padding: 8px 10px; text-align: left; vertical-align: top; }
main.texto th { background: var(--papel-hondo); }
main.texto code { background: var(--papel-hondo); padding: 1px 5px; border-radius: 4px; font-size: 14px; }
main.texto hr { border: 0; border-top: 1px solid var(--linea); margin: 30px 0; }
.volver { display: inline-block; margin-bottom: 18px; color: var(--verde); font-family: var(--sans); font-size: 14px; }
/* "Volver" a la izquierda y el conmutador de idioma a la derecha, en una fila */
.cabecera-texto {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px; margin-bottom: 18px;
}
.cabecera-texto .volver { margin-bottom: 0; }
.aviso-borrador {
  background: color-mix(in srgb, var(--oro) 16%, var(--papel-alto));
  border: 1px solid var(--oro); border-radius: 10px;
  padding: 12px 16px; font-size: 14.5px; color: var(--tinta-suave); margin-bottom: 26px;
}

/* ============================================================
   Lo que sigue llegó con «Jardín completo»: Jardín vivo, el tallo del margen,
   la línea de vida, la charla de la regla y la tarjeta que se da vuelta.
   Cada bloque trae sus reglas de movimiento reducido. Las páginas de texto
   cargan esta misma hoja y no tienen ese marcado: para ellas nada cambia.
   ============================================================ */

/* ============================================================
   Jardín vivo — gestos pequeños que hacen respirar la página.
   Reglas de la casa: solo tokens; todo funciona en las dos luces; con
   «movimiento reducido» nada se mueve y todo queda visible y completo.
   ============================================================ */

/* — la brisa del hero: un lienzo detrás del texto, nunca encima — */
.hero .brisa {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 0;
}
.hero .caja { position: relative; z-index: 1; }

/* — polaroids: al pasar el mouse se alzan, se enderezan y la cinta se despega.
     En pantallas táctiles, un toque alza la foto (clase .alzada) — */
.polaroid { transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s ease; }
.polaroid .cinta {
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s ease, opacity .55s ease;
}
.polaroid.alzada {
  transform: rotate(0deg) translateY(calc(var(--desliza, 0px) - 12px)) scale(1.03);
  box-shadow: 0 28px 56px var(--sombra); z-index: 6;
}
.polaroid.alzada .cinta {
  transform: translateX(-50%) translateY(-3px) rotate(calc(var(--giro-cinta, -3deg) * 2.6 - 5deg)) scale(1.07);
  box-shadow: 0 8px 16px var(--sombra); opacity: .96;
}
@media (hover: hover) {
  .polaroid:hover {
    transform: rotate(0deg) translateY(calc(var(--desliza, 0px) - 12px)) scale(1.03);
    box-shadow: 0 28px 56px var(--sombra); z-index: 6;
  }
  .polaroid:hover .cinta {
    transform: translateX(-50%) translateY(-3px) rotate(calc(var(--giro-cinta, -3deg) * 2.6 - 5deg)) scale(1.07);
    box-shadow: 0 8px 16px var(--sombra); opacity: .96;
  }
}

/* — la curva de crecimiento se dibuja sola al entrar en pantalla.
     .sembrada la esconde (solo la pone el script, nunca el HTML: sin script o con
     movimiento reducido la curva está completa desde el primer cuadro);
     .crece la traza en 1,6 s y al final brota el punto — */
.curva .punto { transform-box: fill-box; transform-origin: center; }
.curva.sembrada .nino {
  stroke-dasharray: var(--largo, 400) var(--largo, 400);
  stroke-dashoffset: var(--largo, 400);
}
.curva.sembrada.crece .nino {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1);
}
.curva.sembrada .punto { transform: scale(0); }
.curva.sembrada.crece .punto { animation: brota-punto .6s cubic-bezier(.2, 1.6, .4, 1) 1.45s forwards; }
@keyframes brota-punto {
  from { transform: scale(0); }
  60%  { transform: scale(1.6); }
  to   { transform: scale(1); }
}
.curva text { font-variant-numeric: tabular-nums; }

/* — seis razones: los números cuentan al aparecer; con mouse, las tarjetas se
     inclinan hacia el puntero y una luz tenue del tono de la sección lo sigue — */
.beneficio { position: relative; background: var(--papel-alto); }
.beneficio::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--tono-hoja, var(--verde)) 9%, transparent), transparent 70%);
  transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .beneficio { transition: transform .4s ease, box-shadow .4s ease; }
  .beneficio:hover {
    transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(1.015);
    box-shadow: 0 22px 44px var(--sombra); z-index: 2;
    transition-duration: .16s, .4s;
  }
  .beneficio:hover::after { opacity: 1; }
}

/* — Premium: un brillo de oro que cruza la tarjeta cada 6 s, inclinación con
     el puntero y un latido antes de «Los primeros 7 días son gratis».
     Las dos animaciones solo corren cuando la tarjeta está en pantalla
     (.planes.en-vista, que pone el script) — */
.plan-premium { overflow: hidden; }
.plan-premium::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%,
    color-mix(in srgb, var(--oro-suave) 12%, transparent) 40%,
    color-mix(in srgb, var(--oro) 22%, transparent) 50%,
    color-mix(in srgb, var(--oro-suave) 12%, transparent) 60%,
    transparent 100%);
  transform: translateX(-150%) skewX(-14deg);
  animation: brillo-oro 6s ease-in-out infinite; animation-play-state: paused;
}
.planes.en-vista .plan-premium::after { animation-play-state: running; }
@keyframes brillo-oro {
  0%   { transform: translateX(-150%) skewX(-14deg); }
  24%  { transform: translateX(420%) skewX(-14deg); }
  100% { transform: translateX(420%) skewX(-14deg); }
}
.plan-premium .plan-lema { position: relative; padding-left: 20px; }
.plan-premium .plan-lema::before {
  content: ""; position: absolute; left: 1px; top: .5em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--oro);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 50%, transparent);
  animation: late-oro 2.4s ease-out infinite; animation-play-state: paused;
}
.planes.en-vista .plan-premium .plan-lema::before { animation-play-state: running; }
@keyframes late-oro {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 50%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (hover: hover) and (pointer: fine) {
  .plan-premium { transition: transform .4s ease, box-shadow .4s ease; }
  .plan-premium:hover {
    transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
    box-shadow: 0 22px 44px var(--sombra); z-index: 2;
    transition-duration: .16s, .4s;
  }
}

/* — la palabra del día: los dibujos se bambolean al pasar el mouse; el gato
     celebra con «¡Muy bien!» y una lluvia de hojitas; los otros dos niegan — */
.reto { position: relative; }
.reto .opcion {
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
@media (hover: hover) { .reto .opcion:hover { animation: bambolea .7s ease-in-out; } }
.reto .opcion.salta { animation: salta-bien .6s cubic-bezier(.2, 1.4, .4, 1); }
.reto .opcion.sacude { animation: sacude .45s ease; }
@keyframes bambolea {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-9deg) scale(1.08); }
  45% { transform: rotate(8deg) scale(1.1); }
  70% { transform: rotate(-4deg) scale(1.05); }
}
@keyframes salta-bien {
  0% { transform: scale(1); }
  40% { transform: scale(1.22) rotate(-4deg); }
  100% { transform: scale(1); }
}
@keyframes sacude {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.reto .opciones { position: relative; }
.reto .aplauso {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%) scale(.6);
  font-family: var(--mano); font-size: 28px; line-height: 1; white-space: nowrap;
  color: var(--verde); background: color-mix(in srgb, var(--papel-alto) 92%, transparent);
  border: 1px solid var(--verde); border-radius: 999px; padding: 8px 18px;
  box-shadow: 0 10px 24px var(--sombra);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .5s cubic-bezier(.2, 1.4, .4, 1);
}
.reto .aplauso.casi { color: var(--oro); border-color: var(--oro); }
.reto .aplauso.viva { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 560px) { .reto .aplauso { font-size: 22px; padding: 6px 14px; } }
.hojita {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--t, 10px); height: var(--t, 10px);
  border-radius: 0 60% 40% 60%; background: var(--tono, var(--verde));
  pointer-events: none; z-index: 2; opacity: 0;
  animation: cae-hoja var(--dur, 1.6s) cubic-bezier(.3, .5, .5, 1) forwards;
}
@keyframes cae-hoja {
  0%   { opacity: .95; transform: translate(0, 0) rotate(0deg) scale(.6); }
  12%  { opacity: 1; transform: translate(calc(var(--dx) * .25), calc(var(--dy) * -.18)) rotate(calc(var(--giro) * .2)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--giro)) scale(.9); }
}

/* — movimiento reducido: quieto y completo. El script tampoco arranca nada,
     pero el CSS lo garantiza por su cuenta — */
@media (prefers-reduced-motion: reduce) {
  .hero .brisa { display: none; }
  .polaroid, .polaroid .cinta, .beneficio, .beneficio::after, .plan-premium,
  .reto .opcion, .reto .aplauso { transition: none; }
  .plan-premium::after, .plan-premium .plan-lema::before,
  .reto .opcion:hover, .reto .opcion.salta, .reto .opcion.sacude,
  .curva.sembrada.crece .punto { animation: none; }
  .hojita { display: none; }
  .curva.sembrada .nino { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .curva.sembrada .punto { transform: none; }
  .beneficio:hover, .plan-premium:hover { transform: none; }
}

/* ============================================================
   El tallo del margen (del concepto «El tallo»). Un <nav class="tallo"> que
   crea el script: un trazo fijo a la izquierda que se dibuja con el avance
   del scroll (dasharray/dashoffset), una yema por sección que se abre en
   hoja —del --tono-hoja de su sección— cuando el tallo la alcanza, la hoja
   de la sección que se lee brilla, al pasar el mouse asoma el rótulo y al
   hacer clic lleva a la sección. Solo tokens; de día y de noche; con
   movimiento reducido queda quieto pero entero. Solo escritorio.
   Capas: el lienzo de hojas del hero va al fondo (z 0), el tallo encima
   (z 30) y la barra superior por sobre todo (z 40).
   ============================================================ */
.tallo {
  position: fixed; left: 0; top: 0; width: 96px; height: 100vh; height: 100dvh;
  z-index: 30; pointer-events: none; overflow: visible;
}
.tallo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tallo .tallo-guia {
  fill: none; stroke: var(--verde); stroke-width: 1.2;
  stroke-dasharray: 1.5 6; stroke-linecap: round; opacity: .32;
}
.tallo .tallo-trazo {
  fill: none; stroke: var(--verde); stroke-width: 2.4; stroke-linecap: round;
  opacity: .95;
}
.tallo .tallo-semilla { fill: var(--verde); }
.tallo .tallo-punta {
  fill: var(--papel-alto); stroke: var(--verde); stroke-width: 2;
  filter: drop-shadow(0 1px 3px var(--sombra));
}
/* cada hoja es un <a> hacia su sección: clicable y tabulable */
.tallo .hoja { pointer-events: auto; cursor: pointer; outline: none; }
.tallo .hoja .zona { fill: transparent; stroke: none; }
.tallo .hoja:focus-visible .zona { stroke: var(--oro); stroke-width: 2; }
.tallo .hoja .yema { fill: var(--verde); opacity: .55; transition: opacity .4s ease, r .3s ease; }
.tallo .hoja:hover .yema { opacity: .95; r: 4.5; }
/* la lámina nace desde el tallo (origen en su borde pegado al trazo) */
.tallo .hoja .lamina {
  transform: scale(0); transform-box: fill-box; transform-origin: 0% 50%;
  opacity: .62;
  transition: transform .75s cubic-bezier(.34, 1.55, .5, 1), opacity .45s ease, filter .45s ease;
}
.tallo .hoja .lamina path { fill: var(--tono-hoja, var(--verde)); }
.tallo .hoja .lamina .nervio { fill: none; stroke: var(--papel-alto); stroke-width: 1; opacity: .75; }
.tallo .hoja.brotada .lamina { transform: scale(1); }
.tallo .hoja.brotada .yema { opacity: 0; }
/* la hoja de la sección que se está leyendo, más viva */
.tallo .hoja.actual .lamina {
  opacity: 1; transform: scale(1.12);
  filter: drop-shadow(0 0 4px var(--tono-hoja, var(--verde)));
}
.tallo .hoja.brotada:hover .lamina,
.tallo .hoja.brotada:focus-visible .lamina { opacity: 1; transform: scale(1.22); }
/* el rótulo que asoma al pasar sobre una hoja */
.tallo-rotulo {
  position: absolute; left: 0; top: 0; transform: translateY(-50%);
  translate: -8px 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: var(--tinta); background: var(--papel-alto); border: 1px solid var(--linea);
  border-radius: 999px; padding: 6px 13px 6px 11px;
  box-shadow: 0 8px 22px var(--sombra);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, translate .25s ease, visibility 0s linear .25s;
}
.tallo-rotulo.ver { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .25s ease, translate .25s ease, visibility 0s; }
.tallo-rotulo i {
  display: inline-block; width: 8px; height: 8px; flex: none;
  border-radius: 0 55% 45% 55%; transform: rotate(-45deg);
  background: var(--tono-hoja, var(--verde));
}
@media (max-width: 900px) { .tallo { display: none; } }
/* Entre 901 y 1199px el riel de .vida iba a 30px, justo donde vive el tallo:
   se corre a 66px (y el contenido, que entre 901 y 1159 ya se corría a 70px,
   pasa a 106px) para que las dos líneas convivan sin pisarse. */
@media (min-width: 901px) and (max-width: 1199px) { .vida { --riel: 66px; } }
@media (min-width: 901px) and (max-width: 1159px) { .vida .caja { padding-left: 106px; } }
@media (prefers-reduced-motion: reduce) {
  .tallo .tallo-trazo { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .tallo .tallo-punta { display: none; }
  .tallo .hoja .lamina { transform: none !important; transition: none; opacity: .75; }
  .tallo .hoja.actual .lamina { opacity: 1; }
  .tallo .hoja .yema { opacity: 0 !important; }
  .tallo-rotulo { transition: none; translate: 0 0; }
}

/* ============================================================
   La línea de vida — el hero se vuelve el producto.
   Una regla de madera (el <input type=range>) recorre de 0 a 18 años; la
   tarjeta de arriba la sigue: estatura, hito, polaroid y una planta que crece.
   Colores SOLO por tokens: la madera es oro mezclado con papel (miel de día,
   nogal de noche), la tinta es la tinta. El lienzo de hojas del hero sigue
   detrás (z 0); la tarjeta vive dentro de .caja (z 1).
   ============================================================ */
.abanico.linea-vida { height: auto; }
/* la tarjeta y el globo de abajo flotan juntos con el scroll: el --desliza
   lo lleva el grupo, no la tarjeta */
.vida-grupo { transform: translateY(var(--desliza, 0px)); will-change: transform; }
.vida-tarjeta {
  position: relative; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden;
  background: var(--papel-alto); box-shadow: 0 18px 44px var(--sombra);
}
.vida-tarjeta .cielo {
  height: 10px; opacity: .9;
  background: linear-gradient(90deg, var(--oro-suave), var(--oro-rosa), var(--oro));
}
.vida-cuerpo { padding: 18px 22px 20px; }
.vida-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vida-cabeza .rotulo { margin: 0; }
.vida-edad { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.vida-edad .rotulo { font-size: 11px; margin-right: 2px; }
.vida-edad .n {
  font-family: var(--serif); font-size: 40px; line-height: 1; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 2ch; text-align: right;
  color: var(--tinta);
}
.vida-edad .u { font-family: var(--sans); font-size: 13px; color: var(--tinta-suave); }

/* la escena: la polaroid cuelga, el metro está pintado en la pared, la planta
   descansa en el suelo (la línea de abajo) */
.vida-escena {
  display: grid; grid-template-columns: 150px 56px minmax(0, 1fr); gap: 0 14px;
  align-items: end; height: 200px; margin-top: 12px; padding-bottom: 2px;
  border-bottom: 1px solid var(--linea);
}
.foto-pila { position: relative; height: 196px; }
/* las tres polaroids van apiladas y solo una se ve; al cambiar de etapa la
   nueva se posa encima con un fundido. Las que no se ven no reciben el
   puntero: así el alzarse de Jardín vivo solo le pasa a la que está arriba. */
.linea-vida .polaroid {
  position: absolute; left: 0; right: 0; top: 12px; width: auto; margin: 0;
  padding: 9px 9px 8px; opacity: 0; will-change: auto; pointer-events: none;
  transform: rotate(var(--giro)) scale(.94);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s ease;
}
.linea-vida .polaroid.activa { opacity: 1; transform: rotate(var(--giro)) scale(1); z-index: 2; pointer-events: auto; }
/* la polaroid que se ve se alza y endereza como las de Jardín vivo (mouse o un
   toque, .alzada), sin pelearse con el fundido de la pila */
.linea-vida .polaroid.activa.alzada { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: 0 24px 48px var(--sombra); }
@media (hover: hover) {
  .linea-vida .polaroid.activa:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: 0 24px 48px var(--sombra); }
}
.linea-vida .polaroid .foto { height: 120px; }
.linea-vida .polaroid figcaption { font-size: 14px; line-height: 1.2; margin-top: 7px; }
.linea-vida .polaroid .cinta { width: 64px; height: 18px; top: -9px; }

/* el metro de pared: una pista con rayitas cada 10 cm y una barra que sube */
.metro { position: relative; height: 190px; --alto: 0; }
.metro-pista {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 20px; height: 158px; border-radius: 6px 6px 2px 2px;
  border: 1px solid var(--linea);
  background: repeating-linear-gradient(to top, var(--linea) 0 1px, transparent 1px calc(158px / 18)), var(--papel-hondo);
}
.metro-lleno {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--alto) * 1%);
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(to top, var(--oro-suave), var(--oro-rosa));
}
.metro-cifra {
  position: absolute; left: 50%; bottom: calc(var(--alto) * 1% + 6px); transform: translateX(-50%);
  white-space: nowrap; font-family: var(--sans); font-size: 11.5px; color: var(--tinta-suave);
}
.metro-cifra b {
  font-family: var(--serif); font-size: 17px; color: var(--tinta); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* la planta: tallo, hojas y flor se dibujan desde el script según la edad
   (el trazo se llama .planta-tallo para no cruzarse con el tallo del margen) */
.planta { display: block; width: 100%; height: 196px; overflow: visible; }
.planta .planta-tallo { fill: none; stroke: var(--verde); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.planta .hoja { fill: var(--verde); }
.planta .vena { fill: none; stroke: color-mix(in srgb, var(--papel-alto) 65%, transparent); stroke-width: 1.2; stroke-linecap: round; }
.planta .petalo { fill: var(--rosa); }
.planta .centro { fill: var(--oro); }
.planta .maceta { fill: color-mix(in srgb, var(--oro-rosa) 55%, var(--oro)); }
.planta .maceta-borde { fill: color-mix(in srgb, var(--oro-rosa) 72%, var(--oro-suave)); }
.planta .tierra { fill: color-mix(in srgb, var(--oro) 40%, var(--papel-hondo)); }

/* el hito, a mano, con la hojita de la casa */
.vida-hito {
  margin: 12px 0 0; font-family: var(--mano); font-size: 18px; line-height: 1.3;
  color: var(--tinta); min-height: 1.3em;
}
.vida-hito::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px;
  border-radius: 0 50% 45% 50%; transform: rotate(-45deg); background: var(--verde);
  vertical-align: 1px;
}
.vida-hito.entra { animation: vida-entra .4s ease; }
@keyframes vida-entra { from { opacity: 0; transform: translateY(5px); } }

/* la regla de madera. --pad es la mitad del ancho del pulgar nativo: las marcas
   y el cursor se miden desde ahí para coincidir con el recorrido del <input>.
   --pos (0 a 1) va en .regla-madera y lo leen el cursor, el globito de la
   edad y el aviso. El margen de arriba deja sitio a esos dos. */
.regla { position: relative; margin-top: 40px; }
.regla-madera {
  position: relative; height: 48px; border-radius: 7px; --pad: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--oro-suave) 48%, var(--papel-alto)) 0%,
    color-mix(in srgb, var(--oro-suave) 66%, var(--papel-alto)) 48%,
    color-mix(in srgb, var(--oro) 62%, var(--papel-hondo)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--papel-alto) 60%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--tinta) 16%, transparent),
    0 8px 18px var(--sombra);
}
.regla-madera::before { /* la veta */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(178deg,
    transparent 0 6px, color-mix(in srgb, var(--oro) 30%, transparent) 6px 7px,
    transparent 7px 17px, color-mix(in srgb, var(--oro) 18%, transparent) 17px 18px,
    transparent 18px 27px);
}
.regla .marca {
  position: absolute; top: 0; width: 1px; height: 10px; pointer-events: none;
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--i) / 18);
  transform: translateX(-50%); background: var(--tinta); opacity: .7;
}
.regla .marca.larga { height: 16px; width: 1.5px; opacity: .88; }
.regla .marca b {
  position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  font: 600 11.5px/1 var(--sans); color: var(--tinta); font-variant-numeric: tabular-nums;
}
/* el cursor de la regla de cálculo: deja ver el número que tiene debajo */
.regla .cursor {
  position: absolute; top: -7px; bottom: -7px; width: 22px; pointer-events: none;
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--pos, 0)); transform: translateX(-50%);
  border-radius: 6px; border: 1.5px solid var(--oro);
  background: color-mix(in srgb, var(--papel-alto) 72%, transparent);
  box-shadow: 0 4px 10px var(--sombra);
  transition: box-shadow .2s ease;
}
.regla .cursor::after {
  content: ""; position: absolute; top: 5px; bottom: 5px; left: 50%; width: 1.5px;
  transform: translateX(-50%); background: var(--oro-rosa);
}
.regla-madera:has(input:focus-visible) .cursor { box-shadow: 0 0 0 3px var(--oro), 0 4px 10px var(--sombra); }
/* el <input> real: ocupa toda la regla, sin dibujo propio (pista y pulgar
   transparentes), pero con opacidad 1 para que el anillo de foco se vea */
.regla input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent;
  cursor: ew-resize; touch-action: pan-y; border-radius: 7px;
}
.regla input[type="range"]::-webkit-slider-runnable-track { height: 48px; background: transparent; border: 0; }
.regla input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 48px; background: transparent; border: 0; }
.regla input[type="range"]::-moz-range-track { height: 48px; background: transparent; border: 0; }
.regla input[type="range"]::-moz-range-thumb { width: 28px; height: 48px; background: transparent; border: 0; border-radius: 0; }
.regla input[type="range"]:focus-visible { outline: 2px solid var(--oro); outline-offset: 5px; }
.regla-pista {
  margin: 9px 0 0; text-align: center; font-family: var(--sans); font-size: 12px;
  color: var(--tinta-tenue);
}
@media (max-width: 560px) {
  .vida-cuerpo { padding: 14px 16px 16px; }
  .vida-escena { grid-template-columns: 126px 50px minmax(0, 1fr); gap: 0 12px; }
  .vida-edad .n { font-size: 34px; }
  .linea-vida .polaroid .foto { height: 100px; }
  .linea-vida .polaroid figcaption { font-size: 13px; }
  .vida-hito { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .linea-vida .polaroid, .regla .cursor { transition: none; }
  .vida-hito.entra { animation: none; }
}

/* ============================================================
   La charla de la regla. Arbo comenta cada edad en un globo con su brote
   como avatar, debajo de la tarjeta (justo bajo la regla, donde está la
   mano; en el teléfono queda apilado igual y nunca se sale). Un aviso de
   primera visita sobre la regla que se va al primer toque, y un globito con
   la edad sobre el pulgar mientras se arrastra. Solo tokens; con movimiento
   reducido todo quieto y visible.
   ============================================================ */
.vida-charla { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; min-width: 0; }
.charla-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 6px;
  background: var(--papel-alto); border: 1px solid var(--linea);
  box-shadow: 0 6px 14px var(--sombra); object-fit: contain; display: block;
}
.charla-globo {
  position: relative; flex: 1; min-width: 0;
  background: var(--papel-alto); border: 1px solid var(--linea);
  border-radius: 4px 16px 16px 16px; padding: 9px 14px 10px;
  box-shadow: 0 10px 24px var(--sombra);
  transition: border-color .4s ease;
}
.charla-globo::before { /* la colita hacia el avatar */
  content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px;
  background: var(--papel-alto); border-left: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  transform: rotate(45deg);
}
.charla-globo.despedida { border-color: var(--oro); }
.charla-globo.despedida::before { border-color: var(--oro); }
.charla-quien {
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oro); margin: 0 0 3px;
}
/* dos capas apiladas en la misma celda: la que entra se funde sobre la que sale */
.charla-capas { display: grid; }
/* la frase que sale se va rápido; la que entra llega un instante después,
   subiendo 4px: así casi no se superponen y nunca se leen mezcladas */
.charla-dice {
  grid-area: 1 / 1; margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--tinta);
  min-height: 2.9em; text-wrap: pretty; overflow-wrap: anywhere; translate: 0 0;
  transition: opacity .34s ease .14s, translate .34s ease .14s;
}
.charla-dice.fuera { opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity .16s ease, translate .16s ease; }
.charla-enlace {
  display: inline-block; margin-left: 2px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--verde); text-decoration: none; border-bottom: 1.5px solid currentColor; white-space: nowrap;
}
.charla-enlace::after { content: " →"; }
.charla-enlace:hover { color: var(--oro); }

/* el aviso de primera visita, a mano, centrado sobre la regla; se mece
   despacio solo mientras el hero se ve (.en-vista lo pone el script) */
.regla .invita {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  z-index: 2; pointer-events: none; white-space: nowrap; max-width: 100%;
  font-family: var(--mano); font-size: 15px; line-height: 1; color: var(--tinta);
  background: var(--papel-alto); border: 1px solid var(--oro); border-radius: 999px;
  padding: 6px 13px; box-shadow: 0 6px 16px var(--sombra);
  animation: invita-mece 2.4s ease-in-out infinite; animation-play-state: paused;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.regla .invita::after { /* la colita hacia la regla */
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px;
  margin-left: -4px; transform: rotate(45deg);
  background: var(--papel-alto); border-right: 1px solid var(--oro); border-bottom: 1px solid var(--oro);
}
.linea-vida.en-vista .regla .invita { animation-play-state: running; }
.regla .invita.ida { opacity: 0; visibility: hidden; }
/* el texto lo escribe el script desde su diccionario de idiomas; el HTML lo
   trae vacío, y sin script el aviso no existe (nadie lo podría despedir) */
.regla .invita:empty { display: none; }
@keyframes invita-mece { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* el globito de la edad: sigue al cursor (--pos) y asoma solo al arrastrar */
.regla .globo-edad {
  position: absolute; bottom: calc(100% + 10px); z-index: 3; pointer-events: none;
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--pos, 0)); transform: translateX(-50%);
  white-space: nowrap; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--papel-alto); background: var(--tinta); border-radius: 8px; padding: 6px 9px 5px;
  box-shadow: 0 6px 14px var(--sombra);
  opacity: 0; visibility: hidden; scale: .9; transform-origin: 50% 100%;
  transition: opacity .18s ease, scale .18s ease, visibility 0s linear .18s;
}
.regla .globo-edad.ver { opacity: 1; visibility: visible; scale: 1; transition: opacity .18s ease, scale .18s ease, visibility 0s; }
.regla .globo-edad::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px;
  margin-left: -4px; transform: rotate(45deg); background: var(--tinta);
}
.regla .globo-edad b { font-family: var(--serif); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.regla .globo-edad .u { margin-left: 3px; opacity: .85; }

@media (max-width: 560px) {
  .vida-charla { gap: 9px; }
  .charla-avatar { width: 36px; height: 36px; padding: 5px; }
  .charla-globo { padding: 8px 12px 9px; }
  .charla-dice { font-size: 15px; }
  .regla .invita { font-size: 14px; padding: 5px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .charla-globo, .charla-dice, .charla-dice.fuera, .regla .invita, .regla .globo-edad { transition: none; }
  .charla-dice.fuera { translate: 0 0; }
  .regla .invita { animation: none; }
}

/* ============================================================
   La tarjeta que se da vuelta (#memoria): al pasar el mouse, o con el botón
   para quien navega con teclado, la viñeta muestra «Un año atrás, hoy».
   El marco pasa de .escena a cada .cara; .escena solo da la perspectiva y
   sigue flotando con el scroll.
   ============================================================ */
.escena.voltea { overflow: visible; border: 0; background: transparent; box-shadow: none; border-radius: 0; perspective: 1400px; }
.voltea .caras { position: relative; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .75, .25, 1); }
.voltea .cara {
  border: 1px solid var(--linea); border-radius: 18px; overflow: hidden;
  background: var(--papel-alto); box-shadow: 0 18px 44px var(--sombra);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.voltea .cara.frente { position: relative; }
.voltea .cara.dorso { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; }
.voltea .cara.dorso .cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
@media (hover: hover) { .voltea:hover .caras { transform: rotateY(180deg); } }
.voltea:has(.voltear:focus-visible) .caras, .voltea.fija .caras { transform: rotateY(180deg); }
.voltear {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--oro); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
}
.voltear:hover { border-color: var(--oro-rosa); }
.voltear .flecha { display: inline-block; color: var(--oro); font-size: 15px; line-height: 1; transition: transform .5s ease; }
.voltea.fija .voltear .flecha { transform: rotate(180deg); }
.dorso .fecha { margin: 0; font-family: var(--sans); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.dorso .recuerdo { margin: 10px 0 0; font-size: 27px; line-height: 1.2; font-style: italic; letter-spacing: -.01em; text-wrap: balance; }
/* la polaroid del dorso gira por --giro (y no por un transform propio) para
   que el alzarse y despegar la cinta de Jardín vivo le sirvan tal cual;
   --desliza en 0 para que no herede el flotar de la viñeta */
.dorso .polaroid {
  position: relative; width: 132px; margin: 22px auto 0; padding: 8px 8px 6px;
  --giro: -3deg; --desliza: 0px;
}
.dorso .polaroid .foto { height: 104px; }
.dorso .polaroid figcaption { font-size: 13px; margin-top: 5px; }
.dorso .polaroid .cinta { width: 60px; height: 17px; top: -8px; }
.dorso .pie { margin: 18px 0 0; font-size: 14px; color: var(--tinta-suave); font-style: italic; max-width: 32ch; }
.dorso .volver { margin: 12px 0 0; font-family: var(--sans); font-size: 12px; color: var(--tinta-tenue); }
@media (hover: hover) { .dorso .volver { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .voltear .flecha, .voltea .caras { transition: none; }
}