/* ═══════════════════════════════════════════════════════════════
   NARÄ · Guardianes de la Tierra
   Experiencia editorial conducida por el scroll.

   El guion no anima: calcula cuánto se lleva recorrido de cada
   capítulo y lo deja en --p (0 → 1). Todo lo visual vive aquí, de
   modo que sin JavaScript la página sigue siendo legible.

   ── DÓNDE TOCAR ──────────────────────────────────────────────
   · colores ............ :root, más abajo
   · velocidad .......... --lento-img, --lento-txt
   · alto de capítulo ... --alto-cap
   · recorte de foto .... cada <img> lleva su propio object-position
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Todos los títulos de sección centrados comparten esta medida.
     Antes cada módulo traía la suya y convivían cuatro tamaños. */
  --t-seccion:clamp(1.8rem,3.6vw,2.8rem);

  /* la identidad de NARÄ no cambia: estos son los tonos del sitio */
  --g-fondo:    #F5F1E8;   /* parchment */
  --g-fondo-2:  #ECE5D7;
  --g-tinta:    #272119;
  --g-tinta-2:  #5A5246;
  --g-tinta-3:  #8A8173;
  --g-claro:    #F4EFE4;
  --g-claro-2:  #CFC7B6;
  --g-oro:      #C9A96A;
  --g-oro-luz:  #E8D2A0;
  --g-noche:    #241B14;

  --alto-cap:   112svh;    /* 100–120svh según la pauta */
  --lento-img:  1.6s;
  --lento-txt:  1.1s;
  --curva:      cubic-bezier(.16,.84,.26,1);
  --margen:     clamp(20px,6vw,80px);
}

.gt{--p:0;position:relative}

/* ─────────── cursor ───────────
   Solo en escritorio y solo con puntero fino. En táctil se apaga
   entero y vuelve el cursor del sistema. */
@media (pointer:fine){
  body.gt-cursor{cursor:none}
  body.gt-cursor a,body.gt-cursor button{cursor:none}
}
.gt-punto,.gt-aro{position:fixed;top:0;left:0;z-index:300;border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);will-change:transform}
.gt-punto{width:6px;height:6px;background:var(--g-oro-luz)}
.gt-aro{width:34px;height:34px;border:1px solid var(--g-oro-luz);opacity:.6;
  transition:width .3s var(--curva),height .3s var(--curva),
             opacity .3s var(--curva),background .3s var(--curva)}
.gt-aro.cerca{width:56px;height:56px;opacity:1;background:rgba(232,210,160,.08)}
@media (pointer:coarse){ .gt-punto,.gt-aro{display:none} }

/* ─────────── 01 · hero ─────────── */
.gt-hero{position:relative;min-height:100svh;width:100vw;
  margin-inline:calc(50% - 50vw);overflow:hidden;
  display:flex;align-items:flex-end;
  padding:0 var(--margen) clamp(56px,9vh,84px)}
.gt-hero .gt-foto{position:absolute;inset:0;z-index:0}
.gt-hero .gt-foto img{width:100%;height:100%;object-fit:cover;display:block;
  /* zoom lento al entrar + parallax muy leve al bajar */
  transform:scale(calc(1.09 - .09 * var(--p)))
            translateY(calc(var(--p) * 4%));
  transition:none}
.gt-hero .gt-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,27,20,.18) 0%,rgba(36,27,20,.5) 64%,
    rgba(36,27,20,.9) 100%)}

.gt-hero .gt-rotulo{position:relative;z-index:3;max-width:760px}
.gt-etq{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--g-oro-luz)}
.gt-hero .gt-etq{margin-bottom:20px}
.gt-hero h1{font-family:var(--serif);font-weight:500;text-transform:uppercase;
  font-size:clamp(42px,8vw,92px);line-height:.95;letter-spacing:.01em;
  color:var(--g-claro);margin:0}
.gt-hero .gt-sub{max-width:520px;margin-top:24px;font-family:var(--serif);
  font-style:italic;font-size:clamp(18px,2.2vw,24px);line-height:1.5;
  color:var(--g-claro-2)}

/* el texto del hero aparece progresivamente, no de golpe */
.gt-hero .gt-etq,.gt-hero h1,.gt-hero .gt-sub{opacity:0;transform:translateY(16px);
  transition:opacity var(--lento-txt) var(--curva),transform var(--lento-txt) var(--curva)}
.gt-hero.dentro .gt-etq{opacity:1;transform:none;transition-delay:.15s}
.gt-hero.dentro h1   {opacity:1;transform:none;transition-delay:.3s}
.gt-hero.dentro .gt-sub{opacity:1;transform:none;transition-delay:.5s}

.gt-entrar{position:absolute;left:50%;bottom:32px;z-index:3;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--g-claro-2);opacity:calc(1 - var(--p) * 2.4)}
.gt-entrar i{display:block;width:1px;height:38px;
  background:linear-gradient(180deg,var(--g-oro-luz),transparent);
  animation:gtLatido 2.4s ease-in-out infinite}
@keyframes gtLatido{0%,100%{opacity:.3}50%{opacity:1}}

/* ─────────── 02 · introducción ─────────── */
.gt-intro{background:var(--g-fondo);padding-block:clamp(90px,18vh,200px)}
.gt-intro .gt-in{width:min(100% - var(--margen)*2,760px);margin-inline:auto;
  text-align:center}
.gt-intro .gt-etq{color:var(--g-tinta-3);margin-bottom:22px}
.gt-intro h2{font-family:var(--serif);font-weight:400;
  font-size:var(--t-seccion);line-height:1.1;margin:0 0 .6em;
  text-transform:uppercase;letter-spacing:.02em}
.gt-intro p{color:var(--g-tinta-2);font-size:clamp(1rem,1.5vw,1.15rem);
  line-height:1.8;max-width:62ch;margin-inline:auto}

/* ─────────── capítulos ───────────
   Cada capítulo son dos piezas: una portada propia a sangre, con la
   fotografía ocupando casi toda la pantalla y el texto apoyado abajo,
   y debajo una galería que corre en horizontal.
   La fotografía manda; el texto es corto y va encima de ella.      */
