/* ============================================================
   EL CINE PINTADO — Home
   Sistema: museo contemporáneo + alma de cartel antiguo
   ============================================================ */

:root{
  /* Paleta extraída del logotipo */
  --crema:        #F9EFDE;
  --crema-2:      #F2E4CD;   /* fondo alterno, un punto más tostado */
  --papel:        #FDF8EE;   /* blanco roto */
  --tinta:        #100E0C;   /* negro cálido */
  --negro:        #0A0908;
  --rojo:         #A00704;   /* rojo de marca */
  --rojo-2:       #7A0503;
  --gris:         rgba(16,14,12,.74);
  --gris-2:       rgba(16,14,12,.56);
  --linea:        rgba(16,14,12,.14);
  --txt-80:       rgba(16,14,12,.94);
  --txt-70:       rgba(16,14,12,.88);
  --ph-fondo:     #E4D6BC;
  --ph-velo:      linear-gradient(135deg, rgba(16,14,12,.045), rgba(16,14,12,0) 55%);
  --ph-linea:     rgba(16,14,12,.10);
  --ph-txt:       rgba(16,14,12,.40);
  --ph-txt-2:     rgba(16,14,12,.55);
  --linea-clara:  rgba(249,239,222,.22);
  /* Claro fijo. Los bloques oscuros son oscuros en los seis temas, así que su
     texto tiene que ser claro SIEMPRE. Ningún tema puede redefinir esto:
     «sombras» invierte --crema y ahí se perdían los botones y los enlaces. */
  --claro:        #F9EFDE;

  --serif:  'Instrument Serif', 'Times New Roman', Georgia, serif;
  --texto:  'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --margen: clamp(1.25rem, 5vw, 6.5rem);
  --ancho:  1600px;
  --cab:    clamp(78px, 8.5vh, 106px);   /* altura reservada a la cabecera */
  /* margen óptico: alinea el hero a sangre con el contenido centrado en .wrap */
  --gutter: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:clamp(1rem,.94rem + .28vw,1.1875rem);
  font-weight:420;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Textura de papel, prácticamente imperceptible */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* Un único margen para toda la página: cabecera, secciones y hero coinciden */
.wrap{ width:100%; margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.012em; }

.display{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 1.1rem + 6.2vw, 6.4rem);
  line-height:.98; letter-spacing:-.022em;
}
.titulo{
  font-family:var(--serif);
  font-size:clamp(2rem, 1rem + 3.5vw, 4rem);
  line-height:1.04; letter-spacing:-.018em;
}
.subtitulo{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.35rem);
  line-height:1.15;
}
em, .it{ font-style:italic; }

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--rojo);
  margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::after{ content:""; flex:0 0 44px; height:1px; background:currentColor; opacity:.45; }
.eyebrow--sola::after{ display:none; }
.eyebrow--claro{ color:#D8A9A0; }

.lead{
  font-size:clamp(1.125rem,1rem + .55vw,1.4375rem);
  line-height:1.55; font-weight:430; color:var(--txt-80);
  max-width:34ch;
}
p{ margin:0 0 1.25em; max-width:62ch; }
.medida{ max-width:56ch; }
.medida-corta{ max-width:44ch; }

.nota{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.06em;
  color:var(--gris-2); line-height:1.5;
}

/* ---------- Botones ---------- */
.btn{
  --c:var(--tinta);
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:1.05rem 1.9rem; border:1px solid var(--c); color:var(--c);
  background:transparent; cursor:pointer;
  transition:background .45s cubic-bezier(.22,.61,.36,1), color .45s, border-color .45s;
}
.btn:hover{ background:var(--c); color:var(--crema); }
.btn--solido{ background:var(--tinta); color:var(--crema); }
.btn--solido:hover{ background:var(--rojo); border-color:var(--rojo); color:var(--crema); }
.btn--rojo{ --c:var(--rojo); }
.btn--claro{ --c:var(--claro); }
.btn--claro:hover{ background:var(--claro); color:var(--negro); }
.btn--grande{ padding:1.3rem 2.6rem; font-size:.8125rem; }

/* Los enlaces de acción («Ver exposición», «Descubrir la colección»…) son
   botones rojos. Como texto fino subrayado se perdían y son la llamada a entrar
   en cada sección. Deliberadamente más pequeños que .btn, que manda. */
.enlace{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.8rem 1.3rem;
  background:var(--rojo); border:1px solid var(--rojo); color:var(--claro);
  transition:background .45s cubic-bezier(.22,.61,.36,1), border-color .45s, gap .35s;
}
.enlace span{ transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.enlace:hover{ background:var(--rojo-2); border-color:var(--rojo-2); color:var(--claro); }
.enlace:hover span{ transform:translateX(6px); }
/* Enlace dentro de un párrafo: no es una llamada a la acción, es una palabra
   del texto. Aquí el botón estorbaría, así que vuelve a ser texto subrayado. */
.enlace--texto{
  display:inline; padding:0; border:0; background:none; color:var(--rojo);
  font-family:inherit; font-size:inherit; font-weight:inherit;
  letter-spacing:0; text-transform:none;
  border-bottom:1px solid rgba(160,7,4,.4);
}
.enlace--texto:hover{ background:none; color:var(--rojo-2); border-bottom-color:var(--rojo-2); }

/* Varios enlaces seguidos: una fila que se pliega sola en pantallas estrechas.
   Los botones no se estiran (flex:0 0 auto): cada uno mide lo que mide su
   texto, que es lo que hace que la fila se lea como un índice y no como una
   botonera. El hueco vertical es mayor que el horizontal para que, cuando
   caigan a dos o tres líneas, se distingan las filas de un vistazo. */
.enlaces-fila{ display:flex; flex-wrap:wrap; gap:.85rem .7rem; margin-top:1.1rem; }
.enlaces-fila .enlace{ flex:0 0 auto; }
/* En el móvil caen uno debajo de otro. Si cada botón midiera lo que mide su
   texto quedaría un borde derecho en escalera; a lo ancho forman una lista
   ordenada, con la flecha siempre en el mismo sitio. */
@media (max-width:620px){
  .enlaces-fila{ flex-direction:column; gap:.6rem; }
  .enlaces-fila .enlace{ width:100%; justify-content:space-between; }
}

/* Sobre fondo oscuro el rojo se apaga: allí el botón va en claro. */
.enlace--claro{ background:var(--claro); border-color:var(--claro); color:var(--negro); }
.enlace--claro:hover{ background:#E7B8B0; border-color:#E7B8B0; color:var(--negro); }

/* ---------- Detalle de pincel ---------- */
.pincel{ display:block; width:clamp(90px,9vw,150px); height:auto; color:var(--rojo); opacity:.9; }
.pincel--centro{ margin-inline:auto; }

/* ---------- Marcadores de imagen ---------- */
.ph{
  position:relative; margin:0; width:100%;
  background:
    var(--ph-velo),
    var(--ph-fondo);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ph::after{
  content:""; position:absolute; inset:10px; border:1px solid var(--ph-linea); pointer-events:none;
}
.ph__txt{
  position:relative; text-align:center; padding:clamp(.9rem,3vw,1.5rem);
  font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ph-txt);
  line-height:1.9; max-width:100%; overflow-wrap:anywhere;
}
.ph__txt b{ display:block; font-weight:600; color:var(--ph-txt-2); letter-spacing:.18em; }
.ph__txt i{ display:block; font-style:normal; letter-spacing:.08em; text-transform:none; opacity:.75; margin-top:.3rem; }
.ph--oscuro{ background:linear-gradient(135deg,#232019,#15120E); }
.ph--oscuro::after{ border-color:rgba(249,239,222,.14); }
.ph--oscuro .ph__txt{ color:rgba(249,239,222,.42); }
.ph--oscuro .ph__txt b{ color:rgba(249,239,222,.62); }
figcaption{ margin-top:.85rem; }

/* ---------- Animaciones discretas ---------- */
.rev{ opacity:0; transform:translateY(22px); transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); }
.rev.on{ opacity:1; transform:none; }
.rev.d1{ transition-delay:.09s } .rev.d2{ transition-delay:.18s }
.rev.d3{ transition-delay:.27s } .rev.d4{ transition-delay:.36s }
.rev.d5{ transition-delay:.45s } .rev.d6{ transition-delay:.54s }
@media (prefers-reduced-motion: reduce){
  .rev{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   CABECERA
   ============================================================ */
.cab{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .5s ease, border-color .5s ease, padding .5s ease;
  border-bottom:1px solid transparent;
  padding-block:1.35rem;
}
.cab.pegada{ background:rgba(249,239,222,.92); backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--linea); padding-block:.85rem; }
.cab__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.marca{ display:flex; align-items:center; gap:.85rem; flex:0 0 auto; }
.marca img{ width:44px; height:44px; transition:width .5s ease,height .5s ease; }
.cab.pegada .marca img{ width:38px; height:38px; }
.marca__txt{
  font-family:var(--sans); font-size:.75rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.2;
}
.marca__txt small{ display:block; font-weight:400; font-size:.5625rem; letter-spacing:.14em; color:var(--gris-2); margin-top:.22rem; text-transform:none; font-style:italic; font-family:var(--texto); }

.nav{ display:flex; align-items:center; gap:clamp(.85rem,1.5vw,1.7rem); }
.nav a{
  font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tinta);
  position:relative; padding-block:.35rem; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--rojo); transition:right .4s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after{ right:0; }
.nav .btn{ padding:.75rem 1.2rem; font-size:.625rem; letter-spacing:.14em; }
.nav .btn::after{ display:none; }

.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; position:relative; z-index:101; }
.menu-abierto .marca{ position:relative; z-index:101; }
.burger span{ display:block; width:26px; height:1px; background:var(--tinta); margin:6px 0; transition:transform .4s, opacity .3s; }
.menu-abierto .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-abierto .burger span:nth-child(2){ opacity:0; }
.menu-abierto .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1240px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; background:var(--crema);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.35rem; padding:calc(var(--cab) + 1.5rem) var(--margen) var(--margen);
    z-index:99; overflow-y:auto;
    opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s;
  }
  .menu-abierto .nav{ opacity:1; visibility:visible; }
  /* backdrop-filter crearía un bloque contenedor y encerraría el menú dentro
     de la cabecera: se desactiva mientras el menú está abierto */
  .menu-abierto .cab{ backdrop-filter:none; background:transparent; border-bottom-color:transparent; }
  .menu-abierto{ overflow:hidden; }
  .nav a{ font-size:1.05rem; letter-spacing:.14em; }
  .nav .btn{ margin-top:1rem; font-size:.75rem; padding:1rem 1.8rem; }
}
@media (max-width:760px){
  .titulo br, .hero h1 br{ display:none; }
  .detalles .ph__txt{ font-size:.5rem; letter-spacing:.1em; line-height:1.7; }
}

/* ============================================================
   1 · PORTADA
   ============================================================ */
.hero{ min-height:100svh; display:grid; grid-template-columns:1fr; position:relative; }
@media (min-width:960px){ .hero{ grid-template-columns:minmax(0,47fr) minmax(0,53fr); } }

.hero__txt{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(7.5rem,14vh,11rem) var(--margen) clamp(5rem,10vh,7.5rem) var(--gutter);
}
.hero__logo{ width:clamp(150px,17vw,250px); margin-bottom:clamp(1.8rem,4vh,3rem); }
.hero h1{
  font-family:var(--serif);
  font-size:clamp(2.5rem,1.1rem + 4.6vw,5rem);
  line-height:1; letter-spacing:-.022em; margin-bottom:1.6rem;
}
.hero h1 .it{ color:var(--rojo); }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.6rem; }

