/* ==========================================================
   chilco.com.ar — hoja de estilos
   Manual v3: papel #FAF6EF · tinta #383430 · fucsia #C4275F · bosque #2E5940
   Una sola tipografía: Figtree. Fucsia y bosque nunca en contacto.
   ========================================================== */

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #FAF6EF;
  --papel-2: #F3EDE1;
  --tinta: #383430;
  --tinta-2: #6B655D;
  --fucsia: #C4275F;
  --vino: #8E2547;
  --bosque: #2E5940;
  --tinte: #E9F0EB;
  --linea: rgba(56, 52, 48, 0.14);
  --sombra: 0 10px 30px rgba(56, 52, 48, 0.10);
  --ancho: 1160px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tinte-estacion: var(--papel);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}
body.en-portada { overflow: hidden; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/marca/grain.png") 0 0 / 420px 420px;
  opacity: 0.35; mix-blend-mode: multiply;
}
main, header, footer { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--tinta); max-width: 38em; text-wrap: pretty; }
.kicker {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fucsia); margin-bottom: 0.9em;
}
em { font-style: normal; color: var(--fucsia); }

.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.4em; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  transition: transform 0.25s var(--ease-out), background-color 0.25s, color 0.25s;
  cursor: pointer; font-family: inherit; font-size: 1rem; line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn-fucsia { background: var(--fucsia); color: var(--papel); }
.btn-fucsia:hover { background: var(--vino); }
.btn-linea { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn-wa { background: var(--fucsia); color: var(--papel); padding: 0.7em 1.1em; font-size: 0.95rem; }
.btn-grande { font-size: 1.15rem; padding: 1em 1.8em; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--fucsia); text-decoration: underline; cursor: pointer; }

