:root{
  --tinta:#101113;
  --superficie:#181A1C;
  --superficie-alta:#212427;
  --hueso:#EAE8E4;
  --apagado:#939599;
  --acento:#D93F14;

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --texto:'Instrument Sans',system-ui,sans-serif;

  --t-grande:clamp(2.7rem,7.5vw,6rem);
  --t-seccion:clamp(1.9rem,4.2vw,3.3rem);

  --margen:clamp(1.25rem,5vw,5.5rem);
  --ancho:1440px;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth}
body{
  background:var(--tinta);color:var(--hueso);
  font-family:var(--texto);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.wrap{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
h1,h2{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.035em}
h1{font-size:var(--t-grande)}
h2{font-size:var(--t-seccion)}
p{color:#BFC1C4}

.ph{display:block;background-color:var(--superficie-alta);background-size:cover;background-position:center;position:relative}
.ph::after{
  content:attr(data-ph);position:absolute;left:0;bottom:0;padding:.75rem 1rem;
  font-size:.72rem;letter-spacing:.04em;color:#6E7175;
}
.tarjeta{display:block;width:100%}

/* Campo trampa contra spam: fuera de pantalla, no display:none (los bots
   simples lo saltan si está oculto así). Invisible también para lectores
   de pantalla. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.leyenda{padding-top:.7rem;font-size:.9rem;color:var(--apagado)}
.leyenda b{display:block;color:var(--hueso);font-weight:500}

/* Contador de fotos sobre la portada. Sin caja ni borde: el contraste
   sobre cualquier foto lo da la sombra de texto, no un fondo. */
.contador-fotos{
  position:absolute;right:.85rem;bottom:.85rem;z-index:1;
  font-size:.76rem;letter-spacing:.02em;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.6);
  pointer-events:none;
}

.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:68px;transition:background .25s}
.nav.fondo{background:rgba(16,17,19,.94);backdrop-filter:blur(12px)}
.nav-in{display:flex;align-items:center;gap:2.25rem;height:68px}
.logo{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.03em}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-size:.93rem}
.nav-links a{color:var(--apagado)}
.nav-links a:hover{color:var(--hueso)}
.cta{
  background:var(--acento);color:#fff;font-weight:500;font-size:.93rem;
  padding:.6rem 1.15rem;display:inline-block;transition:filter .18s,transform .18s;
}
.cta:hover{filter:brightness(1.1)}
.cta:active{transform:translateY(1px)}
.cta.hueca{background:none;color:var(--hueso);box-shadow:inset 0 0 0 1px #4A4D51}
.cta.hueca:hover{box-shadow:inset 0 0 0 1px var(--hueso)}
.nav .cta{margin-left:auto}
.nav-links ~ .cta{margin-left:0}

footer{padding-block:2.5rem;font-size:.86rem;color:var(--apagado)}
.pie{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between}
.pie div{display:flex;gap:1.25rem;flex-wrap:wrap}
.pie a:hover{color:var(--hueso)}

.visor{
  /* El reset global (margin:0 en *) anula el margin:auto con el que el
     navegador centra <dialog> por defecto. En vez de recentrar a mano
     con transform (que en algunos motores complica el cierre de un
     <dialog> que vive en el "top layer"), se restaura justo lo que el
     reset rompió: inset:0 más margin:auto, la misma técnica nativa. */
  position:fixed;inset:0;margin:auto;
  border:none;padding:0;background:var(--tinta);color:var(--hueso);
  width:min(920px,92vw);height:fit-content;max-height:88dvh;
}
/* display:flex solo mientras open está presente. Puesto en .visor a
   secas, esta regla (una clase) gana por especificidad a la regla del
   navegador que oculta un <dialog> sin open, así que al cerrar se
   quita el atributo pero el recuadro se queda pintado igualmente: el
   botón Cerrar sigue visible, sin fondo oscurecido, y ya no hace nada.
   Atado a [open], deja de competir en cuanto se cierra y el
   comportamiento nativo de ocultarlo vuelve a mandar. */
.visor[open]{display:flex;flex-direction:column}
.visor::backdrop{background:rgba(16,17,19,.85)}
/* El botón Cerrar es hermano de .visor-scroll, no descendiente: es la
   única caja con scroll propio. Así ninguna foto puede pintarse nunca
   por delante, pase lo que pase con el scroll u orden de pintado, y el
   botón no se mueve porque no comparte contenedor de scroll con ellas.
   Fondo opaco porque el contraste no puede depender de qué foto haya
   detrás. */
.visor-cerrar{
  position:absolute;top:1rem;right:var(--margen);z-index:1;
  padding:.5rem 1rem;background:var(--tinta);color:var(--hueso);font-size:.85rem;
  box-shadow:inset 0 0 0 1px #3D4145;
}
.visor-cerrar:hover{box-shadow:inset 0 0 0 1px var(--hueso)}
/* Foco visible pero sin el recuadro naranja del acento: mismo lenguaje
   que el hover, borde claro en vez de un color que no pega con un
   control de cerrar. */
.visor-cerrar:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--hueso)}
.visor-scroll{overflow-y:auto;min-height:0}
.visor-fotos{display:flex;flex-direction:column;gap:clamp(.7rem,1.6vw,1.4rem);padding-inline:var(--margen);padding-top:clamp(3.5rem,9vw,4.5rem)}
.visor-fotos .ph{width:100%}
.visor-fotos img{width:100%;height:auto;display:block}
.visor-info{padding:clamp(1.5rem,3vw,2.5rem) var(--margen) clamp(2rem,4vw,3rem)}
.visor-info h2{margin-bottom:.6rem}
.visor-linea{color:var(--apagado);margin-bottom:1rem}
.visor-descripcion{max-width:62ch}
.visor-video{margin-top:1.5rem}

@media(max-width:900px){
  .nav-links{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important}
  html{scroll-behavior:auto}
}