.gt-cap{position:relative;padding-block:0}

/* ── portada del capítulo ── */
.gt-cap-hero{position:relative;min-height:88svh;width:100vw;
  margin-inline:calc(50% - 50vw);overflow:hidden;
  display:flex;align-items:flex-end;
  padding:0 var(--margen) clamp(48px,8vh,86px)}
.gt-cap-hero .gt-foto{position:absolute;inset:0;z-index:0}
.gt-cap-hero .gt-foto img{width:100%;height:100%;object-fit:cover;display:block;
  /* entra desde 1.08 y se asienta; se desplaza al contrario del scroll */
  transform:scale(calc(1.08 - .08 * var(--v)))
            translateY(calc((var(--p) - .5) * -4%));
  opacity:calc(.8 + .2 * var(--v))}
.gt-cap-hero .gt-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,27,20,.1) 0%,rgba(36,27,20,.5) 58%,
    rgba(36,27,20,.88) 100%)}

.gt-cap-rot{position:relative;z-index:2;max-width:620px;color:var(--g-claro)}
.gt-cap-rot .gt-num{display:block;font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;color:var(--g-oro-luz);
  margin-bottom:.3em}
.gt-cap-rot .gt-etq{color:var(--g-oro-luz);margin-bottom:16px}
.gt-cap-rot h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:1;letter-spacing:.01em;
  color:var(--g-claro);margin:0 0 .45em}
.gt-cap-rot .gt-cuerpo{color:var(--g-claro-2);line-height:1.75;max-width:46ch}
.gt-cap-rot .gt-cuerpo p + p{margin-top:.9em}
.gt-cap-rot .gt-cta{display:inline-block;margin-top:1.4em;
  color:var(--g-claro);border-color:rgba(244,239,228,.35)}
.gt-cap-rot .gt-cta:hover{color:var(--g-oro-luz);border-color:var(--g-oro)}

/* el texto entra después de la fotografía */
.gt-cap-rot > *{opacity:0;transform:translateY(18px);filter:blur(3px);
  transition:opacity var(--lento-txt) var(--curva),
             transform var(--lento-txt) var(--curva),
             filter var(--lento-txt) var(--curva)}
.gt-cap.dentro .gt-cap-rot > *{opacity:1;transform:none;filter:none}
.gt-cap.dentro .gt-cap-rot > :nth-child(1){transition-delay:.3s}
.gt-cap.dentro .gt-cap-rot > :nth-child(2){transition-delay:.4s}
.gt-cap.dentro .gt-cap-rot > :nth-child(3){transition-delay:.5s}
.gt-cap.dentro .gt-cap-rot > :nth-child(4){transition-delay:.6s}
.gt-cap.dentro .gt-cap-rot > :nth-child(5){transition-delay:.7s}

/* ── galería del capítulo ──
   Corre de lado. Se arrastra con el dedo o el ratón y además deriva
   un poco con el scroll, para que no se sienta un bloque quieto.   */
.gt-galeria{padding-block:clamp(34px,6vh,72px)}
/* cuando la galería lleva título propio, va centrado sobre la cinta */
.gt-galeria .gt-cabe{width:min(100% - var(--margen)*2,34ch);
  margin:0 auto clamp(26px,4vw,48px);text-align:center}
.gt-galeria .gt-cabe .gt-etq{color:var(--g-tinta-3);margin-bottom:16px}
.gt-galeria .gt-cabe h2{font-family:var(--serif);font-weight:400;
  font-size:var(--t-seccion);line-height:1.1;margin:0;
  text-transform:uppercase;letter-spacing:.02em}

.gt-tira{overflow:hidden;position:relative}
/* La cinta lleva el contenido duplicado: al llegar a la mitad del
   recorrido vuelve al principio y el salto no se percibe, de modo que
   el paso se siente continuo. El guion calcula la duración según
   cuántas fotos haya, para que catorce no pasen más rápido que cuatro. */
.gt-cinta{display:flex;gap:clamp(10px,1.6vw,22px);width:max-content;
  padding-inline:var(--margen);
  animation:gtPasa var(--dur,70s) linear infinite}
@keyframes gtPasa{from{transform:translate3d(0,0,0)}
                  to{transform:translate3d(calc(-50% - clamp(5px,.8vw,11px)),0,0)}}
/* se detiene al acercarse, para poder mirar una foto con calma */
.gt-tira:hover .gt-cinta,.gt-tira:focus-within .gt-cinta{animation-play-state:paused}
.gt-cinta figure{flex:0 0 clamp(230px,25vw,370px);margin:0;overflow:hidden;
  position:relative;aspect-ratio:4/5;background:var(--g-fondo-2)}
.gt-cafe .gt-cinta figure{background:#2F241A}

/* Variante «libre»: en vez de recortarlo todo a vertical, cada lámina
   conserva su propia forma y solo se iguala la altura. Las apaisadas dejan
   de perder medio encuadre y la fila gana ritmo, porque anchos distintos
   se leen mejor que una rejilla de piezas iguales. */
.gt-tira.libre .gt-cinta figure{flex:0 0 auto;aspect-ratio:auto;
  height:clamp(260px,40vh,440px);width:auto}
.gt-tira.libre .gt-cinta img{width:auto;height:100%;max-width:none}
@media (max-width:640px){
  .gt-tira.libre .gt-cinta figure{height:46svh}
}

.gt-cinta img{width:100%;height:100%;object-fit:cover;display:block}
.gt-cinta figcaption{position:absolute;inset:auto 0 0 0;padding:12px;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(24,18,12,.75))}

/* ─────────── navegación lateral ─────────── */
.gt-indice{position:fixed;right:clamp(14px,2vw,30px);top:50%;z-index:60;
  transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;
  mix-blend-mode:difference}
.gt-indice a{display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  color:rgba(244,239,228,.55);transition:color .4s ease}
.gt-indice a i{display:block;width:16px;height:1px;background:currentColor;
  transition:width .45s var(--curva)}
