/* ============ La niña de Pinotepa — "El camino de las piedras" ============ */

:root{
  --ink:#241f1b; --soft:#6a6258; --terra:#a8462a; --terrad:#8a3a22;
  --cream:#f6efe3; --sand:#efe7d8; --line:#e2d8c6;
  --agua:#3f7d78; --aguad:#2f615c; --piedra:#a79c8c;
  --serif:'Fraunces','Georgia','Times New Roman',serif;
  --sans:'Public Sans','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.6;overflow-x:hidden;}
h1,h2,h3,.serif{font-family:var(--serif);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.wrap.narrow{max-width:720px;}
.ic{width:22px;height:22px;fill:currentColor;stroke:currentColor;flex-shrink:0;}
:focus-visible{outline:3px solid var(--agua);outline-offset:3px;}

/* SKIP LINK */
.skip-link{position:fixed;left:-999px;top:0;background:var(--ink);color:#fff;padding:14px 22px;z-index:300;border-radius:0 0 10px 0;font-size:14px;}
.skip-link:focus{left:0;}

/* SCROLL PROGRESS */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--terra),var(--agua));z-index:200;}

/* REVEAL ON SCROLL */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* NAV — translúcida oscura sobre el hero (nunca 100% transparente, para que el texto
   blanco siempre tenga contraste pase lo que pase detrás), sólida al bajar (toggle .solid vía JS) */
#nav{position:sticky;top:0;z-index:60;background:rgba(15,9,5,.3);backdrop-filter:blur(4px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s;}
#nav.solid{background:rgba(246,239,227,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px;}
.brand{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--terrad);transition:color .3s;}
#nav:not(.solid) .brand{color:#fff;}
#navMenu{display:flex;gap:24px;list-style:none;font-size:13px;letter-spacing:.05em;text-transform:uppercase;transition:color .3s;}
#nav:not(.solid) #navMenu:not(.open){color:#fff;}
#navMenu a:hover{color:var(--terra);}
#navToggle{display:none;background:none;border:none;font-size:22px;color:var(--terrad);cursor:pointer;transition:color .3s;}
#nav:not(.solid) #navToggle{color:#fff;}
@media(max-width:760px){
  #navToggle{display:block;}
  #navMenu{position:absolute;top:62px;left:0;right:0;flex-direction:column;gap:0;background:var(--cream);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s;}
  #navMenu.open{max-height:320px;color:var(--ink);}
  #navMenu li{padding:14px 24px;border-top:1px solid var(--line);}
}

/* SENDERO DE PIEDRAS (path-nav) */
.path-nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;align-items:center;gap:11px;}
.path-nav::before{content:'';position:absolute;top:-4px;bottom:-4px;left:50%;width:2px;background:var(--line);transform:translateX(-50%);z-index:-1;}
.path-dot{width:13px;height:13px;border-radius:50%;background:var(--cream);border:2px solid var(--piedra);cursor:pointer;position:relative;transition:transform .25s var(--ease),background .25s,border-color .25s;}
.path-dot:hover{border-color:var(--terra);}
.path-dot.done{background:var(--piedra);border-color:var(--piedra);}
/* El halo va con color-mix para que siga la paleta elegida: en rgba() fijo se
   quedaba terracota y rodeaba de naranja un punto rosa o azul. Si el navegador
   no soporta color-mix ignora la línea y el punto se queda sin halo — sigue
   marcándose por color y tamaño, así que se degrada sin perder la señal. */
.path-dot.active{background:var(--terra);border-color:var(--terra);transform:scale(1.4);box-shadow:0 0 0 5px color-mix(in srgb, var(--terra) 16%, transparent);}
.path-dot .tip{position:absolute;right:24px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:11px;padding:5px 10px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;}
.path-dot:hover .tip,.path-dot:focus-visible .tip{opacity:1;}
@media(max-width:1100px){.path-nav{display:none;}}

