/*
 * assets/css/pages/eventos-agej.css
 * Plantilla visual unificada para eventos AGEJ.
 *
 * MODO ESTRICTO UX:
 * - Misma retícula para Exposición y Panel.
 * - Mismo hero, tarjetas, botones, cartel, galería, documentos y cierre.
 * - No usar estilos distintos por evento salvo la imagen y textos desde PHP.
 * - Rutas de imágenes se cambian en el PHP mediante variables.
 */

:root{
    --evento-acento:#c96f00;
    --evento-acento-oscuro:#9e5600;
    --evento-ink:#30363c;
    --evento-muted:#66717b;
    --evento-bg:#f4f5f7;
    --evento-card:#ffffff;
    --evento-line:#dfe4e8;
    --evento-dark:#25292d;
    --evento-shadow:0 18px 45px rgba(37,41,45,.10);
}

.agej-evento-page{
    background:var(--evento-bg);
    color:var(--evento-ink);
}

/* =====================================================
   HERO UNIFICADO DE EVENTO
   CAMBIAR IMAGEN: en el PHP, variable $imagenHero
   Se inyecta como:
   style="--evento-hero-image:url('ruta/hero.jpg')"
===================================================== */
.agej-evento-hero{
    position:relative;
    min-height:680px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#25292d;
}
.agej-evento-hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center right;
    opacity:.55;
    z-index:0;
}
.agej-evento-hero > *:not(.agej-evento-hero-bg){
    position:relative;
    z-index:2;
}
.agej-evento-hero::before{
    z-index:1;
}
.agej-evento-hero::after{
    z-index:1;
}
.agej-evento-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size:46px 46px;
    opacity:.30;
}
.agej-evento-hero::after{
    content:"";
    position:absolute;
    inset:auto -8% -125px -8%;
    height:230px;
    background:var(--evento-bg);
    transform:skewY(-3deg);
}
.agej-evento-hero-inner{
    position:relative;
    z-index:2;
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
    padding:120px 0 150px;
    display:grid;
    grid-template-columns:1.05fr .82fr;
    gap:42px;
    align-items:center;
}
.agej-evento-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 13px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    text-transform:uppercase;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.12em;
}
.agej-evento-kicker::before{
    content:"";
    width:28px;
    height:2px;
    background:var(--evento-acento);
}
.agej-evento-tipo{
    margin:24px 0 8px;
    color:#f0a24a;
    font-size:1.06rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.10em;
}
.agej-evento-hero h1{
    margin:0 0 18px;
    max-width:850px;
    color:#fff;
    font-size:clamp(2.35rem, 5.3vw, 5rem);
    line-height:.98;
    letter-spacing:-.06em;
    font-weight:900;
    text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.agej-evento-subtitle{
    margin:0 0 20px;
    color:#f3d2aa;
    font-size:clamp(1.15rem, 2.15vw, 2rem);
    line-height:1.28;
    font-weight:500;
}
.agej-evento-lead{
    max-width:780px;
    margin:0;
    color:rgba(255,255,255,.92);
    font-size:1.08rem;
    line-height:1.75;
    text-shadow:0 2px 12px rgba(0,0,0,.28);
}
.agej-evento-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:30px;
}
.agej-evento-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 22px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.35);
    background:#fff;
    color:#30363c !important;
    text-decoration:none;
    font-weight:800;
    box-shadow:0 14px 28px rgba(0,0,0,.13);
    transition:.22s ease;
}
.agej-evento-btn:hover{transform:translateY(-2px);}
.agej-evento-btn.dark{
    background:var(--evento-acento);
    border-color:var(--evento-acento);
    color:#fff !important;
}
.agej-evento-poster{
    margin:0;
    padding:12px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 28px 70px rgba(0,0,0,.30);
}
.agej-evento-poster img{
    display:block;
    width:100%;
    height:auto;
}

/* =====================================================
   FRANJA DE DATOS RÁPIDOS
===================================================== */
.agej-evento-info-strip{
    position:relative;
    z-index:4;
    margin-top:-76px;
}
.agej-evento-info-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.agej-evento-info-item{
    min-height:128px;
    padding:24px;
    background:#fff;
    border:1px solid var(--evento-line);
    box-shadow:var(--evento-shadow);
}
.agej-evento-info-item small{
    display:block;
    color:var(--evento-muted);
    text-transform:uppercase;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.10em;
    margin-bottom:9px;
}
.agej-evento-info-item strong{
    display:block;
    color:var(--evento-ink);
    font-size:1.08rem;
    line-height:1.45;
}