.gt-indice a[aria-current="true"]{color:#fff}
.gt-indice a[aria-current="true"] i{width:30px}
.gt-indice a:hover{color:#fff}

/* ─────────── 08 · cierre ─────────── */
.gt-cierre{position:relative;min-height:100svh;width:100vw;
  margin-inline:calc(50% - 50vw);overflow:hidden;display:grid;place-items:center;
  /* las dos filas —marquesina y texto— se agrupan en el centro en vez de
     repartirse el alto, para que el título quede pegado a su bloque */
  align-content:center;padding:var(--margen)}
.gt-cierre .gt-foto{position:absolute;inset:0;z-index:0}
.gt-cierre .gt-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.12 - .12 * var(--p)))}
.gt-cierre .gt-foto::after{content:"";position:absolute;inset:0;
  background:rgba(36,27,20,.56)}
.gt-cierre .gt-in{position:relative;z-index:2;text-align:center;max-width:24ch;
  color:var(--g-claro)}
.gt-cierre h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.22;margin:0 0 .5em;
  color:var(--g-claro)}
.gt-cierre p{color:var(--g-claro-2);line-height:1.75}

/* ─────────── 09 · llamada ─────────── */
.gt-cta{background:var(--g-fondo-2);padding-block:clamp(80px,15vh,160px);
  text-align:center}
.gt-cta .gt-in{width:min(100% - var(--margen)*2,640px);margin-inline:auto}
.gt-cta .gt-etq{color:var(--g-tinta-3);margin-bottom:20px}
.gt-cta h2{font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.35;margin:0 0 1.2em}
.gt-cta .gt-boton{display:inline-block;padding:16px 34px;border-radius:100px;
  border:1px solid var(--g-oro);font-family:var(--sans);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--g-tinta);
  transition:background .35s var(--curva),color .35s var(--curva)}
.gt-cta .gt-boton:hover,.gt-cta .gt-boton:focus-visible{
  background:var(--g-oro);color:var(--g-noche)}

/* ─────────── tablet ─────────── */
@media (max-width:1100px){
  .gt-indice{right:10px}
}

/* ─────────── móvil: experiencia propia, no el escritorio encogido ───────────
   Se renuncia al parallax y a la navegación lateral, no al tamaño de la
   fotografía ni al vacío. El texto manda y la lectura va primero. */
@media (max-width:860px){
  :root{--alto-cap:auto}
  .gt-hero{min-height:92svh;padding-bottom:clamp(64px,12vh,88px)}
  .gt-hero .gt-sub{font-size:clamp(16px,4.2vw,19px);margin-top:18px}

.gt-cap-hero{min-height:78svh;padding-bottom:clamp(40px,7vh,64px)}
.gt-cap-rot h2{font-size:clamp(1.7rem,7vw,2.4rem)}
.gt-cap-hero .gt-foto img{transform:scale(calc(1.04 - .04 * var(--v)))}
.gt-galeria{padding-block:clamp(26px,5vh,46px)}
.gt-cinta{gap:10px;padding-inline:clamp(20px,5vw,28px)}
.gt-cinta figure{flex:0 0 72vw;aspect-ratio:4/5}

  /* la navegación lateral se convierte en un indicador discreto abajo */
  .gt-indice{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));
    right:50%;transform:translateX(50%);flex-direction:row;gap:7px;
    mix-blend-mode:normal}
  .gt-indice a span{display:none}
  .gt-indice a i{width:14px;height:2px;border-radius:2px;
    background:rgba(39,33,25,.25)}
  .gt-indice a[aria-current="true"] i{width:22px;background:var(--g-oro)}

  .gt-cierre{min-height:84svh}
  .gt-cta{padding-block:clamp(60px,11vh,100px)}
}

/* ─────────── movimiento reducido ─────────── */
@media (prefers-reduced-motion:reduce){
  .gt-hero .gt-foto img,.gt-cierre .gt-foto img,.gt-cap-hero .gt-foto img{
    transform:none !important;opacity:1 !important}
  .gt-hero .gt-etq,.gt-hero h1,.gt-hero .gt-sub,
  .gt-cap-rot > *{opacity:1 !important;transform:none !important;
    filter:none !important;transition:none}
  .gt-entrar i{animation:none}
  .gt-entrar{opacity:1}
}

/* ─────────── hueco de fotografía pendiente ───────────
   Mientras la foto no esté en /images/guardianes/, el marco muestra su
   ruta en vez de un icono de imagen rota. En cuanto se copie el archivo
   con ese nombre, desaparece solo. */
.sin-foto img{opacity:0}
.sin-foto{position:relative}
.sin-foto::after{
  content:attr(data-falta);position:absolute;inset:0;display:grid;
  place-items:center;padding:24px;text-align:center;
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--g-tinta-3);
  background:var(--g-fondo-2);
  border:1px dashed rgba(39,33,25,.18)}
.gt-foto.sin-foto::after{background:var(--g-noche);color:var(--g-claro-2);
  border-color:rgba(244,239,228,.2)}

/* ═══════════ geometría de fondo ═══════════
   Tomada del archivo de referencia: va FIJA a la ventana, no al documento.
   El contenido se desliza por encima de ella y por eso se siente como un
   fondo en movimiento. Vive detrás de todo (z-index 0), así que las
   secciones no pueden llevar fondo opaco o la taparían.

   En el archivo original la página entera es café oscuro y el dorado se
   lee en modo *screen*. Aquí el fondo es beige, de modo que se usa oro
   sólido a baja opacidad, sin mezcla: se ve igual de sutil sobre la foto
   oscura del hero y sobre el beige de las secciones de texto.          */
.gt-geo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.gt-geo .orn{position:absolute;top:0;bottom:0;width:130px;opacity:.3;
  display:flex;align-items:center;justify-content:center;color:var(--g-oro)}