/* ---------- portada ---------- */
.portada {
  position: fixed; inset: 0; z-index: 60;
  background: var(--papel);
  display: grid; place-items: center;
  --hx: 50vw; --hy: 50vh; --hr: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), transparent var(--hr), #000 calc(var(--hr) + 1px));
  mask-image: radial-gradient(circle at var(--hx) var(--hy), transparent var(--hr), #000 calc(var(--hr) + 1px));
}
.portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/marca/grain.png") 0 0 / 420px 420px; opacity: 0.35; mix-blend-mode: multiply;
}
.portada-centro { position: relative; text-align: center; padding: 6vh 6vw; }
.portada-logo {
  position: relative; display: block; width: min(72vw, 640px); margin: 0 auto;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.portada-logo > img { display: block; width: 100%; height: auto; transition: opacity 0.7s ease, transform 1.2s var(--ease-out); }
.portada-flor {
  position: absolute; left: 45.8%; top: 27.5%; width: 42%; aspect-ratio: 487 / 900;
  transform-origin: 50.4% 23.6%; pointer-events: none;
  transition: transform 1.15s var(--ease-out);
}
.portada-flor .pf { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.28s ease; }
.portada-flor .pf.on { opacity: 1; }
.portada:not(.abriendo) .portada-flor .pf-1 { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.portada.abriendo .portada-logo > img { opacity: 0.12; transform: scale(1.04); }
.portada.abriendo .portada-flor { transform: scale(1.75); }
.portada-hint { margin: 1.6rem 0 0; color: var(--tinta-2); font-size: 1rem; letter-spacing: 0.02em; }
.portada.abriendo .portada-hint { opacity: 0; transition: opacity 0.3s; }
.portada-skip {
  position: absolute; right: 24px; bottom: 24px;
  background: none; border: 1.5px solid var(--linea); color: var(--tinta-2);
  padding: 0.6em 1.1em; border-radius: 999px; font: inherit; font-size: 0.9rem; cursor: pointer;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  background: rgba(250, 246, 239, 0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.nav-logo img { display: block; width: 160px; height: auto; }
.nav-links { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); font-weight: 600; font-size: 0.95rem; }
.nav-links a { text-decoration: none; opacity: 0.85; }
.nav-links a:hover { opacity: 1; color: var(--fucsia); }
.nav-acciones { display: flex; align-items: center; gap: 0.7rem; }
.puntos {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: var(--papel-2); border: 1.5px solid var(--linea); color: var(--tinta);
  border-radius: 999px; padding: 0.5em 0.9em; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: transform 0.25s var(--ease-out);
}
.puntos.pop { animation: pop 0.5s var(--ease-out); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.puntos-ico { color: var(--fucsia); }
.puntos-t { font-weight: 500; color: var(--tinta-2); }

/* ---------- hero ---------- */
.hero {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
}
.hero .cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.hero-fig { margin: 0; }
.hero-fig img { display: block; width: 100%; max-width: 520px; margin: 0 auto; }

/* ---------- intros ---------- */
.intro {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
}
.hint-scroll { color: var(--tinta-2); font-size: 0.95rem; margin-top: 2rem; animation: bajar 1.8s ease-in-out infinite; }
@keyframes bajar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- scrollers ---------- */
.scroller { position: relative; height: calc(var(--pasos, 6) * 100vh); }
.scroller-patio { --pasos: 9; }
.scroller-anio { --pasos: 6; }
.scroller-tallo { --pasos: 4.6; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--tinte-estacion); transition: background-color 0.8s ease;
}
.lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tarjetas { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.tarjeta {
  position: absolute; left: clamp(1rem, 5vw, 4rem); bottom: clamp(1.5rem, 6vh, 4rem);
  width: min(440px, calc(100% - 2rem));
  background: rgba(250, 246, 239, 0.94); border: 1px solid var(--linea);
  border-radius: 18px; padding: 1.4rem 1.6rem 1rem; box-shadow: var(--sombra);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}
.tarjeta.activa { opacity: 1; transform: none; }
.tarjeta .kicker { margin-bottom: 0.5em; }
.tarjeta h3 { margin-bottom: 0.3em; }
.tarjeta p { margin: 0; font-size: 1rem; }
.tarjeta ul { margin: 0 0 0.8em; padding-left: 1.1em; font-size: 0.98rem; }
.tarjeta ul li { margin: 0.25em 0; }
.tarjeta .dato { font-size: 0.95rem; color: var(--tinta); background: var(--papel-2); padding: 0.7em 0.9em; border-radius: 10px; }
/* estaciones: la tarjeta es chica y deja ver el jardín de atrás */
.tarjetas-anio .tarjeta {
  left: auto; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1.5rem, 8vh, 5rem);
  width: min(380px, calc(100% - 2rem)); padding: 1rem 1.2rem 0.8rem;
  background: rgba(250, 246, 239, 0.74);
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.tarjetas-anio .tarjeta h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 0.2em; }
.tarjetas-anio .tarjeta .kicker { font-size: 0.72rem; margin-bottom: 0.4em; }
.tarjetas-anio .tarjeta ul { font-size: 0.88rem; margin-bottom: 0.6em; line-height: 1.4; }
.tarjetas-anio .tarjeta ul li { margin: 0.2em 0; }
.tarjetas-anio .tarjeta .dato { font-size: 0.84rem; padding: 0.55em 0.75em; background: rgba(243, 237, 225, 0.65); line-height: 1.4; }
.hoy {
  position: absolute; top: calc(var(--nav-h, 0px) + 4rem); left: clamp(1rem, 5vw, 4rem);
  margin: 0; padding: 0.5em 0.9em; border-radius: 999px;
  background: rgba(250, 246, 239, 0.9); border: 1px solid var(--linea); font-weight: 700; font-size: 0.9rem;
}
/* la hilera: el progreso es una lombriz que cruza un cantero debajo del nav.
   Delante, tierra seca con pastitos; detrás, la tierra que la lombriz dejó
   removida, oscura y con brotes. Las dos tiras son acuarela, apoyadas abajo y
   repetidas a lo ancho; la removida se recorta al avance con un borde difuso. */
.stage { --hilera-h: 62px; }
/* (el canvas es un elemento reemplazado: no se estira con top+bottom, necesita altura explícita) */
.scroller-patio .lienzo, .scroller-anio .lienzo { top: calc(var(--nav-h, 0px) + var(--hilera-h)); height: calc(100% - var(--nav-h, 0px) - var(--hilera-h)); }
.hilera { position: absolute; left: 0; right: 0; top: var(--nav-h, 0px); height: var(--hilera-h); pointer-events: none; z-index: 2; --tierra: 50px; background: var(--papel); }
/* el cuadro nace debajo de la tierra, fundido desde el papel como una acuarela sin marco */
.hilera::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; background: linear-gradient(to bottom, var(--papel), rgba(250, 246, 239, 0)); }
.hilera::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--tierra); z-index: 1;
  background: url("../assets/marca/tierra-seca.webp") 0 100% / auto 100% repeat-x;
}
.hilera .riego {
  position: absolute; left: 0; bottom: 0; height: var(--tierra); width: 0; z-index: 2;
  background: url("../assets/marca/tierra-removida.webp") 0 100% / auto 100% repeat-x;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  transition: width 0.12s linear;
}
.hilera .lombriz {
  position: absolute; left: 0; bottom: calc(var(--tierra) * 0.34); width: 200px; height: 53px; z-index: 3;   /* misma proporción que cada cuadro de la tira (461 × 122) */
  background: url("../assets/marca/lombriz-strip.webp") 0 100% / 600% 100% no-repeat;
  transition: transform 0.12s linear; will-change: transform;
  filter: drop-shadow(0 1px 1px rgba(56, 52, 48, 0.25));
}
/* el nav es pegajoso y tapa la parte de arriba del escenario: acá el lienzo empieza debajo */
.scroller-tallo .stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; padding-top: var(--nav-h, 0px); }
.tallo-marco { position: relative; height: 100%; }
.tallo-marco .lienzo { position: absolute; inset: 0; }
.tarjetas-tallo { position: relative; inset: auto; padding: 0 clamp(1rem, 5vw, 4rem); display: grid; gap: 1rem; align-content: center; height: 100%; }
.tarjetas-tallo .tarjeta { position: relative; left: auto; bottom: auto; width: min(480px, 100%); box-shadow: none; background: transparent; border: 0; padding: 0.6rem 0; }
.tarjetas-tallo .tarjeta h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.tallo-cierre {
  position: absolute; right: clamp(1rem, 5vw, 4rem); bottom: clamp(1.5rem, 8vh, 5rem);
  margin: 0; max-width: 480px; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; color: var(--fucsia);
  opacity: 0; transform: translateY(12px); transition: opacity 0.5s, transform 0.6s var(--ease-out);
}
.tallo-cierre.activa { opacity: 1; transform: none; }

