/* ═══════════════════════════════════════════════════════════════
   NARÄ Equino — sistema de diseño
   Paso Ancho, Puerto Vallarta, Jalisco

   Paleta tomada del propio logotipo (tierra y oro) y del entorno:
   selva, río, arena, noche. Nada de estética wellness genérica.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* superficies */
  --arena:      #F5F1E8;
  --arena-2:    #ECE5D7;
  --arena-3:    #E1D8C6;
  --noche:      #141810;
  --noche-2:    #1E2418;

  /* tinta */
  --tinta:      #272119;
  --tinta-2:    #5A5246;
  --tinta-3:    #8A8173;
  --claro:      #F4EFE4;
  --claro-2:    #CFC7B6;

  /* marca */
  --tierra:     #8B6844;
  --cafe:       #241B14;   /* el café de las secciones y del pie */
  --cafe-2:     #4E3B28;
  --oro:        #C9A96A;
  --oro-claro:  #E8D2A0;
  --selva:      #5E6E52;
  --rio:        #7B9299;

  /* acento activo — lo redefine cada sección */
  --ac:         139,104,68;

  /* tipografía */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ritmo */
  --marco:  clamp(10px, 1.4vw, 20px);
  --borde:  clamp(20px, 5vw, 80px);
  --ancho:  1340px;
  --texto:  68ch;

  /* movimiento */
  --suave:  cubic-bezier(.16,1,.3,1);
  --lento:  1.1s var(--suave);
}

/* ─────────── reset ─────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--arena);color:var(--tinta);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}

/* ─────────── tipografía ─────────── */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1;
  letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,5rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.25rem,2.1vw,1.75rem)}
h4{font-size:clamp(1.05rem,1.5vw,1.25rem)}
p{text-wrap:pretty}
p + p{margin-top:1.1em}

.kicker{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgb(var(--ac));font-weight:400;display:flex;align-items:center;gap:.8em}
.kicker::before{content:'';width:26px;height:1px;background:currentColor;flex:none}
.kicker.centro{justify-content:center}

.entradilla{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.65;
  color:var(--tinta-2);max-width:54ch;font-weight:300}
.cuerpo{max-width:var(--texto)}
.cuerpo p{color:var(--tinta-2)}
.nota{font-size:.82rem;line-height:1.7;color:var(--tinta-3)}

/* ─────────── layout ─────────── */
.contenedor{width:min(100% - var(--borde)*2, var(--ancho));margin-inline:auto}
.ancho{width:min(100% - var(--borde)*2, 1560px);margin-inline:auto}
section{position:relative}
.seccion{padding-block:clamp(70px,10vw,150px)}
.seccion-corta{padding-block:clamp(48px,6vw,90px)}
.oscura{background:var(--noche);color:var(--claro)}
.oscura p,.oscura .cuerpo p{color:var(--claro-2)}
.oscura .nota{color:#8E897C}
.crema{background:var(--arena-2)}

.duo{display:grid;gap:clamp(34px,5vw,80px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.duo.texto-dcha > *:first-child{order:2}
.tercias{display:grid;gap:clamp(24px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* ─────────── botones ─────────── */
.cta{
  display:inline-flex;align-items:center;gap:.8em;
  padding:16px 30px;border-radius:999px;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--tinta);position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s ease,border-color .45s ease;
}
.cta::before{content:'';position:absolute;inset:0;background:var(--tinta);z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--suave)}
.cta:hover::before,.cta:focus-visible::before{transform:translateY(0)}
.cta:hover,.cta:focus-visible{color:var(--arena)}
.cta .fl{transition:transform .5s var(--suave)}
.cta:hover .fl{transform:translateX(5px)}

.cta.lleno{background:var(--tinta);color:var(--arena);border-color:var(--tinta)}
.cta.lleno::before{background:var(--oro)}
.cta.lleno:hover{color:var(--tinta)}

.oscura .cta{border-color:rgba(244,239,228,.4);color:var(--claro)}
.oscura .cta::before{background:var(--claro)}
.oscura .cta:hover,.oscura .cta:focus-visible{color:var(--noche)}

.enlace{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;padding-bottom:4px;
  border-bottom:1px solid rgba(39,33,25,.3);transition:border-color .4s,color .4s}
.enlace:hover{border-color:var(--oro);color:var(--tierra)}
.enlace .fl{transition:transform .5s var(--suave)}
.enlace:hover .fl{transform:translateX(5px)}
.oscura .enlace{border-color:rgba(244,239,228,.3)}
.oscura .enlace:hover{color:var(--oro-claro);border-color:var(--oro)}

/* ─────────── cabecera ─────────── */
.cabecera{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s ease,backdrop-filter .5s ease,box-shadow .5s ease}
.cabecera.fija{background:rgba(245,241,232,.9);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(39,33,25,.1)}
.cabecera-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(14px,1.8vw,22px) 0}
.marca{display:flex;align-items:center;flex:none}
/* el logotipo ya viene con transparencia, así que no hace falta ningún
   truco para quitarle el fondo: sobre oscuro solo se aclara */
.marca img{width:clamp(62px,6vw,86px)}
.cabecera.sobre-oscuro .marca img{filter:brightness(1.55) saturate(1.05)}

.nav{display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
.nav a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  position:relative;padding-block:6px;white-space:nowrap;transition:color .4s}
.nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--oro);transition:width .5s var(--suave)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.cabecera.sobre-oscuro .nav a,
.cabecera.sobre-oscuro .abrir-menu{color:var(--claro)}

.abrir-menu{display:none;width:42px;height:42px;border:1px solid currentColor;
  border-radius:50%;place-items:center;gap:4px;flex:none}
.abrir-menu i{display:block;width:14px;height:1px;background:currentColor;
  transition:transform .4s var(--suave),opacity .3s}
.menu-abierto .abrir-menu i:first-child{transform:translateY(2.5px) rotate(45deg)}
.menu-abierto .abrir-menu i:last-child{transform:translateY(-2.5px) rotate(-45deg)}

/* cajón móvil */
.cajon{position:fixed;inset:0;z-index:99;background:var(--noche);color:var(--claro);
  display:grid;place-items:center;padding:100px var(--borde) 60px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--suave);
  visibility:hidden}
