/*==================================================
=                    HERO V2                        =
==================================================*/
.logo {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* ==================================================
   LOGO SIGPV - SIDEBAR
================================================== */

.app-sidebar.sgpv-sidebar .brand-logo {
    width: 150px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
#hero{

    position:relative;

    width:100%;

    height:75vh;

    min-height:650px;

    overflow:hidden;

    background:#000;

}

.hero-img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    opacity:0;

    transition:opacity .8s ease-in-out;

    z-index:1;

}

.hero-img.activo{

    opacity:1;

}

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.15) 100%
    );

}

.hero-container{

    position:relative;

    z-index:3;

    height:100%;

}

.hero-content{

    max-width:700px;

    color:#fff;

}

.hero-etiqueta{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:20px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(8px);

    color:#FFD447;

    font-weight:600;

    font-size:.9rem;

    letter-spacing:1px;

    text-transform:uppercase;

}

#heroTitulo{

    font-size:4rem;

    font-weight:800;

    line-height:1.05;

    margin-bottom:20px;

}

#heroLema{

    color:#FFD447;

    font-size:1.6rem;

    font-weight:500;

    margin-bottom:20px;

}

#heroDescripcion{

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:35px;

    max-width:620px;

}

.hero-botones{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/*=========================================
=            CONTROLES HERO              =
=========================================*/

.hero-control{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    color:#fff;

    cursor:pointer;

    transition:.3s;

    z-index:20;

}

.hero-control:hover{

    background:#f2b705;

    color:#000;

    transform:translateY(-50%) scale(1.08);

}

.hero-left{

    left:35px;

}

.hero-right{

    right:35px;

}

.hero-control i{

    font-size:32px;

}


/*=========================================
=           INDICADORES                  =
=========================================*/

.hero-indicadores{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:25;

}

.hero-indicadores span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#ffffff;

    opacity:.45;

    cursor:pointer;

    transition:.35s;

}

.hero-indicadores span.activo{

    background:#f2b705;

    opacity:1;

    transform:scale(1.35);

    box-shadow:0 0 12px rgba(242,183,5,.65);

}


/*=========================================
=           BARRA PROGRESO               =
=========================================*/

.hero-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:rgba(255,255,255,.15);

    z-index:30;

}

.hero-progress-bar{

    width:0;

    height:100%;

    background:#f2b705;

}


/*=========================================
=            SCROLL                      =
=========================================*/

.hero-scroll{

    position:absolute;

    right:45px;

    bottom:30px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    z-index:30;

    opacity:.75;

    transition:.3s;

}

.hero-scroll:hover{

    color:#f2b705;

    opacity:1;

}

.hero-scroll i{

    font-size:26px;

}


/*=========================================
=            RESPONSIVE                  =
=========================================*/

@media(max-width:991px){

    #hero{

        min-height:100vh;

    }

    #heroTitulo{

        font-size:2.8rem;

    }

    #heroLema{

        font-size:1.25rem;

    }

    #heroDescripcion{

        font-size:1rem;

    }

    .hero-control{

        display:none;

    }

    .hero-scroll{

        display:none;

    }

}

@media(max-width:576px){

    #heroTitulo{

        font-size:2.2rem;

    }

    .hero-botones{

        flex-direction:column;

    }

    .hero-botones .btn{

        width:100%;

    }

}

