/* ESTILOS DE LA WEB PÚBLICA. Orden: variables → logo → cabecera y menú → spinner → portada → pie → galería → visor → móvil.
   Colores y tipografías: variables de :root (primera regla). Lo específico de móvil está al final (@media max-width:760px). */
/* TIPOGRAFÍAS, servidas desde web/assets/fuentes/ (instrucciones en FUENTES_LOCALES.md). Son fuentes variables: un solo archivo por familia
   cubre todos los pesos. Se prueba primero el .woff2 (más ligero) y, si no está, el .ttf. Si faltan ambos, la web usa Georgia y la fuente del sistema.
   Si las «n» y «h» de Fraunces se ven inclinadas y las prefieres rectas, añade font-variation-settings:"WONK" 0 a .logo, .info-t, .cab h1 y .h-g. */
@font-face{font-family:"Fraunces";src:url("/assets/fuentes/fraunces.woff2") format("woff2"),url("/assets/fuentes/fraunces.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fuentes/dmsans.woff2") format("woff2"),url("/assets/fuentes/dmsans.ttf") format("truetype");font-weight:100 1000;font-style:normal;font-display:swap}
/* --bg fondo de la web · --cobalto color de fondo de la portada mientras carga · --serif y --sans tipografías ·
   --sombra sombra suave que da legibilidad al texto sobre fotos claras. */