.menu-abierto .cajon{clip-path:inset(0 0 0 0);visibility:visible}
.cajon nav{display:flex;flex-direction:column;gap:clamp(10px,2.4vh,22px);text-align:center}
.cajon nav a{font-family:var(--serif);font-size:clamp(1.5rem,5.5vw,2.2rem);
  opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s var(--suave),color .4s}
.menu-abierto .cajon nav a{opacity:1;transform:none}
.cajon nav a:hover{color:var(--oro-claro)}
.cajon .pie-cajon{margin-top:clamp(24px,5vh,48px);text-align:center}

/* ─────────── portada de sección ─────────── */
.portada{position:relative;min-height:clamp(440px,74vh,760px);display:grid;
  align-items:end;overflow:hidden;background:var(--noche);color:var(--claro);
  padding:clamp(40px,6vw,90px) 0 clamp(36px,5vw,70px)}
.portada .fondo{position:absolute;inset:0;z-index:0}
.portada .fondo img{width:100%;height:100%;object-fit:cover}
/* el velo solo oscurece donde vive el texto: arriba deja ver la foto */
.portada .velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(12,16,10,.34) 0%,rgba(12,16,10,.04) 34%,
                  rgba(12,16,10,.42) 68%,rgba(12,16,10,.78) 100%)}
.portada .contenedor{position:relative;z-index:2}
.portada h1{margin:.28em 0 .34em}
.portada .entradilla{color:var(--claro-2);max-width:48ch}

/* ─────────── figuras ─────────── */
.figura{position:relative;overflow:hidden;background:var(--arena-3)}
.figura img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--suave)}
.figura:hover img{transform:scale(1.04)}
.alta{aspect-ratio:3/4}
.ancha{aspect-ratio:4/3}
.cuadro{aspect-ratio:1}
figcaption{margin-top:12px;font-size:.78rem;letter-spacing:.06em;color:var(--tinta-3)}

/* ─────────── galería / slider ─────────── */
.galeria{position:relative}
.pista{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px}
.pista::-webkit-scrollbar{display:none}
.pista > *{flex:0 0 min(84%,420px);scroll-snap-align:start}
.mandos{display:flex;align-items:center;gap:12px;margin-top:20px}
.mando{width:44px;height:44px;border:1px solid rgba(39,33,25,.28);border-radius:50%;
  display:grid;place-items:center;transition:background .4s,border-color .4s,color .4s}
.mando:hover:not(:disabled){background:var(--tinta);border-color:var(--tinta);color:var(--arena)}
.mando:disabled{opacity:.3;cursor:default}
.mando svg{width:14px;height:14px}
.oscura .mando{border-color:rgba(244,239,228,.3)}
.oscura .mando:hover:not(:disabled){background:var(--claro);color:var(--noche)}
.cuenta{font-size:.72rem;letter-spacing:.14em;color:var(--tinta-3);margin-left:auto}

/* ─────────── tarjetas ─────────── */
.tarjeta{display:flex;flex-direction:column;gap:18px;height:100%}
.tarjeta .figura{aspect-ratio:4/5}
.tarjeta h3{margin-top:2px}
.tarjeta p{color:var(--tinta-2);font-size:.95rem}

.bloque{padding:clamp(26px,3vw,40px);background:var(--arena-2);
  border-top:1px solid rgba(139,104,68,.35);height:100%}
.oscura .bloque{background:rgba(244,239,228,.05);border-color:rgba(201,169,106,.35)}
.bloque h3{margin-bottom:.5em}
.bloque .num{font-family:var(--serif);font-size:1.6rem;color:rgb(var(--ac));
  display:block;margin-bottom:.4em}

/* ── tres pasos animados ──
   Variante de .tercias para los tramos oscuros. Al entrar en pantalla la
   línea superior se traza de izquierda a derecha y el número asciende
   detrás, cada columna un poco después que la anterior. Al pasar el cursor
   el bloque se levanta y un velo dorado sube desde abajo. Todo con
   transform y opacity, que son las dos propiedades que el navegador
   anima sin repintar. */
.pasos .bloque:nth-child(1){--esp:.05s}
.pasos .bloque:nth-child(2){--esp:.22s}
.pasos .bloque:nth-child(3){--esp:.39s}

.pasos .bloque:nth-child(4){--esp:.56s}
.pasos .bloque{position:relative;overflow:hidden;border-top:0;
  background:var(--arena-2);
  transition:transform .6s var(--suave),box-shadow .6s var(--suave),
             background .6s var(--suave)}