/* ---------- chequeo ---------- */
.chequeo {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start;
}
.chequeo .sub { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 600; margin-bottom: 1em; }
.lista { padding-left: 0; list-style: none; margin: 1rem 0 0; }
.lista li { position: relative; padding-left: 1.6em; margin: 0.5em 0; }
.lista li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--fucsia); }
.chequeo-caja {
  background: var(--papel-2); border: 1px solid var(--linea); border-radius: 22px; padding: 1.8rem;
  position: sticky; top: 110px;
}
.caja-precio { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.15; margin-bottom: 0.6em; }
.caja-precio span { color: var(--fucsia); }

/* ---------- cierre y pie ---------- */
.cierre { max-width: 820px; margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 4vw, 3rem); text-align: center; }
.cierre .lead { margin: 0 auto 1.8rem; }
.pie { max-width: var(--ancho); margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 0.95rem; }
.pie img { width: 160px; height: auto; display: block; margin-bottom: 1rem; }
.pie-juego { max-width: 60em; }

/* ---------- capa de vuelo ---------- */
.cielo { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.bicho {
  position: absolute; left: 0; top: 0;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  pointer-events: auto; will-change: transform; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bicho::before { content: ""; position: absolute; inset: -14px; }
.bicho img { display: block; width: var(--tam, 40px); height: auto; pointer-events: none; }
.bicho .strip {
  display: block; width: var(--tam, 80px); aspect-ratio: 475 / 492;
  background: url("../assets/bichos/picaflor-rubi-strip.webp") 0 0 / 500% 100% no-repeat;
  animation: aleteo 0.1333s steps(4) infinite;
}
@keyframes aleteo { from { background-position-x: 0; } to { background-position-x: -400%; } }
.bicho.atrapado { animation: atrapado 0.55s var(--ease-out) forwards; }
@keyframes atrapado { 0% { opacity: 1; } 30% { opacity: 1; } 100% { opacity: 0; } }
.marca-puntos {
  position: absolute; z-index: 31; pointer-events: none; white-space: nowrap;
  font-weight: 800; font-size: 1.05rem; color: var(--fucsia);
  background: rgba(250, 246, 239, 0.95); border: 1px solid var(--linea); border-radius: 999px; padding: 0.35em 0.8em;
  box-shadow: var(--sombra); animation: subir 1.5s var(--ease-out) forwards;
}
.marca-puntos.malo { color: var(--tinta); }
.marca-puntos small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--tinta-2); }
@keyframes subir { 0% { opacity: 0; transform: translate(-50%, 0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70px); } }