.hero__img{ position:relative; min-height:66svh; }
.hero__img .ph{ position:absolute; inset:0; height:100%; }
.hero__fototeca{
  position:absolute; inset:0; height:100%; margin:0; overflow:hidden; isolation:isolate;
  background:var(--negro);
}
.hero__fototeca::before,
.hero__fototeca::after{
  content:""; position:absolute; pointer-events:none;
}
.hero__fototeca::before{
  z-index:2; inset:0;
  background:
    radial-gradient(circle at 68% 20%, rgba(249,239,222,.10), transparent 26%),
    linear-gradient(180deg, rgba(10,9,8,.24), transparent 24%, transparent 84%, rgba(10,9,8,.34)),
    linear-gradient(90deg, rgba(10,9,8,.20), transparent 24%, transparent 70%, rgba(10,9,8,.36));
}
.hero__fototeca::after{
  z-index:3; inset:clamp(1rem,2vw,2rem);
  border:1px solid rgba(249,239,222,.16);
}
.hero__fototeca picture,
.hero__fototeca img{
  width:100%; height:100%;
  display:block;
}
.hero__fototeca img{ max-width:none; object-fit:cover; object-position:50% 50%; }
.hero__pie{
  position:absolute; left:clamp(1.1rem,2vw,2.2rem); right:clamp(1.1rem,2vw,2.2rem);
  bottom:clamp(1.1rem,2vw,2.2rem); margin:0;
  font-family:var(--sans); font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(249,239,222,.82); max-width:none; line-height:1.9; z-index:5;
  text-shadow:0 2px 12px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.75);
}

.hero__origen {
  margin-top: 1.8rem;
}

.hero__origen p {
  margin: 0 0 .45rem;
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
}