:root{--bg:#0a0e1a;--cobalto:#0c1b4d;--serif:"Fraunces",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif;--sombra:drop-shadow(0 0 3px rgba(8,16,50,.35)) drop-shadow(0 1px 12px rgba(8,16,50,.4))}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:#fff;font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.oculto{position:absolute;width:0;height:0;overflow:hidden}

/* LOGO: texto 'analoga' con dos detalles dibujados con CSS: .tl = acento sobre la 2.ª «a» y .ring = anillo de la «o».
   Todo se mide en em, así que crece o se encoge con el font-size de .logo. */
.logo{position:relative;z-index:6;font:800 38px/1 var(--serif);letter-spacing:-.03em;white-space:nowrap;color:#fff}
.tl{position:relative;display:inline-block;line-height:1}
.tl::after{content:"";position:absolute;left:50%;top:.21em;width:.3em;height:.07em;background:#fff;border-radius:1px;transform:translateX(-50%)}
.ring{display:inline-block;box-sizing:border-box;position:relative;width:.54em;height:.54em;border:.15em solid #fff;border-radius:50%;margin:0 .02em}
.ring::after{content:"";position:absolute;left:50%;top:50%;width:.12em;height:.12em;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}

/* CABECERA Y MENÚ: en escritorio el menú va en línea y cada categoría despliega su lista (.sub) al pasar el ratón o con clic (clase .abierta, la pone site.js). */
.top{position:relative;z-index:5;display:flex;align-items:center;gap:72px;padding:36px 56px}
#menu>ul{list-style:none;margin:0;padding:0;display:flex;gap:40px}
.cat{position:relative}
.cat>button{background:none;border:0;border-bottom:1px solid transparent;padding:10px 0;color:#fff;font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.cat:hover>button,.cat:focus-within>button,.cat.abierta>button{border-bottom-color:#fff}
.sub{display:none;position:absolute;top:100%;left:-16px;z-index:7;min-width:200px;margin:0;padding:14px 16px;list-style:none;background:rgba(8,16,50,.9);flex-direction:column;gap:12px;font-size:14px}
.cat:hover>.sub,.cat:focus-within>.sub,.cat.abierta>.sub{display:flex}
.sub a:hover{text-decoration:underline}
.burger{display:none}

/* ANILLO DE CARGA: se muestra mientras carga la foto de portada o del visor. Se quita con la clase .ok (portada) o con el atributo hidden (visor). */
.spin{position:absolute;z-index:2;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:#fff;animation:giro 1.1s linear infinite}
.spin::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;border-radius:50%}
.spin[hidden]{display:none}
@keyframes giro{to{transform:rotate(360deg)}}

/* PORTADA: pantalla completa (100dvh respeta las barras del navegador móvil). Capas, de abajo arriba: foto, degradados oscuros (::before/::after y .vel) y texto. */
.home{position:relative;overflow-x:hidden}
.home .top{position:absolute;inset:0 0 auto}
.home .logo,.home .burger,.home .cat>button{filter:var(--sombra)}
.hero{position:relative;height:100vh;height:100dvh;min-height:720px;overflow:hidden;background:var(--cobalto)}
/* La foto empieza invisible (opacity 0) y aparece con un fundido al cargar (.hero.ok). filter:url(#duo) aplica el duotono
   definido en el SVG de web/index.php: ahí se cambian los colores. */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:url(#duo);opacity:0;transition:opacity .7s}
.hero.ok .hero-img{opacity:1}
.hero.ok .spin{display:none}
.hero::before,.hero::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.hero::before{top:0;height:220px;background:linear-gradient(rgba(8,16,50,.65),transparent)}
.hero::after{bottom:0;height:160px;background:linear-gradient(transparent,rgba(8,16,50,.65))}
.vel{position:absolute;z-index:1;left:0;top:0;bottom:0;width:62%;background:linear-gradient(90deg,rgba(8,16,50,.6),transparent);pointer-events:none}
/* Bloque de texto de la portada. top:52% = a media altura (o algo más abajo); width:50% = hasta la mitad de la pantalla.
   Para subirlo o bajarlo, cambia el top. */
.info{position:absolute;z-index:3;left:56px;top:52%;width:50%;filter:var(--sombra)}
.info-t{margin:0;max-width:480px;font:500 42px/1.1 var(--serif);letter-spacing:-.02em}
.info-d{margin:20px 0 0;max-width:680px}
.info-m{margin:24px 0 0;max-width:680px;font:500 12px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.con-linea{padding-top:14px;border-top:1px dashed rgba(255,255,255,.7)}
.m-item{white-space:nowrap}
.vacio{position:absolute;z-index:3;left:56px;top:50%;margin:0}

/* PIE: tres columnas (fecha · herramientas · autor) bajo una línea blanca. En la portada va fijo abajo (.home .pie); en las demás páginas, al final del contenido. */
.pie{display:grid;grid-template-columns:1fr auto 1fr;margin:72px 56px 0;padding:14px 0 32px;border-top:1px solid #fff;font:500 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.pie span:last-child{text-align:right}
.home .pie{position:absolute;z-index:3;left:0;right:0;bottom:32px;margin:0 56px;padding:14px 0 0;filter:var(--sombra)}

/* GALERÍA: cabecera de la página (.cab) y rejilla de fotos (.gal). */
.cab{padding:64px 56px 48px}
.cab h1{margin:0;font:500 52px/1.08 var(--serif);letter-spacing:-.02em}   /* sin ancho máximo: va en una línea y solo se parte si no cabe */
.cab .d{margin:22px 0 0;max-width:680px}
.cab .m{margin:24px 0 0;max-width:680px;font:500 12px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase}
/* FILAS JUSTIFICADAS solo con CSS. --h es la altura aproximada de cada fila (más alto = menos fotos por fila).
   El filtro de abajo (::after) evita que la última fila se estire hasta ocupar todo el ancho. */
.gal{--h:280px;display:flex;flex-wrap:wrap;gap:6px;padding:0 56px}
.gal::after{content:"";flex-grow:1e4}
/* Cada foto crece en proporción a su forma (flex-grow = proporción × 100) y parte de un ancho proporcional a ella (flex-basis),
   así todas las de una fila acaban con la misma altura. La <i> reserva el hueco con la proporción de la foto (padding-bottom). */
.ph{position:relative;display:block;flex-grow:calc(var(--r)*100);flex-basis:calc(var(--r)*var(--h));background:#141a2b;overflow:hidden}
.ph i{display:block;padding-bottom:calc(100%/var(--r))}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.ph:hover img{opacity:.85}

/* VISOR: capa a pantalla completa (la crea visor.js). .v-p y .v-s son las flechas; .v-cap, el texto bajo la foto. */
.visor{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);background:#05070d}
.visor[hidden]{display:none}
.v-top{flex:none;height:72px;padding:0 56px;display:flex;align-items:center;justify-content:space-between;font:500 12px var(--sans);letter-spacing:.12em}
.v-x{position:relative;width:40px;height:40px;background:none;border:0;cursor:pointer}
.v-x::before,.v-x::after{content:"";position:absolute;left:9px;right:9px;top:19px;height:1px;background:#fff}
.v-x::before{transform:rotate(45deg)}
.v-x::after{transform:rotate(-45deg)}
/* z-index:3 es imprescindible: .v-mid va después en el HTML y, sin él, se pintaría POR ENCIMA de las flechas y se llevaría
   los clics (al pulsarlas se cerraba el visor en lugar de cambiar de foto). */
.v-p,.v-s{position:absolute;z-index:3;top:calc(50% - 40px);width:40px;height:40px;background:none;border:0;cursor:pointer}
.v-p{left:24px}
.v-s{right:24px}
.v-p::before,.v-s::before{content:"";position:absolute;top:10px;width:18px;height:18px;border-left:1px solid #fff;border-bottom:1px solid #fff}
.v-p::before{left:15px;transform:rotate(45deg)}
.v-s::before{left:5px;transform:rotate(-135deg)}
.v-mid{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 96px 32px}
.v-col{display:flex;flex-direction:column;width:fit-content;max-width:100%}
.v-img{display:block;opacity:0;transition:opacity .3s}
.v-col.listo .v-img{opacity:1}
.v-cap{width:0;min-width:100%;padding-top:20px}
.v-cap h2{margin:0;font:500 22px/1.2 var(--serif)}
.v-cap p{margin:8px 0 0;max-width:560px;font-size:14px;line-height:1.5}
.v-cap .vm{margin:16px 0 0;font:500 12px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.v-cap .vm.con-linea{padding-top:12px}
/* ZOOM del visor (clase .zoom en .visor, la pone visor.js): la foto se ve a tamaño completo y .v-mid pasa a ser una zona con barras de
   desplazamiento. cursor:zoom-in / zoom-out muestran la lupa con + o con -. El texto bajo la foto se oculta mientras hay zoom. */
.v-img.zoomable{cursor:zoom-in}
.visor.zoom .v-img{max-width:none;cursor:zoom-out}
.visor.zoom .v-mid{display:flex;align-items:flex-start;justify-content:flex-start;overflow:auto;padding:0}
.visor.zoom .v-col{width:max-content;max-width:none;margin:auto}
.visor.zoom .v-cap{display:none}

@media (prefers-reduced-motion:reduce){.spin{animation:none;border-color:#fff}.hero-img,.v-img,.ph img{transition:none}}

/* MÓVIL (pantallas de hasta 760 px): hamburguesa, menú a pantalla completa, portada más compacta, pie en dos filas y filas de galería más bajas. */
@media (max-width:760px){
  .top{justify-content:space-between;gap:0;padding:56px 20px 0}
  .logo{font-size:32px}
  .burger{display:block;position:relative;z-index:6;width:44px;height:44px;background:none;border:0;cursor:pointer}
  .burger::before,.burger::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:#fff;transition:transform .2s}
  .burger::before{top:16px}
  .burger::after{top:27px}
  .burger[aria-expanded=true]::before{top:21px;transform:rotate(45deg)}
  .burger[aria-expanded=true]::after{top:21px;transform:rotate(-45deg)}
  #menu{display:none;position:fixed;inset:0;z-index:4;padding:110px 8vw 40px;background:rgba(8,16,50,.96);overflow:auto}
  #menu.abierto{display:block}
  #menu>ul{flex-direction:column;gap:6px}
  .cat>button{padding:14px 0;font-size:14px}
  .cat:hover>.sub,.cat:focus-within>.sub{display:none}
  .cat.abierta>.sub{display:flex}
  .sub{position:static;min-width:0;padding:6px 0 14px;background:none}
  .hero{min-height:560px}
  .vel{top:40%;width:100%;background:linear-gradient(transparent,rgba(8,16,50,.7) 45%)}
  .info{left:20px;right:20px;top:45%;width:auto}
  .info-t{max-width:300px;font-size:28px}
  .info-d{font-size:14px}
  .vacio{left:20px}
  .pie{grid-template-columns:1fr 1fr;row-gap:8px;margin:44px 20px 0;padding:12px 0 40px}
  .pie span:nth-child(2){grid-column:1/3;grid-row:1;text-align:center}
  .pie span:first-child,.pie span:last-child{grid-row:2}
  .home .pie{bottom:44px;margin:0 20px;padding:12px 0 0}
  .cab{padding:44px 20px 32px}
  .cab h1{font-size:30px}
  .cab .d{font-size:14px}
  .gal{--h:150px;gap:4px;padding:0 20px}
  .v-top{height:56px;padding:0 12px 0 20px}
  .v-mid{padding:0 0 16px}
  .v-cap{padding:20px 20px 0}
  .v-p,.v-s{top:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .v-p{left:12px}
  .v-s{right:12px}
}