/* ====== Galería Pecos — masonry estilo lunapan ====== */

.contenido-portada {
    width: 100%;
    box-sizing: border-box;
    /* El margen lateral va AQUÍ (en el wrapper), no en .galeria-pecos,
       porque Masonry posiciona los items en absolute y un width:% en absolute
       se mide contra la caja de padding del contenedor (lo que provocaba el
       desbordamiento por la derecha en móvil). */
    padding-left: 90px;
    padding-right: 90px;
}
/* En móvil el gutter lateral ya lo aporta tu regla de #ajax-content-wrap (30px),
   así que aquí lo dejamos en 0 para no duplicarlo. */
@media (max-width: 767px) {
    .contenido-portada {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- Cabecera de archivo (categoría / etiqueta) ---------- */
.pecos-archivo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; 
    margin: 0 auto;
    padding: 44px 0 0;   /* sin padding horizontal: el gutter lo da .contenido-portada */
    box-sizing: border-box;
}
.pecos-archivo__icono { display: inline-flex; }
.pecos-archivo__icono svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pecos-archivo__titulo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Cuadrícula ---------- */
.galeria-pecos { 
    margin: 0 auto;
    padding: 40px 0 80px;              /* SOLO vertical; sin padding horizontal (ver nota arriba) */
    box-sizing: border-box;
    opacity: 0;                        /* oculto hasta que Masonry coloca los items (evita el "salto") */
    transition: opacity .4s ease;
}
.galeria-pecos.galeria-pecos--lista { opacity: 1; }

/* Anchos de columna y canalón (gutter): replican las proporciones de lunapan (3 columnas) */
.galeria-pecos__medida,
.galeria-pecos__elemento { width: 30.8%; }
.galeria-pecos__canalon  { width: 3.8%; }
.galeria-pecos__elemento { margin-bottom: 3.8%; }

.galeria-pecos__enlace {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
}

.galeria-pecos__imagen img {
    display: block;
    width: 100%;
    height: auto;
}

/* Título + cliente: superpuestos y ocultos; aparecen al hacer hover sobre la imagen */
.galeria-pecos__cabecera {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .88);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}
.galeria-pecos__enlace:hover .galeria-pecos__cabecera { opacity: 1; }

.galeria-pecos__titulo {
    margin: 0;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.2;
    color: #1a1a1a;
}
.galeria-pecos__cliente {
    margin: 8px 0 0;
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #555;
}

/* ====== Detalle de Entrada (Imágenes individuales) ====== */
.entrada-pecos__figura {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-sizing: border-box;
}

.entrada-pecos__imagen {
    width: 100%;
    height: auto;
    display: block;
}

/* Regla inyectada por JS: reduce al 75% y centra solo si la ilustración es vertical */
.entrada-pecos__figura--vertical {
    width: 75%;
}

/* ====== Tablet: 2 columnas ====== */
@media (max-width: 1024px) {
    .galeria-pecos__medida,
    .galeria-pecos__elemento { width: 48%; }
    .galeria-pecos__canalon  { width: 4%; }
    .galeria-pecos__elemento { margin-bottom: 4%; }
}

/* ====== Móvil: 1 columna (el título se muestra siempre debajo, sin hover) ====== */
@media (max-width: 600px) {
    .galeria-pecos__medida,
    .galeria-pecos__elemento { width: 100%; }
    .galeria-pecos__canalon  { width: 0; }
    .galeria-pecos__elemento { margin-bottom: 60px; }

    .galeria-pecos__cabecera {
        display: none;
        position: static;
        opacity: 1;
        background: transparent;
        padding: 10px 0 0;
        align-items: flex-start;
        text-align: left;
    }
    
    /* Opcional: En móviles muy pequeños, si prefieres que las verticales 
       vuelvan a ocupar el 100% para aprovechar la pantalla, descomenta esto: */
    /*
    .entrada-pecos__figura--vertical {
        width: 100%;
    }
    */
}