/* LA PREPARATORIA */
.lp-hero {padding: 90px 0 80px;background: #062d4a;color: #fff;}
.lp-hero h1{margin:12px 0 15px;font-size:clamp(2.4rem,5vw,4rem);font-weight:800}
.lp-hero p{max-width:760px;margin:0;font-size:1.15rem;line-height:1.8;color:rgba(255,255,255,.9)}
.lp-eyebrow{display:inline-block;color:#f2b705;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:.9rem}
.lp-eyebrow-dark{color:#0b3b5d}
.lp-section{padding:80px 0}
.lp-section-soft{background:#f7f8fa}
.lp-section-dark{background:#062d4a;color:#fff}
.lp-heading{text-align:center;max-width:850px;margin:0 auto 45px}
.lp-heading>span{color:#0d6efd;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;font-size:.9rem}
.lp-heading h2{margin:10px 0 12px;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#0b2d5c}
.lp-heading p{color:#64748b;margin-bottom:0}
.lp-heading-light>span{color:#f2b705}.lp-heading-light h2,.lp-heading-light p{color:#fff}
.lp-card,.lp-offer-card,.lp-work-card,.lp-life-card,.lp-support-card,.lp-document-card{border-radius:14px}
.lp-card{height:100%;padding:32px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 8px 25px rgba(15,23,42,.06)}
.lp-card h3{color:#0b2d5c;margin:18px 0 12px}.lp-card p{color:#526174;line-height:1.75;margin-bottom:0}
.lp-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#eef5ff;color:#0d6efd;font-size:1.6rem}
.lp-offer-card{height:100%;min-height:190px;padding:28px 22px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#fff;border:1px solid #e3e7ed;transition:.2s}
.lp-offer-card:hover,.lp-work-card:hover,.lp-support-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,23,42,.1)}
.lp-offer-card i,.lp-work-card i{color:#0d6efd;font-size:2.1rem;margin-bottom:18px}
.lp-offer-card h3,.lp-work-card h3{color:#0b2d5c;font-size:1.1rem;margin:0}
.lp-work-card{min-height:170px;padding:28px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f8fafc;border:1px solid #e5e7eb;transition:.2s}
.lp-life-card{height:100%;padding:32px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.lp-life-card i{display:inline-block;margin-bottom:18px;color:#f2b705;font-size:2.3rem}.lp-life-card h3{color:#fff;font-size:1.2rem;margin-bottom:12px}.lp-life-card p{color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:0}
.lp-support-card{height:100%;padding:34px;text-align:center;background:#fff;border:1px solid #e5e7eb;box-shadow:0 8px 25px rgba(15,23,42,.05);transition:.2s}
.lp-support-card i{display:inline-block;margin-bottom:18px;color:#f2b705;font-size:2.4rem}.lp-support-card h3{color:#0b2d5c;font-size:1.25rem}.lp-support-card p{color:#64748b;margin-bottom:0}
.lp-admision{background:#f2b705}.lp-admision h2{color:#0b2d5c;font-weight:800;font-size:clamp(2rem,4vw,3rem);margin:12px 0 20px}.lp-admision p{color:#26384a;line-height:1.8}
.lp-document-card{padding:34px;background:#062d4a;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.lp-document-card h3{color:#f2b705;margin-bottom:22px}.lp-document-card ul{margin:0;padding-left:20px}.lp-document-card li{margin-bottom:9px;color:rgba(255,255,255,.92)}
.lp-note{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);color:#f2b705;font-weight:600}
@media(max-width:767.98px){.lp-hero{padding:65px 0 55px}.lp-section{padding:60px 0}.lp-card,.lp-support-card,.lp-document-card{padding:25px}}


/*==================================================*
*=              OFERTA EDUCATIVA                   =*
*==================================================*/

/* HERO */

.oe-hero {
    padding: 90px 0 80px;
    background: #062d4a;
    color: #fff;
}

.oe-hero h1 {
    margin: 12px 0 15px;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
}

.oe-hero p {
    max-width: 760px;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255,255,255,.9);
}

.oe-eyebrow {
    display: inline-block;
    color: #f2b705;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: .9rem;
}


/* SECCIONES */

.oe-section {
    padding: 80px 0;
}

.oe-section-soft {
    background: #f7f8fa;
}


/* ENCABEZADOS */

.oe-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 45px;
}

.oe-heading > span {
    color: #0d6efd;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-size: .9rem;
}

.oe-heading h2 {
    margin: 10px 0 12px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #0b2d5c;
}

.oe-heading p {
    color: #64748b;
    margin-bottom: 0;
}


/* COMPONENTES CURRICULARES */

.oe-component {
    height: 100%;
    padding: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(15,23,42,.06);
    transition: .2s ease;
}

.oe-component:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

.oe-component h3 {
    color: #0b2d5c;
    margin: 18px 0 12px;
    font-size: 1.35rem;
    font-weight: 700;
}

.oe-component p {
    color: #526174;
    line-height: 1.75;
    margin-bottom: 0;
}


/* ICONOS */

.oe-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef5ff;
    color: #0d6efd;
    font-size: 1.6rem;
}


/* ÁREAS DE FORMACIÓN */

.oe-area-card {
    height: 100%;
    min-height: 280px;
    padding: 30px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(15,23,42,.05);
    transition: .2s ease;
}

.oe-area-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

.oe-area-card i {
    color: #0d6efd;
    font-size: 2.2rem;
    margin: 12px 0 18px;
}

.oe-area-card h3 {
    color: #0b2d5c;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.oe-area-card p {
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

.oe-area-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: #0d6efd;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: .7;
}


/* ACORDEÓN DEL MAPA CURRICULAR */

.oe-accordion {
    max-width: 1000px;
    margin: 0 auto;
}

.oe-accordion .accordion-item {
    border: 1px solid #e3e7ed;
    border-radius: 12px !important;
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
}

.oe-accordion .accordion-button {
    padding: 22px 25px;
    background: #fff;
    color: #0b2d5c;
    box-shadow: none;
}

.oe-accordion .accordion-button:not(.collapsed) {
    background: #f7f8fa;
    color: #0b2d5c;
    box-shadow: none;
}

.oe-accordion .accordion-button:focus {
    box-shadow: none;
}

.oe-accordion .accordion-button span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oe-accordion .accordion-button strong {
    font-size: 1.1rem;
}

.oe-accordion .accordion-button small {
    color: #64748b;
    font-size: .85rem;
    font-weight: 400;
}

.oe-accordion .accordion-body {
    padding: 30px;
    border-top: 1px solid #e5e7eb;
}


/* GRUPOS DEL MAPA */

.oe-group {
    margin-bottom: 35px;
}

.oe-group:last-child {
    margin-bottom: 0;
}

.oe-group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0b2d5c;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.oe-group h3 span {
    width: 8px;
    height: 8px;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f2b705;
}

.oe-group ul {
    margin: 0;
    padding-left: 25px;
}

.oe-group li {
    color: #526174;
    line-height: 1.7;
    margin-bottom: 8px;
}

.oe-group p {
    color: #64748b;
    line-height: 1.7;
}


/* INFORMACIÓN */

.oe-info {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 20px;
    margin-bottom: 30px;
    background: #eef5ff;
    border-left: 4px solid #0d6efd;
    border-radius: 8px;
}

.oe-info i {
    color: #0d6efd;
    font-size: 1.3rem;
    margin-top: 2px;
}

.oe-info p {
    color: #526174;
    margin: 0;
    line-height: 1.6;
}


/* DETALLE DE ÁREAS */

.oe-area-detail {
    height: 100%;
    padding: 28px;
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15,23,42,.05);
}

.oe-area-detail h3 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #0b2d5c;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.oe-area-detail h3 i {
    color: #0d6efd;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.oe-area-detail ul {
    margin: 0;
    padding-left: 25px;
}

.oe-area-detail li {
    color: #526174;
    line-height: 1.7;
    margin-bottom: 8px;
}


/* FORMACIÓN PARA EL TRABAJO */

.oe-work-card {
    min-height: 180px;
    height: 100%;
    padding: 30px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    transition: .2s ease;
}

.oe-work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

.oe-work-card i {
    color: #0d6efd;
    font-size: 2.2rem;
    margin-bottom: 18px;
}

.oe-work-card h3 {
    color: #0b2d5c;
    font-size: 1.1rem;
    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 767.98px) {

    .oe-hero {
        padding: 65px 0 55px;
    }

    .oe-section {
        padding: 60px 0;
    }

    .oe-component,
    .oe-area-detail {
        padding: 25px;
    }

    .oe-area-card {
        min-height: 240px;
    }

    .oe-accordion .accordion-body {
        padding: 22px;
    }

}

/* ==================================================
   ORGULLO PUMA
================================================== */

.op-hero {
    position: relative;
    min-height: 365px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(6, 45, 74, .96),
            rgba(6, 45, 74, .78),
            rgba(6, 45, 74, .55)
        ),
        linear-gradient(
            135deg,
            #062d4a,
            #0b3b5d
        );
    color: #fff;
    overflow: hidden;
}

.op-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    bottom: -180px;
    border-radius: 50%;
    border: 70px solid rgba(242, 183, 5, .12);
}

.op-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.op-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: #f2b705;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.op-hero h1 {
    margin: 0 0 20px;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
}

.op-hero p {
    max-width: 700px;
    margin: 0 0 30px;
    color: rgba(255,255,255,.9);
    font-size: 1.2rem;
    line-height: 1.8;
}


/* ==================================================
   SECCIONES
================================================== */

.op-section {
    padding: 90px 0;
    background: #fff;
}

.op-section-soft {
    background: #f7f8fa;
}

.op-section-dark {
    background: #062d4a;
    color: #fff;
}

.op-heading {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.op-heading > span {
    color: #0d6efd;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.op-heading h2 {
    margin: 10px 0 15px;
    color: #0b2d5c;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
}

.op-heading p {
    margin: 0;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.8;
}

.op-section-dark .op-heading h2 {
    color: #fff;
}

.op-section-dark .op-heading p {
    color: rgba(255,255,255,.78);
}


/* ==================================================
   TARJETAS IDENTIDAD
================================================== */

.op-card {
    height: 100%;
    padding: 35px 30px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
    text-align: center;
    transition: .25s ease;
}

.op-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(15,23,42,.11);
}

.op-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    border-radius: 16px;
    background: #eef5ff;
    color: #0d6efd;
    font-size: 1.8rem;
}

.op-card h3 {
    margin-bottom: 14px;
    color: #0b2d5c;
    font-size: 1.35rem;
    font-weight: 800;
}

.op-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.75;
}


/* ==================================================
   ESPÍRITU PUMA
================================================== */

.op-section-dark .op-eyebrow {
    color: #f2b705;
}

.op-section-dark h2 {
    margin: 10px 0 22px;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;
}

.op-section-dark p {
    color: rgba(255,255,255,.82);
    line-height: 1.8;
}

.op-values {
    display: grid;
    gap: 18px;
}

.op-value {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.05);
}

.op-value > i {
    flex-shrink: 0;
    color: #f2b705;
    font-size: 1.8rem;
}

.op-value h3 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 1.15rem;
}

.op-value p {
    margin: 0;
    font-size: .95rem;
}


/* ==================================================
   LOGROS
================================================== */

.op-achievement {
    height: 100%;
    padding: 35px 30px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    transition: .25s ease;
}

.op-achievement:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(15,23,42,.08);
}

.op-achievement-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #062d4a;
    color: #f2b705;
    font-size: 1.8rem;
}

.op-achievement h3 {
    margin-bottom: 12px;
    color: #0b2d5c;
    font-size: 1.3rem;
    font-weight: 800;
}

.op-achievement p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


/* ==================================================
   COMUNIDAD
================================================== */

.op-community-card {
    height: 100%;
    padding: 35px 30px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: .25s ease;
}

.op-community-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(15,23,42,.08);
}

.op-community-card > i {
    display: inline-block;
    margin-bottom: 20px;
    color: #0d6efd;
    font-size: 2.4rem;
}

.op-community-card h3 {
    margin-bottom: 12px;
    color: #0b2d5c;
    font-size: 1.3rem;
    font-weight: 800;
}

.op-community-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


/* ==================================================
   GALERÍA
================================================== */

.op-gallery-placeholder {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 2px dashed #d7dce3;
    border-radius: 16px;
    background: #f8fafc;
    color: #94a3b8;
}

.op-gallery-placeholder i {
    font-size: 3rem;
}

.op-gallery-placeholder span {
    font-weight: 600;
}


/* ==================================================
   CTA
================================================== */

.op-cta {
    padding: 85px 0;
    background: #f2b705;
    text-align: center;
}

.op-cta-content {
    max-width: 800px;
    margin: auto;
}

.op-cta .op-eyebrow {
    color: #0b2d5c;
}

.op-cta h2 {
    margin: 8px 0 15px;
    color: #0b2d5c;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
}

.op-cta p {
    margin: 0;
    color: #26384a;
    font-size: 1.1rem;
    line-height: 1.7;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 767.98px) {

    .op-hero {
        min-height: 520px;
    }

    .op-section {
        padding: 65px 0;
    }

    .op-hero h1 {
        font-size: 3rem;
    }

    .op-hero p {
        font-size: 1rem;
    }

    .op-card,
    .op-achievement,
    .op-community-card {
        padding: 28px 24px;
    }

}

/* ==================================================
   NOTICIAS
================================================== */

.op-news-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    transition: .25s ease;
}

.op-news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, .11);
}