.gt-geo .orn.izq{left:0}
.gt-geo .orn.der{right:0;transform:scaleX(-1)}
.gt-geo .orn svg{width:100%;height:auto;max-height:88svh}
.gt-geo .rayo  {animation:gtLat 5s ease-in-out infinite;transform-origin:center}
.gt-geo .nucleo{animation:gtBri 4s ease-in-out infinite}
.gt-geo .punto {animation:gtTit 3.2s ease-in-out infinite}
@keyframes gtLat{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes gtBri{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes gtTit{0%,100%{opacity:.3}50%{opacity:1}}

.gt-geo .brillo{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);
  width:min(70vw,700px);height:min(70vw,700px);opacity:.3;color:var(--g-oro)}
.gt-geo .luz{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,106,.4) 0%,
    rgba(201,169,106,.1) 40%,transparent 70%);
  animation:gtLuz 6s ease-in-out infinite}
.gt-geo .mandala{position:absolute;inset:0;width:100%;height:100%;
  animation:gtGira 90s linear infinite}
@keyframes gtLuz{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes gtGira{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.gt-geo .chispas{position:absolute;inset:0}
.gt-geo .chispas span{position:absolute;border-radius:50%;background:var(--g-oro);
  box-shadow:0 0 6px 1px rgba(201,169,106,.6);opacity:.5;
  animation:gtChispa var(--dur,4s) ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes gtChispa{0%,100%{opacity:.1;transform:scale(.8)}50%{opacity:.7;transform:scale(1.3)}}

/* ── las tres capas ──
   Las secciones NO llevan z-index: así no crean contexto propio y la
   geometría puede colarse entre su fondo y su contenido. El orden es:
     0  fondo de cada sección (y las fotografías a sangre)
     1  la geometría fija
     2  el texto y los marcos
   Si una sección llevara z-index, taparía la geometría entera. */
.gt-geo{z-index:1}
.gt-hero .gt-foto,.gt-cierre .gt-foto{z-index:0}
.gt-hero .gt-rotulo,.gt-hero .gt-entrar,
.gt-cierre .gt-in,.gt-intro .gt-in,.gt-cta .gt-in,
.gt-cap-rot,.gt-galeria{position:relative;z-index:2}

/* ── secciones en café ──
   Alternan con las de beige a lo largo del recorrido. Sobre el café la
   geometría dorada se enciende; sobre el beige queda discreta. */
.gt-cafe{background:var(--g-noche);color:var(--g-claro)}
.gt-cafe h2{color:var(--g-claro)}
.gt-cafe p,.gt-cafe .gt-cuerpo{color:var(--g-claro-2)}
.gt-cafe .gt-etq{color:var(--g-oro-luz)}
.gt-cafe .gt-num{color:var(--g-oro-luz)}

.gt-cafe .enlace{color:var(--g-claro);border-color:rgba(244,239,228,.3)}
.gt-cafe .enlace:hover{color:var(--g-oro-luz);border-color:var(--g-oro)}

/* ─────────── vídeo a sangre ───────────
   Ocupa el ancho entero de la pantalla manteniendo su proporción, y deja
   de crecer cuando llegaría a ser más alto que la ventana: así nunca hay
   que hacer scroll para ver el cuadro completo. Carga diferida, de modo
   que YouTube no se pide hasta que el visitante se acerca. */
.gt-video{position:relative;width:100vw;margin-inline:calc(50% - 50vw);
  background:var(--g-noche);display:grid;place-items:center}
.gt-pantalla{position:relative;width:min(100%, calc(100svh * 16 / 9));
  aspect-ratio:16/9}
.gt-pantalla iframe{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block}

/* Un vídeo ocupando la columna de la imagen, con el mismo recorte que una
   foto. Lleva cartel, así que el hueco nunca está vacío mientras carga. */
.gt-cine{position:relative;overflow:hidden;background:var(--g-noche)}
.gt-cine video{width:100%;height:100%;object-fit:cover;display:block}

/* Dos botones juntos
: en pantalla estrecha se apilan en vez de salirse. */
.gt-botones{display:flex;flex-wrap:nowrap;gap:14px;justify-content:center;
  margin-top:clamp(18px,2.4vw,28px)}
.gt-botones .gt-btn{white-space:nowrap}
/* la caja del cierre se ensancha solo cuando lleva dos botones */
.gt-cierre .gt-in.ancho{max-width:46ch}
/* en pantallas muy estrechas sí se apilan, o se saldrían */
@media (max-width:430px){
  .gt-botones{flex-wrap:wrap}
}


/* Una lámina ancha dentro de un tramo de texto
: el esquema va arriba, a
   todo el ancho útil, y el texto debajo. Entra subiendo al asomar. */
.gt-lamina{width:min(100% - var(--margen)*2,1180px);margin:0 auto clamp(30px,5vw,56px)}
.gt-lamina img{width:100%;height:auto;display:block}
.gt-lamina{opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--curva),transform 1.1s var(--curva)}
.dentro .gt-lamina,.gt-intro.dentro .gt-lamina,
.gt-lamina.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .gt-lamina{opacity:1;transform:none;transition:none}
}

/* El remate: una frase que cierra la columna
, en serif y versal, para que
   se lea como conclusión y no como un párrafo más. */
.gt-remate{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.3;
  text-transform:uppercase;letter-spacing:.03em;
  color:var(--g-tinta);margin:clamp(26px,3vw,40px) 0 0;
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid rgba(201,169,106,.5)}
.gt-cafe .gt-remate,.oscura .gt-remate{color:var(--g-claro)}

/* El aviso legal, al pie de la columna: menor y más apagado que el texto,
   pero con contraste suficiente para leerse sin esfuerzo. */
.gt-aviso{font-size:.84rem;line-height:1.65;color:var(--g-tinta-2);
  margin:clamp(22px,2.6vw,34px) 0 0;max-width:52ch}

/* ─────────── dos fotos que se turnan ───────────

   Un único marco: la segunda lámina se funde sobre la primera, se queda un
   rato y se retira. Solo se anima la opacidad, así que el navegador no
   repinta nada. Quien pida menos movimiento ve una sola, quieta. */
.gt-pase{position:relative;overflow:hidden;aspect-ratio:3/4;
  background:var(--g-fondo-2)}
.gt-pase figure{position:absolute;inset:0;margin:0}
.gt-pase img{width:100%;height:100%;object-fit:cover;display:block}
.gt-pase figure:last-child{opacity:0;
  animation:gtAlterna 13s ease-in-out infinite}
@keyframes gtAlterna{
  0%,8%   {opacity:0}
  42%,58% {opacity:1}
  92%,100%{opacity:0}
}
/* Con cuatro láminas el marco ya no alterna, gira: cada una entra, se
   queda un rato y cede el turno. El ciclo completo dura 28 segundos, así
   que cada foto se ve unos siete. */
.gt-pase.ciclo figure{opacity:0;animation:gtCiclo 21s ease-in-out infinite}
.gt-pase.ciclo figure:nth-child(1){animation-delay:0s}
.gt-pase.ciclo figure:nth-child(2){animation-delay:7s}
.gt-pase.ciclo figure:nth-child(3){animation-delay:14s}
/* tres turnos de siete segundos: cada lámina ocupa un tercio del ciclo */
@keyframes gtCiclo{
  0%{opacity:0} 4%{opacity:1} 29%{opacity:1} 33%,100%{opacity:0}
}

/* Con cinco láminas el turno sigue siendo de siete segundos, pero la vuelta
   entera dura treinta y cinco. Hacen falta sus propias proporciones: los
   porcentajes de un bucle no se pueden calcular con variables. */
.gt-pase.cinco figure{opacity:0;animation:gtCiclo5 35s ease-in-out infinite}
.gt-pase.cinco figure:nth-child(1){animation-delay:0s}
.gt-pase.cinco figure:nth-child(2){animation-delay:7s}
.gt-pase.cinco figure:nth-child(3){animation-delay:14s}
.gt-pase.cinco figure:nth-child(4){animation-delay:21s}
.gt-pase.cinco figure:nth-child(5){animation-delay:28s}
@keyframes gtCiclo5{
  0%{opacity:0} 2%{opacity:1} 17%{opacity:1} 20%,100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .gt-pase figure:last-child{animation:none;opacity:0}
  .gt-pase.ciclo figure,.gt-pase.cinco figure{animation:none;opacity:0}
  .gt-pase.ciclo figure:first-child,
  .gt-pase.cinco figure:first-child{opacity:1}
}



/* ─────────── columna de tres fotos ───────────


   Dentro de un .gt-duo, sustituye a la figura única: una lámina ancha
   arriba y dos más pequeñas debajo. Al entrar suben escalonadas. */
.gt-pila{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(8px,1.2vw,16px);align-content:start}
.gt-pila figure{margin:0;overflow:hidden;background:var(--g-fondo-2);
  opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--curva),transform .9s var(--curva)}