/* =====================================================
   SECCIONES BASE
===================================================== */
.agej-evento-section{
    padding:86px 0;
}
.agej-evento-section.compact{
    padding:48px 0;
}
.agej-evento-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:34px;
    align-items:start;
}
.agej-evento-panel{
    background:#fff;
    border:1px solid var(--evento-line);
    box-shadow:var(--evento-shadow);
    padding:38px;
}
.agej-evento-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--evento-acento);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.78rem;
    font-weight:900;
    margin-bottom:14px;
}
.agej-evento-label::before{
    content:"";
    width:34px;
    height:2px;
    background:var(--evento-acento);
}
.agej-evento-panel h2,
.agej-evento-section h2{
    margin:0 0 18px;
    color:var(--evento-ink);
    font-size:clamp(1.7rem, 3vw, 2.55rem);
    line-height:1.08;
    letter-spacing:-.04em;
    font-weight:900;
}
.agej-evento-panel p{
    color:#535f68;
    font-size:1.03rem;
    line-height:1.82;
    margin:0 0 17px;
}
.agej-evento-panel p:last-child{margin-bottom:0;}
.agej-evento-side{
    display:grid;
    gap:18px;
}
.agej-evento-mini-card{
    background:#fff;
    border:1px solid var(--evento-line);
    box-shadow:var(--evento-shadow);
    padding:28px;
}
.agej-evento-mini-card h3{
    margin:0 0 10px;
    font-size:1.18rem;
    color:var(--evento-ink);
}
.agej-evento-mini-card p{
    margin:0;
    color:#59636d;
    line-height:1.65;
}
.agej-evento-mini-card.accent{
    background:var(--evento-dark);
    color:#fff;
    border-color:var(--evento-dark);
}
.agej-evento-mini-card.accent h3,
.agej-evento-mini-card.accent p{color:#fff;}

/* =====================================================
   TRANSMISIÓN / ENLACES
===================================================== */
.agej-evento-link-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-top:24px;
}
.agej-evento-link-card{
    display:block;
    padding:26px;
    background:#fff;
    border:1px solid var(--evento-line);
    box-shadow:var(--evento-shadow);
    text-decoration:none;
    color:var(--evento-ink) !important;
    transition:.22s ease;
}
.agej-evento-link-card:hover{
    transform:translateY(-4px);
    border-color:#c9d0d6;
}
.agej-evento-link-card strong{
    display:block;
    font-size:1.25rem;
    margin-bottom:8px;
}
.agej-evento-link-card span{
    color:var(--evento-muted);
}

/* =====================================================
   GALERÍA ESTILO INDEX
   Cambiar imágenes: arreglo $galeriaEvento en cada PHP.
===================================================== */
.agej-evento-gallery-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-end;
    margin-bottom:26px;
}
.agej-evento-gallery-head p{
    max-width:720px;
    margin:0;
    color:#59636d;
    line-height:1.7;
}
.agej-evento-gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:210px;
    gap:16px;
}
.agej-gallery-item{
    position:relative;
    display:block;
    width:100%;
    min-height:210px;
    border:0;
    padding:0;
    cursor:pointer;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    box-shadow:var(--evento-shadow);
}
.agej-gallery-item.large{
    grid-column:span 2;
    grid-row:span 2;
}
.agej-gallery-item::after{
    content:attr(data-title);
    position:absolute;
    inset:auto 0 0 0;
    padding:22px;
    color:#fff;
    font-weight:900;
    text-align:left;
    background:linear-gradient(transparent, rgba(0,0,0,.78));
    transform:translateY(18px);
    opacity:.92;
    transition:.22s ease;
}
.agej-gallery-item:hover::after{
    transform:translateY(0);
}

/* =====================================================
   DOCUMENTOS
===================================================== */
.agej-evento-docs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.agej-evento-doc{
    display:block;
    background:#fff;
    border:1px solid var(--evento-line);
    box-shadow:var(--evento-shadow);
    padding:24px;
    text-decoration:none;
    color:var(--evento-ink) !important;
    transition:.22s ease;
}
.agej-evento-doc:hover{transform:translateY(-4px);}
.agej-evento-doc small{
    display:block;
    color:var(--evento-acento);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.10em;
    margin-bottom:8px;
}
.agej-evento-doc strong{
    display:block;
    font-size:1.12rem;
    margin-bottom:8px;
}
.agej-evento-doc span{
    color:var(--evento-muted);
}

/* =====================================================
   CIERRE
===================================================== */
.agej-evento-closing{
    margin-top:20px;
    padding:42px;
    background:
        linear-gradient(115deg, rgba(37,41,45,.94), rgba(37,41,45,.78)),
        var(--evento-hero-image) center/cover no-repeat;
    color:#fff;
    box-shadow:var(--evento-shadow);
}
.agej-evento-closing h2{
    color:#fff;
    margin:0 0 12px;
}
.agej-evento-closing p{
    max-width:860px;
    margin:0 0 22px;
    color:rgba(255,255,255,.88);
    line-height:1.75;
}