/* ==================================================
   IMAGEN
================================================== */

.op-news-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f1f5f9;
}

.op-news-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.op-news-card:hover .op-news-image img {
    transform: scale(1.04);
}

.op-news-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.op-news-image-empty i {
    font-size: 3rem;
}


/* ==================================================
   CONTENIDO
================================================== */

.op-news-body {
    height: calc(100% - 220px);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
}


/* ==================================================
   CATEGORÍA
================================================== */

.op-news-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}

.op-news-category i {
    font-size: .85rem;
}


/* ==================================================
   TÍTULO
================================================== */

.op-news-title {
    margin: 0 0 12px;
    color: #0b2d5c;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.3;
}


/* ==================================================
   FECHA
================================================== */

.op-news-date {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 15px;
    color: #64748b;
    font-size: .9rem;
}

.op-news-date i {
    color: #0d6efd;
}


/* ==================================================
   RESUMEN
================================================== */

.op-news-summary {
    margin: 0;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.7;
}


/* ==================================================
   BOTÓN
================================================== */

.op-news-footer {
    margin-top: auto;
    padding-top: 24px;
}

.op-news-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #0d6efd;
    border-radius: 7px;
    color: #0d6efd;
    background: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: .2s ease;
}

.op-news-link i {
    transition: transform .2s ease;
}