.gt-pila figure:first-child{grid-column:1 / -1;aspect-ratio:4/3}
.gt-pila figure:not(:first-child){aspect-ratio:3/4}
.gt-pila img{width:100%;height:100%;object-fit:cover;display:block}
.dentro .gt-pila figure,.gt-duo.dentro .gt-pila figure{opacity:1;transform:none}
.gt-duo.dentro .gt-pila figure:nth-child(2){transition-delay:.14s}
.gt-duo.dentro .gt-pila figure:nth-child(3){transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .gt-pila figure{opacity:1;transform:none;transition:none}
}

/* Un título solo, grande, sobre la geometría. Entra subiendo cuando
   asoma; el guion le pone .dentro igual que a los demás tramos. */
.gt-intro.con-geo{padding-block:clamp(90px,17vh,190px)}
.gt-intro.con-geo h2{opacity:0;transform:translateY(26px);
  transition:opacity 1.1s var(--curva),transform 1.2s var(--curva)}
.gt-intro.con-geo.dentro h2{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .gt-intro.con-geo h2{opacity:1;transform:none;transition:none}
}

/* ─────────── la manada ───────────

   Una fila de retratos: el nombre y el oficio van sobre la propia foto,
   apoyados abajo, de modo que la tarjeta es la fotografía y no una caja
   con texto debajo. Entran escalonados, de izquierda a derecha. */
.gt-manada{background:var(--g-noche);color:var(--g-claro);
  padding-block:clamp(70px,13vh,150px)}
.gt-manada .gt-in{width:min(100% - var(--margen)*2,1340px);margin-inline:auto}
.gt-manada .gt-cabe{text-align:center;margin-bottom:clamp(30px,5vw,56px)}
.gt-manada .gt-etq{color:var(--g-oro-luz);margin-bottom:16px}
.gt-manada h2{font-family:var(--serif);font-weight:400;color:var(--g-claro);
  font-size:var(--t-seccion);line-height:1.1;margin:0;
  text-transform:uppercase;letter-spacing:.02em}
.gt-manada ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.gt-manada li{position:relative;overflow:hidden;aspect-ratio:3/4;
  background:#2F241A;
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--curva),transform .9s var(--curva)}
.gt-manada.dentro li{opacity:1;transform:none}
.gt-manada.dentro li:nth-child(1){transition-delay:.05s}
.gt-manada.dentro li:nth-child(2){transition-delay:.17s}
.gt-manada.dentro li:nth-child(3){transition-delay:.29s}
.gt-manada.dentro li:nth-child(4){transition-delay:.41s}
.gt-manada.dentro li:nth-child(5){transition-delay:.53s}
.gt-manada figure{position:absolute;inset:0;margin:0}
.gt-manada img{width:100%;height:100%;object-fit:cover;display:block}
.gt-manada li::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(transparent,rgba(24,18,12,.82));pointer-events:none}
.gt-manada .ficha{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(12px,1.4vw,20px);text-align:center}
.gt-manada .rol{display:block;font-family:var(--sans);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--g-oro-luz);
  margin-bottom:6px}
