/*!
 * Portón & Construcción — estilos de la página GALERÍA para WordPress + Elessi.
 * Generado desde preview/galeria.html + preview/assets/interior.css.
 * NO editar a mano: se regenera.
 *
 * Es autónomo: no depende de porton-home.css ni de porton-nosotros.css.
 * De interior.css sólo se trae lo que esta página usa (banner, caja, titulares,
 * cierre, barra de avance y apariciones). El relato, las cifras y los pilares
 * de Nosotros no están: aquí no existen.
 *
 * Todo va acotado bajo `.pc-galeria` para no pisar los estilos de Elessi.
 * Cabecera, menú y pie no están aquí: se montan aparte.
 */

/* ==========================================================================
   RAÍZ — tipografías de marca y tipografía base
   En la maqueta esto lo ponía el <body>. Al acotar hay que declararlo en el
   contenedor, o la página heredaría la tipografía de Elessi.
   ========================================================================== */
.pc-galeria{
  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  font-family:var(--font-body);
  color:#0A0A0A;
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* ==========================================================================
   ARMADURA CONTRA EL TEMA ANFITRIÓN
   La maqueta daba por hecho que color, tipografía e interlineado se heredaban
   del <body>. Elessi define `h1,h2,h3`, `p` y `a` con valores propios, y esas
   reglas ganan a la herencia aunque nuestro CSS esté acotado: la herencia no
   compite en especificidad. Este bloque devuelve la herencia dentro de
   `.pc-galeria` y va PRIMERO, para que las reglas reales lo sobrescriban.
   ========================================================================== */
.pc-galeria,.pc-galeria *,.pc-galeria *::before,.pc-galeria *::after{box-sizing:border-box}
.pc-galeria h1,.pc-galeria h2,.pc-galeria h3,.pc-galeria h4,.pc-galeria h5,.pc-galeria h6,
.pc-galeria p,.pc-galeria span,.pc-galeria li,.pc-galeria dt,.pc-galeria dd,
.pc-galeria small,.pc-galeria strong,.pc-galeria b,.pc-galeria em,.pc-galeria i,
.pc-galeria label,.pc-galeria legend,.pc-galeria figcaption,.pc-galeria blockquote,
.pc-galeria th,.pc-galeria td,.pc-galeria a{
  /* Sólo estas tres. `letter-spacing`, `text-transform` y `text-shadow` NO se
     tocan: el diseño los hereda a propósito (el <em> rojo dentro de un titular
     en mayúsculas, o el <i> del pie de cada pieza). Neutralizarlos rompía ese
     heredado. */
  color:inherit;font-family:inherit;line-height:inherit;margin:0}
.pc-galeria a{text-decoration:none}
.pc-galeria ul,.pc-galeria ol{list-style:none;margin:0;padding:0}
/* `border-radius:0` no es de adorno: muchos temas de WooCommerce redondean
   todas las imágenes, y aquí el mosaico es de esquinas rectas. Sin esta
   línea las quince piezas saldrían con las esquinas del tema. */
.pc-galeria img{max-width:100%;height:auto;display:block;border:0;border-radius:0}
.pc-galeria video{display:block;border:0;border-radius:0}
/* El mosaico entero y los tres controles del visor son <button>. Elessi (y
   casi cualquier tema de tienda) los pinta con fondo, borde, sombra, radio,
   relleno y alto mínimo propios. Sin este reseteo cada pieza de la galería
   saldría enmarcada y las flechas del visor, deformadas.
   `padding:0` importa especialmente: el relleno del tema encogía el recuadro
   de 46 px de las flechas hasta dejar el icono sin sitio.
   Ojo con lo que NO está: `min-width:0`. Se probó y se quitó — los filtros son
   elementos flex y con `min-width:0` podían encogerse por debajo de su texto
   y recortar la palabra «VÍDEOS» en pantallas estrechas.
   `height:auto` es imprescindible: Elessi declara `button{height:42px}` y, sin
   anularlo, cada pieza del mosaico (overflow:hidden) quedaba recortada a una
   franja de 42 px y la galería parecía vacía. */
.pc-galeria button{font:inherit;color:inherit;background:none;border:0;
  border-radius:0;box-shadow:none;padding:0;min-height:0;height:auto;
  text-transform:none;letter-spacing:normal;
  -webkit-appearance:none;appearance:none}
.pc-galeria button:hover,.pc-galeria button:focus{box-shadow:none}

/* Base de titulares. En la maqueta venía de porton.css; aquí se replica para
   que los <h*> que no acota el sistema `.ns` tengan el mismo interletrado.
   Va antes que las reglas reales, que la sobrescriben. */
.pc-galeria h1,.pc-galeria h2,.pc-galeria h3,.pc-galeria h4{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;
  margin:0;font-weight:800;line-height:1.1}

.pc-galeria .ns{
  --papel:#FFFFFF;          /* fondo base */
  --papel-2:#F4F4F4;        /* banda alterna */
  --papel-3:#EDEDED;
  --filete:rgba(0,0,0,.12);
  --filete-fuerte:rgba(0,0,0,.26);
  --texto:#141414;
  --texto-2:#5A5A5A;
  --alto:#E4221D;           /* rojo de marca: titulares, filetes, iconos */
  --alto-txt:#B81813;       /* misma familia, oscurecida para texto pequeño (AA) */
  --medida:1320px;          /* más ancho que la home: aquí manda la imagen */
  --canal:clamp(20px,5vw,64px);
  background:var(--papel);
  color:var(--texto);
}
.pc-galeria .ns *{box-sizing:border-box}
.pc-galeria .ns ::selection{background:var(--alto);color:#fff}
.pc-galeria .ns-caja{width:100%;max-width:var(--medida);margin:0 auto;padding-left:var(--canal);padding-right:var(--canal)}
.pc-galeria .ns-caja--ancha{max-width:1680px}
/* ---------- Ritmo vertical ---------- */
.pc-galeria .ns-bloque{position:relative;padding-top:clamp(72px,10vw,144px);padding-bottom:clamp(72px,10vw,144px)}
/* ---------- Titulares ---------- */
.pc-galeria .ns-titular{font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;line-height:.94;letter-spacing:-.01em;
  font-size:clamp(2.25rem,6.2vw,4.75rem);margin:0;color:#0B0B0B;text-wrap:balance}
.pc-galeria .ns-titular em{color:var(--alto);font-style:italic}
.pc-galeria .ns-entrada{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.62;color:var(--texto-2);
  max-width:62ch;margin:clamp(20px,2.5vw,28px) 0 0}
/* ==========================================================================
   1. BANNER DE PÁGINA
   Una franja, no una portada: sólo el nombre de la sección sobre la foto,
   con el filete rojo abajo. El contenido empieza sin hacer scroll.
   ========================================================================== */
.pc-galeria .ns-banner{position:relative;overflow:hidden;background:#000;
  min-height:clamp(190px,20vw,280px);display:grid;place-items:center;
  border-bottom:3px solid var(--alto)}
.pc-galeria .ns-banner__foto{position:absolute;inset:0;z-index:0}
.pc-galeria .ns-banner__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.pc-galeria .ns-banner__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,8,.62) 0%,rgba(8,8,8,.50) 50%,rgba(8,8,8,.68) 100%)}
.pc-galeria .ns-banner__in{position:relative;z-index:2;text-align:center;
  padding:clamp(48px,7vw,72px) 0}