.op-news-link:hover {
    color: #fff;
    background: #0d6efd;
}

.op-news-link:hover i {
    transform: translateX(4px);
}


/* ==================================================
   MENSAJE SIN NOTICIAS
================================================== */

.op-gallery-empty {
    max-width: 850px;
    min-height: 180px;
    margin: 0 auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.op-gallery-empty i {
    color: #0d6efd;
    font-size: 2.8rem;
}

.op-gallery-empty p {
    margin: 0;
    font-size: 1.05rem;
}


/* ==================================================
   ENCABEZADO DE NOTICIAS
================================================== */

.op-heading h1 {
    margin: 10px 0 15px;
    color: #0b2d5c;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 767.98px) {

    .op-section {
        padding: 65px 0;
    }

    .op-news-image {
        height: 210px;
    }

    .op-news-body {
        height: auto;
        padding: 25px 22px;
    }

    .op-news-title {
        font-size: 1.2rem;
    }

}

/* ==================================================
   NOTICIAS
================================================== */


/* ==================================================
   HERO
================================================== */

.nt-hero {
    padding: 90px 0 80px;
    background: #062d4a;
    color: #fff;
}

.nt-hero-content {
    max-width: 850px;
}

.nt-eyebrow {
    display: inline-block;
    color: #f2b705;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: .9rem;
}

.nt-hero h1 {
    margin: 12px 0 15px;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
}

.nt-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: 1.15rem;
    line-height: 1.8;
}