/* La cabecera nunca se cruza con el cartel: el bloque de imagen arranca bajo ella */
@media (min-width:960px){
  .hero__img{ padding-top:var(--cab); }
  .hero__img .ph{ inset:var(--cab) 0 0 0; height:auto; }
  .hero__fototeca{ inset:var(--cab) 0 0 0; height:auto; }
}
@media (max-width:760px){
  .hero{ overflow:hidden; }
  .hero__txt{
    position:relative; z-index:4; justify-content:flex-start; min-height:100svh;
    padding:calc(var(--cab) + 1.6rem) var(--margen) 2rem var(--gutter);
    background:linear-gradient(180deg,
      var(--crema) 0%,
      rgba(249,239,222,.97) 52%,
      rgba(249,239,222,.93) 78%,   /* botones y «dónde empezó todo» caen aquí */
      rgba(249,239,222,.60) 90%,
      rgba(249,239,222,.20) 100%);
  }
  .hero__logo{ width:clamp(122px,38vw,150px); margin-bottom:1.4rem; }
  .hero h1{ font-size:clamp(2.45rem,11.2vw,3.35rem); margin-bottom:1.1rem; max-width:8.5ch; }
  .hero__acciones{ gap:.65rem; margin-top:1.8rem; }
  .hero__acciones .btn{ padding:.92rem 1.15rem; font-size:.65rem; letter-spacing:.13em; }
  /* Relleno opaco: las letras se apoyan en color plano, no en los carteles */
  .hero__acciones .btn:not(.btn--solido){ background:var(--crema); }

  /* «Descubre dónde empezó todo» pasa a ser un botón: como enlace fino sobre
     el mosaico se perdía. En escritorio sigue siendo un enlace. */
  .hero__origen .enlace{ padding:.92rem 1.15rem; font-size:.65rem; letter-spacing:.13em; }
.hero__origen{
  margin-top:1.35rem;
  max-width:20rem;
}

.hero__origen p{
  margin-bottom:.35rem;
  font-size:.95rem;
  line-height:1.35;
}

.hero__origen .enlace{
  font-size:.625rem;
  letter-spacing:.13em;
}
  .hero__img{ position:absolute; inset:0; min-height:100%; z-index:1; pointer-events:none; }
  .hero__fototeca{ inset:38svh 0 0 0; height:auto; }
  .hero__fototeca::after{ inset:1rem; }
  /* Sombra inferior del mosaico. En el móvil ya no sostiene ningún texto,
     pero se queda: remata la imagen contra el borde inferior. */
  .hero__fototeca::before{
    background:
      linear-gradient(180deg, rgba(10,9,8,.16), transparent 22%,
                      transparent 62%, rgba(10,9,8,.60) 84%, rgba(10,9,8,.92) 100%);
  }

  /* El pie del mosaico se retira en el móvil. A ese tamaño la línea caía
     encima de los carteles, en cuerpo 8, y no se leía: estorbaba más de lo
     que explicaba. La información no se pierde — el <figure> lleva su
     aria-label, que es lo que oye un lector de pantalla. */
  .hero__pie{ display:none; }
}
.hero__scroll{
  display:none; position:absolute; left:var(--gutter); bottom:1.6rem;
  font-family:var(--sans); font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris-2);
}
@media (min-width:960px){ .hero__scroll{ display:block; } }

/* ============================================================
   Estructura de secciones
   ============================================================ */
section{ position:relative; }
.sec{ padding-block:clamp(5rem,13vh,10.5rem); }
.sec--alt{ background:var(--crema-2); }
.sec--papel{ background:var(--papel); }
.sec--oscuro{ background:var(--negro); color:var(--claro); }
.sec--oscuro p{ color:rgba(249,239,222,.88); }

/* Ninguna celda de rejilla puede empujar el ancho de la página */
.grid2 > *, .cards > *, .archivo-slider > *, .detalles > *, .firmas > *, .posts > *, .pie__top > *{ min-width:0; }

.grid2{ display:grid; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
@media (min-width:900px){ .grid2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.grid2--txt{ align-items:center; }

.hr{ height:1px; background:var(--linea); border:0; margin:0; }

/* ============================================================
   2 · QUÉ ES
   ============================================================ */
.detalles{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.4vw,1.4rem); margin-top:clamp(2.5rem,6vh,4.5rem); }
.detalles .ph:nth-child(1){ aspect-ratio:3/4; }
.detalles .ph:nth-child(2){ aspect-ratio:3/4; transform:translateY(clamp(1.5rem,5vw,4rem)); }
.detalles .ph:nth-child(3){ aspect-ratio:3/4; transform:translateY(clamp(-1rem,-2.5vw,-.5rem)); }

/* ============================================================
   3 · COLECCIÓN
   ============================================================ */
.maestros{
  font-family:var(--serif);
  font-size:clamp(1.6rem,.9rem + 2.6vw,3.2rem);
  line-height:1.2; letter-spacing:-.01em; margin:2rem 0 1.6rem;
}
.maestros span{ color:var(--rojo); }
.nombres{ font-size:clamp(1rem,.95rem + .3vw,1.1875rem); line-height:1.85; color:var(--txt-70); max-width:52ch; }
.nombres b{ font-weight:400; color:var(--tinta); }
.etiqueta{
  font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gris-2); display:block; margin-bottom:.55rem;
}
.archivo-slider{
  --gap:clamp(1.1rem,2vw,2.2rem);
  margin:clamp(3.5rem,7vh,5.8rem) calc(var(--gutter) * -.08) 0;
}
.archivo-slider__viewport{
  overflow:hidden;
  padding:clamp(1.2rem,3vw,2.2rem) 0;
  border-block:1px solid var(--linea);
  background:
    linear-gradient(90deg, rgba(253,248,238,.18), rgba(253,248,238,.52), rgba(253,248,238,.18)),
    linear-gradient(180deg, rgba(16,14,12,.035), rgba(16,14,12,0) 28%, rgba(16,14,12,.035));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.archivo-slider__track{
  display:flex;
  width:max-content;
  animation:archivo-pase 58s linear infinite;
  will-change:transform;
}
.archivo-slider:hover .archivo-slider__track{ animation-play-state:paused; }
.archivo-slider__grupo{
  display:flex;
  gap:var(--gap);
  padding-right:var(--gap);
}
.archivo-slider__obra{
  flex:0 0 auto;
  width:clamp(170px,17vw,285px);
  aspect-ratio:7/10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(.45rem,.85vw,.9rem);
  background:var(--papel);
  box-shadow:0 1px 0 rgba(16,14,12,.05), 0 16px 42px rgba(16,14,12,.12);
}
.archivo-slider__obra img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.archivo-slider__lamina{
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
}
.archivo-slider__obra--mogambo img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-8%) scale(1.16);
}
.archivo-slider__obra--salvaje img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-13%) scale(1.28);
}
.archivo-slider__obra--estrella img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-4%) scale(1.12);
}
.archivo-slider__pie{
  margin:1rem 0 0;
  max-width:62ch;
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.7;
  text-transform:uppercase;
  color:var(--gris-2);
}
@keyframes archivo-pase{
  to{ transform:translateX(-50%); }
}
@media (max-width:760px){
  .archivo-slider{
    --gap:.9rem;
    margin-inline:calc(var(--gutter) * -.22);
  }
  .archivo-slider__viewport{
    padding-block:1rem;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .archivo-slider__track{ animation-duration:44s; }
  .archivo-slider__obra{ width:clamp(150px,48vw,210px); }
  .archivo-slider__pie{
    padding-inline:calc(var(--gutter) * .22);
    font-size:.625rem;
    letter-spacing:.09em;
  }
}
@media (prefers-reduced-motion: reduce){
  .archivo-slider__viewport{
    overflow-x:auto;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .archivo-slider__track{ animation:none; }
  .archivo-slider__grupo + .archivo-slider__grupo{ display:none; }
}

/* ============================================================
   4 · PRIMERA EXPOSICIÓN
   ============================================================ */
.expo1{ background:var(--crema-2); }
.expo1__img .ph{ aspect-ratio:4/5; }
.expo-invitacion::before,
@media (max-width:760px){
}
.expo1__cierre{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.9rem,1rem + 3.2vw,3.8rem);
  line-height:1.1; color:var(--rojo); margin:clamp(2rem,5vh,3.2rem) 0 2.4rem;
  max-width:20ch;
}
.datos{ list-style:none; margin:2rem 0 2.4rem; padding:0; border-top:1px solid var(--linea); }
.datos li{ display:flex; gap:1.5rem; padding:.85rem 0; border-bottom:1px solid var(--linea); font-size:.9375rem; }
.datos dt, .datos .k{
  font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gris-2); flex:0 0 9.5rem; padding-top:.28rem;
}
.datos .v{ flex:1; }