.pc-galeria .ns-banner h1{font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;line-height:1;letter-spacing:.01em;margin:0;color:#fff;
  font-size:clamp(2rem,5.4vw,4rem);
  text-shadow:0 2px 18px rgba(0,0,0,.55);
  animation:ns-entrar .7s cubic-bezier(.16,1,.3,1) both}
@keyframes ns-entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ==========================================================================
   7. CIERRE
   ========================================================================== */
.pc-galeria .ns-cierre{position:relative;background:var(--alto);color:#fff;overflow:hidden;
  padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px)}
.pc-galeria .ns-cierre::before{content:"";position:absolute;right:-8%;top:-40%;width:60%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 65%)}
.pc-galeria .ns-cierre__in{position:relative;z-index:1;display:grid;gap:clamp(26px,4vw,44px);align-items:center}
@media(min-width:940px){.pc-galeria .ns-cierre__in{grid-template-columns:1.25fr .75fr}}
.pc-galeria .ns-cierre h2{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.5rem);line-height:.98;margin:0;color:#fff;max-width:18ch}
.pc-galeria .ns-cierre p{margin:16px 0 0;color:#fff;font-size:1.0625rem;line-height:1.6;max-width:48ch}
.pc-galeria .ns-acciones{display:flex;flex-wrap:wrap;gap:14px}
.pc-galeria .ns-btn{display:inline-flex;align-items:center;gap:10px;padding:17px 28px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1rem;text-decoration:none;border:2px solid transparent;
  transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease}
.pc-galeria .ns-btn svg{width:17px;height:17px}
.pc-galeria .ns-btn--solido{background:#0B0B0B;color:#fff;border-color:#0B0B0B}
.pc-galeria .ns-btn--solido:hover{transform:translateY(-3px);background:#fff;color:#0B0B0B;border-color:#fff}
/* Contorno oscuro por defecto (va sobre papel); dentro de la banda roja se invierte. */
.pc-galeria .ns-btn--linea{border-color:#0B0B0B;color:#0B0B0B}
.pc-galeria .ns-btn--linea:hover{transform:translateY(-3px);background:#0B0B0B;color:#fff}
.pc-galeria .ns-cierre .ns-btn--linea{border-color:rgba(255,255,255,.7);color:#fff}
.pc-galeria .ns-cierre .ns-btn--linea:hover{background:#fff;color:var(--alto);border-color:#fff}
/* ---------- Barra de avance de lectura ---------- */
.pc-galeria .ns-avance{position:fixed;left:0;top:0;height:3px;width:0;background:var(--alto);z-index:120;
  transition:width .12s linear;pointer-events:none}
/* ---------- Aparición al entrar en pantalla (propia de la página) ---------- */
.pc-galeria .ns [data-sube]{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.pc-galeria .ns [data-sube].is-visto{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.pc-galeria .ns *,.pc-galeria .ns *::before,.pc-galeria .ns *::after{animation:none!important;transition-duration:.01ms!important}
.pc-galeria .ns [data-sube]{opacity:1;transform:none}}

/* ==========================================================================
   GALERÍA — mosaico, filtros y visor (era el <style> de la maqueta)
   ========================================================================== */
/* ==========================================================================
   Galería — sólo lo propio de esta página. El resto viene de interior.css.

   Mosaico con `columns`: cada pieza conserva su proporción real y las
   columnas se rellenan solas. Es el único modo de conseguir el mosaico de
   alturas distintas sin una línea de JavaScript midiendo nada.
   ========================================================================== */
/* ---------- Filtros ---------- */
.pc-galeria .gl-filtros{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(26px,3vw,36px) 0 0}
.pc-galeria .gl-filtro{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.9375rem;line-height:1;
  padding:12px 20px;border:1px solid var(--filete);background:var(--papel);
  color:var(--texto-2);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease}
.pc-galeria .gl-filtro:hover{border-color:var(--alto);color:#0B0B0B}
.pc-galeria .gl-filtro[aria-pressed="true"]{background:#0B0B0B;border-color:#0B0B0B;color:#fff}
.pc-galeria .gl-filtro:focus-visible{outline:2px solid var(--alto);outline-offset:3px}
/* El recuento («15 trabajos») no se ve: el cliente lo pidió fuera. Se queda en
   el DOM, invisible, porque es la región `role="status"` que anuncia a los
   lectores de pantalla cuántas piezas quedan al pulsar un filtro. Sin ella,
   quien no ve la pantalla pulsa «Fotos» y no recibe ninguna confirmación. */
.pc-galeria .gl-cuenta{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}
/* ---------- Mosaico ---------- */
.pc-galeria .gl-mosaico{margin-top:clamp(20px,2.4vw,28px);
  columns:1;column-gap:clamp(12px,1.6vw,20px)}
@media(min-width:620px){.pc-galeria .gl-mosaico{columns:2}}
/* Tres columnas como máximo: con cuatro, cada pieza baja de ~320 px y las
   fotos de portones dejan de leerse. */
@media(min-width:1000px){.pc-galeria .gl-mosaico{columns:3}}
.pc-galeria .gl-item{display:block;width:100%;padding:0;border:0;background:#111;
  position:relative;overflow:hidden;cursor:pointer;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 clamp(12px,1.6vw,20px)}
.pc-galeria .gl-item[hidden]{display:none}
.pc-galeria .gl-item img{display:block;width:100%;height:auto;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.pc-galeria .gl-item video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.pc-galeria .gl-item:hover img,.pc-galeria .gl-item:focus-visible img{transform:scale(1.04)}
.pc-galeria .gl-item:focus-visible{outline:3px solid var(--alto);outline-offset:3px}
/* Franja inferior con el título. Degradado, no color plano: sobre una foto
   clara un panel sólido tapa demasiado. */
.pc-galeria .gl-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:clamp(30px,4vw,44px) clamp(14px,1.8vw,18px) clamp(12px,1.6vw,16px);
  background:linear-gradient(180deg,rgba(8,8,8,0) 0%,rgba(8,8,8,.82) 72%,rgba(8,8,8,.92) 100%);
  text-align:left;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.pc-galeria .gl-item:hover .gl-pie,.pc-galeria .gl-item:focus-visible .gl-pie{opacity:1;transform:none}
.pc-galeria .gl-pie b{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:1rem;line-height:1.15;color:#fff}
.pc-galeria .gl-pie i{font-style:normal;font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--alto);padding:3px 7px}
/* En táctil no hay hover: la franja se queda visible */
@media(hover:none){.pc-galeria .gl-pie{opacity:1;transform:none}}
/* Botón de reproducción */
.pc-galeria .gl-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(46px,5vw,58px);aspect-ratio:1;border-radius:50%;
  background:var(--alto);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pc-galeria .gl-play svg{width:42%;height:42%;margin-left:8%}
.pc-galeria .gl-item:hover .gl-play,.pc-galeria .gl-item:focus-visible .gl-play{transform:translate(-50%,-50%) scale(1.12)}
.pc-galeria .gl-item--video.is-corriendo .gl-play,.pc-galeria .gl-item--video.is-corriendo img{opacity:0}
/* ---------- Visor a pantalla completa ---------- */
.pc-galeria .gl-visor{position:fixed;inset:0;z-index:2000000;display:none;
  background:rgba(8,8,8,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pc-galeria .gl-visor[open]{display:grid;grid-template-rows:auto 1fr auto}
.pc-galeria .gl-visor__barra{display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:clamp(14px,2vw,22px) clamp(16px,3vw,32px)}
.pc-galeria .gl-visor__titulo{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(.9375rem,1.8vw,1.25rem);color:#fff;margin:0}
.pc-galeria .gl-visor__x,.pc-galeria .gl-visor__nav{width:46px;height:46px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);background:none;color:#fff;cursor:pointer;
  transition:background .2s ease,border-color .2s ease}
.pc-galeria .gl-visor__x:hover,.pc-galeria .gl-visor__nav:hover{background:var(--alto);border-color:var(--alto)}
.pc-galeria .gl-visor__x:focus-visible,.pc-galeria .gl-visor__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pc-galeria .gl-visor__x svg,.pc-galeria .gl-visor__nav svg{width:20px;height:20px}
/* Pistas `minmax(0,1fr)`: con la fila `auto` por defecto el `max-height:100%`
   de la foto no se resolvía y las imágenes altas tapaban las flechas. */
.pc-galeria .gl-visor__medio{display:grid;place-items:center;padding:0 clamp(12px,3vw,28px);min-height:0;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);overflow:hidden}
.pc-galeria .gl-visor__medio img,.pc-galeria .gl-visor__medio video{max-width:100%;max-height:100%;
  width:auto;height:auto;display:block;object-fit:contain}
.pc-galeria .gl-visor__pie{display:flex;justify-content:center;align-items:center;gap:clamp(14px,3vw,26px);
  padding:clamp(14px,2vw,22px)}
.pc-galeria .gl-visor__cuenta{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);min-width:5ch;text-align:center}
body.gl-bloqueado{overflow:hidden}
@media (prefers-reduced-motion: reduce){.pc-galeria .gl-item img,.pc-galeria .gl-pie,.pc-galeria .gl-play{transition-duration:.01ms}}

/* ==========================================================================
   AJUSTES DE ANFITRIÓN
   Tres valores que en la maqueta venían «de regalo» del navegador y que aquí
   hay que escribir, porque dentro de WordPress ya no llegan.
   ========================================================================== */

/* La etiqueta roja «VÍDEO» del pie no declaraba interlineado: heredaba el
   `normal` que el navegador da por defecto a los <button>. Al devolver la
   herencia dentro de .pc-galeria pasa a heredar 1.6 y la etiqueta crecía de
   18 a 24 px de alto. Se fija al mismo 1.15 que ya usa el titular de al lado. */
.pc-galeria .gl-pie i{line-height:1.15}

/* El <i> del pie también hereda la cursiva de Elessi si el tema la declara
   en `i`; el diseño lo quiere recto. Ya lo decía la regla original, se repite
   aquí por si el tema gana por especificidad con `i,em{font-style:italic}`. */
.pc-galeria .gl-pie i{font-style:normal}