/* sobre fondo oscuro el bloque se aclara apenas, en vez de pintarse de arena */
.gt-pasos .bloque,.oscura .pasos .bloque{background:rgba(244,239,228,.04)}

/* la línea que se dibuja al entrar */
.pasos .bloque::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,var(--oro),rgba(201,169,106,.12));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--suave) var(--esp,0s)}
.pasos .bloque.visto::before{transform:scaleX(1)}

/* el velo dorado que sube con el cursor */
.pasos .bloque::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(201,169,106,.16),transparent 62%);
  transform:translateY(100%);pointer-events:none;
  transition:transform .7s var(--suave)}
.pasos .bloque:hover::after,
.pasos .bloque:focus-within::after{transform:translateY(0)}

.pasos .bloque:hover,.pasos .bloque:focus-within{
  transform:translateY(-6px);background:var(--arena-3);
  box-shadow:0 0 0 1px rgba(201,169,106,.42),
             0 26px 60px -22px rgba(0,0,0,.6),
             0 0 70px -26px rgba(232,210,160,.45)}

.pasos .num{position:relative;z-index:1;opacity:0;transform:translateY(10px);
  transition:opacity .9s ease var(--esp,0s),
             transform .9s var(--suave) var(--esp,0s),color .5s ease}
.pasos .bloque.visto .num{opacity:1;transform:none}
.gt-pasos .bloque:hover,.gt-pasos .bloque:focus-within,
.oscura .pasos .bloque:hover,.oscura .pasos .bloque:focus-within{
  background:rgba(244,239,228,.07)}
.pasos .bloque:hover .num{color:var(--oro-claro)}

.pasos h3,.pasos .bloque p{position:relative;z-index:1}

/* El café cálido del pie. Se queda en la misma opacidad que el resto de
   tramos oscuros para que la atmósfera fija siga viéndose a través: si
   fuera opaco, el tramo se despegaría del lugar. */
body:not(.portal) .oscura.cafe{background:rgba(36,27,20,.88)}

/* ─────────── díptico ───────────
   Dos láminas del mismo momento, a distinta altura para que el par no se
   lea como una rejilla. Al asomar entran desde posiciones opuestas y se
   encuentran: la de la izquierda sube, la de la derecha baja. Nada más.
   Solo se animan transform y opacity. */
.diptico{position:relative;display:grid;align-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.diptico figure{margin:0;overflow:hidden;background:var(--arena-3);
  aspect-ratio:3/5;transition:transform 1.3s var(--suave),box-shadow .6s ease}
.diptico .d-b{margin-top:clamp(26px,6vw,70px)}
.diptico img{width:100%;height:100%;object-fit:cover;display:block}

/* el encuentro: parten separadas y se juntan al entrar en pantalla */
.diptico .d-a{transform:translateY(26px)}
.diptico .d-b{transform:translateY(-26px)}
.diptico.visto .d-a,.diptico.visto .d-b{transform:none}

.diptico figure:hover{box-shadow:0 18px 44px -20px rgba(36,27,20,.5)}

@media (max-width:560px){
  .diptico{gap:8px}
  .diptico .d-b{margin-top:clamp(16px,5vw,34px)}
}
@media (prefers-reduced-motion:reduce){
  .diptico figure{transition:none}
  .diptico .d-a,.diptico .d-b{transform:none}
}

/* ═══════════ NEKAIME · el blog ═══════════
   Las entradas las sirve PHP desde el panel, pero su aspecto vive
   aquí para que compartan tipografías y color con el resto. */

/* la fila de hilos, encima de las entradas */
.hilos-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:clamp(30px,5vw,54px)}
.hilo-pastilla{display:inline-block;padding:9px 20px;border-radius:999px;
  border:1px solid var(--arena-3);color:var(--tinta-2);
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  transition:border-color .4s ease,color .4s ease,background .4s ease}
.hilo-pastilla:hover,.hilo-pastilla:focus-visible{
  border-color:var(--oro);color:var(--tinta)}
.hilo-pastilla.activa{background:var(--cafe);border-color:var(--cafe);
  color:var(--oro-claro)}

/* la rejilla de entradas */
.rejilla-notas{display:grid;gap:clamp(18px,2.6vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.nota-tarjeta{margin:0}
.nota-tarjeta a{display:block;text-decoration:none;color:inherit;
  background:var(--arena-2);overflow:hidden;height:100%;
  transition:transform .55s var(--suave),box-shadow .55s var(--suave)}
.nota-tarjeta a:hover,.nota-tarjeta a:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 0 0 1px rgba(201,169,106,.45),
             0 22px 50px -20px rgba(36,27,20,.42)}
.nota-tarjeta figure{margin:0;aspect-ratio:3/2;overflow:hidden;
  background:var(--arena-3)}
.nota-tarjeta figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--suave)}
.nota-tarjeta a:hover figure img{transform:scale(1.04)}
/* cuando una entrada va sin foto, el hueco no queda vacío del todo */
.nota-tarjeta .sin-imagen{aspect-ratio:3/2;
  background:linear-gradient(135deg,var(--arena-3),var(--arena-2))}

.nota-cuerpo{padding:clamp(18px,2.2vw,26px)}
.nota-hilo{display:block;font-family:var(--sans);font-size:.64rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--oro);
  margin-bottom:.7em}
.nota-tarjeta h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.25;
  margin:0 0 .5em;color:var(--tinta)}
.nota-cuerpo p{color:var(--tinta-2);font-size:.93rem;line-height:1.65;margin:0}
.nota-cuerpo time{display:block;margin-top:1em;font-family:var(--sans);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3)}