/* ============================================================
   5 · EXPOSICIONES
   ============================================================ */
.cards{ display:grid; gap:clamp(2rem,3.5vw,3.2rem); margin-top:clamp(3rem,7vh,5rem); }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{ display:flex; flex-direction:column; }
.card .ph{ aspect-ratio:4/5; margin-bottom:1.5rem; }
.card__cartel{ margin:0 0 1.5rem; }
.card__cartel .cuadro{ width:100%; }
.card__cartel--colorado img{
  max-width:none;
  object-fit:cover;
  object-position:50% 18%;
  transform:translateY(2%) scale(1.22);
}
.card .cuadro--retrato-negro img{
  object-fit:contain;
}
.card__num{
  font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.22em;
  color:var(--rojo); margin-bottom:.8rem;
}
.card h3{ font-size:clamp(1.5rem,1.2rem + .8vw,2rem); line-height:1.1; margin-bottom:.4rem; }
.card__sub{
  font-family:var(--sans); font-size:.6875rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris-2); margin-bottom:1rem;
}
.card p{ font-size:1rem; color:var(--txt-70); margin-bottom:1.25rem; }
.card .enlace{ margin-top:auto; align-self:flex-start; }
.card:hover .ph{ filter:brightness(1.04); }
.card .ph{ transition:filter .6s ease; }

/* ============================================================
   7 · CARTELISTAS / FIRMAS
   ============================================================ */
.firmas{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.4vw,2.2rem); margin-top:clamp(3rem,7vh,5rem); }
@media (min-width:820px){ .firmas{ grid-template-columns:repeat(4,1fr); } }
.firma .ph{ aspect-ratio:1/1; }
.firma__n{
  display:block;
  font-family:var(--sans); font-size:.6875rem; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; margin-top:1rem;
}
.firma__d{ display:block; font-family:var(--sans); font-size:.625rem; letter-spacing:.1em; color:var(--gris-2); margin-top:.35rem; }

/* ============================================================
   8 · ACOGE UNA EXPOSICIÓN
   ============================================================ */
.formatos{ list-style:none; margin:2.5rem 0 3rem; padding:0; }
.formatos li{
  display:flex; align-items:baseline; gap:1.4rem;
  padding:1.1rem 0; border-top:1px solid var(--linea-clara);
  font-family:var(--serif); font-size:clamp(1.15rem,1rem + .7vw,1.6rem);
}
.formatos li:last-child{ border-bottom:1px solid var(--linea-clara); }
.formatos b{ font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#C98A82; flex:0 0 5.5rem; }
.correo{
  font-family:var(--sans); font-size:.8125rem; letter-spacing:.1em;
  color:rgba(249,239,222,.75); margin-top:1.6rem; display:inline-block;
  border-bottom:1px solid rgba(249,239,222,.28); padding-bottom:.3rem;
}
.correo:hover{ color:var(--crema); border-color:var(--crema); }

/* La dirección como llamada principal, en lugar de un botón.
   Un enlace mailto depende de que el visitante tenga un programa de correo
   asignado en su ordenador; cuando no lo tiene, el botón no hace nada y no
   avisa. Escrita a este tamaño la dirección funciona igual: quien pueda,
   pincha; quien no, la lee y la copia. Nadie se queda mirando un botón mudo. */
.correo--grande{
  font-size:clamp(1.05rem,.9rem + .8vw,1.6rem);
  letter-spacing:.02em; margin-top:.4rem;
  color:var(--claro); border-bottom-width:2px;
  border-bottom-color:rgba(249,239,222,.45); padding-bottom:.45rem;
  word-break:break-word;
}
/* Sin atar a .dossier: el mismo rótulo se usa en el bloque centrado de las
   exposiciones y en la columna izquierda de la portada. */
.invita{
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(249,239,222,.62); margin:2.4rem auto 0;
  /* Sin este max-width, la regla general p{max-width:62ch} estrecha el párrafo
     a la anchura de 62 caracteres de un cuerpo diminuto, y el texto centrado
     dentro de esa caja estrecha aparece pegado a la izquierda. Es el mismo
     tropiezo que dio la etiqueta «Exposición invitada» de la portada. */
  max-width:none;
}

/* ============================================================
   9 · HISTORIAS
   ============================================================ */
.posts{ display:grid; gap:clamp(2rem,4vw,3.2rem); margin-top:clamp(3rem,7vh,4.5rem); }
@media (min-width:760px){ .posts{ grid-template-columns:repeat(3,1fr); } }
/* El margen bajo la imagen tiene que valer igual para el hueco gris que
   para la foto de verdad. Estaba sólo en .ph, así que la tarjeta que ya
   tenía foto pegaba el epígrafe a la imagen mientras las otras dos
   respiraban. Se veía torcido sin saber por qué. */
.post .ph{ aspect-ratio:3/2; }
.post .ph, .post figure{ margin-bottom:1.3rem; }
.post__meta{ font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); margin-bottom:.7rem; }
.post h3{ font-size:clamp(1.3rem,1.15rem + .6vw,1.7rem); line-height:1.15; }
.post:hover h3{ color:var(--rojo); }
.post h3{ transition:color .4s; }

/* ============================================================
   10 · CIERRE
   ============================================================ */
.cierre{ text-align:center; padding-block:clamp(5rem,14vh,9rem); }
.cierre__txt{ position:relative; z-index:2; }
.cierre__txt p{
  font-family:var(--serif); color:var(--crema);
  font-size:clamp(1.45rem,.95rem + 2.3vw,2.9rem); line-height:1.3; margin:0 auto;
  max-width:38ch;
}
.cierre__txt p .it{
  color:var(--crema);
  /* Instrument Serif no tiene negrita real: se engorda ópticamente con trazo */
  -webkit-text-stroke:.6px var(--crema);
  paint-order:stroke fill;
}

