/* Catálogo de obras — Giselle Jukka
   Tema único y oscuro a propósito: la sala antes de que apaguen luces.
   El acento dorado viene de las bombillas de marquesina. */

/* Dirección comprometida con un solo tema: la sala antes de que apaguen luces.
   Oscuro, pero no negro. El acento es el dorado de las bombillas de marquesina. */
:root{
  --fondo:#191721; --fondo2:#242030; --fondo3:#2E293C;
  --tinta:#F6F2EC; --suave:#B0A8BC; --tenue:#7C748A;
  --oro:#E7B85A; --borde:#39334A;
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --texto:Georgia,"Iowan Old Style",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Campo de estrellas en mosaico de 1400px, generado con scripts/estrellas.py.
   Deliberadamente tenue: el fondo es el cielo de la sala, no el espectáculo. */
body{margin:0;background:var(--fondo) url("../assets/estrellas.svg") repeat 0 0;
     color:var(--tinta);font-family:var(--texto);
     line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}

/* ─────────────────── cabecera ─────────────────── */
.cabecera{position:sticky;top:0;z-index:30;display:flex;align-items:center;
          justify-content:space-between;gap:20px;
          padding:14px clamp(20px,5vw,64px);
          background:rgba(25,23,33,.86);backdrop-filter:blur(12px);
          border-bottom:1px solid var(--borde)}
.marca{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.02em;
       display:flex;align-items:center;gap:9px}
.marca .logo{width:19px;height:23px;display:block;flex:none}
.menu{display:flex;gap:4px}
.menu button{font-family:var(--display);font-size:13px;letter-spacing:.03em;
             padding:8px 15px;border-radius:99px;color:var(--suave);
             transition:color .16s ease,background .16s ease}
.menu button:hover{color:var(--tinta)}
.menu button[aria-current="page"]{color:#211A0B;background:var(--oro);font-weight:600}

/* ─────────────────── portada ─────────────────── */
.portada{position:relative;min-height:min(78vh,620px);display:flex;align-items:center;
         overflow:hidden;border-bottom:1px solid var(--borde)}
.telon{position:absolute;inset:0;z-index:0}
.telon img{width:100%;height:100%;object-fit:cover;filter:blur(46px) saturate(1.45) brightness(.62);
           transform:scale(1.25);opacity:.9;transition:opacity .5s ease}
/* Las estrellas van como primera capa, o sea encima de los degradados: el
   telón es opaco y si no, la portada sería la única zona sin cielo. */
.telon::after{content:"";position:absolute;inset:0;
  background:url("../assets/estrellas.svg") repeat 0 0,
             linear-gradient(100deg,rgba(25,23,33,.96) 0%,rgba(25,23,33,.78) 44%,rgba(25,23,33,.3) 100%),
             linear-gradient(0deg,var(--fondo) 2%,transparent 44%)}
.marco{position:relative;z-index:1;display:grid;grid-template-columns:1fr 330px;
       gap:clamp(20px,3vw,40px);align-items:center;width:100%;max-width:1220px;margin:0 auto;
       padding:clamp(38px,6vw,68px) clamp(20px,5vw,64px)}
.eyebrow{font-family:var(--display);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
         color:var(--oro);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--oro)}
.portada h1{font-family:var(--display);font-size:clamp(32px,6vw,64px);line-height:.99;
            font-weight:800;letter-spacing:-.035em;margin:0 0 18px;text-wrap:balance}
.sumario{font-size:clamp(15px,1.7vw,17.5px);line-height:1.6;color:#DDD6E2;max-width:52ch;
         margin:0 0 22px}
.pastillas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pastilla{font-family:var(--display);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
          border:1px solid var(--borde);background:rgba(255,255,255,.06);padding:5px 11px;
          border-radius:99px;color:var(--suave)}
.pastilla.oro{border-color:rgba(231,184,90,.55);color:var(--oro)}
.btn{font-family:var(--display);font-size:13.5px;letter-spacing:.03em;font-weight:600;
     padding:12px 22px;border-radius:3px;background:var(--oro);color:#211A0B;
     text-decoration:none;display:inline-block;transition:filter .16s ease}
.btn:hover{filter:brightness(1.1)}
.afiche-portada img{width:100%;display:block;border-radius:3px;
  box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09)}