/* ==================================================
   SECCIÓN
================================================== */

.nt-section {
    padding: 90px 0;
    background: #fff;
}


/* ==================================================
   ENCABEZADO
================================================== */

.nt-heading {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.nt-heading > span {
    color: #0d6efd;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.nt-heading h2 {
    margin: 10px 0 15px;
    color: #0b2d5c;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
}

.nt-heading p {
    margin: 0;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.8;
}


/* ==================================================
   TARJETA
================================================== */

.nt-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
    transition: .25s ease;
}

.nt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(15,23,42,.11);
}


/* ==================================================
   IMAGEN
================================================== */

.nt-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f1f5f9;
}

.nt-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.nt-card:hover .nt-image img {
    transform: scale(1.04);
}

.nt-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.nt-image-empty i {
    font-size: 3rem;
}


/* ==================================================
   CUERPO
================================================== */

.nt-body {
    min-height: 300px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
}


/* ==================================================
   CATEGORÍA
================================================== */

.nt-category-wrapper {
    margin-bottom: 14px;
}

.nt-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}

.nt-category i {
    font-size: .85rem;
}


/* ==================================================
   TÍTULO
================================================== */

.nt-title {
    margin: 0 0 12px;
    color: #0b2d5c;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.3;
}


/* ==================================================
   FECHA
================================================== */

