/* El jardín digital de Diego Torres — selva sudamericana de noche.
   Sistema visual: elayadesign/ai-design-skills (landing-page-design, parte B).
   Un solo tipo (Manrope), sin cursivas, escala de tamaños y espacios fija, fondos planos. */

@font-face { font-family: "Manrope"; src: url("/fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* fondos permitidos por la skill (B4) */
  --fondo: #131209;
  --superficie: #1f1f1f;
  --superficie-2: #272727;
  --superficie-3: #313131;
  /* texto y selva */
  --texto: #f1f5ec;
  --texto-suave: #b9c4b1;
  --texto-tenue: #85917f;
  --hoja: #8fd18b;
  --hoja-media: #4f9a55;
  --hoja-oscura: #2a5e33;
  --tierra: #c4502a;           /* tierra roja de Amarapura */
  --mburucuya: #b689e6;        /* violeta de la flor de pasión */
  --flor: #f0574a;             /* pétalos rojos */
  --sol: #f2c14e;
  --morpho: #4fb3e8;
  --linea: rgb(241 245 236 / .12);
  /* escala de espacios (B2) */
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px; --s-400: 32px;
  --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;
  /* radios de Tailwind (B3) */
  --r-sm: 2px; --r: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;
  /* movimiento (B7) */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --ancho: 1200px;
  --margen: var(--s-200);
}
@media (min-width: 640px) { :root { --margen: var(--s-400); } }
@media (min-width: 1024px) { :root { --margen: var(--s-600); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-900); }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: "Manrope", system-ui, sans-serif; font-style: normal; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
em, i, q, blockquote, cite { font-style: normal; }
q { quotes: "“" "”" "‘" "’"; color: var(--texto); }
p, h1, h2, h3, h4, blockquote, figure, ol { margin: 0; }
a { color: inherit; text-decoration-color: var(--hoja-media); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .3s var(--curva); }
a:hover { color: var(--hoja); }
:focus-visible { outline: 2px solid var(--sol); outline-offset: var(--s-50); border-radius: var(--r); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- estilos de texto (B1) ---------- */
.heading-1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -.02em; }
.heading-2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -.015em; }
.heading-3 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -.01em; }
.heading-4 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.heading-5 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.heading-6 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
@media (min-width: 768px) {
  .heading-1 { font-size: 3.75rem; line-height: 1; }
  .heading-2 { font-size: 3rem; line-height: 1; }
  .heading-3 { font-size: 2.25rem; line-height: 2.5rem; }
  .heading-4 { font-size: 1.875rem; line-height: 2.25rem; }
  .heading-5 { font-size: 1.5rem; line-height: 2rem; }
}
.title-1 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
.title-2 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; }
.title-3 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.title-4 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.body-3 { font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
@media (min-width: 768px) { .nota-cuerpo .body-3, .entrada.body-3 { font-size: 1.125rem; line-height: 1.75rem; } }
.body-5 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.body-6 { font-size: .875rem; line-height: 1.25rem; font-weight: 400; }
.button-md { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.button-sm { font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
.caption-3 { font-size: .75rem; line-height: 1rem; font-weight: 600; }
.caption-4 { font-size: .75rem; line-height: 1rem; font-weight: 500; }
.caption-5 { font-size: .75rem; line-height: 1rem; font-weight: 400; }
h1, h2, h3, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
.tenue { color: var(--texto-suave); }

.degradado { background: linear-gradient(90deg, #ffffff, #9b9b9b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: flex; align-items: center; gap: var(--s-75); color: var(--hoja); margin-bottom: var(--s-200); }
.icono { width: 1.25em; height: 1.25em; flex: none; }

.saltar { position: absolute; left: -9999px; top: var(--s-75); z-index: 200; background: var(--texto); color: var(--fondo); padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); }
.saltar:focus { left: var(--s-75); }

/* ---------- botones (B2, B9) ---------- */
.boton {
  display: inline-flex; align-items: center; gap: var(--s-75); padding: var(--s-75) var(--s-100);
  border-radius: var(--r-full); border: 1px solid transparent; background: var(--hoja); color: #0f1f12; text-decoration: none; cursor: pointer;
  transition: transform .3s var(--curva), background-color .3s var(--curva), color .3s var(--curva);
}
.boton:hover { background: var(--texto); color: var(--fondo); transform: translateY(-1px); }
.boton:active { transform: translateY(1px); }
.boton.secundario { background: transparent; color: var(--texto); border-color: var(--linea); }
.boton.secundario:hover { background: var(--superficie-2); }
.boton[disabled] { opacity: .6; cursor: progress; }

/* ---------- barra de navegación flotante (B7) ---------- */
.barra { position: fixed; top: var(--s-200); left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding-inline: var(--s-200); pointer-events: none; }
.barra-interior {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s-300);
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-200); border-radius: var(--r-full);
  background: rgb(19 18 9 / .62); border: 1px solid var(--linea);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.marca-sitio { display: flex; align-items: center; gap: var(--s-75); text-decoration: none; white-space: nowrap; }
.brote { width: 24px; height: 24px; }
.brote .tallo { fill: none; stroke: var(--hoja-media); stroke-width: 4; stroke-linecap: round; }
.brote .hoja { fill: var(--hoja); }
.brote .sol { fill: var(--sol); }
.menu { display: flex; align-items: center; gap: var(--s-300); }
.menu > a { text-decoration: none; color: var(--texto-suave); padding: var(--s-50) 0; }
.menu > a:hover, .menu > a[aria-current] { color: var(--texto); }
.menu > a[aria-current] { box-shadow: inset 0 -2px 0 var(--hoja); }
.idiomas { display: flex; gap: var(--s-25); padding: var(--s-25); border-radius: var(--r-full); background: var(--superficie); }
.idiomas a { text-decoration: none; color: var(--texto-tenue); padding: var(--s-50) var(--s-75); border-radius: var(--r-full); }
.idiomas a[aria-current] { background: var(--superficie-3); color: var(--texto); }
.menu-boton { display: none; position: relative; width: 40px; height: 40px; border: 0; border-radius: var(--r-full); background: var(--superficie-2); color: var(--texto); cursor: pointer; }
.menu-boton .raya { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: var(--r-full); background: currentColor; transition: transform .5s var(--curva); }
.menu-boton .raya:nth-of-type(2) { transform: translateY(-4px); }
.menu-boton .raya:nth-of-type(3) { transform: translateY(4px); }
.menu-boton[aria-expanded="true"] .raya:nth-of-type(2) { transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .raya:nth-of-type(3) { transform: rotate(-45deg); }

@media (max-width: 767px) {
  .barra-interior { width: 100%; justify-content: space-between; }
  .menu-boton { display: block; }
  .menu {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-300);
    padding: var(--s-900) var(--s-400); background: rgb(19 18 9 / .94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    opacity: 0; visibility: hidden; transition: opacity .5s var(--curva), visibility 0s linear .5s;
  }
  .menu > a { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; color: var(--texto); }
  .menu > *, .menu .idiomas { opacity: 0; transform: translateY(24px); transition: transform .5s var(--curva), opacity .5s var(--curva); }
  .menu-abierto .menu { opacity: 1; visibility: visible; transition: opacity .5s var(--curva); }
  .menu-abierto .menu > * { opacity: 1; transform: none; }
  .menu-abierto .menu > :nth-child(2) { transition-delay: 60ms; }
  .menu-abierto .menu > :nth-child(3) { transition-delay: 120ms; }
  .menu-abierto .menu > :nth-child(4) { transition-delay: 180ms; }
  .menu-abierto { overflow: hidden; }
}

/* ---------- secciones ---------- */
main { display: block; }
section, .nota, .comedero { padding-inline: var(--margen); }
section > *, .nota > *, .comedero > * { max-width: var(--ancho); margin-inline: auto; }
.seccion-cab { margin-bottom: var(--s-600); max-width: var(--ancho); }
.seccion-cab h2 { max-width: 680px; margin-bottom: var(--s-200); }
.seccion-cab > p:not(.eyebrow) { color: var(--texto-suave); max-width: 680px; }

/* aparición al hacer scroll (B7): solo con JS, una vez */
.js .revelar { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.js .revelar.visible { opacity: 1; transform: none; }

/* ---------- fotos ---------- */
.foto { position: relative; display: block; overflow: hidden; border-radius: var(--r-2xl); background: var(--superficie); }
.foto img, .foto video { width: 100%; height: auto; }
.marca {
  position: absolute; right: var(--s-75); bottom: var(--s-75); border-radius: var(--r-lg);
  font-size: .75rem; line-height: 1rem; font-weight: 500; color: #f1f5ec; background: rgb(19 18 9 / .55);
  padding: var(--s-25) var(--s-75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none;
}
figcaption { color: var(--texto-tenue); margin-top: var(--s-100); }
[data-paralaje] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }

/* ---------- portada: la selva ---------- */
.portada { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding-block: var(--s-900); isolation: isolate; }
.portada > .portada-texto { position: relative; z-index: 3; width: 100%; }
.portada-texto h1, .portada-texto .entrada { max-width: 680px; }
.portada-texto h1 { margin-bottom: var(--s-300); }
.portada-texto .entrada { color: var(--texto-suave); margin-bottom: var(--s-400); }
.selva { position: absolute; inset: 0; z-index: 1; pointer-events: none; max-width: none; }
.selva-frente { z-index: 4; }
.capa-mov { position: absolute; inset: -8% -4%; will-change: transform; }
.capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.tierra { position: absolute; left: 0; right: 0; bottom: 0; height: var(--s-200); background: var(--tierra); z-index: 5; max-width: none; }

.capa-fondo .c-fondo { fill: #1d3a22; }
.capa-fondo .r-fondo, .capa-fondo .l-fondo { fill: none; stroke: #1d3a22; stroke-width: 3; }
.capa-fondo .tronco { fill: #2a2a17; }
.capa-fondo .anillos { stroke: #131209; stroke-width: 2; fill: none; }
.capa-medio .c-medio { fill: #2f6a37; }
.capa-medio .helecho { fill: #3d7f3f; }
.capa-medio .r-medio { fill: none; stroke: #2a5e33; stroke-width: 4; stroke-linecap: round; }
.capa-medio .tallo-h { stroke: #2a5e33; stroke-width: 4; fill: none; }
.heliconia { fill: var(--flor); }
.heliconia-punta { fill: var(--sol); }
.mburucuya .petalo { fill: var(--flor); }
.mburucuya .fil-violeta { stroke: #6a3fa0; stroke-width: 1.4; fill: none; }
.mburucuya .fil-blanco { stroke: #f4eefa; stroke-width: 1.2; fill: none; }
.mburucuya .estambre { fill: #d8d36a; }
.mburucuya .centro-m { fill: #3f6b2f; }
.capa-frente .monstera { fill: #4f9a55; }
.capa-frente .nervio { stroke: #2a5e33; stroke-width: 6; stroke-linecap: round; fill: none; }

/* balanceo del follaje: solo transform */
.mece, .mece-lento, .mece-colgante, .mece-flor { animation-name: mecer; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
.mece-lento { animation-name: mecer-lento; }
.mece-colgante { animation-name: colgar; }
.mece-flor { animation-name: mecer-flor; }
@keyframes mecer { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } }
@keyframes mecer-lento { from { transform: rotate(-.8deg); } to { transform: rotate(.9deg); } }
@keyframes colgar { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes mecer-flor { from { transform: rotate(-6deg) scale(.98); } to { transform: rotate(6deg) scale(1.02); } }

/* bandada de loros verdes cruzando la selva */
.vuelo { position: absolute; top: 14%; left: 0; width: 240px; z-index: 2; animation: cruzar 26s cubic-bezier(.35, .05, .45, .95) infinite; animation-delay: 2s; opacity: 0; }
.bandada { width: 100%; height: auto; }
.loro-cuerpo, .loro-ala-verde { fill: #3fae4a; }
.loro-cola { fill: #2f8a3a; }
.loro-ala-azul { fill: #2c6fb7; }
.loro-pico { fill: #e8dcc0; }
.loro-ojo { fill: #131209; }
.loro-ala { animation: batir .32s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.l2 .loro-ala { animation-delay: -.1s; } .l3 .loro-ala { animation-delay: -.2s; } .l4 .loro-ala { animation-delay: -.05s; }
@keyframes batir { from { transform: scaleY(1); } to { transform: scaleY(-.75); } }
@keyframes cruzar {
  0% { transform: translate3d(-30vw, 6vh, 0) scale(.8); opacity: 0; }
  6% { opacity: 1; }
  50% { transform: translate3d(45vw, -4vh, 0) scale(.9); }
  94% { opacity: 1; }
  100% { transform: translate3d(115vw, 2vh, 0) scale(.8); opacity: 0; }
}

/* morpho azul revoloteando */
.morpho-vuelo { position: absolute; right: 22%; top: 30%; width: 64px; z-index: 2; animation: revolotear 14s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.morpho .ala-azul { fill: var(--morpho); }
.morpho .ala-borde { fill: none; stroke: #0b1a2a; stroke-width: 3; }
.morpho .cuerpo-m { fill: #0b1a2a; }
.morpho .antena { stroke: #0b1a2a; stroke-width: 1.5; fill: none; }
.morpho .ala-izq { transform-origin: 60px 44px; animation: aleteo-izq .45s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.morpho .ala-der { transform-origin: 60px 44px; animation: aleteo-der .45s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
@keyframes aleteo-izq { to { transform: scaleX(.25); } }
@keyframes aleteo-der { to { transform: scaleX(.25); } }
@keyframes revolotear {
  0% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  33% { transform: translate3d(-120px, -60px, 0) rotate(6deg); }
  66% { transform: translate3d(-40px, 50px, 0) rotate(-4deg); }
  100% { transform: translate3d(-200px, 10px, 0) rotate(8deg); }
}

/* ---------- mapa del jardín: cuatro lechos sobre tierra roja ---------- */
.mapa { padding-block: var(--s-900); }
.lechos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-200); align-items: start; }
.lecho { padding: var(--s-200); border-radius: var(--r-2xl); background: var(--superficie); border: 1px solid var(--linea); position: relative; }
.lecho::before { content: ""; display: block; height: var(--s-75); margin: calc(-1 * var(--s-200)) calc(-1 * var(--s-200)) var(--s-200); border-radius: var(--r-2xl) var(--r-2xl) 0 0; background: var(--tierra); }
.lecho-cab { margin-bottom: var(--s-200); }
.lecho-cab h3 { display: flex; align-items: center; gap: var(--s-75); }
.lecho-cab p { color: var(--texto-tenue); margin-top: var(--s-50); }
.cuenta { margin-left: auto; color: var(--texto-tenue); background: var(--superficie-2); border-radius: var(--r-full); padding: var(--s-25) var(--s-75); }
.lecho-florecida h3 .icono { color: var(--flor); }
.lecho-creciendo h3 .icono { color: var(--hoja); }
.lecho-germinando h3 .icono { color: var(--hoja-media); }
.lecho-semilla h3 .icono { color: var(--sol); }
.tarjetas { list-style: none; padding: 0; display: grid; gap: var(--s-100); }
.tarjeta > a, .tarjeta.sin-nota { display: grid; gap: var(--s-100); text-decoration: none; padding: var(--s-75); margin: calc(-1 * var(--s-75)); border-radius: var(--r-lg); transition: background-color .3s var(--curva), transform .5s var(--curva); }
.tarjeta .foto { border-radius: var(--r); }
.tarjeta .foto img, .tarjeta .foto video { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--curva); }
.tarjeta > a:hover { background: var(--superficie-2); transform: translateY(-2px); }
.tarjeta > a:hover .foto img { transform: scale(1.05); }
.tarjeta > a:active { transform: translateY(1px); }
.tarjeta-pie { display: grid; gap: var(--s-50); }
.lecho-florecida .tarjeta:first-child .foto img { aspect-ratio: 4 / 5; }
.leer { display: inline-flex; align-items: center; gap: var(--s-50); color: var(--hoja); }
.etapa { display: inline-flex; align-items: center; gap: var(--s-50); color: var(--texto-tenue); }
.etapa-florecida { color: var(--flor); } .etapa-creciendo { color: var(--hoja); } .etapa-germinando { color: var(--hoja-media); } .etapa-semilla { color: var(--sol); }
.lecho-semilla { opacity: .92; }
@media (max-width: 1023px) { .lechos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .lechos { grid-template-columns: 1fr; } }

/* ---------- lema que se revela palabra por palabra (B11) ---------- */
.lema { padding-block: var(--s-900); }
.lema-texto { max-width: 680px; }
.palabra { color: rgb(241 245 236 / .3); transition: color .5s var(--curva); }
.palabra.encendida { color: var(--texto); }
.sin-js .palabra, .quieto .palabra { color: var(--texto); }

/* ---------- la flor ---------- */
.flor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-700); align-items: center; padding-block: var(--s-900); max-width: calc(1040px + 2 * var(--margen)); margin-inline: auto; }
.flor > * { max-width: none; margin: 0; }
.flor-foto { position: relative; }
.flor-foto .foto { border-radius: var(--r-3xl); }
.flor-mburucuya { position: absolute; width: 112px; right: calc(-1 * var(--s-400)); top: calc(-1 * var(--s-400)); animation: mecer-flor 7s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.flor blockquote { margin-bottom: var(--s-300); }
.flor .acento { color: var(--mburucuya); }
.flor .eyebrow { color: var(--flor); }
@media (max-width: 767px) { .flor { grid-template-columns: 1fr; gap: var(--s-500); } .flor-foto { max-width: 320px; } .flor-mburucuya { width: 80px; right: calc(-1 * var(--s-200)); } }

/* ---------- comedero en portada ---------- */
.comedero-aviso { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-700); align-items: center; padding-block: var(--s-900); max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; }
.comedero-aviso > * { max-width: none; margin: 0; }
.comedero-aviso h2 { margin-bottom: var(--s-200); }
.comedero-aviso p.tenue { margin-bottom: var(--s-300); }
.comedero-aviso .eyebrow { color: var(--sol); }
.comedero-lado { display: grid; gap: var(--s-300); justify-items: center; }
.comedero-lado .ultimas { width: 100%; }
@media (max-width: 767px) { .comedero-aviso { grid-template-columns: 1fr; gap: var(--s-500); } }

.guacamayo { width: min(100%, 260px); height: auto; animation: mecer-lento 6s cubic-bezier(.45, .05, .55, .95) infinite alternate; transform-origin: 50% 64%; }
.guacamayo .rama-t { fill: none; stroke: #5b4630; stroke-width: 7; stroke-linecap: round; }
.guacamayo .hojita-t { fill: var(--hoja-media); }
.guacamayo .g-cuerpo { fill: #d62828; }
.guacamayo .g-ala-verde { fill: #3c9a4a; }
.guacamayo .g-ala-azul, .guacamayo .g-cola-azul { fill: #2c6fb7; }
.guacamayo .g-cola-roja { fill: #b51f1f; }
.guacamayo .g-cara { fill: #f4efe6; }
.guacamayo .g-lineas { fill: none; stroke: #b51f1f; stroke-width: 1.4; stroke-linecap: round; }
.guacamayo .g-pico-sup { fill: #efe7d6; }
.guacamayo .g-pico-inf { fill: #1c1c1c; }
.guacamayo .g-ojo { fill: #f2c14e; stroke: #1c1c1c; stroke-width: 2; }
.guacamayo .g-pata { stroke: #3b3b3b; stroke-width: 4; stroke-linecap: round; fill: none; }

.semillas { list-style: none; padding: 0; display: grid; gap: var(--s-200); }
.semilla { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-2xl); padding: var(--s-300); }
.semilla-quien { display: flex; align-items: center; gap: var(--s-75); color: var(--texto-tenue); margin-bottom: var(--s-75); }
.respuesta { margin-top: var(--s-200); padding: var(--s-200); border-radius: var(--r-xl); background: var(--superficie-2); }
.respuesta .semilla-quien { color: var(--hoja); }
.esqueleto { display: grid; gap: var(--s-75); }
.esqueleto span { display: block; height: var(--s-200); border-radius: var(--r); background: var(--superficie-2); animation: latir 1.6s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.esqueleto span:first-child { width: 30%; } .esqueleto span:nth-child(2) { width: 92%; } .esqueleto span:last-child { width: 64%; }
@keyframes latir { from { opacity: .45; } to { opacity: 1; } }

/* ---------- acerca ---------- */
.acerca { padding-block: var(--s-900); }
.acerca-col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-700); align-items: center; }
.acerca-col .heading-5 { margin-bottom: var(--s-300); }
.acerca-col p.tenue { margin-bottom: var(--s-300); }
.acerca-foto { max-width: 400px; }
@media (max-width: 767px) { .acerca-col { grid-template-columns: 1fr; gap: var(--s-500); } }

/* ---------- pie ---------- */
.pie { padding: var(--s-600) var(--margen) var(--s-700); border-top: 1px solid var(--linea); color: var(--texto-suave); }
.pie-interior { max-width: var(--ancho); margin-inline: auto; display: grid; gap: var(--s-200); }
.pie-firma { display: flex; gap: var(--s-75); align-items: flex-start; }
.pie-firma .icono { color: var(--morpho); margin-top: var(--s-25); }
.pie-meta { display: flex; gap: var(--s-300); flex-wrap: wrap; color: var(--texto-tenue); }
.pie-meta a { display: inline-flex; align-items: center; gap: var(--s-50); }

/* ---------- páginas de nota ---------- */
.nota, .comedero { padding-top: calc(var(--s-900) + var(--s-400)); padding-bottom: var(--s-900); }
.nota-cab { max-width: 680px !important; display: grid; justify-items: start; gap: var(--s-200); margin-bottom: var(--s-600) !important; }
.volver { display: inline-flex; align-items: center; gap: var(--s-50); color: var(--texto-suave); text-decoration: none; }
.volver:hover { color: var(--hoja); }
.nota-cab .entrada { color: var(--texto-suave); }
.nota-principal { max-width: var(--ancho) !important; }
.nota-principal .foto { border-radius: var(--r-3xl); max-height: 80vh; }
.nota-principal .foto img { max-height: 80vh; object-fit: cover; }
.nota-cuerpo { max-width: 680px !important; margin-top: var(--s-600) !important; display: grid; gap: var(--s-300); justify-items: start; }
.nota-figura { max-width: 680px !important; margin-top: var(--s-600) !important; }
.nota-figura .foto img, .nota-figura .foto video { max-height: 80vh; object-fit: cover; }
.nota-siguiente { max-width: 680px !important; margin-top: var(--s-800) !important; padding: var(--s-300); border-radius: var(--r-2xl); background: var(--superficie); border: 1px solid var(--linea); }
.nota-siguiente .eyebrow { margin-bottom: var(--s-75); }
.nota-siguiente a { display: inline-flex; align-items: center; gap: var(--s-75); text-decoration: none; }
.epigrafe { color: var(--mburucuya); }
.nota-nora .eyebrow .icono { color: var(--morpho); }

/* ---------- comedero ---------- */
.comedero-grilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-600); align-items: start; }
@media (max-width: 767px) { .comedero-grilla { grid-template-columns: 1fr; } }
.formulario { display: grid; gap: var(--s-75); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-3xl); padding: var(--s-400); }
.formulario label { color: var(--texto-suave); margin-top: var(--s-100); }
.formulario input, .formulario textarea { font: inherit; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-xl); padding: var(--s-100) var(--s-200); width: 100%; transition: border-color .3s var(--curva); }
.formulario textarea { resize: vertical; min-height: 160px; }
.formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--hoja); box-shadow: 0 0 0 2px rgb(143 209 139 / .35); }
.formulario [aria-invalid="true"] { border-color: var(--flor); }
.formulario .boton { justify-self: start; margin-top: var(--s-100); }
.contador { color: var(--texto-tenue); text-align: right; }
.estado { min-height: var(--s-300); color: var(--hoja); }
.estado.error { color: var(--flor); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reglas { padding: var(--s-300); border-radius: var(--r-3xl); background: var(--superficie); border: 1px solid var(--linea); }
.reglas ol { padding-left: var(--s-300); display: grid; gap: var(--s-100); color: var(--texto-suave); }
.reglas li::marker { color: var(--hoja); font-weight: 600; }
.publicadas { margin-top: var(--s-800) !important; }
.publicadas h2 { display: flex; align-items: center; gap: var(--s-75); margin-bottom: var(--s-300); }
.publicadas h2 .icono { color: var(--hoja); }
.vacio { display: grid; justify-items: center; gap: var(--s-200); text-align: center; padding: var(--s-600) var(--s-300); border-radius: var(--r-3xl); border: 1px dashed var(--linea); }

/* ---------- menos movimiento: solo opacidad (B7) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .js .revelar { transform: none; transition: opacity .7s var(--curva); }
  .capa-mov, [data-paralaje] img { transform: none !important; }
  .vuelo { display: none; }
  .palabra { color: var(--texto); }
}

@media print { .barra, .selva, .vuelo { display: none; } body { background: #fff; color: #000; } .degradado { color: #000; background: none; } }
.portada-texto { text-shadow: 0 1px 2px #131209, 0 0 24px #131209; }
.portada-texto .degradado { text-shadow: none; filter: drop-shadow(0 0 16px #131209); }

/* ---------- follaje en los costados de las secciones ---------- */
.lema, .comedero-aviso, .acerca, .mapa { position: relative; }
.orilla { position: absolute; top: 0; bottom: 0; width: min(30vw, 380px); max-width: none; margin: 0; z-index: 0; pointer-events: none; will-change: transform; }
.orilla-izq { left: 0; } .orilla-der { right: 0; }
.orilla-svg { width: 100%; height: 100%; }
.orilla .c-orilla-fondo { fill: #1d3a22; }
.orilla .c-orilla { fill: #2f6a37; }
.orilla .r-orilla { fill: none; stroke: #2a5e33; stroke-width: 3; }
.lema > :not(.orilla), .comedero-aviso > :not(.orilla), .acerca > :not(.orilla), .mapa > :not(.orilla) { position: relative; z-index: 1; }
.comedero-aviso { max-width: none; padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2)); }
.lema { text-align: left; }
.lema-texto { margin-inline: auto; }
@media (max-width: 767px) { .orilla { width: 42vw; opacity: .45; } }

/* ---------- el arroyo de Amarapura bajo el lema ---------- */
.lema { min-height: 90svh; display: grid; align-content: center; gap: var(--s-300); overflow: hidden; isolation: isolate; }
.arroyo { position: absolute; inset: 0; z-index: -1 !important; max-width: none; margin: 0; }
.arroyo-video { width: 100%; height: 100%; object-fit: cover; }
.arroyo::after { content: ""; position: absolute; inset: 0; background: rgb(19 18 9 / .58); }
.lema .orilla { z-index: 0; }
.lema-texto, .arroyo-pie { position: relative; z-index: 1; }
.arroyo-pie { max-width: 680px; display: flex; align-items: center; gap: var(--s-75); color: var(--texto-suave); }
.arroyo-pie .icono { color: var(--morpho); }
.palabra { color: rgb(241 245 236 / .32); }
.lema > .arroyo { position: absolute; inset: 0; max-width: none; margin: 0; z-index: -1; }
.lema { min-height: 80svh; }
.orilla { opacity: .9; }
.arroyo-pie { width: 100%; margin-inline: auto; justify-content: flex-start; }
.selva-pie { position: absolute; left: var(--margen); bottom: var(--s-400); z-index: 6; display: flex; align-items: center; gap: var(--s-50); color: var(--texto-suave); margin: 0; max-width: none; text-shadow: 0 0 8px #131209; }
.selva-pie .icono { color: var(--hoja); }

/* el desenfoque va en una capa propia: un backdrop-filter en la barra atraparía el menú fijo */
.barra-interior { position: relative; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.barra-interior::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(19 18 9 / .62); border: 1px solid var(--linea); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.barra-interior { border-color: transparent; }
.portada-texto .boton { text-shadow: none; }
@media (max-width: 767px) { .menu { z-index: -2; } .menu-abierto .barra-interior::before { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* follaje en las páginas interiores y poemas */
.nota, .comedero { position: relative; overflow: hidden; }
.nota > .nota-selva, .comedero > .nota-selva { position: absolute; top: 0; left: 0; right: 0; height: 100svh; max-width: none; margin: 0; z-index: 0; pointer-events: none; }
.nota > :not(.nota-selva), .comedero > :not(.nota-selva) { position: relative; z-index: 1; }
@media (min-width: 1024px) { .nota-selva .orilla { width: min(22vw, 320px); } }
.poema { white-space: normal; color: var(--texto); }
.poema + .poema { margin-top: var(--s-200); }
[hidden] { display: none !important; }