/* ---------- Pie ---------- */
.pie{ background:var(--negro); color:var(--claro); padding-block:clamp(3.5rem,8vh,6rem) 2.5rem; }
.pie__top{ display:grid; gap:3rem; align-items:start; }
@media (min-width:820px){ .pie__top{ grid-template-columns:auto 1fr auto; } }
.pie__sello{ width:112px; }
.pie__tag{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,1.1rem + .8vw,1.9rem); color:var(--crema); }
.pie__links{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.pie__links a, .pie__mail{
  font-family:var(--sans); font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(249,239,222,.7); transition:color .35s;
}
.pie__links a:hover, .pie__mail:hover{ color:var(--crema); }
.pie__mail{ text-transform:none; letter-spacing:.08em; font-size:.8125rem; }
.pie__legal{
  margin-top:clamp(3rem,7vh,5rem); padding-top:1.8rem; border-top:1px solid var(--linea-clara);
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem; justify-content:space-between;
  font-family:var(--sans); font-size:.6875rem; letter-spacing:.06em; color:rgba(249,239,222,.5);
}
.pie__legal p{ margin:0; max-width:62ch; }

/* ---------- Utilidades ---------- */
.saltar{ position:absolute; left:-9999px; }
.saltar:focus{ left:var(--margen); top:1rem; z-index:200; background:var(--tinta); color:var(--crema); padding:.8rem 1.2rem; font-family:var(--sans); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
:focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; }
.sec--oscuro :focus-visible, .cierre :focus-visible, .pie :focus-visible{ outline-color:#E0AFA8; }
/* ============================================================
   TEMAS DE EXPOSICIÓN
   Cada ficha tiene su atmósfera, pero el sistema no cambia:
   sólo se redefine la paleta. Tipografía, ritmo y componentes
   son los mismos en las seis.
   ============================================================ */

body[data-tema="hollywood"]{           /* más elegante: marfil y alto contraste */
  --crema:#F6F2E9; --crema-2:#ECE5D8; --papel:#FCFAF5; --tinta:#0B0A09;
}
body[data-tema="espana"]{              /* más luminosa y cálida */
  --crema:#FBF4E6; --crema-2:#F7EAD3; --papel:#FEFAF2;
}
body[data-tema="oeste"]{               /* atmósfera tostada, de tierra */
  --crema:#F4E9D5; --crema-2:#E9DABD; --papel:#FAF2E3;
  --ph-fondo:#DECBA8;
}
body[data-tema="grandes"]{             /* la joya: marfil sobrio */
  --crema:#F7F1E4; --crema-2:#EDE4D2; --papel:#FDFAF3;
}
body[data-tema="sombras"]{             /* la única en negativo */
  --crema:#131110; --crema-2:#0D0C0B; --papel:#191614;
  --negro:#080706; --tinta:#F2E9DB; --rojo:#C9291F;
  --gris:rgba(242,233,219,.78); --gris-2:rgba(242,233,219,.60);
  --linea:rgba(242,233,219,.16); --linea-clara:rgba(242,233,219,.16);
  --txt-80:rgba(242,233,219,.95); --txt-70:rgba(242,233,219,.88);
  --ph-fondo:#221E1A;
  --ph-velo:linear-gradient(135deg, rgba(242,233,219,.05), rgba(242,233,219,0) 55%);
  --ph-linea:rgba(242,233,219,.12);
  --ph-txt:rgba(242,233,219,.40); --ph-txt-2:rgba(242,233,219,.58);
}
body[data-tema="sombras"] .cab.pegada{ background:rgba(19,17,16,.92); }
body[data-tema="sombras"] .sec--oscuro{ background:#080706; border-block:1px solid rgba(242,233,219,.10); }
body[data-tema="sombras"] .sec--oscuro p{ color:rgba(242,233,219,.88); }
body[data-tema="sombras"] .eyebrow--claro{ color:#E2938A; }
body[data-tema="sombras"] .btn--solido{ background:var(--tinta); color:#131110; border-color:var(--tinta); }
body[data-tema="sombras"] .btn--solido:hover{ background:var(--rojo); border-color:var(--rojo); color:#FFF; }
body[data-tema="sombras"] .pie{ background:#080706; }
body[data-tema="sombras"] .formatos b{ color:#E2938A; }

/* ============================================================
   MIGA DE PAN
   ============================================================ */
.miga{
  padding-top:calc(var(--cab) + clamp(1.5rem,4vh,3rem));
  font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gris-2);
}
.miga a:hover{ color:var(--rojo); }
.miga span{ opacity:.5; margin-inline:.55rem; }

/* ============================================================
   PORTADA DE FICHA DE EXPOSICIÓN
   ============================================================ */
.fhero{ padding-block:clamp(2rem,5vh,3.5rem) clamp(4rem,10vh,7rem); }
.fhero__img{ position:relative; margin-top:clamp(2rem,5vh,3.5rem); }
.fhero__img .ph{ aspect-ratio:21/9; }
@media (max-width:760px){ .fhero__img .ph{ aspect-ratio:4/3; } }
.fhero h1{
  font-family:var(--serif); font-size:clamp(2.6rem,1.1rem + 5.4vw,6rem);
  line-height:.96; letter-spacing:-.022em; margin-bottom:.5rem;
}
.fhero__sub{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.4rem,1rem + 1.6vw,2.6rem); line-height:1.15; color:var(--rojo);
  margin:0 0 1.6rem; max-width:26ch;
}
.fhero__lead{ font-size:clamp(1.0625rem,1rem + .5vw,1.375rem); line-height:1.55; max-width:44ch; color:var(--txt-80); }

/* ============================================================
   TEXTO CURATORIAL
   ============================================================ */
.curatorial{ max-width:60ch; }
.curatorial .abre{
  font-family:var(--serif); font-size:clamp(1.7rem,1.1rem + 2.2vw,3.1rem);
  line-height:1.14; letter-spacing:-.015em; margin-bottom:1.8rem; max-width:22ch;
}
.curatorial p{ font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }

/* ============================================================
   GALERÍA DE LA EXPOSICIÓN (6–8 piezas, nunca las 30)
   ============================================================ */
.galeria{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.8rem,1.8vw,1.8rem); margin-top:clamp(2.5rem,6vh,4rem); }
@media (min-width:720px){ .galeria{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1180px){ .galeria{ grid-template-columns:repeat(4,1fr); } }
.galeria > *{ min-width:0; }
.galeria .ph{ aspect-ratio:7/10; }
.galeria figcaption{
  font-family:var(--sans); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris-2); margin-top:.7rem; line-height:1.6;
}
/* Procedencia de la pieza, bajo el título. En una cartela de sala el crédito
   nunca compite con la obra: va en redonda, en minúscula y sin el espaciado
   de letra del título, para que se lea como una nota y no como un segundo
   rótulo. Hereda el color, así que funciona igual en los temas oscuros. */
.galeria figcaption .credito{
  display:block; margin-top:.3rem;
  font-size:.625rem; letter-spacing:0; text-transform:none;
  font-family:var(--texto); font-style:italic; opacity:.78;
}

/* ============================================================
   OBRAS DESTACADAS: tabla editorial bajo la galería

   Sin bordes de tabla ni fondos: manda la tipografía y el filete.
   Tres columnas en pantalla ancha (valoración · título · reparto),
   apiladas en móvil. Las estrellas son texto, no imágenes: se leen
   igual con las tipografías sin cargar.
   ============================================================ */
.obras{ margin-top:clamp(3.5rem,9vh,6rem); }
.obras__cab{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.2rem,3vh,1.8rem);
}
.obras__cab h3{
  font-family:var(--serif); font-weight:400; line-height:1.1;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.25rem); color:var(--tinta);
}
.obras__cab p{
  font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gris-2);
}
.obras__lista{ border-top:2px solid var(--tinta); }
.obra{
  display:grid; gap:.35rem .5rem;
  grid-template-columns:1fr;
  padding-block:clamp(.9rem,1.9vh,1.2rem);
  border-bottom:1px solid var(--linea);
}
.obra > *{ min-width:0; }
.obra p{ margin:0; max-width:none; }   /* anula el margen global de <p> */
.obra__val{
  font-size:.8125rem; letter-spacing:.1em; line-height:1;
  color:var(--rojo); white-space:nowrap;
}
.obra__val i{ font-style:normal; opacity:.45; }
.obra__tit{
  font-family:var(--serif); font-weight:400; line-height:1.2;
  font-size:clamp(1.125rem,1.02rem + .42vw,1.4375rem); color:var(--tinta);
}
.obra__nota{
  display:block; font-family:var(--sans); font-size:.5625rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rojo);
  margin-top:.4rem;
}
.obra__rep{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.05em;
  line-height:1.7; color:var(--gris); overflow-wrap:anywhere;
}
@media (min-width:820px){
  /* Columnas en fracciones, no en auto: cada fila es su propio grid y sólo
     así quedan alineadas verticalmente entre sí. */
  .obra{
    grid-template-columns:6.5em minmax(0,.62fr) minmax(0,1.38fr);
    align-items:baseline; gap:0 clamp(1.5rem,3.2vw,3rem);
  }
  .obra__val{ font-size:.875rem; }
}
.obras__pie{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.04em;
  color:var(--gris-2); margin-top:1.4rem; max-width:60ch;
}

/* Remate: los nombres dichos en voz alta, cerrando la sección de obras. */
.remate{
  margin-top:clamp(3rem,7.5vh,5rem);
  border-top:2px solid var(--tinta);
  padding-top:clamp(1.6rem,3.6vh,2.4rem);
}
.remate .eyebrow{ margin-bottom:clamp(1rem,2.4vh,1.5rem); }
.remate__nombres{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.4375rem,1.1rem + 1.55vw,2.5rem);
  line-height:1.22; letter-spacing:-.012em; color:var(--tinta);
  max-width:20ch; margin:0;
}
.remate__txt{
  font-size:clamp(1rem,.95rem + .3vw,1.1875rem);
  line-height:1.85; color:var(--txt-70); max-width:52ch; margin:0;
}
.remate__txt strong{ font-weight:600; color:var(--tinta); }


