/*
 * assets/css/pages/institucional.css
 * AGEJ v4 limpia: archivo conservado y documentado.
 */


/* ==========================================================
   AGEJ Fase 2 - Páginas institucionales definitivas
   ========================================================== */

.institutional-page{
    background:var(--agej-bg);
    color:var(--agej-text);
}

.agej-breadcrumb{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    color:rgba(255,255,255,.74);
    font-size:.88rem;
    margin-bottom:16px;
}

.agej-breadcrumb a{
    color:rgba(255,255,255,.86)!important;
    font-weight:700;
}

.info-band{
    margin-top:-44px;
    position:relative;
    z-index:5;
}

.info-band-card{
    background:#fff;
    border:1px solid var(--agej-line);
    border-radius:28px;
    padding:26px;
    box-shadow:var(--agej-shadow);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.info-band-item{
    padding:18px;
    border-radius:18px;
    background:#f6f7f9;
    border:1px solid #e2e6ea;
}

.info-band-item strong{
    display:block;
    color:#30363c;
    font-size:1.1rem;
    margin-bottom:6px;
}

.info-band-item span{
    color:#66717c;
    line-height:1.45;
    font-size:.94rem;
}

.content-split{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:34px;
    align-items:stretch;
}

.content-copy{
    background:#fff;
    border:1px solid var(--agej-line);
    border-radius:28px;
    padding:34px;
    box-shadow:var(--agej-shadow-soft);
}

.content-copy p{
    color:#5f6972;
    line-height:1.75;
    margin:0 0 14px;
}

.content-image{
    min-height:420px;
    border-radius:28px;
    background:var(--section-image) center/cover no-repeat;
    border:1px solid #dde2e7;
    box-shadow:var(--agej-shadow);
}

.timeline{
    position:relative;
    display:grid;
    gap:18px;
    margin-top:30px;
}

.timeline-item{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:18px;
    align-items:start;
}

.timeline-number{
    width:54px;
    height:54px;
    border-radius:18px;
    background:#30363c;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:700;
}

.timeline-card{
    background:#fff;
    border:1px solid var(--agej-line);
    border-radius:22px;
    padding:24px;
    box-shadow:var(--agej-shadow-soft);
}

.timeline-card h3{
    margin:0 0 8px;
    color:#30363c;
    font-size:1.16rem;
    font-weight:700;
}

.timeline-card p{
    margin:0;
    color:#66717c;
    line-height:1.65;
}

.faq-list{
    display:grid;
    gap:12px;
    margin-top:28px;
}

.faq-item{
    background:#fff;
    border:1px solid var(--agej-line);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--agej-shadow-soft);
}

.faq-question{
    width:100%;
    border:0;
    background:#fff;
    padding:18px 20px;
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
    text-align:left;
    cursor:pointer;
    color:#30363c;
    font-weight:700;
}

.faq-answer{
    display:none;
    padding:0 20px 20px;
    color:#66717c;
    line-height:1.7;
}

.faq-item.open .faq-answer{
    display:block;
}

.faq-icon{
    font-size:1.35rem;
    color:#66717c;
    transition:.2s ease;
}

.faq-item.open .faq-icon{
    transform:rotate(45deg);
}

.cta-panel{
    border-radius:30px;
    padding:42px;
    background:
        linear-gradient(90deg, rgba(31,35,39,.92), rgba(31,35,39,.70)),
        var(--cta-image) center/cover no-repeat;
    color:#fff;
    box-shadow:var(--agej-shadow);
}

.cta-panel h2{
    color:#fff;
    font-size:clamp(1.9rem,4vw,3rem);
    line-height:1.08;
    letter-spacing:-.035em;
    margin:0 0 16px;
    font-weight:700;
}

.cta-panel p{
    color:rgba(255,255,255,.88);
    line-height:1.75;
    max-width:760px;
    margin:0 0 24px;
}

.service-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:30px;
}

.service-detail{
    background:#fff;
    border:1px solid var(--agej-line);
    border-radius:24px;
    padding:26px;
    box-shadow:var(--agej-shadow-soft);
}

.service-detail h3{
    margin:0 0 10px;
    color:#30363c;
    font-size:1.18rem;
    font-weight:700;
}

.service-detail ul{
    margin:12px 0 0;
    padding-left:20px;
    color:#66717c;
    line-height:1.75;
}

.resource-list{
    display:grid;
    gap:12px;
    margin-top:24px;
}

.resource-item{
    background:#fff;
    border:1px solid var(--agej-line);
    border-radius:18px;
    padding:18px 20px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:center;
    box-shadow:var(--agej-shadow-soft);
}

.resource-item h3{
    margin:0 0 5px;
    color:#30363c;
    font-size:1.05rem;
    font-weight:700;
}

.resource-item p{
    margin:0;
    color:#66717c;
    line-height:1.5;
}

.resource-item a{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    background:#30363c;
    color:#fff!important;
    font-weight:700;
    text-decoration:none!important;
}

.contact-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:stretch;
}

.contact-map{
    min-height:480px;
    border-radius:28px;
    background:
        linear-gradient(rgba(31,35,39,.08), rgba(31,35,39,.08)),
        url('../../../images/pages/mapa-agej.jpg') center/cover no-repeat;
    border:1px solid var(--agej-line);
    box-shadow:var(--agej-shadow);
}

.contact-data{
    display:grid;
    gap:14px;
}

.contact-block{
    background:#fff;
    border:1px solid var(--agej-line);
    border-radius:22px;
    padding:24px;
    box-shadow:var(--agej-shadow-soft);
}

.contact-block h3{
    margin:0 0 8px;
    color:#30363c;
    font-weight:700;
}

.contact-block p{
    margin:0;
    color:#66717c;
    line-height:1.65;
}

@media(max-width:1000px){
    .info-band-card{
        grid-template-columns:repeat(2,1fr);
    }
    .content-split,
    .contact-layout{
        grid-template-columns:1fr;
    }
    .service-detail-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){
    .info-band-card{
        grid-template-columns:1fr;
    }
    .timeline-item{
        grid-template-columns:1fr;
    }
    .resource-item{
        grid-template-columns:1fr;
    }
    .content-copy,
    .cta-panel{
        padding:28px 22px;
    }
}


/* ==========================================================
   AGEJ v8 - Micrositios institucionales
   Reglas compartidas por El AGEJ y Servicios.
   ========================================================== */
.agej-internal-nav{
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(244,245,247,.94);
    border-bottom:1px solid var(--agej-line);
    backdrop-filter:blur(12px);
}
.agej-internal-nav .agej-container{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    padding:13px 0;
}
.agej-internal-nav a{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    padding:0 14px;
    border:1px solid var(--agej-line);
    border-radius:999px;
    background:#fff;
    color:#30363c!important;
    font-size:.88rem;
    font-weight:750;
    transition:.2s ease;
}
.agej-internal-nav a:hover{background:#30363c; color:#fff!important; border-color:#30363c;}
.content-split.reverse .content-image{order:1;}
.content-split.reverse .content-copy{order:2;}
.page-card[href]{color:#30363c!important; text-decoration:none!important;}
.resource-item a{
    background:#fff;
    color:#30363c!important;
    border:1px solid var(--agej-line);
}
.resource-item a:hover{background:#30363c; color:#fff!important; border-color:#30363c;}
.agej-institutional-v8 .directorio-panel{background:var(--agej-bg);}
.services-v8 .page-card{min-height:235px;}
@media(max-width:900px){
    .content-split.reverse .content-image,
    .content-split.reverse .content-copy{order:initial;}
}