/* paginación */
.paginacion{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,32px);flex-wrap:wrap;
  margin-top:clamp(34px,5vw,60px)}
.cuenta-paginas{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-3)}

@media (prefers-reduced-motion:reduce){
  .nota-tarjeta a,.nota-tarjeta figure img{transition:none}
  .nota-tarjeta a:hover{transform:none}
  .nota-tarjeta a:hover figure img{transform:none}
}

/* ─────────── el título del cierre, en marquesina ───────────

   El mismo recurso del home: la frase cruza el ancho completo en bucle.
   Sigue siendo un h2 real, así que el encabezado no se pierde; solo la
   primera copia se lee, las demás son decorado. El bucle es exacto
   porque el texto va cuatro veces y la pista se desplaza la mitad. */
.puente{grid-column:1/-1;justify-self:stretch;width:100%;position:relative;
  z-index:2;overflow:hidden;margin:0 0 clamp(16px,3vh,38px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.puente .pista{display:flex;align-items:center;gap:clamp(20px,3vw,48px);
  width:max-content;animation:puente-corre var(--dur,54s) linear infinite}
.puente .t{font-family:var(--serif);font-weight:400;white-space:nowrap;
  font-size:clamp(1.5rem,3.4vw,2.8rem);line-height:1.22;letter-spacing:.01em;
  color:var(--claro);text-shadow:0 2px 20px rgba(0,0,0,.55)}
.puente .sep{font-size:clamp(.6rem,.9vw,.8rem);color:var(--oro-claro);opacity:.9}
@keyframes puente-corre{to{transform:translateX(-50%)}}

/* Cuando la marquesina no va sobre una foto sino sobre el fondo claro
   del sitio, el texto tiene que ser oscuro para leerse. */
.puente.suelta{margin:0}
.puente.suelta .t{color:var(--tinta);text-shadow:none}
.puente.suelta .sep{color:var(--oro)}

.puente:hover .pista,.puente:focus-within .pista{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .puente{-webkit-mask-image:none;mask-image:none}
  .puente .pista{animation:none;justify-content:center;width:100%}
  .puente .t ~ .t,.puente .sep{display:none}
}

/* Una frase sola, sin adorno, que separa dos tramos de texto y deja

   respirar la lectura. */
.lema{font-family:var(--serif);font-size:clamp(1.25rem,2.5vw,2rem);
  line-height:1.45;text-align:center;max-width:26ch;
  margin-inline:auto;color:var(--tinta)}
.oscura .lema{color:var(--claro)}

/* la geometría de la página, detrás del contenido del tramo */

.geo-tramo{position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;display:grid;place-items:center;color:var(--oro)}
.geo-tramo svg{width:min(58vw,620px);height:auto;opacity:.09;
  filter:drop-shadow(0 0 8px rgba(232,210,160,.25));
  animation:girar-portada 300s linear infinite}
.geo-tramo svg circle{vector-effect:non-scaling-stroke;stroke-width:.8}
.con-geo > .contenedor,.con-geo > .gt-in{position:relative;z-index:1}
@media (max-width:760px){ .geo-tramo svg{width:76vw;opacity:.07} }
@media (prefers-reduced-motion:reduce){ .geo-tramo svg{animation:none} }

@media (prefers-reduced-motion:reduce){
  .pasos .bloque,.pasos .bloque::before,
  .pasos .bloque::after,.pasos .num{transition:none}
  .pasos .bloque::before{transform:scaleX(1)}
  .pasos .num{opacity:1;transform:none}
}

/* lista con guion */
.lista-guion li{position:relative;padding-left:26px;margin-bottom:.7em;color:var(--tinta-2)}
.lista-guion li::before{content:'';position:absolute;left:0;top:.72em;
  width:14px;height:1px;background:rgb(var(--ac))}
.oscura .lista-guion li{color:var(--claro-2)}

/* ─────────── formulario ─────────── */
.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.campo label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3)}
.campo input,.campo textarea,.campo select{
  font:inherit;font-size:1rem;color:var(--tinta);background:transparent;
  border:none;border-bottom:1px solid rgba(39,33,25,.28);padding:11px 2px;
  border-radius:0;transition:border-color .4s}
.campo textarea{resize:vertical;min-height:120px}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-bottom-color:var(--oro)}
.campo .error{font-size:.76rem;color:#A4462F;min-height:1.1em}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-bottom-color:#A4462F}
.aviso-form{padding:16px 20px;border:1px solid rgba(94,110,82,.5);
  background:rgba(94,110,82,.08);font-size:.92rem;margin-top:18px}
.aviso-form[hidden]{display:none}

/* ─────────── pie ─────────── */
.pie{background:var(--cafe);color:var(--claro);padding-top:clamp(56px,7vw,100px)}
.pie a:hover{color:var(--oro-claro)}
.pie-rejilla{display:grid;gap:clamp(30px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:clamp(40px,5vw,70px)}
.pie h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--oro);margin-bottom:18px;font-weight:400}
.pie li{margin-bottom:.6em}
.pie li a,.pie address{font-size:.92rem;color:var(--claro-2);font-style:normal}
.pie .marca-pie img{width:112px;margin-bottom:18px;
  filter:brightness(1.55) saturate(1.05)}