.nt-date {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 15px;
    color: #64748b;
    font-size: .9rem;
}

.nt-date i {
    color: #0d6efd;
}


/* ==================================================
   RESUMEN
================================================== */

.nt-summary {
    margin: 0;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.7;
}


/* ==================================================
   ENLACE
================================================== */

.nt-footer {
    margin-top: auto;
    padding-top: 24px;
}

.nt-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #0d6efd;
    border-radius: 7px;
    color: #0d6efd;
    background: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: .2s ease;
}

.nt-link i {
    transition: transform .2s ease;
}

.nt-link:hover {
    color: #fff;
    background: #0d6efd;
}

.nt-link:hover i {
    transform: translateX(4px);
}


/* ==================================================
   SIN NOTICIAS
================================================== */

.nt-empty {
    max-width: 850px;
    min-height: 180px;
    margin: 0 auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.nt-empty i {
    color: #0d6efd;
    font-size: 2.8rem;
}

.nt-empty p {
    margin: 0;
    font-size: 1.05rem;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 767.98px) {

    .nt-hero {
        padding: 65px 0 55px;
    }

    .nt-section {
        padding: 65px 0;
    }

    .nt-image {
        height: 210px;
    }

    .nt-body {
        min-height: auto;
        padding: 25px 22px;
    }

}

/* ==================================================
   DETALLES DE CONTENIDO
   Noticias / Logros / Avisos
================================================== */


/* ==================================================
   HERO COMPACTO PARA DETALLES
================================================== */

.content-detail-hero {
    padding: 38px 0 42px;
    background: #062d4a;
    color: #fff;
}

.content-detail-hero-content {
    max-width: 1000px;
}

.content-detail-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #f2b705;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.content-detail-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
}

.content-detail-hero p {
    max-width: 800px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.9);
    font-size: 1rem;
    line-height: 1.6;
}

/* ==================================================
   SECCIÓN PRINCIPAL
================================================== */

.content-detail-section {
    padding: 75px 0 100px;
    background: #fff;
}


/* ==================================================
   TARJETA
================================================== */

.content-detail-card {
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}


/* ==================================================
   IMAGEN PRINCIPAL
================================================== */

.content-detail-image {
    width: 100%;
    max-height: 560px;
    overflow: hidden;
    background: #f1f5f9;
}

.content-detail-image img {
    width: 100%;
    max-height: 560px;
    display: block;
    object-fit: cover;
}


/* ==================================================
   CUERPO
================================================== */

.content-detail-body {
    padding: 45px 55px 50px;
}


/* ==================================================
   CATEGORÍA
================================================== */

.content-detail-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    margin-bottom: 18px;
    border-radius: 6px;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}

.content-detail-category i {
    font-size: .85rem;
}


/* ==================================================
   TÍTULO
================================================== */

.content-detail-title {
    margin: 0 0 15px;
    color: #0b2d5c;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
}


/* ==================================================
   FECHA
================================================== */

.content-detail-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: #64748b;
    font-size: .95rem;
}

.content-detail-date i {
    color: #0d6efd;
}


/* ==================================================
   RESUMEN
================================================== */

.content-detail-summary {
    margin: 0;
    color: #475569;
    font-size: 1.15rem;
    line-height: 1.8;
}


/* ==================================================
   SEPARADOR
================================================== */

.content-detail-divider {
    margin: 35px 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
    opacity: 1;
}


/* ==================================================
   CONTENIDO
================================================== */

.content-detail-content {
    color: #334155;
    font-size: 1.05rem;
    line-height: 1.85;
}

.content-detail-content p {
    margin-bottom: 1.2rem;
}

.content-detail-content h2,
.content-detail-content h3,
.content-detail-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #0b2d5c;
    font-weight: 800;
}

.content-detail-content ul,
.content-detail-content ol {
    margin-bottom: 1.4rem;
}