/* ============================================================
   DESTACADOS: nombres y obras (siempre parciales)
   ============================================================ */
.destacados{ display:grid; gap:clamp(2rem,5vw,4rem); margin-top:clamp(2.5rem,6vh,4rem); }
@media (min-width:820px){ .destacados{ grid-template-columns:repeat(2,1fr); } }
.destacados > *{ min-width:0; }
.destacados .nombres{ max-width:none; }

/* ============================================================
   FORMATOS ADAPTABLES
   ============================================================ */
.formatos3{ display:grid; gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(2.5rem,6vh,4rem); }
@media (min-width:760px){ .formatos3{ grid-template-columns:repeat(3,1fr); } }
.formato{ border-top:2px solid var(--tinta); padding-top:1.4rem; }
.formato b{
  display:block; font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--rojo); margin-bottom:.7rem;
}
.formato span{ display:block; font-family:var(--serif); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem); line-height:1.05; }
.formato em{ display:block; font-style:normal; font-size:.9375rem; color:var(--gris); margin-top:.6rem; }

/* ============================================================
   LLAMADA AL DOSSIER
   ============================================================ */
.dossier{ text-align:center; }
.dossier h2{ font-family:var(--serif); font-size:clamp(1.9rem,1.1rem + 3vw,3.4rem); line-height:1.08; margin-bottom:1.6rem; }
.dossier p{ margin-inline:auto; }
.dossier .btn{ margin-top:1rem; }
.sec--oscuro .dossier h2{
  color:#F9EFDE;
  text-shadow:0 0 30px rgba(249,239,222,.16);
}

/* ============================================================
   PÁGINA GENERAL DE EXPOSICIONES: seis propuestas grandes
   ============================================================ */
.propuesta{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(3rem,8vh,6rem); border-top:1px solid var(--linea); }
@media (min-width:900px){
  .propuesta{ grid-template-columns:minmax(0,52fr) minmax(0,48fr); }
  .propuesta:nth-child(even) .propuesta__img{ order:2; }
}
.propuesta > *{ min-width:0; }
.propuesta__img .ph{ aspect-ratio:4/3; transition:filter .7s ease; }
.propuesta:hover .propuesta__img .ph{ filter:brightness(1.05); }
.propuesta__n{ font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--rojo); margin-bottom:1rem; }
.propuesta h2{ font-family:var(--serif); font-size:clamp(2rem,1.2rem + 2.8vw,3.6rem); line-height:1.02; margin-bottom:.5rem; }
.propuesta__sub{ font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1rem + .7vw,1.5rem); color:var(--rojo); margin-bottom:1.3rem; }
.propuesta__meta{ font-family:var(--sans); font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-2); margin-bottom:1.4rem; }

/* ============================================================
   EXPOSICIONES (general) · «Cada cartel cuenta una historia»
   La ficha de sala de ejemplo: lo que el visitante lee junto al
   cartel. Reutiliza la lista .datos, pero aquí los antetítulos
   van en rojo: son protagonistas, no metadatos.
   ============================================================ */
.relato{
  max-width:46rem;
  margin:clamp(3.5rem,9vh,6rem) auto 0;
  background:var(--crema);
  border:1px solid var(--linea);
  padding:clamp(2rem,5vw,3.4rem) clamp(1.4rem,4.5vw,3.4rem) clamp(1.6rem,4vh,2.6rem);
}
.relato > *{ min-width:0; }
.relato__cartel{ max-width:15rem; margin:0 auto 2.4rem; }
.relato__cartel .cuadro{ width:100%; }
@media (min-width:760px){
  .relato{
    max-width:62rem;
    display:grid; grid-template-columns:minmax(0,16rem) minmax(0,1fr);
    gap:clamp(2rem,4.5vw,3.6rem); align-items:center;
  }
  .relato__cartel{ max-width:none; margin:0; }
  .relato__lema{ grid-column:1 / -1; }
}
.relato__ante{
  font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gris-2);
  margin:0 0 1.8rem; max-width:none;
}
.relato__tit{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.6rem);
  line-height:1.05; margin:0 0 .35rem;
}
.relato__tit span{ color:var(--gris-2); }
.relato__dir{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem); color:var(--rojo);
  margin:0;
}
.relato .datos{ margin-bottom:0; }
.relato .datos .k{ color:var(--rojo); }
/* En móvil, la columna fija de 9,5rem deja el texto en una tira estrecha:
   aquí la etiqueta pasa a ir encima del texto. Sólo dentro de .relato. */
@media (max-width:560px){
  .relato .datos li{ flex-direction:column; gap:.4rem; }
  .relato .datos .k{ flex:none; padding-top:0; }
}
.relato__lema{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.8rem); color:var(--rojo);
  text-align:center; margin:2.2rem 0 0; max-width:none;
}

/* ============================================================
   NAVEGACIÓN ENTRE EXPOSICIONES
   ============================================================ */
.entre{ display:grid; gap:1.5rem; border-top:1px solid var(--linea); padding-top:2rem; }
@media (min-width:760px){ .entre{ grid-template-columns:1fr 1fr; } }
.entre a{ display:block; }
.entre small{ display:block; font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gris-2); margin-bottom:.6rem; }
.entre strong{ font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,1.1rem + .8vw,1.9rem); line-height:1.1; }
.entre a:hover strong{ color:var(--rojo); }
.entre .fin{ text-align:right; }

/* ============================================================
   AJUSTES FINOS DE COMPOSICIÓN TIPOGRÁFICA
   ============================================================ */
h1, h2, h3, .display, .titulo, .subtitulo, .abre,
.fhero__sub, .maestros, .expo1__cierre, .cierre__txt p, .dossier h2{
  text-wrap:balance;                 /* reparte las líneas y evita palabras huérfanas */
}
p, .lead, .nombres, .card p{ text-wrap:pretty; }