.pie-legal{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  align-items:center;padding-block:24px;border-top:1px solid rgba(244,239,228,.14);
  font-size:.76rem;letter-spacing:.04em;color:#8E897C}
.pie-legal a{border-bottom:1px solid rgba(201,169,106,.45)}

/* ─────────── revelado ─────────── */
.rev{opacity:0;transform:translateY(24px)}
.rev.visto{opacity:1;transform:none;
  transition:opacity .9s ease,transform 1s var(--suave)}
.rev-d1.visto{transition-delay:.1s}
.rev-d2.visto{transition-delay:.2s}
.rev-d3.visto{transition-delay:.3s}

/* saltar al contenido */
.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--noche);
  color:var(--claro);padding:14px 22px;font-size:.8rem;letter-spacing:.12em}
.saltar:focus{left:var(--borde);top:12px}

/* ─────────── responsive ─────────── */
@media (max-width:980px){
  .nav{display:none}
  .abrir-menu{display:grid}
  .duo.texto-dcha > *:first-child{order:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .pista > *{flex-basis:88%}
  .cta{padding:14px 24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rev{opacity:1;transform:none}
}

@media print{
  .cabecera,.cajon,.mandos,.pie{display:none}
  body{background:#fff;color:#000}
}

/* ─────────── submenú Guardianes ─────────── */
.tiene-sub{position:relative}
.tiene-sub > button{display:inline-flex;align-items:center;gap:.5em;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding-block:6px;position:relative}
.tiene-sub > button::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--oro);transition:width .5s var(--suave)}
.tiene-sub:hover > button::after,.tiene-sub.desplegado > button::after{width:100%}
.tiene-sub .punta{width:7px;height:7px;transition:transform .4s var(--suave)}
.tiene-sub.desplegado .punta{transform:rotate(180deg)}
.tiene-sub .sub{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;min-width:270px;
  background:var(--arena);border:1px solid rgba(39,33,25,.12);
  box-shadow:0 20px 50px -20px rgba(39,33,25,.3);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s,transform .45s var(--suave),visibility .4s}
.tiene-sub:hover .sub,.tiene-sub.desplegado .sub{opacity:1;visibility:visible;transform:none}
.tiene-sub .sub a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;
  font-size:.78rem;letter-spacing:.06em;text-transform:none;color:var(--tinta);
  transition:background .35s}
.tiene-sub .sub a::after{display:none}
.tiene-sub .sub a:hover{background:var(--arena-2)}
.tiene-sub .sub a small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.cajon .sub-movil{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.cajon .sub-movil a{font-family:var(--sans);font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--claro-2)}

/* texto para lectores de pantalla y buscadores, fuera de la vista */
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* la portada interior entra creciendo, para que el salto desde el home
   se sienta como continuación del acercamiento al caballo */
.portada .fondo img{animation:llegar 1.6s cubic-bezier(.16,1,.3,1) both}
@keyframes llegar{from{transform:scale(1.22);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .portada .fondo img{animation:none}
}

/* ═══════════ páginas sin fotografía ═══════════
   Mientras no haya imágenes propias, la atmósfera la sostienen el color
   y el espacio. Nada de marcos vacíos esperando una foto. */
.portada:not(:has(.fondo)){
  background:
    radial-gradient(115% 85% at 50% -12%, rgba(var(--ac),.22), transparent 60%),
    radial-gradient(90% 70% at 50% 118%, rgba(6,10,7,.92), transparent 72%),
    linear-gradient(168deg, var(--noche-2) 0%, var(--noche) 72%);
  min-height:clamp(380px,62vh,620px)}
.portada:not(:has(.fondo))::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* una línea fina de acento cierra la portada por abajo */
.portada:not(:has(.fondo))::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(var(--ac),.65) 30%,rgba(var(--ac),.65) 70%,transparent)}

/* una columna sola no debe estirarse a todo lo ancho */
.duo > :only-child{max-width:var(--texto);margin-inline:auto}

/* tarjeta sin imagen: la separa una regla, no un marco vacío */
.tarjeta:not(:has(.figura)){
  padding-top:26px;border-top:1px solid rgba(139,104,68,.4);gap:12px;
  transition:border-color .5s ease}
.tarjeta:not(:has(.figura)):hover{border-color:var(--oro)}
.tarjeta:not(:has(.figura)) .enlace{margin-top:auto;align-self:flex-start}

/* ─────────── redes ─────────── */
.redes{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.redes li[hidden]{display:none}
.redes a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(244,239,228,.22);color:var(--claro-2);
  transition:border-color .45s ease,color .45s ease,background .45s ease,transform .45s var(--suave)}
.redes a:hover{border-color:var(--oro);color:var(--noche);background:var(--oro);
  transform:translateY(-3px)}
.redes svg{width:17px;height:17px}
.redes span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* redes compactas dentro del hero del home */
.credito .redes{margin-top:0;flex:none}
.credito .redes a{width:34px;height:34px}
.credito .redes svg{width:14px;height:14px}
@media (max-width:620px){
  .credito{flex-direction:column;gap:10px;text-align:center}
}

/* la glosa: la traducción de una palabra, bajo su título */
.glosa{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.6vw,1.35rem);
  color:rgb(var(--ac));margin:-.15em 0 .9em;letter-spacing:.01em}
.cuerpo em{font-style:italic;color:var(--tinta)}
.oscura .cuerpo em{color:var(--claro)}