.content-detail-content li {
    margin-bottom: .5rem;
}

.content-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.content-detail-content a {
    color: #0d6efd;
}

.content-detail-content blockquote {
    margin: 25px 0;
    padding: 20px 25px;
    border-left: 4px solid #f2b705;
    background: #f8fafc;
    color: #526174;
}


/* ==================================================
   PIE DEL DETALLE
================================================== */

.content-detail-footer {
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid #e5e7eb;
}


/* ==================================================
   BOTÓN REGRESAR
================================================== */

.content-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #0d6efd;
    border-radius: 7px;
    color: #0d6efd;
    background: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: .2s ease;
}

.content-detail-back:hover {
    color: #fff;
    background: #0d6efd;
}


/* ==================================================
   DETALLE DE LOGRO
================================================== */

.logro-detail-hero {
    padding: 75px 0 70px;
    background: #062d4a;
    color: #fff;
}

.logro-detail-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
}

.logro-detail-section {
    padding: 75px 0 100px;
    background: #fff;
}


/* ==================================================
   DETALLE DE AVISO
================================================== */

.aviso-detail-hero {
    padding: 75px 0 70px;
    background: #062d4a;
    color: #fff;
}

.aviso-detail-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
}

.aviso-detail-section {
    padding: 75px 0 100px;
    background: #fff;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 767.98px) {

    .content-detail-hero,
    .logro-detail-hero,
    .aviso-detail-hero {
        padding: 60px 0 55px;
    }

    .content-detail-section,
    .logro-detail-section,
    .aviso-detail-section {
        padding: 55px 0 70px;
    }

    .content-detail-body {
        padding: 30px 24px 35px;
    }

    .content-detail-image,
    .content-detail-image img {
        max-height: 400px;
    }

}

/* ==================================================
   CONTACTO
================================================== */

.contact-section {
    padding: 80px 0;
    background: #fff;
}

.contact-intro {
    max-width: 750px;
    margin: 0 auto 50px;
}

.contact-intro h2,
.contact-location-header h2 {
    margin: 8px 0 12px;
    color: #062d5c;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}

.contact-intro p,
.contact-location-header p {
    margin: 0;
    color: #64748b;
    font-size: 1.05rem;
}

.contact-card {
    height: 100%;
    padding: 30px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(6, 45, 92, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(6, 45, 92, .12);
}

.contact-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #062d5c;
    color: #f2b705;
    font-size: 1.5rem;
}

.contact-card h3 {
    margin-bottom: 12px;
    color: #062d5c;
    font-size: 1.15rem;
    font-weight: 700;
}

.contact-card p {
    min-height: 58px;
    margin-bottom: 18px;
    color: #64748b;
    line-height: 1.6;
}

.contact-link {
    color: #0866ff;
    font-weight: 600;
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-social {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
    padding: 28px 32px;
    background: #f8fafc;
    border-radius: 14px;
}

.contact-social > i {
    font-size: 2.5rem;
    color: #0866ff;
}

.contact-social h3 {
    margin: 0 0 5px;
    color: #062d5c;
    font-size: 1.2rem;
    font-weight: 700;
}

.contact-social p {
    margin: 0;
    color: #64748b;
}

.contact-social .btn {
    margin-left: auto;
    white-space: nowrap;
}

.contact-location {
    margin-top: 75px;
}

.contact-location-header {
    margin-bottom: 30px;
    text-align: center;
}

.contact-map-placeholder {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-radius: 16px;
    background: #062d5c;
    color: #fff;
    text-align: center;
}

.contact-map-placeholder i {
    display: block;
    margin-bottom: 15px;
    color: #f2b705;
    font-size: 3rem;
}

.contact-map-placeholder h3 {
    margin-bottom: 10px;
    font-size: 1.6rem;
    font-weight: 700;
}

.contact-map-placeholder p {
    margin-bottom: 22px;
    color: rgba(255,255,255,.85);
    line-height: 1.7;
}

@media (max-width: 767.98px) {

    .contact-section {
        padding: 55px 0;
    }

    .contact-social {
        flex-direction: column;
        text-align: center;
    }

    .contact-social .btn {
        margin-left: 0;
    }

}