/* Sección actual en la navegación */
.nav a[aria-current="page"]{ color:var(--rojo); }
.nav a[aria-current="page"]::after{ right:0; }

/* Fotografía real ocupando el hueco de un marcador */
.foto{ width:100%; height:100%; object-fit:cover; display:block; background:var(--ph-fondo); }
.galeria .foto{ object-fit:contain; background:var(--crema-2); }
body[data-tema="sombras"] .galeria .foto{ background:#0D0C0B; }

/* ============================================================
   PÁGINA DE HISTORIA
   ============================================================ */
.hito{ padding-block:clamp(3rem,8vh,6rem); border-top:1px solid var(--linea); }
.hito__grid{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (min-width:900px){ .hito__grid{ grid-template-columns:minmax(0,34fr) minmax(0,66fr); } }
.hito__grid > *{ min-width:0; }
.hito__anio{
  font-family:var(--serif); font-size:clamp(3rem,2rem + 4vw,6.5rem);
  line-height:.9; letter-spacing:-.03em; color:var(--rojo); margin:0 0 .4rem;
}
.hito__que{
  font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gris-2);
}
.hito h2{ font-family:var(--serif); font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem); line-height:1.08; margin-bottom:1.2rem; }

/* Cita destacada */
.cita{ margin:2.2rem 0; padding-left:clamp(1.2rem,2.5vw,2rem); border-left:2px solid var(--rojo); }
.cita p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.9rem); line-height:1.28; margin:0 0 .8rem; max-width:34ch;
}
.cita cite{
  font-family:var(--sans); font-style:normal; font-size:.625rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gris-2);
}

/* Homenaje a Primitivo */
.homenaje-primitivo{
  max-width:680px;
  margin:2.5rem auto 2.8rem;
}

.homenaje-primitivo p{
  margin:0;
  font-family:var(--texto);
  /* Cuerpo bajado al pasar de una frase a dos párrafos: a 1.75rem el bloque
     se comía el cierre. Sigue por encima del texto normal, que es lo suyo. */
  font-size:clamp(1.125rem, 1.7vw, 1.45rem);
  line-height:1.6;
  color:#fff;
}
.homenaje-primitivo p + p{ margin-top:1.1em; }

.homenaje-primitivo strong{
  color:#fff;
  font-weight:700;
}

@media (max-width:760px){
  .homenaje-primitivo{
    margin:2rem auto 2.3rem;
  }

  .homenaje-primitivo p{
    font-size:1.25rem;
    line-height:1.5;
  }
}

/* Libro de cuentas */
.libro{ margin:2.4rem 0 0; border-top:2px solid var(--tinta); }
.libro__fila{
  display:flex; align-items:baseline; gap:1.2rem; justify-content:space-between;
  padding:.95rem 0; border-bottom:1px solid var(--linea);
}
.libro__t{ font-family:var(--serif); font-size:clamp(1.05rem,1rem + .6vw,1.5rem); }
.libro__c{
  font-family:var(--sans); font-size:.8125rem; letter-spacing:.06em; color:var(--rojo);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.libro__pie{ font-family:var(--sans); font-size:.6875rem; letter-spacing:.1em; color:var(--gris-2); margin-top:1rem; }

/* Precios */
.precios{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem); margin-top:2.4rem; }
.precios div{ border-top:1px solid var(--linea); padding-top:1rem; }
.precios b{ display:block; font-family:var(--serif); font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem); line-height:1; }
.precios span{ display:block; font-family:var(--sans); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-2); margin-top:.6rem; }

/* Nota de fuente */
.fuente{
  font-family:var(--sans); font-size:.6875rem; line-height:1.7; color:var(--gris-2);
  border-top:1px solid var(--linea); padding-top:1.4rem; margin-top:clamp(3rem,7vh,5rem); max-width:70ch;
}
.fuente a{ border-bottom:1px solid var(--linea); }
.fuente a:hover{ color:var(--rojo); border-color:var(--rojo); }

/* Cartel de portada expuesto entero sobre el panel oscuro del hero */
.hero__obra{ padding:clamp(2.5rem,6vh,5rem) clamp(1.5rem,4vw,4rem) clamp(4rem,10vh,7rem); }
.hero__obra::after{ display:none; }              /* sin borde interior: la obra manda */
.hero__obra img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  box-shadow:0 22px 70px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.4);
}

/* Marco museo para fotografías reales de carteles: paspartú claro y sombra suave */
figure{ margin:0; }          /* las figuras del sistema no llevan margen de navegador */

.cuadro{
  display:flex; align-items:center; justify-content:center;
  background:var(--papel);
  padding:clamp(.6rem,1.3vw,1.2rem);
  box-shadow:0 1px 0 rgba(16,14,12,.05), 0 14px 34px rgba(16,14,12,.10);
}
.cuadro img{ width:100%; height:100%; object-fit:contain; display:block; }
.cuadro__lamina{
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
}
.cuadro--mogambo img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-8%) scale(1.16);
}
.cuadro--salvaje img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-13%) scale(1.28);
}
.cuadro--amor-brujo img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-9%) scale(1.24);
}
.cuadro--solos img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-10%) scale(1.26);
}
.cuadro--pasos-destino img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-7%) scale(1.18);
}
.cuadro--asalto-armada img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-8%) scale(1.17);
}
.cuadro--operacion-rubi img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-7%) scale(1.17);
}
.cuadro--samba img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-2%) scale(1.14);
}
.cuadro--moza-cantaro img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-7%) scale(1.16);
}
.cuadro--caballero-andaluz img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-7%) scale(1.16);
}
.cuadro--verano-70 img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-5%) scale(1.14);
}
.cuadro--duelo img{
  max-width:none;
  object-fit:cover;
  transform:translateY(-8%) scale(1.16);
}
body[data-tema="sombras"] .cuadro{ background:#1D1A17; box-shadow:0 14px 34px rgba(0,0,0,.5); }

/* Tríptico de detalles de la home: el cine · el arte · el tiempo */
.detalles figure{ display:flex; flex-direction:column; }
.detalles .ph, .detalles .foto{ width:100%; }
.detalle__n{
  display:block; font-family:var(--sans); font-size:.625rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--rojo); margin-top:1rem;
}
.detalle__d{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,.95rem + .4vw,1.25rem); color:var(--gris); margin-top:.3rem;
}
/* las imágenes reales del tríptico van a sangre, sin marco: son materia, no obra completa */
.detalles img.foto{ aspect-ratio:3/4; }


/* ============================================================
   INVITACIÓN DE EXPOSICIÓN
   Papelería, no collage: filete doble, mucho aire y jerarquía
   tipográfica. El sello manda; el resto acompaña.
   ============================================================ */