/* ═══════════════════════════════════════════════════════════════
   EL MUNDO
   Una atmósfera fija detrás de toda la página. Las secciones dejan
   de ser cajas apiladas y pasan a ser tramos de un mismo lugar por
   el que se avanza. Las capas se mueven a distinta velocidad con el
   scroll: eso es lo que crea la profundidad.
   ═══════════════════════════════════════════════════════════════ */
.mundo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:var(--arena)}
body.portal .mundo{display:none}          /* el home tiene la suya */

.mundo-luz{position:absolute;inset:-20%;
  background:
    radial-gradient(60% 45% at 22% 18%, rgba(var(--ac),.16), transparent 62%),
    radial-gradient(55% 40% at 82% 72%, rgba(94,110,82,.14), transparent 64%),
    radial-gradient(70% 50% at 50% 108%, rgba(201,169,106,.10), transparent 66%);
  transition:background 1.4s ease}

.mundo-niebla{position:absolute;width:85vw;height:70vh;border-radius:50%;
  filter:blur(90px);opacity:.5}
.mundo-niebla.n1{background:radial-gradient(circle,rgba(var(--ac),.20),transparent 68%);
  top:6%;left:-22%;animation:vagar1 34s ease-in-out infinite alternate}
.mundo-niebla.n2{background:radial-gradient(circle,rgba(123,146,153,.16),transparent 68%);
  bottom:2%;right:-20%;animation:vagar2 42s ease-in-out infinite alternate}
@keyframes vagar1{to{transform:translate(14vw,6vh) scale(1.18)}}
@keyframes vagar2{to{transform:translate(-12vw,-8vh) scale(1.22)}}

.mundo-polvo{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.mundo-grano{position:absolute;inset:0;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Las secciones dejan de tapar el mundo: se vuelven translúcidas y la
   atmósfera se ve a través de ellas. */
body:not(.portal) .seccion,
body:not(.portal) .seccion-corta{background:transparent}
body:not(.portal) .crema{background:rgba(236,229,215,.72);
  backdrop-filter:blur(2px)}
body:not(.portal) .oscura{background:rgba(20,24,16,.88);
  backdrop-filter:blur(3px)}
/* y los cortes entre tramos se difuminan en vez de ser una línea */
body:not(.portal) .crema,
body:not(.portal) .oscura{
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent)}

/* ─────────── llegar desde el fondo ─────────── */
.rev{opacity:0;transform:translateY(26px) scale(.985)}
.rev.visto{opacity:1;transform:none;
  transition:opacity 1s ease,transform 1.2s var(--suave)}

@media (prefers-reduced-motion:reduce){
  .mundo-niebla{animation:none}
  .mundo-polvo{display:none}
}

/* ─────────── flores de la vida en el fondo ───────────
   Marca de agua, no decoración: giran muy despacio y a distintas
   profundidades, de modo que al bajar se cruzan entre sí. */
.mundo-flores{position:absolute;inset:0}
/* el contenedor se desplaza con el scroll y el dibujo gira dentro:
   si compartieran transform, uno pisaría al otro */
.flor-fondo{position:absolute;color:var(--oro);
  width:var(--t);height:var(--t);opacity:var(--o)}
.flor-fondo svg{width:100%;height:100%;
  animation:girar-flor var(--vel) linear infinite}
.flor-fondo svg circle{vector-effect:non-scaling-stroke;stroke-width:.7}
@keyframes girar-flor{to{transform:rotate(var(--giro,360deg))}}

.flor-fondo.f1{--t:clamp(320px,42vw,620px);--o:.075;--vel:240s;--giro:360deg;
  top:-8vh;left:-10vw}
.flor-fondo.f2{--t:clamp(220px,28vw,430px);--o:.055;--vel:190s;--giro:-360deg;
  top:52vh;right:-8vw}
.flor-fondo.f3{--t:clamp(170px,20vw,300px);--o:.045;--vel:300s;--giro:360deg;
  top:128vh;left:12vw}

@media (prefers-reduced-motion:reduce){
  .flor-fondo svg{animation:none}
}

/* ─────────── geometría de la portada ───────────
   En screen, como en el home: suma luz a la fotografía. Va bajo el
   contenedor del título, que es z-index 2. */
.geo-portada{position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;color:var(--oro-claro)}

.flor-portada{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(62vh,540px);height:min(62vh,540px);opacity:.16;
  filter:drop-shadow(0 0 8px rgba(232,210,160,.3))}
.flor-portada svg{width:100%;height:100%;
  animation:girar-portada 260s linear infinite}
.flor-portada svg circle{vector-effect:non-scaling-stroke;stroke-width:.8}
@keyframes girar-portada{to{transform:rotate(360deg)}}

.columna-portada{position:absolute;top:50%;translate:0 -50%;
  width:clamp(26px,2.8vw,44px);height:min(66%,460px);opacity:.42;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.4))}
.columna-portada svg{width:100%;height:100%}
.columna-portada.izq{left:clamp(8px,1.8vw,34px)}
.columna-portada.der{right:clamp(8px,1.8vw,34px)}

@media (max-width:760px){
  .columna-portada{display:none}
  .flor-portada{width:min(70vw,360px);height:min(70vw,360px);opacity:.12}
}
@media (prefers-reduced-motion:reduce){
  .flor-portada svg{animation:none}
}

/* ─────────── la portada, más amplia ───────────
   Con foto necesita más alto: recortada a la altura anterior se perdía
   casi toda la imagen. */