/* AVANZAR / REGRESAR — complementario al scroll libre, visible en cualquier pantalla */
.step-nav{position:fixed;right:18px;bottom:18px;z-index:130;display:flex;gap:8px;background:rgba(20,14,10,.55);backdrop-filter:blur(10px);padding:7px;border-radius:40px;box-shadow:0 10px 30px rgba(0,0,0,.3);}
.step-btn{background:transparent;color:#fff;border:none;padding:10px 16px;border-radius:30px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .2s,opacity .2s;white-space:nowrap;}
.step-btn:hover{background:rgba(255,255,255,.16);}
.step-btn.primary{background:var(--terra);}
.step-btn.primary:hover{background:var(--terrad);}
.step-btn:disabled{opacity:.3;pointer-events:none;}
@media(max-width:480px){.step-nav{right:10px;bottom:10px;}.step-btn{padding:9px 12px;font-size:11px;}}
@media(max-width:360px){.step-nav{gap:4px;padding:6px;}.step-btn{padding:8px 10px;font-size:10.5px;}}

/* MÚSICA DE FONDO */
.music-player{position:fixed;left:18px;bottom:18px;z-index:130;display:flex;align-items:center;gap:6px;background:rgba(20,14,10,.55);backdrop-filter:blur(10px);padding:8px 10px;border-radius:40px;box-shadow:0 10px 30px rgba(0,0,0,.3);color:#fff;}
.mp-icon{font-size:15px;opacity:.85;padding:0 2px;}
.mp-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;width:30px;height:30px;border-radius:50%;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;}
.mp-btn:hover{background:rgba(255,255,255,.16);border-color:#fff;}
/* Aviso "música pausada" — burbuja flotante arriba del reproductor, una sola línea (nunca
   ensancha ni encima la barra) y visible solo unos segundos (clase .show, ver main.js):
   basta para que el visitante la note, sin quedar tapando contenido mientras hace scroll. */
.mp-hint{position:absolute;left:0;bottom:calc(100% + 10px);white-space:nowrap;background:var(--ink);color:#fff;font-size:11.5px;padding:6px 12px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.3);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;pointer-events:none;}
.mp-hint.show{opacity:1;transform:translateY(0);}
@media(max-width:480px){.music-player{left:10px;bottom:10px;padding:7px 9px;}.mp-btn{width:26px;height:26px;}.mp-hint{font-size:11px;padding:5px 10px;}}

/* LLAMAR LA ATENCIÓN — pulsaciones al aparecer, para que se note que son interactivos
   (duración pensada para que un usuario distraído también la note) */
@keyframes attn-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.pulse-attention{animation:attn-pulse .9s ease-in-out 5;}
@media (prefers-reduced-motion: reduce){.pulse-attention{animation:none;}}

/* HERO — tipografía editorial a gran escala, asimétrica, con blob orgánico y duotono */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.92);}
.hero-tint{position:absolute;inset:0;background:var(--terra);opacity:.38;mix-blend-mode:color;}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,10,5,.2),rgba(20,10,5,.3) 45%,rgba(15,8,4,.94));}
.hero-blob{position:absolute;top:-38px;right:-38px;width:230px;height:230px;color:var(--terra);opacity:.85;z-index:1;animation:blobFloat 11s ease-in-out infinite;}
@keyframes blobFloat{0%,100%{transform:rotate(0deg) scale(1);}50%{transform:rotate(9deg) scale(1.06);}}
@media (prefers-reduced-motion: reduce){.hero-blob{animation:none;}}
@media(max-width:700px){.hero-blob{width:130px;height:130px;top:-20px;right:-20px;}}
.hero-edge-label{position:absolute;left:16px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;letter-spacing:.35em;text-transform:uppercase;font-size:11px;color:rgba(255,255,255,.75);white-space:nowrap;z-index:2;}
@media(max-width:820px){.hero-edge-label{display:none;}}
.hero-in{position:relative;z-index:2;padding:0 56px 148px;max-width:920px;}
.hero-title{display:flex;flex-direction:column;line-height:.86;margin:0 0 22px;}
.hero-title .line1{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26px,5vw,50px);color:#f0e6d8;}
.hero-title .line2{font-family:var(--serif);font-weight:600;font-size:clamp(58px,13vw,168px);letter-spacing:-.01em;text-shadow:0 4px 30px rgba(0,0,0,.5);}
.hero .sub{font-size:clamp(15px,2.4vw,19px);font-style:italic;opacity:.96;max-width:56ch;}
.hero .rule{width:64px;height:3px;background:var(--terra);margin:0 0 20px;}
.hero-btns{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;}
.cue{position:absolute;bottom:20px;left:56px;z-index:2;font-size:26px;color:#fff;opacity:.85;animation:bob 1.8s infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion: reduce){.cue{animation:none;}}
@media(max-width:700px){.hero-in{padding:0 24px 148px;}.cue{left:24px;}}
@media(max-width:360px){.hero-in{padding-bottom:162px;}}

/* BUTTONS */
.btn{display:inline-block;background:var(--terra);color:#fff;padding:13px 26px;border-radius:40px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:none;cursor:pointer;transition:background .2s;}
.btn:hover{background:var(--terrad);}
.btn.ghost{background:transparent;border:1px solid #fff;}
.btn.ghost:hover{background:rgba(255,255,255,.14);}

/* SECTIONS */
.sec{padding:84px 0;}
/* Explícito porque «Voces con cariño» se esconde entera cuando no hay mensajes:
   basta con que alguien le dé un `display` a .sec para que `hidden` deje de
   surtir efecto y quede un título sobre un hueco vacío. */
.sec[hidden]{display:none;}
.sec.alt{background:var(--sand);}
.sec.dark{background:#241f1b;color:#f3ece0;}
.eyebrow{color:var(--terra);letter-spacing:.28em;text-transform:uppercase;font-size:12px;font-weight:600;margin-bottom:12px;text-align:center;}
.sec h2{font-size:clamp(28px,5vw,44px);font-style:italic;line-height:1.1;margin-bottom:18px;text-align:center;}
.sec h2 .ic{width:26px;height:26px;color:var(--terra);vertical-align:-5px;margin-right:10px;}
.lead{font-family:var(--serif);font-size:18px;color:#3c362f;max-width:64ch;}
.lead.center{margin:0 auto 28px;text-align:center;}
.lead.light{color:#e9e0d3;}

/* RETRATO DE ENTRADA A "SU HISTORIA" */
.lead-portrait{width:180px;height:180px;margin:38px auto 0;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:0 12px 30px rgba(60,40,20,.18);}
/* La foto es cuadrada, igual que el marco: sin desborde, `object-position` no reencuadra
   nada, así que el acercamiento al rostro se hace con transform (ella queda al centro y
   las orquídeas siguen entrando por la izquierda). */
.lead-portrait img{width:100%;height:100%;object-fit:cover;transform:scale(1.42) translate(-11%,9%);}

/* ERAS (línea de vida) */
.eras{display:flex;flex-direction:column;gap:60px;margin-top:56px;}
.era{position:relative;}
.era-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.era-range{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);background:var(--sand);padding:4px 11px;border-radius:20px;}
.era h3{font-style:italic;font-size:clamp(22px,3.4vw,30px);margin-right:auto;}
.era-quote{font-style:italic;font-size:18px;color:var(--terrad);border-left:3px solid var(--terra);padding-left:18px;margin:14px 0 12px;max-width:62ch;}
.era-quote cite{display:block;font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-top:8px;}
.era-blurb{font-size:15px;color:var(--soft);max-width:64ch;margin-bottom:20px;}
.era-photos.gallery{margin-top:8px;}
.era-photos.gallery img{height:190px;}

/* ERA DESTACADA — bloque de color plano propio, tipografía enorme, blobs.
   Alterna modo oscuro (color saturado, texto blanco) y modo claro (tinte muy sutil del
   acento sobre crema, texto oscuro) para que 11 eras seguidas no fatiguen la vista. */
.era-feature{background:var(--era-accent);color:#fff;padding:90px 0 66px;margin:0 calc(50% - 50vw) 0;position:relative;overflow:hidden;}
.era-feature.light{background:color-mix(in srgb,var(--era-accent) 9%,#f6efe3);color:var(--ink);}
.era-feature .era-feature-inner{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.era-feature .era-blob{position:absolute;fill:#fff;opacity:.16;z-index:1;}
.era-feature.light .era-blob{fill:var(--era-accent);opacity:.12;}
.era-feature .era-blob.b1{width:320px;height:320px;top:-70px;right:-60px;}
.era-feature .era-blob.b2{width:170px;height:170px;bottom:-20px;left:8%;}
.era-feature-num{font-family:var(--serif);font-weight:700;font-size:clamp(90px,17vw,220px);line-height:.7;opacity:.15;position:absolute;top:0;left:24px;z-index:1;user-select:none;color:#fff;}
.era-feature.light .era-feature-num{color:var(--era-accent);opacity:.28;}
.era-feature .era-range{background:rgba(255,255,255,.16);color:#fff;}
.era-feature.light .era-range{background:color-mix(in srgb,var(--era-accent) 18%,#fff);color:var(--era-accent);}
.era-feature h3{font-style:italic;font-weight:600;font-size:clamp(38px,7vw,74px);margin:22px 0 12px;}
.era-feature .era-quote{color:#fff;border-left-color:rgba(255,255,255,.65);font-size:clamp(19px,2.6vw,25px);}
.era-feature.light .era-quote{color:var(--era-accent);border-left-color:var(--era-accent);}
.era-feature .era-quote cite{color:rgba(255,255,255,.7);}
.era-feature.light .era-quote cite{color:var(--soft);}
.era-feature .era-blurb{color:rgba(255,255,255,.88);}
.era-feature.light .era-blurb{color:var(--soft);}
.era-feature.light .photo-card{box-shadow:0 10px 26px -10px rgba(60,40,20,.3);}
.era-feature.light .photo-card:hover,.era-feature.light .photo-card:focus-within{box-shadow:0 20px 40px -12px rgba(60,40,20,.4);}

/* PILA DE FOTOS FÍSICAS (tocables, con pie de foto siempre visible) */
.photo-stack{display:flex;flex-wrap:wrap;justify-content:center;margin-top:44px;perspective:1000px;}
.photo-card{background:#fff;padding:10px 10px 0;width:190px;margin:16px 6px 34px;box-shadow:0 14px 30px -10px rgba(0,0,0,.4);cursor:pointer;position:relative;transform:rotate(var(--rot,0deg)) translateY(var(--ty,0));transition:transform .35s var(--ease),box-shadow .35s;}
.photo-card:hover,.photo-card:focus-within{box-shadow:0 26px 48px -12px rgba(0,0,0,.55);z-index:5;}
.photo-card .photo-card-img{aspect-ratio:1/1;overflow:hidden;background:#e9e2d5;}
.photo-card img{width:100%;height:100%;object-fit:cover;}
.photo-card figcaption{padding:10px 4px 16px;font-size:11.5px;line-height:1.4;color:var(--ink);text-align:center;min-height:3.2em;}
@media(max-width:760px){.photo-card{width:150px;margin:12px 4px 26px;}}
@media(max-width:480px){.photo-card{width:40vw;margin:8px 3px 20px;}}

/* ÁLBUM DE FOTOS — carrusel horizontal (no cuadrícula): con el álbum creciendo hacia el
   centenar de fotos, una grilla vertical alargaría la página sin fin. Aquí se ve una
   muestra repartida a lo largo de su vida; el álbum completo vive en el visor con zoom
   (botón "Ver el álbum completo" y flechas ‹ › del propio lightbox). */
.album-item{flex:0 0 200px;scroll-snap-align:start;background:#fff;padding:10px 10px 0;box-shadow:0 10px 26px -12px rgba(60,40,20,.38);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s;}
.album-item:hover,.album-item:focus-visible{transform:translateY(-6px);box-shadow:0 22px 40px -14px rgba(60,40,20,.5);}
.album-item img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#e9e2d5;display:block;}
.album-item figcaption{padding:10px 2px 14px;font-size:11.5px;line-height:1.4;color:var(--soft);text-align:center;}
@media(max-width:520px){.album-item{flex-basis:60vw;}}

/* CARRUSEL — usado por el álbum y por "Voces con cariño". Scroll-snap nativo: en móvil el
   gesto real es el swipe, las flechas son refuerzo para quien no lo descubra solo. */
.carousel{display:flex;align-items:center;gap:10px;margin-top:44px;}
.car-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 16px;flex:1;min-width:0;}
.car-track::-webkit-scrollbar{height:8px;}
.car-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;}
.car-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--terra);font-size:22px;line-height:1;cursor:pointer;transition:.2s;}
.car-btn:hover{border-color:var(--terra);background:var(--sand);}
.car-btn:disabled{opacity:.3;cursor:default;}
.car-btn[hidden]{display:none;}
.carousel-cta{text-align:center;margin-top:22px;}
.carousel-cta .rbtn[hidden]{display:none;}

/* tanita.jpg es una foto-de-foto con un teclado visible arriba del encuadre (pendiente
   de re-escanear/recortar en origen); mientras tanto se sesga el recorte hacia abajo. */
img[src$="tanita.jpg"]{object-position:center 85%;}

/* LECTOR / FLIPBOOK */
.reader-frame{background:linear-gradient(180deg,#efe4cf,#e6d8bd);border-radius:24px;padding:36px 18px 30px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 30px 60px -24px rgba(60,40,20,.3);}
.reader{display:flex;justify-content:center;}
#flipbook{width:100%;max-width:900px;}
#flipbook .page{background:#fff;}
.reader-ctrls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;flex-wrap:wrap;}
/* En móvil, Anterior/Siguiente pueden llegar a coincidir con la barra fija de Avanzar/
   Regresar al hacer scroll normal: se les da aire de sobra debajo para que no queden tapados. */
@media(max-width:700px){.reader-ctrls{margin-bottom:80px;}}
.rbtn{background:#fff;border:1px solid var(--line);color:var(--ink);padding:10px 18px;border-radius:30px;font-size:13px;cursor:pointer;transition:.2s;}
.rbtn:hover{border-color:var(--terra);color:var(--terra);}
.rbtn.dl{background:var(--terra);color:#fff;border-color:var(--terra);}
.rbtn.dl:hover{background:var(--terrad);color:#fff;}
.pageinfo{font-size:13px;color:var(--soft);min-width:120px;text-align:center;}
.rbtn .ic{width:14px;height:14px;vertical-align:-2px;margin-right:4px;}
.reader-frame:fullscreen,.reader-frame:-webkit-full-screen{background:#1b1714;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;border-radius:0;}
.reader-frame:fullscreen .reader,.reader-frame:-webkit-full-screen .reader{flex:1;width:100%;max-height:calc(100% - 70px);}
.reader-frame:fullscreen #flipbook,.reader-frame:-webkit-full-screen #flipbook{height:100%;}

/* VIDEO / CANCIÓN */
.video-frame{position:relative;max-width:860px;margin:26px auto 0;padding:14px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0));border:1px solid rgba(255,255,255,.12);}
.video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4);}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-fs-btn{position:absolute;top:26px;right:26px;z-index:3;background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.3);}
.video-fs-btn:hover{background:rgba(0,0,0,.7);color:#fff;border-color:#fff;}
.video-frame:fullscreen,.video-frame:-webkit-full-screen{max-width:none;padding:0;background:#000;display:flex;align-items:center;justify-content:center;border:0;border-radius:0;}
.video-frame:fullscreen .video,.video-frame:-webkit-full-screen .video{width:100%;max-width:1600px;box-shadow:none;}
.music-note{text-align:center;font-size:14px;opacity:.75;margin-top:18px;}

/* REELS */
/* Videos reales desde 2026-08-15 (antes: cuatro placeholders con borde punteado
   y `aspect-ratio:9/16` fijo). El grid se centra y las columnas topan en 360 px,
   mismo criterio que el mosaico de voces: con un solo video, `repeat(4,1fr)`
   dejaba una tira estrecha y tres huecos. */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),360px));justify-content:center;gap:20px;margin-top:26px;}
.reel{margin:0;background:#fffdf8;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(60,40,20,.06);}
/* Nada de `aspect-ratio` fijo: un video de celular puede venir vertical u
   horizontal y forzarle una proporción lo recorta o lo deforma. `height:auto`
   respeta la suya; el tope de altura evita que un vertical 9:16 se coma la
   pantalla entera. El fondo oscuro es para las bandas de un video muy vertical. */
.reel video{display:block;width:100%;height:auto;max-height:min(70vh,540px);background:#241f1b;}
.reel figcaption{padding:12px 16px 14px;font-size:14px;line-height:1.45;color:var(--soft);}
/* Miniatura de YouTube con el ▶ encima: es un enlace, no un iframe (ver main.js). */
.reel-yt{position:relative;display:block;}
.reel-yt img{display:block;width:100%;height:auto;}
/* `reel-play`, no `ic`: `.ic` (línea 19) es el sistema de iconos SVG y fija
   22x22 px, que con `inset:0` deja el ▶ clavado arriba a la izquierda. */
.reel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);}
.reel-yt:hover .reel-play{color:var(--sand);}
/* Sin miniatura (id inválido, video retirado, YouTube caído): el enlace se queda
   sin nada que le dé altura, así que necesita su propia caja o el ▶ no tiene
   dónde centrarse. */
.reel-yt.sin-miniatura{aspect-ratio:16/9;background:var(--sand);}
.reel-yt.sin-miniatura .reel-play{color:var(--terra);text-shadow:none;}
.hint{text-align:center;font-size:13px;color:var(--soft);margin-top:18px;}
@media(max-width:860px){.reels{grid-template-columns:repeat(2,1fr);}}

/* VOCES CON CARIÑO
   Mosaico, no carrusel. Antes se veía UNA tarjeta por pantalla y no había forma
   de saber que hubiera más; y como los mensajes van de una frase a un párrafo de
   500 caracteres, la altura uniforme de flex dejaba la tarjeta corta flotando en
   el alto de la más larga (en móvil, 700 px de caja casi vacía). Ese problema
   desaparece con grid: `align-items:start` deja que cada tarjeta mida lo suyo,
   sin el ajuste de alto en JS que hacía falta antes. */
/* Columnas de ancho acotado (no 1fr) y centradas: con dos mensajes —que es lo
   que hay hoy— una sola tarjeta estirada a 1fr o pegada a la izquierda dejaba
   dos tercios de fila vacíos y parecía que faltaba algo. Así el bloque se
   centra siempre, y de paso la línea de texto no pasa de ~50 caracteres. */
/* 330 px de tope, no más: con .wrap en 1080 (1032 útiles) es lo que deja caber
   TRES columnas —3×330 + 2×20 = 1030—. Con 360 solo entraban dos y la sección
   se hacía el doble de larga sin ganar nada. */
.voces-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),330px));justify-content:center;gap:20px;align-items:start;margin-top:26px;}
.voz-card{background:#fffdf8;border-left:3px solid var(--terra);border-radius:8px;padding:20px 22px;box-shadow:0 2px 10px rgba(60,40,20,.06);}
.voz-card[hidden]{display:none;}
.voz-card .tm{font-family:var(--serif);font-style:italic;color:#3c362f;line-height:1.5;}
/* Recortado a 6 líneas: tres testimonios largos uno junto a otro son 1 500
   caracteres de golpe, que no se leen, se saltan. El botón sale SOLO en las
   tarjetas que de verdad se recortan (lo mide main.js), así que un saludo de dos
   líneas se lee entero y sin nada que estorbe. */
.voz-card .tm.recortada{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden;}
.voz-card .tn{margin-top:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);}
/* Cuándo lo dejaron. En `--soft` y sin versalitas: la firma sigue siendo la que
   manda; la fecha es el dato de apoyo y no debe competir con ella. 5.9:1 sobre
   el fondo de la tarjeta — AA cumplido pese al tamaño pequeño. */
.voz-fecha{display:block;margin-top:5px;font-size:12px;color:var(--soft);}
/* 44 px de alto para que sea cómodo con el dedo (Fitts), pero sin caja: dentro
   de la tarjeta un botón con borde competía con la firma. */
.voz-mas{margin-top:10px;min-height:44px;padding:0;background:none;border:0;color:var(--terra);font:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.voz-mas:hover{color:var(--terrad);}

/* La destacada («fijar arriba» en el panel) abre la sección como una cita, a
   ancho completo y sin recortar: si alguien decidió fijarla es porque quiere
   que se lea, no que se resuma. */
.voz-destacada{max-width:760px;margin:30px auto 6px;text-align:center;border:0;padding:0;}
.voz-destacada[hidden]{display:none;}
/* El mínimo baja a 17 px por el móvil: no se recorta nunca, y un mensaje de 400
   caracteres a 19 px se comía la pantalla entera antes de llegar al mosaico. */
.voz-destacada .tm{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.4vw,25px);line-height:1.55;color:#3c362f;}
.voz-destacada .tn{margin-top:16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);}
.voz-destacada .tn::before{content:"";display:block;width:38px;height:2px;background:var(--terra);margin:0 auto 14px;opacity:.6;}
.voz-destacada .voz-fecha{margin-top:7px;}

/* GUESTBOOK */
.guest-form{display:flex;flex-direction:column;gap:12px;max-width:560px;margin:8px auto 30px;}
.guest-form input,.guest-form textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;}
.guest-form textarea{resize:vertical;}
/* Honeypot: fuera de pantalla, no display:none (algunos bots simples lo detectan y lo saltan). */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}
.guest-ack{text-align:center;font-size:14px;color:var(--terra);}
.guest-ack[hidden]{display:none;}

/* FOOTER */
footer{background:#1b1714;color:#cfc6b8;text-align:center;padding:56px 24px;}
footer .ic-lg{width:28px;height:28px;color:var(--terra);margin:0 auto;opacity:.85;}
.colophon{font-family:var(--serif);font-style:italic;font-size:19px;max-width:52ch;margin:16px auto 26px;color:#e9dfd0;}
.colophon cite{display:block;font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px;color:#c98a6c;}
.fbrand{font-family:var(--serif);font-style:italic;font-size:26px;color:#e0a583;}
footer p{max-width:56ch;margin:14px auto;font-size:14px;opacity:.85;}
footer .sig{font-style:italic;margin-top:16px;}

/* LIGHTBOX */
/* z-index 250: por encima del sendero de piedras (150), de Avanzar/Regresar y del
   reproductor (130) y de la barra de progreso (200), que si no se dibujaban ENCIMA del
   visor abierto. Solo el enlace de saltar al contenido (300) queda arriba, como debe ser. */
.lightbox{position:fixed;inset:0;z-index:250;background:rgba(15,10,6,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 24px 16px;}
.lightbox[hidden]{display:none;}
/* El escenario recorta la foto al acercarla; `touch-action:none` evita que el gesto de
   pellizcar/arrastrar haga scroll de la página por debajo del visor. */
/* El escenario ocupa TODO el hueco disponible (no el tamaño de la foto): así una foto
   chica se amplía hasta llenarlo en vez de quedar como una estampilla en el centro.
   El tamaño real de la imagen lo calcula `ajustarBase()` en main.js, que conoce los
   píxeles originales y aplica el tope de ampliación. */
/* `flex:1` + `min-height:0` en vez de restar a mano el alto de la barra: cualquier
   número fijo se desfasa en cuanto cambia el pie o el tamaño de letra, y el texto
   acababa encima de la foto. Así el escenario se queda con lo que sobre, exacto. */
.lb-stage{flex:1 1 auto;min-height:0;width:min(94vw,1600px);overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center;cursor:zoom-in;}
.lb-stage.zoomed{cursor:grab;}
.lb-stage.dragging{cursor:grabbing;}
/* Sin max-width/max-height: los ponía el CSS a 74vh y una foto de 301 px de alto se
   dibujaba a 301 px, porque el máximo no estira. Ahora manda el JS. La sombra pasa del
   escenario a la imagen; si no, se veía un rectángulo grande con la foto flotando dentro. */
.lightbox img{display:block;border-radius:6px;box-shadow:0 10px 50px rgba(0,0,0,.6);transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;}
/* Barra inferior compacta, en el flujo: ocupa solo lo que necesita y el escenario se
   queda con todo lo demás. Antes estos cuatro elementos iban sueltos y apilados con
   márgenes generosos, y entre todos se llevaban un tercio de la pantalla. */
.lb-bar{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:12px;}
.lb-cap{color:#eee;font-size:14px;text-align:center;max-width:60ch;}
/* Con el marco puesto el pie va DENTRO; tenerlo además aquí abajo lo mostraba dos
   veces, con dos tipografías distintas y a dos alturas. */
.lightbox.enmarcado .lb-cap{display:none;}

/* ── PASSE-PARTOUT DEL VISOR (2026-08-15) ────────────────────────────────────
   El álbum y la portada muestran las fotos enmarcadas; abrirlas y verlas
   desnudas sobre el fondo negro rompía ese lenguaje. Pero la tarjeta del álbum
   NO se puede copiar tal cual: consigue su forma con `aspect-ratio:3/4` +
   `object-fit:cover`, o sea RECORTANDO — y el visor existe precisamente para ver
   la foto entera. Así que el marco se ajusta a la foto en su proporción real.

   Efecto lateral que resulta ser una ventaja: al reservar sitio para el marco, la
   foto se dibuja algo más chica y por tanto menos ampliada. Con un álbum de
   escaneos pequeños (mediana 500 px de lado largo, 41 de 54 por debajo de 800) eso
   se traduce en menos pixelado, no en menos foto. */
.lb-marco{margin:0;display:flex;flex-direction:column;align-items:center;
  background:transparent;padding:0;border-radius:0;box-shadow:none;
  transition:padding .22s var(--ease),background-color .22s var(--ease),box-shadow .22s var(--ease);}
.lightbox.enmarcado .lb-marco{background:#fffdf8;padding:14px;border-radius:5px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.75);}
/* `width:0;min-width:100%` es lo que impide que un pie largo ENSANCHE el marco:
   con `width:fit-content` heredado del flex, el texto mandaría sobre el ancho y el
   passe-partout dejaría de ceñirse a la foto. Así el ancho lo fija la imagen y el
   texto se acomoda dentro. */
.lb-marco-cap{width:0;min-width:100%;box-sizing:border-box;padding:12px 6px 2px;
  font-size:13.5px;line-height:1.45;color:var(--soft);text-align:center;}
.lb-marco-cap[hidden]{display:none;}
/* Acercada, el marco se retira entero: sin padding no queda un cerco de 14 px que
   recorte la foto ampliada. El pie reaparece abajo (regla de `.lb-cap`). */
.lightbox:not(.enmarcado) .lb-marco-cap{display:none;}
/* En el teléfono el alto es el recurso escaso: marco más fino y pie más compacto,
   para no repetir el problema que la barra inferior ya había resuelto una vez. */
@media(max-width:700px){
  .lightbox.enmarcado .lb-marco{padding:8px;}
  .lb-marco-cap{padding:8px 4px 0;font-size:12.5px;}
}
.lb-close{position:absolute;top:18px;right:24px;background:none;border:none;color:#fff;font-size:30px;cursor:pointer;line-height:1;padding:8px 12px;}
/* Flechas del álbum completo: sobre el escenario, no en el flujo (el lightbox es flex-column) */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.35);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s;z-index:2;}
.lb-nav:hover{background:rgba(255,255,255,.18);border-color:#fff;}
.lb-nav[hidden]{display:none;}
.lb-prev{left:10px;}
.lb-next{right:10px;}
.lb-count{color:rgba(255,255,255,.7);font-size:12px;margin-top:2px;text-align:center;}
.lb-count[hidden]{display:none;}
@media(max-width:700px){.lb-nav{width:44px;height:44px;font-size:22px;}.lb-prev{left:4px;}.lb-next{right:4px;}}
/* Controles de zoom — 44px de alto para que se puedan tocar cómodamente en el celular */
.lb-zoom{display:flex;align-items:center;gap:8px;margin-top:8px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);padding:6px;border-radius:40px;}
.lb-zbtn{min-width:44px;height:44px;padding:0 14px;border-radius:30px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s;}
.lb-zbtn.wide{font-size:13px;letter-spacing:.04em;}
.lb-zbtn:hover{background:rgba(255,255,255,.18);border-color:#fff;}
.lb-zbtn:disabled{opacity:.35;cursor:default;}
.lb-level{color:#fff;font-size:13px;min-width:5.5ch;text-align:center;font-variant-numeric:tabular-nums;}
.lb-hint{color:rgba(255,255,255,.6);font-size:12px;margin-top:6px;margin-bottom:0;text-align:center;max-width:52ch;}
@media(max-width:700px){
  .lightbox{padding:16px 8px 12px;}
  .lb-stage{width:96vw;}
  .lb-hint{display:none;}
  .lb-close{top:10px;right:12px;}
  .lb-bar{padding:12px 12px 14px;}
}