.invitacion{ margin:0; }
.invitacion__marco{
  /* exactamente el crema del logotipo: así el sello no recorta disco */
  background:var(--crema);
  border:1px solid var(--linea);
  box-shadow:0 1px 0 rgba(16,14,12,.04), 0 18px 46px rgba(16,14,12,.09);
  padding:clamp(2.4rem,5vw,4rem) clamp(1.6rem,4vw,3.2rem) clamp(2rem,4vw,3rem);
  text-align:center;
  position:relative;
}
.invitacion__marco::before{           /* segundo filete: el detalle de invitación */
  content:""; position:absolute; inset:9px;
  border:1px solid var(--linea); opacity:.55; pointer-events:none;
}
.invitacion__eyebrow{
  font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--rojo);
  /* max-width:none anula el 62ch global de <p>: con la letra tan pequeña ese
     límite dejaba el párrafo estrecho y pegado a la izquierda, y el texto
     centrado dentro de él salía descentrado respecto al marco.
     text-indent compensa el hueco que el interletrado deja tras la última letra. */
  max-width:none; margin:0 0 clamp(1.4rem,3vh,2.2rem); text-indent:.14em;
}
.invitacion__sede{
  font-family:var(--serif); font-size:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);
  line-height:1.08; letter-spacing:-.01em; margin:0; max-width:none;
}
.invitacion__nexo{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:clamp(1.3rem,3vh,2rem) 0;
}
.invitacion__nexo span{ flex:0 0 clamp(28px,6vw,52px); height:1px; background:var(--linea); }
.invitacion__nexo em{
  font-family:var(--serif); font-style:italic; font-size:1.0625rem; color:var(--gris);
}
.invitacion__sello{
  width:clamp(128px,19vw,176px); height:auto; margin:0 auto;
}
.invitacion__marca{
  font-family:var(--sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; margin:0;
}
.invitacion__lugar{
  font-family:var(--sans); font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris-2);
  margin:clamp(1.6rem,3.5vh,2.4rem) 0 0; padding-top:1.2rem;
  border-top:1px solid var(--linea);
  display:inline-block; padding-inline:clamp(1rem,3vw,2.4rem);
}
.invitacion__pie{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  margin-top:1.2rem;
}
.invitacion__pie img{ width:44px; height:auto; opacity:.85; }
.invitacion__pie span{
  font-family:var(--sans); font-size:.5625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris-2);
}

/* Firmas reales: macro sobre el papel del cartel, con filete finísimo */
.firma-img{
  border:1px solid var(--linea);
  background:var(--crema);
  /* .foto trae height:100%, que aquí hacía que la imagen ocupara TODA la altura
     de la figura y el pie se saliera por debajo. En móvil, con la rejilla a dos
     columnas, ese pie caía detrás de las imágenes de la fila siguiente y los
     nombres de Jano y Mac desaparecían. Manda la proporción, no el estirado. */
  height:auto;
}
body[data-tema="sombras"] .firma-img{ border-color:rgba(242,233,219,.14); }


/* Botón de cierre de la home */
.cierre__accion{ margin:clamp(2.4rem,6vh,3.6rem) 0 0; max-width:none; }


/* ============================================================
   ARTÍCULO DE ACTUALIDAD (v13)

   Una columna de lectura de 64ch centrada, como un pliego de revista.
   Las imágenes rompen la columna de dos maneras: a sangre dentro del
   .wrap (articulo__ancha) o en pareja (articulo__pareja). Todo hereda
   la tipografía del sitio; aquí sólo se decide la medida y el ritmo.
   ============================================================ */
.articulo{ max-width:64ch; margin-inline:auto; }
.articulo p{ max-width:none; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); }
.articulo h2{
  font-family:var(--serif); font-size:clamp(1.7rem,1.2rem + 1.8vw,2.7rem);
  line-height:1.08; margin:clamp(3rem,7vh,4.5rem) 0 1.2rem;
}
.articulo h2 + p{ margin-top:0; }
/* Primer párrafo de cada bloque: un punto más grande, como entrada */
.articulo .entrada{ font-size:clamp(1.1875rem,1.05rem + .7vw,1.5rem); line-height:1.5; color:var(--txt-80); }
/* Frase suelta que el autor deja caer sola: se respira alrededor */
.articulo .suelta{ font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem); line-height:1.25; margin:1.6rem 0 1.8rem; }
.articulo .cita{ margin:2.4rem 0 2.6rem; }
.articulo .cita p{ max-width:none; font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,1.1rem + 1.2vw,2.1rem); line-height:1.28; }
.articulo figure{ margin:clamp(2.2rem,5vh,3.4rem) auto; max-width:400px; }
.articulo figure:has(.foto[style*="9/16"]), .articulo figure:has(.ph[style*="9/16"]){ max-width:340px; }
.articulo figcaption, .articulo__ancha figcaption, .articulo__pareja figcaption, .articulo__cuatro figcaption{
  font-family:var(--sans); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris-2); margin-top:.75rem; line-height:1.6;
}
.articulo figcaption .credito, .articulo__ancha figcaption .credito, .articulo__pareja figcaption .credito, .articulo__cuatro figcaption .credito{
  display:block; margin-top:.3rem; font-size:.625rem; letter-spacing:0; text-transform:none;
  font-family:var(--texto); font-style:italic; opacity:.78;
}
/* La regla general .foto{ height:100% } dentro de una rejilla hace que la imagen
   ocupe toda la altura de la figura y el pie se salga por debajo, sobre el
   párrafo siguiente (visto en móvil, 16-IX; mismo fallo que .firma-img).
   Aquí manda la proporción declarada, no el estirado. */
.articulo .foto, .articulo__pareja .foto, .articulo__cuatro .foto, .articulo__ancha .foto{ height:auto; }
/* Cartel dentro de la columna: nunca a lo ancho, ocupa media medida y el resto es aire */
.articulo .cuadro{ display:block; width:min(100%,360px); margin-inline:auto; }
/* Imagen a sangre dentro del .wrap: sale de la columna de lectura */
.articulo__ancha{ margin:clamp(2.5rem,6vh,4rem) 0; }
.articulo__ancha .ph{ aspect-ratio:21/9; }
@media (max-width:760px){ .articulo__ancha .ph{ aspect-ratio:4/3; } }
/* Pareja de imágenes: dos carteles o dos detalles, lado a lado */
.articulo__pareja{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.8rem,1.8vw,1.8rem); margin:clamp(2.5rem,6vh,4rem) auto clamp(3.5rem,9vh,6rem); max-width:820px; }
.articulo__pareja > *{ min-width:0; margin:0; }
.articulo__pareja .ph{ aspect-ratio:7/10; }
.articulo__pareja--fotos .ph{ aspect-ratio:3/2; }
/* Fila de cuatro carteles: la galería de la ficha, a escala de artículo */
.articulo__cuatro{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.8rem,1.8vw,1.8rem); margin:clamp(2.5rem,6vh,4rem) 0 clamp(3.5rem,9vh,6rem); }
@media (min-width:720px){ .articulo__cuatro{ grid-template-columns:repeat(4,1fr); } }
.articulo__cuatro > *{ min-width:0; margin:0; }
.articulo__cuatro .ph{ aspect-ratio:7/10; }
/* Datos del artículo bajo el título: sección · fecha · lectura */
.articulo p.articulo__datos{
  font-family:var(--sans); font-size:.625rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gris-2); display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
  margin:1.6rem 0 0;
}
.articulo__datos b{ font-weight:500; color:var(--rojo); }
/* Cierre: la llamada a la exposición, en caja */
.articulo__cierre{
  margin-top:clamp(3.5rem,8vh,5.5rem); padding-top:clamp(2rem,5vh,3rem);
  border-top:1px solid var(--linea);
}
.articulo__cierre p{ max-width:none; }
.articulo__cierre .btn{ margin-top:1.2rem; }
/* Volver a la lista */
.articulo__volver{ margin-top:clamp(2.5rem,6vh,4rem); }