/* Galería (/galeria/) — mosaico editorial, filtros y carga progresiva.
Se carga SOLO en esta página (ver el encolado de includes/galeria.php).
El lightbox no se estiliza aquí: es el nativo de Elementor. */
/* Mismo fondo de hiedra oscurecida que el resto de secciones del sitio. Se repite
aquí en vez de añadir .ecc-gal a la lista de site.css para no tener que resubir
ese archivo (113 KB compartidos con otras sesiones). Si algún día cambia la
textura global, cambiar también estas tres líneas. */
/* La textura mide 900x1195. Con 'cover' en una sección tan alta como esta se ampliaba
2,3 veces y el fondo salía mucho más claro y verde que el resto del sitio: se deja a
su tamaño real y se repite, que es como se ve en las secciones cortas. */
.ecc-gal {
background-image: linear-gradient(rgba(27,23,18,.88), rgba(27,23,18,.88)), url('../img/textura-hiedra.jpg');
background-size: cover, 900px auto;
background-repeat: no-repeat, repeat;
background-position: center, center top;
padding: 80px 32px;
}
.ecc-gal__inner { max-width: 1180px; margin: 0 auto; }
/* ---------- Filtros ---------- */
.ecc-gal__filtros {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 34px;
}
/* OJO con la especificidad: reset.css del tema trae
`[type="button"], [type="submit"], button { color:#c36; border:1px solid #c36 }`.
El selector de atributo pesa lo mismo que una clase (0,1,0) y esa hoja carga DESPUÉS
que esta, así que `.ecc-gal__filtro` a secas perdía y los filtros salían en rosa.
Por eso van anidados bajo .ecc-gal: (0,2,0) gana sin necesidad de !important. */
.ecc-gal .ecc-gal__filtro {
font-family: 'Space Mono', monospace;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ecc-hueso);
background: transparent;
border: 1px solid rgba(239,230,216,.32);
border-radius: 2px;
padding: 10px 18px;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ecc-gal .ecc-gal__filtro:hover { border-color: var(--ecc-hueso); }
/* Objetivo táctil de 44px (2026-08-05): medían 42 de alto, 2 por debajo. Solo en punteros
gruesos; con ratón el filtro se queda igual. El padding horizontal no cambia. */
@media (pointer: coarse), (max-width: 780px) {
.ecc-gal .ecc-gal__filtro { min-height: 44px; }
}
.ecc-gal .ecc-gal__filtro.is-activo {
background: var(--ecc-ambar);
border-color: var(--ecc-ambar);
color: var(--ecc-noche);
}
/* El foco tiene que verse sobre fondo oscuro: el outline por defecto del navegador
casi desaparece contra la hiedra. */
.ecc-gal .ecc-gal__filtro:focus-visible,
.ecc-gal__enlace:focus-visible,
.ecc-gal__mas #ecc-gal-mas:focus-visible {
outline: 2px solid var(--ecc-ambar);
outline-offset: 3px;
}
/* ---------- Títulos de momento ---------- */
.ecc-gal__momento {
grid-column: 1 / -1;
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(1.4rem, 2.6vw, 2rem);
color: var(--ecc-hueso);
margin: 26px 0 2px;
display: flex;
align-items: center;
gap: 18px;
}
.ecc-gal__momento::after {
content: "";
flex: 1;
height: 1px;
background: rgba(239,230,216,.22);
}
.ecc-gal__momento:first-child { margin-top: 0; }
/* ---------- Mosaico ----------
Rejilla de 6 columnas con alturas de fila fijas: los huecos de cada foto están
reservados desde el primer píxel, así que no hay saltos de maquetación al cargar.
'dense' rellena los huecos que dejan las piezas grandes sin descolocar la lectura. */
.ecc-gal__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: clamp(58px, 5.6vw, 88px);
grid-auto-flow: row dense;
gap: 12px;
}
.ecc-gal__item {
grid-column: span 2;
grid-row: span 3;
margin: 0;
position: relative;
overflow: hidden;
border-radius: 2px;
}
.ecc-gal__item--alto { grid-row: span 5; }
.ecc-gal__item--grande { grid-column: span 4; grid-row: span 5; }
.ecc-gal__item.is-oculta { display: none; }
.ecc-gal__enlace { display: block; width: 100%; height: 100%; }
.ecc-gal__img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.ecc-gal__item:hover .ecc-gal__img { transform: scale(1.04); }
/* Etiqueta discreta al pasar el cursor. Nunca en táctil (donde 'hover' no existe y
se quedaría pegada), ni tapando la foto de forma permanente. */
.ecc-gal__pie {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 26px 14px 12px;
font-family: 'Archivo', sans-serif;
font-size: 13.5px;
line-height: 1.35;
color: var(--ecc-hueso);
background: linear-gradient(180deg, rgba(27,23,18,0) 0%, rgba(27,23,18,.85) 100%);
opacity: 0;
transform: translateY(8px);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.ecc-gal__item:hover .ecc-gal__pie,
.ecc-gal__enlace:focus-visible .ecc-gal__pie { opacity: 1; transform: none; }
}
@media (hover: none) {
.ecc-gal__pie { display: none; }
}
/* ---------- Fotos de fondo del hero y del cierre ----------
Van como para poder llevar srcset. Se colocan detrás del velo (::before del
propio .ecc-subhero / .ecc-news--photo) y del texto, sin tocar esas clases del sitio. */
.ecc-gal-hero,
.ecc-gal-cierre { position: relative; overflow: hidden; }
/* Anidadas bajo su sección por especificidad: site.css trae
`.ecc-news--photo > * { position: relative; z-index: 1 }`, que empata con una clase
suelta (0,1,0) y gana por cargarse después — la foto del cierre se quedaba en el flujo
en vez de irse al fondo. Mismo caso que los botones y reset.css. */
.ecc-gal-hero .ecc-gal-hero__img,
.ecc-gal-cierre .ecc-gal-cierre__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* En móvil el hero es casi cuadrado y el recorte se come los laterales: se ancla el
encuadre algo por debajo del centro, que es donde están el escenario y la gente. */
@media (max-width: 780px) {
.ecc-gal-hero .ecc-gal-hero__img { object-position: 50% 62%; }
}
.ecc-gal-hero::before,
.ecc-gal-cierre::before { z-index: 1; }
/* Velo propio del hero de la galería. El del resto de subcabeceras va de transparente
arriba a 88 % abajo, y aquí apagaba justo lo mejor de la acuarela: la banda, las
sombrillas y el público, que están en la mitad inferior. Se cambia por un velo
LATERAL —oscuro donde va el texto, limpio a la derecha— más un poso suave abajo.
Doble clase a propósito: site.css define .ecc-subhero::before y carga después, así que
un selector de la misma especificidad perdería. */
.ecc-subhero.ecc-gal-hero::before {
background:
linear-gradient(90deg, rgba(27,23,18,.80) 0%, rgba(27,23,18,.45) 38%, rgba(27,23,18,0) 66%),
linear-gradient(180deg, rgba(27,23,18,.22) 0%, rgba(27,23,18,.06) 50%, rgba(27,23,18,.48) 100%);
}
/* En móvil el texto ocupa todo el ancho, así que el velo lateral no le sirve de nada:
ahí sí hace falta el vertical de siempre, aunque algo más suave que el del sitio. */
@media (max-width: 780px) {
.ecc-subhero.ecc-gal-hero::before {
background: linear-gradient(180deg, rgba(27,23,18,.30) 0%, rgba(27,23,18,.62) 55%, rgba(27,23,18,.86) 100%);
}
}
.ecc-gal-hero .ecc-subhero__inner { position: relative; z-index: 2; }
.ecc-gal-cierre > h2,
.ecc-gal-cierre > p,
.ecc-gal-cierre > .ecc-gal__ctas { position: relative; z-index: 2; }
/* ---------- Cierre ---------- */
/* El hero y el cierre reutilizan .ecc-subhero y .ecc-news del sitio; aquí solo va lo
que es propio de esta página. */
.ecc-gal-cierre { padding-top: 96px; padding-bottom: 96px; }
.ecc-gal__ctas {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 600px) {
.ecc-gal__ctas .ecc-btn { flex: 1 1 100%; text-align: center; }
}
/* ---------- Ver más momentos ---------- */
.ecc-gal__mas { display: flex; justify-content: center; margin-top: 40px; }
/* Mismo choque de especificidad que los filtros: es un