.portada:has(.fondo){min-height:clamp(540px,88vh,900px)}
.portada .fondo img{width:100%;height:100%;object-fit:cover}

/* ─────────── columnas doradas en los costados de toda la página ───────────
   Van en el mundo, fijas, y se repiten en vertical: acompañan el scroll
   de principio a fin en lugar de vivir solo en la portada. */
.mundo-lados{position:absolute;inset:0;color:var(--oro);
  mix-blend-mode:normal}
.lado{position:absolute;top:0;bottom:0;width:clamp(26px,2.6vw,42px);
  opacity:.3;display:flex;flex-direction:column;justify-content:space-around}
.lado svg{width:100%;height:auto;flex:none}
.lado.izq{left:clamp(6px,1.4vw,26px)}
.lado.der{right:clamp(6px,1.4vw,26px)}
@media (max-width:860px){ .lado{display:none} }

/* ─────────── la fotografía del mundo ───────────
   Va al fondo de todo, muy desenfocada y clara: no es una imagen que
   se mire, es la luz que tiñe la página entera. */
.mundo-foto{position:absolute;inset:-6%;width:112%;height:112%;
  object-fit:cover;object-position:50% 62%;
  filter:blur(26px) saturate(1.1) brightness(1.04);
  opacity:.5}
/* sobre ella, un velo de arena: va como capa propia y no como ::after,
   porque un pseudoelemento pintaría por encima de la niebla y el polvo */
.mundo-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(245,241,232,.74) 0%, rgba(245,241,232,.6) 45%, rgba(245,241,232,.76) 100%)}

/* ─────────── galería con foco ───────────
   La lámina del centro manda: crece y se aclara mientras las de los
   lados ceden. --foco lo escribe el JS según la distancia al eje. */
.pista{cursor:grab}
.galeria.agarrando .pista{cursor:grabbing}
.pista > *{
  --foco:0;
  transform:scale(calc(.93 + .07 * var(--foco)));
  filter:brightness(calc(.72 + .28 * var(--foco)))
         saturate(calc(.78 + .22 * var(--foco)));
  transition:transform .5s var(--suave),filter .5s ease}

/* barra de progreso */
.progreso{position:relative;height:1px;margin-top:20px;
  background:rgba(39,33,25,.16);overflow:hidden}
.progreso i{position:absolute;inset:0;display:block;
  background:rgb(var(--ac));transform-origin:left center;transform:scaleX(.04);
  transition:transform .35s ease}
.oscura .progreso{background:rgba(244,239,228,.2)}
.galeria .mandos{margin-top:14px}

@media (prefers-reduced-motion:reduce){
  .pista > *{transform:none;filter:none}
}

/* ─────────── portada en caja alta ───────────
   Playfair en mayúsculas necesita lo contrario que en caja baja: aire entre
   letras en vez de tracking negativo, y algo menos de cuerpo, porque las
   versales ocupan más ancho y a pantalla estrecha se desbordarían. */
.portada h1.mayus{text-transform:uppercase;letter-spacing:.055em;
  font-size:clamp(1.85rem,4.7vw,3.8rem);line-height:1.2}
/* contacto no lleva portada, pero el título comparte la caja alta */
h1.mayus-plano{text-transform:uppercase;letter-spacing:.055em;
  font-size:clamp(1.85rem,4.7vw,3.8rem);line-height:1.2}



/* ═══════════ pila · paneles apilados a pantalla completa ═══════════
   Portado del archivo de referencia de NARÄ: cada panel queda pegado
   arriba y el siguiente se monta encima al bajar. La fotografía ocupa
   la pantalla entera, con un velo que la oscurece hacia abajo para que
   el rótulo se lea. La página sigue siendo beige: solo los paneles son
   oscuros, porque son fotografía a sangre.                            */
.pila{position:relative}
.panel{position:sticky;top:0;height:100svh;width:100%;
  display:flex;align-items:flex-end;overflow:hidden;
  box-shadow:0 -40px 60px -20px rgba(28,20,13,.42)}
.panel-fondo{position:absolute;inset:0;z-index:0}
.panel-fondo img{width:100%;height:100%;object-fit:cover;display:block}
.panel-velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,20,13,.08) 0%,rgba(28,20,13,.46) 58%,
    rgba(28,20,13,.8) 100%)}

.panel-texto{position:relative;z-index:2;max-width:640px;color:var(--claro);
  padding:0 clamp(20px,6vw,80px) clamp(56px,9vh,96px)}
.panel-texto .num{display:block;margin-bottom:12px;
  font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--oro-claro)}
.panel-texto h3{margin-bottom:.38em;color:var(--claro);font-weight:400;
  font-size:clamp(1.85rem,4.8vw,3.3rem);line-height:1.05}
.panel-texto p{color:var(--claro-2);max-width:460px;line-height:1.7;
  font-size:clamp(.95rem,1.3vw,1.05rem)}

/* el último panel cede al beige de la página sin corte seco */
.pila-cierre{height:clamp(60px,10vh,120px);
  background:linear-gradient(180deg,rgba(28,20,13,.8),var(--arena))}

@media (max-width:640px){
  .panel-texto{padding-bottom:clamp(44px,7vh,64px)}
}
@media (prefers-reduced-motion:reduce){
  .panel{position:relative;height:auto;min-height:72svh}
}