.gt-manada h3{font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(1.1rem,1.8vw,1.6rem);color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
@media (max-width:860px){
  .gt-manada ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gt-manada li:last-child{grid-column:1 / -1;aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .gt-manada li{opacity:1;transform:none;transition:none}
}

/* ─────────── los planos de una sesión ───────────


   Mismo tramo de cabecera centrada que las galerías, con las columnas
   debajo. Van en beige, porque justo encima hay café y dos tramos
   oscuros seguidos pesan demasiado. */
.gt-planos{background:var(--g-fondo);padding-block:clamp(70px,13vh,150px)}
.gt-planos .gt-cabe{width:min(100% - var(--margen)*2,46ch);
  margin:0 auto clamp(30px,5vw,56px);text-align:center}
.gt-planos .gt-cabe .gt-etq{color:var(--g-tinta-3);margin-bottom:16px}
.gt-planos .gt-cabe h2{font-family:var(--serif);font-weight:400;
  font-size:var(--t-seccion);line-height:1.1;margin:0 0 .5em;
  text-transform:uppercase;letter-spacing:.02em}
.gt-planos .gt-cabe p{color:var(--g-tinta-2);line-height:1.7}
.gt-planos .gt-rejilla{width:min(100% - var(--margen)*2,1340px);margin-inline:auto}
.gt-planos h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.5rem);margin:0 0 .5em;color:var(--g-tinta)}
.gt-planos .bloque p{color:var(--g-tinta-2);line-height:1.75}

/* ─────────── el método, en tres columnas ───────────


   Un tramo en café más ancho que .gt-intro, porque tiene que alojar las
   tres columnas sin apretarlas. Reutiliza .tercias.pasos de la hoja
   compartida: aquí solo se resuelven los colores sobre el fondo oscuro. */
.gt-pasos{background:var(--g-noche);color:var(--g-claro);
  padding-block:clamp(80px,15vh,170px);--ac:201,169,106}
.gt-pasos .gt-in{width:min(100% - var(--margen)*2,1340px);margin-inline:auto}
.gt-pasos .gt-cabe{text-align:center;margin-bottom:clamp(34px,5vw,64px)}
.gt-pasos .gt-etq{color:var(--g-oro-luz);margin-bottom:16px}
.gt-pasos h2{font-family:var(--serif);font-weight:400;color:var(--g-claro);
  font-size:var(--t-seccion);line-height:1.1;margin:0;
  text-transform:uppercase;letter-spacing:.02em}
.gt-pasos h3{color:var(--g-claro)}
.gt-pasos .bloque p{color:var(--g-claro-2)}
.gt-pasos .nota{color:rgba(244,239,228,.62);max-width:62ch;text-align:center;
  margin:clamp(30px,4vw,52px) auto 0}

/* las listas con guion, cuando caen sobre café */
.gt-cafe .lista-guion li,.gt-pasos .lista-guion li{color:var(--g-claro-2)}
.gt-cafe .lista-guion li::before,
.gt-pasos .lista-guion li::before{background:var(--g-oro-luz)}

/* el beige es el fondo de la página; estas lo declaran por claridad */

.gt-beige{background:var(--g-fondo)}

@media (max-width:640px){
  .gt-geo .orn{width:70px;opacity:.22}
  .gt-geo .brillo{opacity:.2}
}
@media (max-width:420px){ .gt-geo .orn{display:none} }
@media (prefers-reduced-motion:reduce){
  .gt-cinta{animation:none}
  .gt-tira{overflow-x:auto}
  .gt-geo .rayo,.gt-geo .nucleo,.gt-geo .punto,
  .gt-geo .chispas span,.gt-geo .luz,.gt-geo .mandala{animation:none}
}

/* ─────────── botón ───────────
   Redondo, café con dorado. Funciona igual sobre el beige y sobre el café,
   porque lo que lo define es el filete y el texto en oro, no el relleno.
   Al pasar por encima se invierte: el oro pasa a fondo.               */
.gt-btn{display:inline-block;border-radius:100px;
  padding:15px 34px;border:1px solid var(--g-oro);
  background:var(--g-noche);color:var(--g-oro-luz);
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;
  transition:background .35s var(--curva),color .35s var(--curva),
             border-color .35s var(--curva)}
.gt-btn:hover,.gt-btn:focus-visible{background:var(--g-oro);
  color:var(--g-noche);border-color:var(--g-oro)}
/* sobre café el relleno se aclara un punto para que el botón no desaparezca */
.gt-cafe .gt-btn{background:#30241A}
.gt-cafe .gt-btn:hover,.gt-cafe .gt-btn:focus-visible{background:var(--g-oro)}

.gt-cap-rot .gt-btn{margin-top:1.6em}

/* ─────────── índice: las puertas, sin tarjetas ───────────
   Navegación tratada como índice de revista: líneas grandes separadas por
   un filete. Al pasar por encima, la línea se desplaza y su número se
   enciende. Nada de cajas ni rejilla.                                */
.ed-indice{padding-block:clamp(70px,13vh,150px)}
.ed-indice .ed-in{width:min(100% - var(--borde)*2,var(--ancho));margin-inline:auto}
.ed-indice .ed-cabe{max-width:34ch;margin-bottom:clamp(30px,5vh,60px)}
.ed-indice ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(39,33,25,.14)}
.ed-indice li{border-bottom:1px solid rgba(39,33,25,.14)}
.ed-indice a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(16px,3vw,44px);padding:clamp(22px,3.4vh,38px) 0;
  transition:padding-left .55s var(--suave),color .45s ease}
.ed-indice a:hover,.ed-indice a:focus-visible{padding-left:clamp(10px,1.6vw,24px)}
.ed-indice .n{font-family:var(--serif);font-style:italic;font-size:.95rem;
  color:var(--tinta-3);transition:color .45s ease}