.timon{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:46px;height:46px;
       display:grid;place-items:center;border-radius:50%;background:rgba(30,27,40,.7);
       border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);
       transition:background .16s ease,border-color .16s ease,color .16s ease}
.timon:hover{background:var(--oro);border-color:var(--oro);color:#211A0B}
.timon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
           stroke-linecap:round;stroke-linejoin:round}
.timon.izq{left:clamp(8px,1.6vw,20px)}
.timon.der{right:clamp(8px,1.6vw,20px)}
.puntos{position:absolute;z-index:2;bottom:20px;left:50%;transform:translateX(-50%);
        display:flex;gap:8px}
.punto{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.26);
       transition:background .2s ease}
.punto[aria-current="true"]{background:var(--oro)}

/* ─────────────────── filas ─────────────────── */
.filas{max-width:1220px;margin:0 auto;padding:clamp(30px,4.5vw,48px) 0 48px}
.fila{margin-bottom:clamp(26px,3.6vw,42px);position:relative}
.fila h2{font-family:var(--display);font-size:clamp(15px,1.9vw,18px);font-weight:700;
         letter-spacing:-.01em;margin:0 0 13px;padding:0 clamp(20px,5vw,64px);
         display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.fila h2 span{font-size:12px;font-weight:400;color:var(--tenue);letter-spacing:.04em;
              font-family:var(--display);font-variant-numeric:tabular-nums}
.tira{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;
      padding:4px clamp(20px,5vw,64px) 14px;scrollbar-width:none}
.tira::-webkit-scrollbar{display:none}
.ficha{flex:0 0 clamp(124px,15vw,164px);border-radius:3px;overflow:hidden;position:relative;
       background:var(--fondo2);transition:transform .2s ease,box-shadow .2s ease;
       text-align:left;display:block}
.ficha img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.ficha:hover,.ficha:focus-visible{transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 0 1px rgba(231,184,90,.6)}
.ficha .velo{position:absolute;inset:auto 0 0 0;padding:26px 10px 9px;
  background:linear-gradient(0deg,rgba(16,14,22,.96),transparent);
  font-family:var(--display);font-size:11.5px;line-height:1.25;font-weight:600;
  opacity:0;transition:opacity .2s ease}
.ficha:hover .velo,.ficha:focus-visible .velo{opacity:1}
.remo{position:absolute;top:calc(50% + 6px);transform:translateY(-50%);z-index:3;
      width:34px;height:64px;display:grid;place-items:center;border-radius:3px;
      background:linear-gradient(90deg,rgba(25,23,33,.95),rgba(25,23,33,.5));
      opacity:0;transition:opacity .18s ease}
.fila:hover .remo,.remo:focus-visible{opacity:1}
.remo.izq{left:0}
.remo.der{right:0;background:linear-gradient(270deg,rgba(25,23,33,.95),rgba(25,23,33,.5))}
.remo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
          stroke-linecap:round;stroke-linejoin:round}
.remo:hover{color:var(--oro)}

/* ─────────────────── detalle ─────────────────── */
.telonfondo{position:fixed;inset:0;z-index:40;background:rgba(14,12,19,.86);
            backdrop-filter:blur(5px);display:grid;place-items:center;
            padding:clamp(14px,3vw,40px);opacity:0;pointer-events:none;
            transition:opacity .22s ease}
.telonfondo.abierto{opacity:1;pointer-events:auto}
.detalle{background:var(--fondo2);border:1px solid var(--borde);border-radius:4px;
         max-width:860px;width:100%;max-height:88vh;overflow-y:auto;position:relative;
         transform:translateY(14px) scale(.99);transition:transform .22s ease}