/* ═══════════ adornos · margaritas y golondrinas ═══════════
   Los mismos elementos del tríptico del home, repartidos por las páginas
   internas. Son decorativos: alt vacío, aria-hidden y sin capturar el
   ratón, de modo que no estorban ni se anuncian en un lector de pantalla.

   · Las golondrinas van FIJAS en una esquina y acompañan todo el recorrido.
   · Las margaritas CRUZAN la pantalla según avanza su sección.

   El guion escribe --pa (0 → 1) en cada margarita; el resto ocurre aquí. */
.adorno{pointer-events:none;z-index:2}
.adorno img{width:100%;height:auto;display:block}

/* Las golondrinas se quedan en la esquina de la primera sección y se van
   con ella al bajar. Antes iban fijas a la ventana y acompañaban toda
   la página, lo que se leía como si se movieran. */
.adorno-aves{position:absolute;left:clamp(8px,1.6vw,26px);
  bottom:clamp(10px,2vh,30px);
  width:clamp(96px,11vw,168px);opacity:.9}

/* La margarita cruza por encima de la FOTOGRAFÍA, de izquierda a derecha,
   recortada por el marco de la imagen. No pasa nunca sobre el texto.
   Su centro viaja del borde izquierdo al derecho del marco que la aloja. */
.adorno-flor{position:absolute;top:90%;z-index:3;
  width:clamp(74px,8vw,124px);--pa:0;
  left:calc(var(--pa) * 100%);
  transform:translate(-50%,-50%) rotate(calc(var(--pa) * 14deg));
  opacity:clamp(0, min(var(--pa) * 5, (1 - var(--pa)) * 5), 1)}
.adorno-flor.der{top:95%;
  left:calc(100% - var(--pa) * 100%);
  transform:translate(-50%,-50%) scaleX(-1) rotate(calc(var(--pa) * -14deg))}

@media (max-width:860px){
  .adorno-aves{width:clamp(74px,19vw,110px);opacity:.75}
  .adorno-flor{width:clamp(56px,14vw,86px)}
}
@media (prefers-reduced-motion:reduce){
  .adorno-flor{left:18%;transform:translate(-50%,-50%);opacity:.9}
  .adorno-flor.der{left:78%;transform:translate(-50%,-50%) scaleX(-1)}
}

/* ─────────── margarita de rincón ───────────
   Quieta, apoyada en una esquina y cortada por el borde, como si entrara
   desde fuera. No cruza: solo se mece muy despacio. Es para los bloques
   de texto sin fotografía, donde la margarita que viaja no cabe. */
.flor-rincon{position:absolute;pointer-events:none;z-index:1;
  width:clamp(96px,11vw,172px);opacity:.9;
  animation:mecer 9s ease-in-out infinite;transform-origin:50% 100%}
.flor-rincon img{width:100%;height:auto;display:block}
.flor-rincon--abajo-der{right:0;bottom:0;transform:translate(26%,22%)}
.flor-rincon--abajo-izq{left:0;bottom:0;transform:translate(-26%,22%) scaleX(-1)}
@keyframes mecer{
  0%,100%{rotate:-2.5deg}
  50%    {rotate: 2.5deg}}
@media (max-width:860px){
  .flor-rincon{width:clamp(74px,22vw,120px);opacity:.8}
}
@media (prefers-reduced-motion:reduce){ .flor-rincon{animation:none} }

/* ═══════════ cierre · fotografía a sangre con la llamada de contacto ═══════════
   Va al final de todas las páginas internas, con la misma imagen y el mismo
   botón. Se define aquí, en la hoja compartida, para que funcione también en
   las páginas que no cargan la hoja de Guardianes.                        */
.cierre{position:relative;min-height:100svh;width:100vw;
  margin-inline:calc(50% - 50vw);overflow:hidden;
  display:grid;place-items:center;align-content:center;padding:clamp(20px,6vw,80px)}
.cierre-foto{position:absolute;inset:0;z-index:0}
.cierre-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cierre-foto::after{content:"";position:absolute;inset:0;
  background:rgba(36,27,20,.56)}

.cierre-in{position:relative;z-index:2;text-align:center;max-width:24ch;
  color:var(--claro)}
.cierre-in h2{font-family:var(--serif);font-weight:400;color:var(--claro);
  font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.22;margin:0 0 .5em}
.cierre-in p{color:var(--claro-2);line-height:1.75}
/* La caja se estrecha a 24 caracteres para que el título caiga en pocas
   líneas; con dos botones hace falta más sitio, así que se ensancha solo
   en los cierres que los llevan. */
.cierre-in.ancho{max-width:46ch}
/* Fila de botones, compartida por los dos sistemas de diseño. */
.gt-botones{display:flex;flex-wrap:nowrap;gap:14px;justify-content:center;
  margin-top:clamp(18px,2.4vw,28px)}
.gt-botones .cierre-btn,.gt-botones .gt-btn{white-space:nowrap}
@media (max-width:430px){ .gt-botones{flex-wrap:wrap} }


.cierre-etq{display:block;margin:clamp(26px,4vh,44px) 0 14px;
  font-family:var(--sans);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--oro-claro)}
.cierre-btn{display:inline-block;border-radius:100px;padding:15px 34px;
  border:1px solid var(--oro);color:var(--oro-claro);
  background:rgba(36,27,20,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;
  transition:background .35s var(--suave),color .35s var(--suave)}
.cierre-btn:hover,.cierre-btn:focus-visible{background:var(--oro);color:var(--cafe)}

@media (max-width:860px){ .cierre{min-height:84svh} }