.ed-indice a:hover .n{color:rgb(var(--ac))}
.ed-indice h3{font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.1;font-weight:400}
.ed-indice .q{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
.ed-indice p{grid-column:2;color:var(--tinta-2);margin-top:.5em;max-width:52ch}
@media (max-width:860px){
  .ed-indice a{grid-template-columns:auto 1fr;gap:14px}
  .ed-indice .q{display:none}
}

/* ─────────── geometría de la portada ───────────
   Portada del archivo de referencia: los ornamentos de los cantos, el
   resplandor con su mandala girando y los destellos. Viven dentro de la
   portada, que es donde el fondo es oscuro y la línea dorada se lee.
   Todo es decorativo: se construye desde el guion y no estorba al texto. */
.ed-abre .ed-orn{position:absolute;top:0;bottom:0;width:130px;z-index:1;
  pointer-events:none;opacity:.55;mix-blend-mode:screen;
  display:flex;align-items:center;justify-content:center}
.ed-abre .ed-orn.izq{left:0}
.ed-abre .ed-orn.der{right:0;transform:scaleX(-1)}
.ed-abre .ed-orn svg{width:100%;height:auto;max-height:88svh}
.ed-abre .ed-orn .rayo{animation:ornLatido 5s ease-in-out infinite;transform-origin:center}
.ed-abre .ed-orn .nucleo{animation:ornBrillo 4s ease-in-out infinite}
.ed-abre .ed-orn .punto{animation:ornTitila 3.2s ease-in-out infinite}
@keyframes ornLatido{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes ornBrillo{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes ornTitila{0%,100%{opacity:.3}50%{opacity:1}}

.ed-abre .ed-chispas{position:absolute;inset:0;z-index:1;pointer-events:none}
.ed-abre .ed-chispas span{position:absolute;border-radius:50%;
  background:var(--oro-claro);box-shadow:0 0 6px 1px rgba(232,210,160,.8);
  animation:chispa var(--dur,4s) ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes chispa{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.95;transform:scale(1.3)}}

.ed-abre .ed-brillo{position:absolute;top:38%;left:50%;z-index:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.45;
  width:min(70vw,700px);height:min(70vw,700px)}
.ed-abre .ed-brillo .nucleo-luz{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(232,210,160,.55) 0%,
    rgba(232,210,160,.12) 40%,transparent 70%);
  animation:luzLatido 6s ease-in-out infinite}
.ed-abre .ed-brillo .mandala{position:absolute;inset:0;width:100%;height:100%;
  animation:mandalaGira 90s linear infinite}
@keyframes luzLatido{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes mandalaGira{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media (max-width:640px){
  .ed-abre .ed-orn{width:70px;opacity:.4}
  .ed-abre .ed-brillo{opacity:.3}
}
@media (max-width:420px){ .ed-abre .ed-orn{display:none} }
@media (prefers-reduced-motion:reduce){
  .ed-abre .ed-orn .rayo,.ed-abre .ed-orn .nucleo,.ed-abre .ed-orn .punto,
  .ed-abre .ed-chispas span,.ed-abre .ed-brillo .nucleo-luz,
  .ed-abre .ed-brillo .mandala{animation:none}
}

/* ─────────── dúo · dos columnas: imagen y texto ───────────
   La imagen ocupa una columna y el texto la otra, y se invierten de un
   bloque al siguiente para que la página no caiga en un patrón.
   La fotografía entra desde 1.06 y se asienta; el texto llega después. */
.gt-duo{padding-block:clamp(60px,10vh,120px)}
.gt-duo .gt-in{width:min(100% - var(--margen)*2,1340px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:center}
.gt-duo.vuelta .gt-in{direction:rtl}
.gt-duo.vuelta .gt-in > *{direction:ltr}

.gt-duo figure{margin:0;overflow:hidden;aspect-ratio:4/5;
  background:var(--g-fondo-2)}
.gt-cafe.gt-duo figure{background:#2F241A}
.gt-duo figure img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.06 - .06 * var(--v)));
  opacity:calc(.82 + .18 * var(--v))}

.gt-duo .gt-texto{max-width:46ch}
.gt-duo .gt-num{display:block;font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;color:var(--g-oro);
  margin-bottom:.3em}
.gt-cafe .gt-duo .gt-num,.gt-duo.gt-cafe .gt-num{color:var(--g-oro-luz)}
.gt-duo h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.06;
  margin:0 0 .5em}
.gt-duo .gt-cuerpo{line-height:1.8}
.gt-duo .gt-btn{margin-top:1.6em}

.gt-duo .gt-texto > *{opacity:0;transform:translateY(18px);filter:blur(3px);
  transition:opacity var(--lento-txt) var(--curva),
             transform var(--lento-txt) var(--curva),
             filter var(--lento-txt) var(--curva)}
.gt-duo.dentro .gt-texto > *{opacity:1;transform:none;filter:none}
.gt-duo.dentro .gt-texto > :nth-child(1){transition-delay:.25s}
.gt-duo.dentro .gt-texto > :nth-child(2){transition-delay:.35s}
.gt-duo.dentro .gt-texto > :nth-child(3){transition-delay:.45s}
.gt-duo.dentro .gt-texto > :nth-child(4){transition-delay:.55s}

/* ─────────── tercias · tres columnas que entran escalonadas ─────────── */
.gt-tres{padding-block:clamp(70px,12vh,150px)}
.gt-tres .gt-in{width:min(100% - var(--margen)*2,1340px);margin-inline:auto}
/* La cabecera va centrada y en versal, igual que los demás títulos de la
   página, para que el tramo no se lea como una pieza aparte. */
.gt-tres .gt-cabe{max-width:34ch;margin:0 auto clamp(34px,5vh,64px);
  text-align:center}
.gt-tres .gt-cabe h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.12;margin:.3em 0 0;
  text-transform:uppercase;letter-spacing:.02em}

.gt-tres ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.gt-tres li{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--curva),transform .9s var(--curva)}
.gt-tres.dentro li{opacity:1;transform:none}
.gt-tres.dentro li:nth-child(1){transition-delay:.1s}
.gt-tres.dentro li:nth-child(2){transition-delay:.25s}
.gt-tres.dentro li:nth-child(3){transition-delay:.4s}

.gt-tres a{display:block;height:100%}
.gt-tres figure{margin:0 0 clamp(16px,2vw,24px);overflow:hidden;
  aspect-ratio:3/4;background:var(--g-fondo-2)}
.gt-tres img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);transition:transform 1.4s var(--curva)}
.gt-tres a:hover img,.gt-tres a:focus-visible img{transform:scale(1.06)}
.gt-tres .n{display:block;font-family:var(--serif);font-style:italic;
  font-size:.95rem;color:var(--g-tinta-3);margin-bottom:.4em}
.gt-tres h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.1;margin:0 0 .4em;
  transition:color .4s ease}