.telonfondo.abierto .detalle{transform:none}
.cerrar{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
        background:rgba(0,0,0,.45);display:grid;place-items:center;font-size:19px;line-height:1}
.cerrar:hover{background:var(--oro);color:#211A0B}
.detalle .cuerpo{display:grid;grid-template-columns:206px minmax(0,1fr);gap:26px;
                 padding:clamp(20px,3vw,32px)}
.detalle img.cartel{width:100%;border-radius:3px;display:block;
                    transition:opacity .18s ease;
                    box-shadow:0 12px 30px rgba(0,0,0,.5)}
.cartel-btn{display:block;width:100%;padding:0;border-radius:3px;cursor:zoom-in;
            background:var(--fondo3);
            transition:transform .16s ease,box-shadow .16s ease}
/* Silueta mientras el afiche viaja: reserva el mismo espacio y el brillo
   que la recorre indica que está cargando, no que falló. */
.cartel-btn.cargando{
  background:linear-gradient(100deg,var(--fondo3) 25%,#3B3550 45%,var(--fondo3) 65%)
             0 0/220% 100%;
  animation:cargando 1.3s linear infinite}
@keyframes cargando{to{background-position:-220% 0}}
.cartel-btn:hover,.cartel-btn:focus-visible{transform:translateY(-3px)}
.cartel-btn:hover img.cartel,.cartel-btn:focus-visible img.cartel{
  box-shadow:0 16px 36px rgba(0,0,0,.55),0 0 0 1px rgba(231,184,90,.6)}
.detalle h2{font-family:var(--display);font-size:clamp(22px,3vw,30px);font-weight:800;
            letter-spacing:-.025em;line-height:1.06;margin:0 0 6px}
.detalle .lema{font-size:11px;font-family:var(--display);letter-spacing:.16em;
               text-transform:uppercase;color:var(--oro);margin-bottom:16px}
.detalle p.sin{font-size:15px;line-height:1.62;color:#E0DAE6;margin:0 0 20px}
/* minmax(0,1fr) y no minmax(130px,1fr): con un mínimo en px, la columna de
   contenido más largo se queda con ancho de más y las tres dejan de medir
   igual. El 0 obliga a que sean tercios exactos. */
.detalle dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
            gap:13px 20px;margin:0 0 4px}
@media (max-width:620px){
  .detalle dl{grid-template-columns:minmax(0,1fr)}
}
.detalle dt{font-family:var(--display);font-size:9.5px;letter-spacing:.14em;
            text-transform:uppercase;color:var(--tenue);margin-bottom:3px}
.detalle dd{margin:0;font-size:13.5px;line-height:1.42;color:var(--tinta)}

/* obras conectadas */
.detalle dt.separado{display:flex;align-items:center;gap:7px;margin-top:20px}
.info{padding:0;width:15px;height:15px;flex:none;color:var(--tenue);
      display:grid;place-items:center;border-radius:50%;
      transition:color .16s ease}
.info:hover,.info[aria-expanded="true"]{color:var(--oro)}
.info svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
/* Sin viñeta: el afiche en miniatura ya hace de marca de lista. */
.lista-conectadas{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.enlace-obra{display:flex;align-items:center;gap:9px;width:100%;
             font:inherit;color:var(--oro);text-align:left;padding:0}
.enlace-obra img{width:26px;height:34px;flex:none;display:block;
                 object-fit:cover;border-radius:2px;background:var(--fondo3);
                 box-shadow:0 2px 7px rgba(0,0,0,.45);
                 transition:transform .16s ease,box-shadow .16s ease}
.enlace-obra span{transition:color .16s ease}
.enlace-obra:hover span,.enlace-obra:focus-visible span{color:var(--tinta)}
.enlace-obra:hover img,.enlace-obra:focus-visible img{transform:scale(1.09);
  box-shadow:0 4px 12px rgba(0,0,0,.55),0 0 0 1px rgba(231,184,90,.6)}
/* Globo flotante anclado al botón. Se abre al pasar el mouse, al enfocar
   con teclado, y al pulsar —esto último es lo que lo hace usable en táctil,
   donde el hover no existe.
   Se ancla por la derecha porque el campo vive en la última columna: desde
   la izquierda se saldría del modal y forzaría scroll horizontal. */
.ayuda{position:relative;display:inline-flex}
.nota-universo{position:absolute;top:calc(100% + 9px);right:-6px;z-index:6;
  width:max-content;max-width:min(250px,60vw);
  font-family:var(--display);font-size:11.5px;line-height:1.5;
  letter-spacing:normal;text-transform:none;color:var(--suave);
  background:var(--fondo3);border:1px solid var(--borde);border-radius:4px;
  padding:9px 11px;box-shadow:0 12px 28px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .15s ease}
/* Una sola forma de abrirlo por dispositivo. Mezclar hover y clic hacía
   que al pulsar para cerrar el puntero siguiera encima y el globo no se
   fuera: el hover ganaba y parecía que el botón no respondía. */
@media (hover:hover){
  .ayuda:hover .nota-universo,
  .ayuda:focus-within .nota-universo{opacity:1;visibility:visible}
}
@media (hover:none){
  .ayuda.fijada .nota-universo{opacity:1;visibility:visible}
}
/* Este bloque va después de las reglas base a propósito: tiene la misma
   especificidad, así que si fuera antes lo pisarían.
   En una columna el botón queda muy a la izquierda, y anclarse a él saca
   el globo de la pantalla por un lado o por el otro. Se ancla al rótulo,
   que ocupa todo el ancho, y se centra debajo. */
@media (max-width:620px){
  .detalle dt.separado{position:relative}
  .ayuda{position:static}
  .nota-universo{left:50%;right:auto;transform:translateX(-50%);
                 max-width:min(280px,80vw)}
}

/* galería dentro del detalle */
/* min-width:0 es imprescindible: como celda de grilla, su mínimo automático
   es el ancho de su contenido, y la tira de fotos se lo imponía al modal
   entero. overflow-x deja hacer scroll, pero no cambia lo que el elemento
   le exige al contenedor. */
.galeria{grid-column:1/-1;min-width:0;padding:0 clamp(20px,3vw,32px) 4px}
.galeria .carrusel,.galeria .tiras{min-width:0}
.galeria h3{font-family:var(--display);font-size:10px;letter-spacing:.16em;
            text-transform:uppercase;color:var(--tenue);margin:0 0 11px;
            display:flex;align-items:center;gap:9px}
.galeria h3::after{content:"";flex:1;height:1px;background:var(--borde)}
/* Tira horizontal, igual que las filas del catálogo: con muchas fotos la
   grilla crecía hacia abajo y empujaba el pie fuera de la vista. */
.galeria .carrusel{position:relative}
.galeria .tiras{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;
                scrollbar-width:none;padding:3px 0}
.galeria .tiras::-webkit-scrollbar{display:none}
.galeria .tiras button{flex:0 0 clamp(118px,19vw,150px)}
/* top:50% exacto. El .remo base usa calc(50% + 6px) para compensar el <h2>
   que va dentro de .fila; aquí el título está fuera del carrusel y ese
   desplazamiento dejaba las flechas por debajo del centro de las fotos.
   El degradado usa --fondo2, que es el fondo del modal, no el de la página. */
.galeria .remo{top:50%;
               background:linear-gradient(90deg,rgba(36,32,48,.97),rgba(36,32,48,.35))}
.galeria .remo.der{background:linear-gradient(270deg,rgba(36,32,48,.97),rgba(36,32,48,.35))}
.galeria .carrusel:hover .remo{opacity:1}
/* Si las fotos caben todas, las flechas no tienen a dónde llevar. */
.galeria .carrusel.completo .remo{display:none}
/* Acotado a .tiras: sin eso también alcanzaba a las flechas del carrusel y
   les pisaba el position:absolute que necesitan para ir a los costados. */
.galeria .tiras button{padding:0;border-radius:3px;overflow:hidden;display:block;
                position:relative;
                transition:transform .16s ease,box-shadow .16s ease;background:var(--fondo3)}
.galeria .tiras button:hover,.galeria .tiras button:focus-visible{transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 0 1px rgba(231,184,90,.6)}
.galeria img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
/* Mismo pie en el detalle de obra y en 'sobre mí'. Sin padding lateral: en
   el modal lo pone .detalle, y en 'sobre mí' el margen ya lo da .sobre. */
.credito{font-family:var(--display);font-size:11px;color:var(--tenue);
         padding:18px 0 22px;line-height:1.5;
         border-top:1px solid var(--borde);margin-top:18px;
         display:flex;flex-wrap:wrap;align-items:flex-end;
         justify-content:space-between;gap:6px 24px}
.detalle .credito{padding-left:clamp(20px,3vw,32px);
                  padding-right:clamp(20px,3vw,32px)}
/* Pie de sitio: vive fuera de <main>, así sale en las dos vistas. */
.pie-global{max-width:1220px;margin:0 auto;
            padding-left:clamp(20px,5vw,64px);
            padding-right:clamp(20px,5vw,64px);
            padding-bottom:38px}
.lista-dato{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lista-dato li{position:relative;padding-left:14px}
.lista-dato li::before{content:"•";position:absolute;left:0;color:var(--oro)}
.lista-dato b{font-weight:600;color:var(--tinta)}

.credito p{margin:0}
.credito ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.credito li{position:relative;padding-left:15px}
.credito li::before{content:"•";position:absolute;left:0;color:var(--tenue)}
.credito .principal{color:var(--suave)}
.credito .principal::before{color:var(--oro)}
.credito .derechos{text-align:right}

/* ─────────────────── visor de fotos ─────────────────── */
.visor{position:fixed;inset:0;z-index:60;background:rgba(8,7,11,.95);
       display:grid;place-items:center;padding:clamp(16px,4vw,54px);
       opacity:0;pointer-events:none;transition:opacity .2s ease}
.visor.abierto{opacity:1;pointer-events:auto}
.visor figure{margin:0;max-width:100%;display:flex;flex-direction:column;
              align-items:center;gap:14px}
.visor img{max-width:100%;max-height:74vh;border-radius:3px;display:block;
           box-shadow:0 24px 60px rgba(0,0,0,.6)}
.visor figcaption{font-family:var(--display);font-size:12px;color:var(--suave);
                  letter-spacing:.05em;text-align:center}
.visor figcaption b{color:var(--tinta);font-weight:600}
.visor .contador{font-variant-numeric:tabular-nums;color:var(--tenue);margin-left:8px}
.visor .timon{background:rgba(38,34,50,.8)}

/* ─────────────────── sobre mí ─────────────────── */
.sobre{max-width:1220px;margin:0 auto;padding:clamp(38px,6vw,72px) clamp(20px,5vw,64px) 48px}
.sobre .rol{font-family:var(--display);font-size:10.5px;letter-spacing:.26em;
            text-transform:uppercase;color:var(--oro);margin-bottom:16px;
            display:flex;align-items:center;gap:10px}
.sobre .rol::before{content:"";width:26px;height:1px;background:var(--oro)}
.sobre h1{font-family:var(--display);font-size:clamp(38px,7vw,72px);line-height:.97;
          font-weight:800;letter-spacing:-.035em;margin:0 0 22px}
/* Encabezado de 'sobre mí': rol, nombre y cifras a la izquierda; retrato a
   la derecha. La biografía va debajo, a todo el ancho. */
.presenta{display:grid;grid-template-columns:1fr 300px;
          gap:clamp(24px,4vw,48px);align-items:center;margin-bottom:40px}
.retrato{width:100%;height:auto;display:block;border-radius:3px;
         box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07)}
@media (max-width:760px){
  .presenta{grid-template-columns:1fr}
  /* margin-inline al colapsar a una columna: sin esto la imagen se queda
     pegada a la izquierda de su celda en vez de centrarse. */
  .retrato{max-width:260px;margin-inline:auto}
}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;
        background:var(--borde);border:1px solid var(--borde);border-radius:3px;
        overflow:hidden;margin-bottom:44px}
.cifras div{background:var(--fondo);padding:18px 20px}
.cifras b{display:block;font-family:var(--display);font-size:28px;font-weight:800;
          letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:4px}
.cifras span{font-family:var(--display);font-size:10px;letter-spacing:.14em;
             text-transform:uppercase;color:var(--tenue)}
.sobre .biografia p{margin:0 0 16px;font-size:15.5px;line-height:1.66;
                    color:#DED7E4}
.sobre .biografia p:last-child{margin-bottom:0}
.llamada{margin-top:44px;padding:28px clamp(20px,3vw,34px);background:var(--fondo2);
         border-top:2px solid var(--oro);border-radius:0 0 3px 3px;display:flex;
         flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.llamada p{margin:0;font-size:17.5px;line-height:1.42;max-width:42ch}
/* El texto y el botón van juntos; los contactos se van al borde derecho.
   El botón es un mailto:, que no funciona para quien lee su correo en el
   navegador, así que la dirección va también en texto, copiable. */
.invita{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.contactos{list-style:none;margin:0;padding:0;display:grid;gap:7px;
           font-family:var(--display);font-size:12.5px}
.contactos li{display:flex;align-items:center;gap:9px}
.contactos .ico{width:15px;height:15px;flex:none;color:var(--oro);
                fill:none;stroke:currentColor;stroke-width:1.7;
                stroke-linecap:round;stroke-linejoin:round}
.contactos a{color:var(--suave);text-decoration:none;
             border-bottom:1px solid rgba(176,168,188,.3);
             transition:color .16s ease,border-color .16s ease}
.contactos a:hover{color:var(--oro);border-bottom-color:var(--oro)}

@media (max-width:860px){
  /* display:contents disuelve .dicho —que no tiene estilos propios— para
     que sus hijos sean celdas de .marco. Solo así el botón puede ir
     después del afiche, estando anidado en el HTML.
     El gap pasa a 0 porque cada elemento ya trae su propio margen. */
  /* El padding de abajo reserva la franja donde flotan los puntos y las
     flechas, que van posicionados contra el borde de .portada. */
  .marco{grid-template-columns:1fr;gap:0;padding-bottom:76px}
  .dicho{display:contents}
  /* Justificada solo acá: a una columna el margen derecho dentado se nota
     mucho más. Con guionado, porque en español justificar líneas cortas
     sin partir palabras abre huecos enormes entre ellas. */
  .sumario{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .afiche-portada{order:5;justify-self:center}
  #pVer{order:6;justify-self:center;margin-top:26px}
  /* En celular el afiche es lo que más vende: ocupa 70% del ancho, con
     tope para que en tablet no se desproporcione. */
  .afiche-portada{max-width:min(70vw,300px);margin-inline:auto}
  /* En una columna las flechas caían encima del botón y le robaban el
     toque. Bajan a la fila de los puntos, donde no pisan nada. */
  .timon{top:auto;bottom:8px;transform:none;width:38px;height:38px}
  .puntos{bottom:26px}
  .detalle .cuerpo{grid-template-columns:minmax(0,1fr)}
  .detalle img.cartel{max-width:min(62vw,250px);margin-inline:auto}
  .detalle p.sin,
  .sobre .biografia p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .tira{scroll-behavior:auto}
  /* La silueta se queda quieta, pero sigue reservando el espacio. */
  .cartel-btn.cargando{animation:none}
}

/* ─────────────────── accesibilidad ─────────────────── */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--oro);
        color:#211A0B;padding:10px 16px;font-family:var(--display);font-size:13px;
        border-radius:0 0 3px 0}
.saltar:focus{left:0}
.marca{text-decoration:none;color:inherit;cursor:pointer}

/* Los modales arrancan con [hidden]; la clase .abierto anima la entrada. */
.telonfondo,.visor{opacity:0}
.telonfondo.abierto,.visor.abierto{opacity:1}