/* =====================================================
   LIGHTBOX: se apoya en componentes globales, aquí solo ajustamos forma.
===================================================== */
.agej-evento-page .agej-lightbox-card{border-radius:10px;}
.agej-evento-page .agej-lightbox-close,
.agej-evento-page .agej-lightbox-nav,
.agej-evento-page .agej-lightbox-dot{border-radius:6px;}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:980px){
    .agej-evento-hero{min-height:auto;}
    .agej-evento-hero-inner{
        grid-template-columns:1fr;
        padding:110px 0 145px;
    }
    .agej-evento-poster{max-width:520px;}
    .agej-evento-info-grid{grid-template-columns:repeat(2,1fr);}
    .agej-evento-grid{grid-template-columns:1fr;}
    .agej-evento-gallery-grid{grid-template-columns:repeat(2,1fr);}
    .agej-evento-docs{grid-template-columns:1fr;}
}
@media (max-width:640px){
    .agej-evento-hero-inner{width:min(100% - 28px, 1180px);}
    .agej-evento-info-grid{grid-template-columns:1fr;}
    .agej-evento-link-grid{grid-template-columns:1fr;}
    .agej-evento-gallery-grid{
        grid-template-columns:1fr;
        grid-auto-rows:220px;
    }
    .agej-gallery-item.large{
        grid-column:span 1;
        grid-row:span 1;
    }
    .agej-evento-panel{padding:28px 22px;}
    .agej-evento-closing{padding:32px 22px;}
}


/* =====================================================
   AJUSTE MODO ESTRICTO: UNA SOLA COLUMNA
   Objetivo: eliminar la doble columna del hero y del cuerpo.
   Mantiene el diseño visual, pero baja el cartel y los datos laterales
   como bloques verticales dentro del mismo flujo de lectura.
===================================================== */
.agej-evento-hero-inner{
    grid-template-columns:1fr;
    max-width:1120px;
}
.agej-evento-poster{
    width:min(620px, 100%);
    margin:16px auto 0;
}
.agej-evento-grid{
    display:block;
    max-width:1100px;
    margin:0 auto;
}
.agej-evento-side{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-top:22px;
}
.agej-evento-panel{
    width:100%;
}

@media (max-width:760px){
    .agej-evento-side{
        grid-template-columns:1fr;
    }
}

/* =====================================================
   CORRECCIÓN FINAL - CENTRADO REAL Y UNA COLUMNA
   Fecha: 2026-06-09
   Objetivo:
   - Todos los bloques usan el mismo eje central.
   - Se elimina cualquier doble columna residual.
   - La portada/hero se carga como imagen real y visible.
   - Las tarjetas, contenido, galería y documentos comparten ancho.
===================================================== */
.agej-evento-page .agej-container,
.agej-evento-hero-inner{
    width:min(1120px, calc(100% - 48px));
    max-width:1120px;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box;
}

.agej-evento-hero{
    min-height:auto;
    display:block;
    padding:0;
}

.agej-evento-hero-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:34px;
    padding:110px 0 145px;
    text-align:left;
}

.agej-evento-hero-inner > .agej-reveal:first-child{
    width:100%;
    max-width:940px;
    margin:0 auto;
}

.agej-evento-hero h1,
.agej-evento-subtitle,
.agej-evento-lead{
    max-width:940px;
}

.agej-evento-poster{
    display:block !important;
    width:min(620px, 100%) !important;
    max-width:620px !important;
    margin:8px auto 0 !important;
    box-sizing:border-box;
}

.agej-evento-poster img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 auto !important;
}

.agej-evento-info-strip{
    margin-top:-58px;
}

.agej-evento-info-grid{
    width:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}

.agej-evento-grid{
    display:block !important;
    width:min(1120px, calc(100% - 48px));
    max-width:1120px;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.agej-evento-panel,
.agej-evento-side,
.agej-evento-docs,
.agej-evento-gallery-head,
.agej-evento-gallery-grid,
.agej-evento-closing{
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}

.agej-evento-side{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-top:22px;
}

.agej-evento-docs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

@media (max-width:900px){
    .agej-evento-info-grid,
    .agej-evento-side,
    .agej-evento-docs{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:640px){
    .agej-evento-page .agej-container,
    .agej-evento-hero-inner,
    .agej-evento-grid{
        width:min(100% - 28px, 1120px);
    }
    .agej-evento-info-grid,
    .agej-evento-side,
    .agej-evento-docs{
        grid-template-columns:1fr;
    }
    .agej-evento-hero-inner{
        padding:90px 0 120px;
    }
}