.gt-tres a:hover h3{color:rgb(var(--ac))}
.gt-tres p{color:var(--g-tinta-2);line-height:1.75;font-size:.96rem}
.gt-tres .q{display:inline-block;margin-top:.9em;font-family:var(--sans);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--g-tinta-3);transition:color .4s ease}
.gt-tres a:hover .q{color:rgb(var(--ac))}

@media (max-width:860px){
  .gt-duo .gt-in{grid-template-columns:1fr;gap:clamp(22px,6vw,34px)}
  .gt-duo.vuelta .gt-in{direction:ltr}
  .gt-duo figure{aspect-ratio:4/5}
  .gt-duo figure img{transform:none;opacity:1}
  .gt-tres ol{grid-template-columns:1fr;gap:clamp(30px,7vw,46px)}
  .gt-tres figure{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .gt-duo figure img{transform:none;opacity:1}
  .gt-duo .gt-texto > *,.gt-tres li{opacity:1;transform:none;filter:none;transition:none}
}

/* las tres columnas sobre café: el texto y los números se aclaran */
.gt-tres.gt-cafe .gt-cabe h2,.gt-tres.gt-cafe h3{color:var(--g-claro)}
.gt-tres.gt-cafe p{color:var(--g-claro-2)}
.gt-tres.gt-cafe .n,.gt-tres.gt-cafe .q{color:rgba(232,210,160,.75)}
.gt-tres.gt-cafe a:hover h3,.gt-tres.gt-cafe a:hover .q{color:var(--g-oro-luz)}
.gt-tres.gt-cafe figure{background:#2F241A}

/* el lema de la portada con la misma letra que la etiqueta NARÄ EQUINO:
   Jost en caja alta y con aire entre letras, no la serif en cursiva */
.gt-hero .gt-sub.como-etq{font-family:var(--sans);font-style:normal;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:clamp(11px,1.05vw,14px);line-height:2.1;font-weight:300;
  color:var(--g-claro-2);max-width:46ch;margin-top:26px}

/* varios párrafos seguidos piden aire entre ellos; la introducción
   mantiene todo centrado, como el resto de la sección */
.gt-intro .gt-in p + p{margin-top:1.1em}

/* el corazón de oro: acento al cierre del texto, no ilustración de fondo.
   Se deja a su tamaño real (206 px) porque el original es pequeño y
   ampliarlo solo lo volvería blando. */
.gt-corazon{margin:clamp(34px,5vh,60px) auto 0;width:min(206px,52vw);
  opacity:0;transform:translateY(20px) scale(.96);
  transition:opacity 1.3s var(--curva),transform 1.3s var(--curva)}
.gt-intro.dentro .gt-corazon,.dentro .gt-corazon{opacity:1;transform:none}
.gt-corazon img{width:100%;height:auto;display:block;
  mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce){
  .gt-corazon{opacity:1;transform:none;transition:none}
}

/* fotografía al cierre de un bloque de texto: centrada y contenida, para
   que respire sin convertirse en una portada */
.gt-vista{margin:clamp(34px,5vh,64px) auto 0;width:min(620px,100%);
  overflow:hidden;
  opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity 1.2s var(--curva),transform 1.2s var(--curva)}
.dentro .gt-vista{opacity:1;transform:none}
.gt-vista img{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:reduce){
  .gt-vista{opacity:1;transform:none;transition:none}
}

/* la llamada dentro del cierre: sobre fotografía, el oro y el claro se leen */
.gt-cierre .gt-etq--cierre{display:block;margin:clamp(26px,4vh,44px) 0 14px;
  color:var(--g-oro-luz)}
.gt-cierre .gt-btn{background:rgba(36,27,20,.62);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px)}
.gt-cierre .gt-btn:hover,.gt-cierre .gt-btn:focus-visible{
  background:var(--g-oro);color:var(--g-noche)}

/* ─────────── tres puertas · texto dentro del cuadro ───────────
   Cada puerta es una tarjeta: la fotografía llena el cuadro y el texto se
   apoya arriba, sobre ella. Un velo en degradado lo mantiene legible sea
   cual sea la foto. Al pasar por encima, el cuadro se enciende con un halo
   dorado y la imagen crece un poco: así se entiende que lleva a algún sitio. */
.gt-tres li a{position:relative;display:block;overflow:hidden;
  min-height:clamp(380px,46vh,540px);
  padding:clamp(22px,2.6vw,36px);
  transition:box-shadow .55s var(--curva),transform .55s var(--curva)}
.gt-tres li a:hover,.gt-tres li a:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(201,169,106,.9),
             0 22px 54px -14px rgba(201,169,106,.55),
             0 0 72px -18px rgba(232,210,160,.5)}

.gt-tres figure{position:absolute;inset:0;margin:0;aspect-ratio:auto}
.gt-tres figure::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,18,12,.76) 0%,
    rgba(24,18,12,.42) 46%,rgba(24,18,12,.64) 100%)}

/* el texto va encima de la fotografía, nunca debajo */
.gt-tres .n,.gt-tres h3,.gt-tres p,.gt-tres .q{position:relative;z-index:2}
.gt-tres .n{color:var(--g-oro-luz)}
.gt-tres h3,.gt-tres.gt-cafe h3{color:var(--g-claro)}
.gt-tres p,.gt-tres.gt-cafe p{color:var(--g-claro-2);max-width:30ch}
.gt-tres .q,.gt-tres.gt-cafe .q{color:var(--g-oro-luz)}
.gt-tres a:hover h3,.gt-tres.gt-cafe a:hover h3{color:var(--g-oro-luz)}

@media (max-width:860px){
  .gt-tres li a{min-height:clamp(300px,52vh,420px)}
}
@media (prefers-reduced-motion:reduce){
  .gt-tres li a{transition:none}
  .gt-tres li a:hover{transform:none}
}

/* en las puertas, el rótulo de arriba ya no es un número sino la palabra
   que completa el nombre: «Guardianes» + «De la Tierra» */
.gt-tres .n{font-family:var(--sans);font-style:normal;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  margin-bottom:.9em}
.gt-tres h3{font-size:clamp(1.5rem,2.8vw,2.2rem)}