/* ---------- botón bichos sí / no ---------- */
.bichos-btn {
  position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center;
  background: var(--papel-2); border: 1.5px solid var(--linea); border-radius: 50%; padding: 0; cursor: pointer;
}
.bichos-btn img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s, opacity 0.3s; }
.bichos-btn .prohibido {
  position: absolute; inset: 2px; border-radius: 50%; border: 3px solid var(--vino);
  opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.3s var(--ease-out);
}
.bichos-btn .prohibido::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 118%; height: 3px; background: var(--vino);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.bichos-btn.apagado .prohibido { opacity: 1; transform: none; }
.bichos-btn.apagado img { filter: grayscale(1); opacity: 0.5; }
.cielo.apagado { display: none; }

/* ---------- el anotador de campo ----------
   Chico abajo a la derecha. Vive siempre a tamaño real y centrado; en reposo un
   transform lo achica hasta el rincón (--s, --w, --h los calcula el script). Al
   abrirlo, el transform vuelve a cero: crece y viaja al centro en una sola
   animación compuesta. Recién ahí se levanta la tapa y aparecen las hojas. */
.anotador-fondo {
  position: fixed; inset: 0; z-index: 44; background: rgba(56, 52, 48, 0.38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
body.con-anotador .anotador-fondo { opacity: 1; pointer-events: auto; }
body.con-anotador { overflow: hidden; }
/* Un anotador de anillado superior se abre levantando el borde de abajo de la tapa
   hacia uno y por arriba: la tapa pasa sobre los anillos mostrando el dorso y cae
   colgando por detrás. Es una vuelta completa (360°) alrededor del espiral. Acá la
   tapa tiene frente y dorso, gira sobre el borde superior (--a) y se hunde en
   profundidad (--z) para terminar detrás de las hojas. Los anillos no giran. */
.anotador {
  position: fixed; z-index: 45;
  --w: 780px; --h: 800px; --s: 0.08; --anillo: 26px;
  --dx: calc(14px + env(safe-area-inset-right)); --dy: calc(36px + env(safe-area-inset-bottom));
  width: var(--w); height: var(--h);
  right: calc((100vw - var(--w)) / 2); bottom: calc((100vh - var(--h)) / 2);
  transform-origin: 100% 100%;
  transform: translate(calc((100vw - var(--w)) / 2 - var(--dx)), calc((100vh - var(--h)) / 2 - var(--dy))) scale(var(--s));
  perspective: 1300px; perspective-origin: 50% 15%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.anotador.abriendo { transform: none; }
.anotador.pop .anotador-tapa { animation: pop 0.5s var(--ease-out); }
.anotador-tapa {
  position: absolute; inset: 0; display: block;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  transform-origin: 50% 0;
  transform: translateZ(var(--z, 3px)) rotateX(var(--a, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.anotador.abierto .anotador-tapa { pointer-events: none; }
.tapa-frente, .tapa-dorso {
  position: absolute; inset: 0; border-radius: 4px 4px 12px 12px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tapa-frente { box-shadow: 0 6px 14px rgba(56, 52, 48, 0.25); }
.tapa-frente img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.tapa-dorso {
  transform: rotateX(180deg);
  background: #CDAE84 url("../assets/marca/grain.png") 0 0 / 300px 300px;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(56, 52, 48, 0.12);
}
.tapa-dorso::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 6%; height: 34%;
  border: 1.5px solid rgba(56, 52, 48, 0.18); border-radius: 4px;   /* el bolsillo de adentro de la tapa */
}
.anotador-contador {
  /* debajo del cuaderno chico, nunca encima de la tapa */
  position: fixed; z-index: 46;
  right: calc(14px + env(safe-area-inset-right) + var(--mini, 60px) / 2); bottom: calc(31px + env(safe-area-inset-bottom));
  transform: translate(50%, 100%);
  display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap;
  background: var(--fucsia); color: var(--papel); border-radius: 999px;
  padding: 0.3em 0.55em; font-size: 0.68rem; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(56, 52, 48, 0.25); pointer-events: none;
  transition: opacity 0.2s;
}
.anotador-contador i { font-style: normal; opacity: 0.7; font-weight: 500; }
.anotador-contador span { font-weight: 500; font-size: 0.85em; }
body.con-anotador .anotador-contador { opacity: 0; }
.anotador-paginas {
  position: absolute; inset: 0; transform: translateZ(0);
  background: var(--papel) repeating-linear-gradient(to bottom, transparent 0 31px, rgba(56, 52, 48, 0.09) 31px 32px);
  border: 1px solid var(--linea); border-radius: 4px 4px 14px 14px;
  box-shadow: 0 30px 80px rgba(56, 52, 48, 0.28);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
  display: flex; flex-direction: column; overflow: hidden;
}
.anotador.abriendo .anotador-paginas { opacity: 1; }
.anotador.abierto .anotador-paginas { pointer-events: auto; }
/* El espiral visto de frente: cada vuelta de alambre es un arco que sale de una
   perforación en las hojas, pasa por encima del borde y baja por detrás. */
.anillos {
  position: absolute; left: 0; right: 0; top: calc(var(--anillo) * -0.55); height: calc(var(--anillo) * 1.4);
  transform: translateZ(8px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cellipse cx='10' cy='21.5' rx='3.2' ry='2' fill='%23383430' opacity='.75'/%3E%3Cpath d='M6.5 23.5C6.5 4 15.5 4 14 23.5' fill='none' stroke='%23F3EDE1' stroke-width='3.2' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M6.5 23.5C6.5 4 15.5 4 14 23.5' fill='none' stroke='%2357534E' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M7.6 18C7.8 8 12 6.5 12.4 7' fill='none' stroke='%23fff' stroke-width='.6' opacity='.6'/%3E%3C/svg%3E") calc(var(--anillo) * 0.15) 0 / var(--anillo) calc(var(--anillo) * 1.4) repeat-x;
}
.anotador-cab {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.7rem 1.5rem 0.8rem; border-bottom: 2px solid rgba(196, 39, 95, 0.35);
  background: var(--papel);
}
.anotador-cab h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin: 0; }
.anotador-cab .kicker { margin-bottom: 0.2em; }
.anotador-pts { margin: 0 0 0 auto; font-weight: 800; font-size: 1.15rem; color: var(--fucsia); white-space: nowrap; }
.anotador-pts b { font-size: 1.5em; }
.anotador-hojas { overflow: auto; flex: 1; overscroll-behavior: contain; }
.cerrar { background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--tinta-2); padding: 0.2em 0.4em; }
.cuaderno-regla { padding: 1rem 1.5rem 0; font-size: 0.95rem; color: var(--tinta-2); }
.cuaderno-grupos { padding: 0.2rem 1.5rem 1rem; }
.cuaderno-grupo h3 { display: flex; justify-content: space-between; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); margin: 1.4rem 0 0.7rem; }
.cuaderno-grupo h3 span { color: var(--fucsia); }
.cuaderno-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.esp {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 0.9rem; align-items: center;
  border: 1px solid var(--linea); border-radius: 14px; padding: 0.7rem 0.9rem; background: rgba(255, 255, 255, 0.35);
}
.esp-fig { width: 72px; height: 60px; display: grid; place-items: center; }
.esp-fig img { max-width: 72px; max-height: 60px; }
.esp-fig .strip { width: 62px; aspect-ratio: 475 / 492; background: url("../assets/bichos/picaflor-rubi-strip.webp") 0 0 / 500% 100% no-repeat; }
.esp.sin .esp-fig { filter: grayscale(1) contrast(0.55) opacity(0.4); }
.esp-nombre { font-weight: 700; margin: 0; }
.esp-nombre i { font-weight: 400; color: var(--tinta-2); font-style: italic; }
.esp-dato { margin: 0.2em 0 0; font-size: 0.9rem; color: var(--tinta-2); }
.esp-dato a { color: var(--tinta-2); }
.esp-cifras { text-align: right; font-size: 0.85rem; color: var(--tinta-2); white-space: nowrap; }
.esp-cifras b { display: block; font-size: 1.1rem; color: var(--fucsia); }
.esp-cifras b span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; }
.esp.malo .esp-cifras b { color: var(--tinta); }
.esp-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15em 0.55em; border-radius: 999px; margin-left: 0.4em; vertical-align: middle; }
.esp-tag.bueno { background: var(--tinte); color: var(--bosque); }
.esp-tag.malo { background: var(--papel-2); color: var(--tinta); }
.esp-tag.ave { background: var(--papel-2); color: var(--tinta); }
.cuaderno-fuentes { padding: 0.5rem 1.5rem 0; font-size: 0.85rem; color: var(--tinta-2); }
.cuaderno-fuentes h3 { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 1rem 0 0.4rem; }
.cuaderno-fuentes ul { margin: 0; padding-left: 1.1em; }
.cuaderno-pie { padding: 1rem 1.5rem 1.6rem; }

/* ---------- responsive ---------- */
@media (min-width: 1600px) {
  :root { --ancho: 1320px; }
  body { font-size: 19px; }
  .tarjeta { width: min(520px, calc(100% - 2rem)); padding: 1.7rem 1.9rem 1.2rem; }
  .tarjetas-anio .tarjeta { width: min(420px, calc(100% - 2rem)); }
}
@media (min-width: 2200px) {
  :root { --ancho: 1560px; }
  body { font-size: 21px; }
  .nav-logo img { width: 190px; }
  .tarjeta { width: min(600px, calc(100% - 2rem)); }
  .tarjetas-anio .tarjeta { width: min(460px, calc(100% - 2rem)); }
}
@media (max-height: 640px) {
  .hero { padding-top: 1.5rem; }
  .tarjeta { padding: 0.9rem 1.1rem 0.7rem; max-height: 52vh; overflow: auto; }
  .tarjeta p, .tarjeta ul { font-size: 0.9rem; }
  .tarjeta ul li { margin: 0.1em 0; }
  .tarjeta .dato { padding: 0.5em 0.7em; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .nav { padding: 0.3rem 1rem; }
  .tarjeta { width: min(360px, 46vw); max-height: 62vh; font-size: 0.85rem; bottom: 0.8rem; }
  .tarjeta h3 { font-size: 1.1rem; }
  .tarjetas-anio .tarjeta { width: min(380px, 48vw); }
  .anotador { --dy: calc(26px + env(safe-area-inset-bottom)); }
  .anotador-contador { font-size: 0.58rem; bottom: calc(21px + env(safe-area-inset-bottom)); }
  .hoy { top: 0.6rem; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: left; }
  .hero-fig { order: -1; }
  .hero-fig img { max-width: 360px; }
  .chequeo { grid-template-columns: 1fr; }
  .chequeo-caja { position: static; }
  .scroller-tallo .stage { grid-template-columns: 1fr; }
  .scroller-tallo .stage { padding-top: 0; }
  .tallo-marco { position: absolute; inset: var(--nav-h, 0px) 0 0; }
  .tarjetas-tallo { position: absolute; inset: 0; align-content: end; padding-bottom: 12vh; }
  .tarjetas-tallo .tarjeta { background: rgba(250, 246, 239, 0.9); border: 1px solid var(--linea); padding: 1rem 1.2rem; border-radius: 16px; }
  .tallo-cierre { left: 1rem; right: 1rem; bottom: 3vh; max-width: none; font-size: 1.1rem; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .nav { padding: 0.5rem 1rem 0.4rem; flex-wrap: wrap; row-gap: 0.3rem; }
  .nav-links { order: 3; width: 100%; justify-content: center; font-size: 0.82rem; gap: 0.9rem; }
  .bichos-btn { width: 40px; height: 40px; }
  .bichos-btn img { width: 26px; height: 26px; }
  .anotador { --dx: calc(10px + env(safe-area-inset-right)); --dy: calc(30px + env(safe-area-inset-bottom)); --anillo: 22px; }
  .anotador-contador { right: calc(10px + env(safe-area-inset-right) + var(--mini, 48px) / 2); bottom: calc(25px + env(safe-area-inset-bottom)); }
  .stage { --hilera-h: 42px; }
  .hilera { --tierra: 32px; }
  .hilera::after { height: 22px; }
  .hilera .lombriz { width: 121px; height: 32px; }
  .anotador-cab { padding: 1.5rem 1rem 0.7rem; gap: 0.6rem; }
  .anotador-pts { font-size: 1rem; }
  .cuaderno-regla, .cuaderno-grupos, .cuaderno-fuentes, .cuaderno-pie { padding-left: 1rem; padding-right: 1rem; }
  .tarjeta { left: 1rem; right: 1rem; width: auto; bottom: 1rem; padding: 1.1rem 1.2rem 0.9rem; }
  /* estaciones en móvil: el jardín arriba y el texto abajo, sin pisarse */
  .scroller-anio .lienzo { height: calc(46svh + 40px - var(--nav-h, 0px) - var(--hilera-h)); }
  .scroller-anio .stage::after { content: ""; position: absolute; left: 0; right: 0; top: calc(46svh + 40px); bottom: 0; background: var(--tinte-estacion); z-index: 0; }
  .tarjetas-anio { z-index: 1; }
  .tarjetas-anio .tarjeta {
    left: 0.7rem; right: 0.7rem; width: auto; top: calc(46svh + 40px + 0.6rem); bottom: 0.6rem;
    padding: 0.8rem 0.9rem 0.6rem; overflow: auto; overscroll-behavior: contain;
    background: rgba(250, 246, 239, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none;
    transform: translateY(10px);
  }
  .tarjetas-anio .tarjeta.activa { transform: none; }
  .tarjetas-anio .tarjeta ul { font-size: 0.86rem; }
  .tarjetas-anio .tarjeta .dato { font-size: 0.8rem; }
  .hoy { top: calc(var(--nav-h, 0px) + 2.8rem); font-size: 0.8rem; }
  .tarjeta ul { font-size: 0.92rem; }
  .esp { grid-template-columns: 56px 1fr; }
  .esp-cifras { grid-column: 2; text-align: left; }
  .esp-cifras b { display: inline; margin-right: 0.5em; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.animar) { scroll-behavior: auto; }
  html:not(.animar) .portada, html:not(.animar) .cielo, html:not(.animar) .hint-scroll { display: none !important; }
  html:not(.animar) .tarjeta, html:not(.animar) .tallo-cierre { transition: none; }
  html:not(.animar) .portada-flor .pf-1 { animation: none; }
}