:root{
    --primary:#0b3d91;
    --primary-dark:#06265c;
    --secondary:#f4b400;
    --accent:#19a7ce;
    --dark:#0b1628;
    --text:#344054;
    --muted:#667085;
    --light:#f6f8fc;
    --white:#fff;
    --border:#e7ebf2;
    --shadow:0 15px 45px rgba(11,22,40,.10);
    --radius:20px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{font-family:'Poppins',sans-serif;color:var(--text);background:var(--white);line-height:1.7;overflow-x:hidden}

img{max-width:100%;display:block}

a{text-decoration:none}

.container{width:min(1180px,92%);margin:auto}

/* =========================
HEADER
========================= */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(6,38,92,.94);
    backdrop-filter:blur(15px);
    box-shadow:0 5px 25px rgba(0,0,0,.10);
}

.nav{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo-container{display:flex;align-items:center;gap:13px;min-width:0}

.logo{width:55px;height:55px;object-fit:contain}

.logo-text h1{
    color:var(--white);
    font-size:17px;
    font-weight:700;
    line-height:1.25;
}

.logo-text span{
    color:#dce7fa;
    font-size:11px;
    letter-spacing:.5px;
}

nav{display:flex;align-items:center;gap:5px}

nav a{
    color:#fff;
    font-size:13px;
    font-weight:500;
    padding:9px 11px;
    border-radius:8px;
    transition:.3s;
}

nav a:hover{background:rgba(255,255,255,.12);color:var(--secondary)}

.menu-mobile{
    display:none;
    color:#fff;
    font-size:25px;
    cursor:pointer;
}

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

.hero{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:#fff;
}

.video-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(3,20,52,.90),rgba(6,38,92,.70),rgba(4,18,38,.58));
}

.hero:after{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
    background-size:28px 28px;
    opacity:.30;
}

.hero-content{
    position:relative;
    z-index:5;
    width:min(900px,90%);
    text-align:center;
    padding-top:70px;
}

.badge{
    display:inline-flex;
    align-items:center;
    padding:8px 17px;
    border:1px solid rgba(255,255,255,.30);
    background:rgba(255,255,255,.10);
    border-radius:50px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.4px;
    backdrop-filter:blur(8px);
    margin-bottom:20px;
}

.hero h2{
    font-size:clamp(38px,6vw,72px);
    line-height:1.08;
    font-weight:800;
    letter-spacing:-2px;
    margin-bottom:18px;
    text-shadow:0 5px 25px rgba(0,0,0,.25);
}

.hero p{
    font-size:18px;
    color:#e8effc;
    margin-bottom:32px;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:12px 22px;
    border-radius:10px;
    border:1px solid transparent;
    background:var(--primary);
    color:#fff;
    font-size:13px;
    font-weight:600;
    transition:.3s;
    box-shadow:0 8px 22px rgba(0,0,0,.15);
}

.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.btn-primary{background:var(--primary)}

.btn-info{background:var(--accent)}

.btn-secondary{
    background:var(--secondary);
    color:#18212f!important;
}

.circle{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    z-index:2;
}

.circle1{width:350px;height:350px;right:-100px;top:120px}

.circle2{width:230px;height:230px;left:-80px;bottom:70px}

.circle3{width:100px;height:100px;right:18%;bottom:12%}

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

.section{
    padding:95px 0;
    background:#fff;
}

.section:nth-of-type(even){background:var(--light)}

.section-title{
    max-width:800px;
    margin:0 auto 55px;
    text-align:center;
}

.section-title span,.agenda-titulo span{
    display:inline-block;
    color:var(--primary);
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.section-title h2{
    color:var(--dark);
    font-size:clamp(28px,4vw,42px);
    line-height:1.2;
    font-weight:800;
    margin-bottom:14px;
}

.section-title p{
    color:var(--muted);
    font-size:14px;
}

/* =========================
NOSOTROS
========================= */

.nosotros-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center;
    margin-bottom:70px;
}

.nosotros-img{
    position:relative;
    border-radius:var(--radius);
}

.nosotros-img img{
    width:100%;
    height:430px;
    object-fit:cover;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.nosotros-badge{
    position:absolute;
    left:25px;
    bottom:25px;
    padding:15px 20px;
    background:rgba(6,38,92,.94);
    color:#fff;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.nosotros-badge strong{display:block;font-size:20px}

.nosotros-badge span{font-size:11px;color:#d9e5f8}

.nosotros-texto p{
    font-size:14px;
    color:var(--text);
    margin-bottom:18px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;
    box-shadow:var(--shadow);
    transition:.3s;
}

.card:hover{transform:translateY(-7px)}

.card .icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:#eaf1ff;
    color:var(--primary);
    font-size:24px;
    margin-bottom:20px;
}

.card h3{
    color:var(--dark);
    font-size:20px;
    margin-bottom:10px;
}

.card p{
    color:var(--muted);
    font-size:13px;
}

/* =========================================================
EQUIPO DIRECTIVO
========================================================= */

.equipo-section{
    position:relative;
    overflow:hidden;
    background:#f7f9fc;
}

.equipo-content{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:75px;
    align-items:center;
}

.equipo-image{
    position:relative;
    padding:18px;
}

.equipo-image-card{
    position:relative;
    z-index:3;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(11,61,145,.08);
    box-shadow:0 25px 65px rgba(11,22,40,.16);
}

.equipo-image-card:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(6,38,92,.02),rgba(6,38,92,.30));
}

.equipo-image-card img{
    position:relative;
    z-index:0;
    width:100%;
    height:500px;
    object-fit:cover;
    object-position:center;
    transition:.5s;
}

.equipo-image-card:hover img{
    transform:scale(1.03);
}

.equipo-decoration{
    position:absolute;
    border-radius:24px;
    pointer-events:none;
}

.equipo-decoration-1{
    left:0;
    bottom:0;
    width:72%;
    height:74%;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    opacity:.12;
}

.equipo-decoration-2{
    right:0;
    top:0;
    width:180px;
    height:180px;
    border:2px solid rgba(244,180,0,.35);
    border-radius:50%;
}

.equipo-image-caption{
    position:absolute;
    z-index:5;
    left:28px;
    right:28px;
    bottom:25px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 15px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:14px;
    background:rgba(4,28,58,.82);
    backdrop-filter:blur(12px);
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.20);
}

.equipo-caption-icon{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    border-radius:11px;
    background:rgba(244,180,0,.15);
    color:var(--secondary-light);
    font-size:17px;
}

.equipo-image-caption strong{
    display:block;
    font-size:11px;
    font-weight:800;
}

.equipo-image-caption span{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.68);
    font-size:8px;
}

.equipo-text{
    position:relative;
}

.equipo-text .mini-title{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.equipo-text .mini-title i{
    color:var(--secondary);
}

.equipo-text h3{
    max-width:520px;
    margin:14px 0 20px;
    color:var(--dark);
    font-size:32px;
    line-height:1.18;
    font-weight:800;
}

.equipo-text p{
    margin-bottom:15px;
    color:#66768b;
    font-size:11px;
    line-height:1.9;
}

.equipo-pilares{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:25px;
}

.equipo-pilar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fff;
    transition:.3s;
}

.equipo-pilar:hover{
    transform:translateX(5px);
    border-color:#d5e1f4;
    box-shadow:0 10px 24px rgba(11,61,145,.08);
}

.equipo-pilar-icon{
    width:39px;
    height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    border-radius:10px;
    background:#edf4ff;
    color:var(--primary);
    font-size:14px;
}

.equipo-pilar:nth-child(2) .equipo-pilar-icon{
    background:#fff7df;
    color:#d79b00;
}

.equipo-pilar:nth-child(3) .equipo-pilar-icon{
    background:#e9f8f1;
    color:#1aa66d;
}

.equipo-pilar strong{
    display:block;
    color:var(--dark);
    font-size:10px;
    font-weight:800;
}

.equipo-pilar small{
    display:block;
    margin-top:2px;
    color:#8491a2;
    font-size:8px;
}

.equipo-highlight{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
    padding:13px 15px;
    border-radius:13px;
    background:linear-gradient(135deg,#061f4b,#0b3d91);
    color:#fff;
    box-shadow:0 12px 28px rgba(11,61,145,.18);
}

.equipo-highlight-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    border-radius:11px;
    background:rgba(244,180,0,.14);
    color:var(--secondary-light);
}

.equipo-highlight small{
    display:block;
    color:rgba(255,255,255,.55);
    font-size:6px;
    font-weight:800;
    letter-spacing:1px;
}

.equipo-highlight strong{
    display:block;
    margin-top:2px;
    font-size:9px;
    font-weight:700;
}


/* =========================================================
RESPONSIVE EQUIPO DIRECTIVO
========================================================= */

@media(max-width:900px){

    .equipo-content{
        grid-template-columns:1fr;
        gap:45px;
    }

    .equipo-image{
        padding:10px;
    }

    .equipo-image-card img{
        height:450px;
    }

    .equipo-text{
        text-align:left;
    }

}

@media(max-width:600px){

    .equipo-image-card img{
        height:350px;
    }

    .equipo-image-caption{
        left:15px;
        right:15px;
        bottom:15px;
        padding:10px 11px;
    }

    .equipo-caption-icon{
        width:37px;
        height:37px;
        font-size:14px;
    }

    .equipo-image-caption strong{
        font-size:9px;
    }

    .equipo-image-caption span{
        font-size:7px;
    }

    .equipo-text h3{
        font-size:27px;
    }

}

/* =========================
AGENDA DIGITAL
========================= */

.agenda-digital{
    padding:100px 0;
    background:linear-gradient(135deg,#061f4b,#0b3d91);
    color:#fff;
    position:relative;
    overflow:hidden;
}

.agenda-digital:before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(25,167,206,.10);
    top:-250px;
    right:-150px;
}

.agenda-titulo{
    text-align:center;
    max-width:750px;
    margin:0 auto 55px;
    position:relative;
    z-index:2;
}

.agenda-titulo span{color:#7bdcf5}

.agenda-titulo h2{
    font-size:clamp(30px,4vw,46px);
    line-height:1.15;
    font-weight:800;
    margin-bottom:15px;
}

.agenda-titulo p{
    color:#d7e3f7;
    font-size:14px;
}

.agenda-contenido{
    display:grid;
    grid-template-columns:280px 1fr 220px;
    gap:45px;
    align-items:center;
    position:relative;
    z-index:2;
}

.agenda-img img{
    width:100%;
    max-height:350px;
    object-fit:contain;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,.25));
}

.agenda-texto ul{list-style:none}

.agenda-texto li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#eef5ff;
    font-size:13px;
    font-weight:500;
}

.agenda-texto li i{
    width:30px;
    color:#69d7ef;
    text-align:center;
}

.agenda-botones{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.agenda-botones a{
    display:block;
    transition:.3s;
}

.agenda-botones a:hover{transform:translateY(-4px) scale(1.02)}

.servicio-img,.play-img,.iphone-img{
    max-width:190px;
    max-height:75px;
    object-fit:contain;
}

/* =========================
MODAL
========================= */

.modal-comunicado{
    display:none;
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(0,0,0,.78);
    align-items:center;
    justify-content:center;
    padding:25px;
}

.modal-comunicado.active{display:flex}

.modal-box{
    position:relative;
    max-width:700px;
    width:100%;
    background:#fff;
    padding:15px;
    border-radius:18px;
    box-shadow:0 25px 80px rgba(0,0,0,.4);
    animation:modalIn .3s ease;
}

.modal-box img{
    width:100%;
    max-height:75vh;
    object-fit:contain;
    border-radius:10px;
}

.btn-cerrar{
    position:absolute;
    top:-18px;
    right:-18px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#222;
    font-size:20px;
    cursor:pointer;
    z-index:2;
    box-shadow:0 5px 20px rgba(0,0,0,.25);
}

.btn-cerrar-texto{
    display:block;
    margin:12px auto 3px;
    padding:9px 25px;
    border:0;
    border-radius:8px;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    font-family:inherit;
    font-weight:600;
}

@keyframes modalIn{
    from{opacity:0;transform:scale(.92)}
    to{opacity:1;transform:scale(1)}
}

/* =========================
TALLERES
========================= */

.talleres-grid{
    grid-template-columns:repeat(4,1fr);
}

.taller-card{
    padding:0;
    overflow:hidden;
    position:relative;
}

.taller-card img{
    width:100%;
    height:230px;
    object-fit:cover;
    transition:.5s;
}

.taller-card:hover img{transform:scale(1.06)}

.taller-info{
    padding:20px;
    background:#fff;
}

.taller-info span{
    color:var(--accent);
    text-transform:uppercase;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
}

.taller-info h3{
    margin-top:4px;
    margin-bottom:0;
}

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

.section-gradient{
    background:linear-gradient(135deg,#061d45,#0b3d91)!important;
}

.section-title.light span{color:#7bdcf5}

.section-title.light h2{color:#fff}

.section-title.light p{color:#d6e2f4}

.gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#000;
    box-shadow:0 15px 40px rgba(0,0,0,.20);
}

.gallery video{
    display:block;
    width:100%;
    height:330px;
    object-fit:cover;
    transition:.5s;
}

.gallery-item:hover video{transform:scale(1.04)}

.gallery-overlay{
    position:absolute;
    right:18px;
    bottom:18px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 5px 20px rgba(0,0,0,.20);
}

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

.contact{background:var(--light)}

.contact-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:45px;
    align-items:stretch;
}

.contact-info{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:35px;
    box-shadow:var(--shadow);
}

.contact-info h3{
    color:var(--dark);
    font-size:23px;
    margin-bottom:20px;
}

.contact-button{
    width:100%;
    margin-bottom:25px;
}

.info-box{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px 0;
    border-top:1px solid var(--border);
}

.info-box>i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#edf3ff;
    color:var(--primary);
    flex-shrink:0;
}

.info-box h4{
    color:var(--dark);
    font-size:14px;
    margin-bottom:2px;
}

.info-box p{
    color:var(--muted);
    font-size:12px;
}

.contact-map{
    min-height:520px;
    overflow:hidden;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.contact-map iframe{
    width:100%;
    height:100%;
    min-height:520px;
    border:0;
}

/* =========================
FOOTER
========================= */

footer{
    background:#06172f;
    color:#fff;
    text-align:center;
    padding:40px 20px 25px;
}

.footer-content{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

.footer-content img{
    width:55px;
    height:55px;
    object-fit:contain;
}

.footer-content h3{
    font-size:16px;
    text-align:left;
}

.footer-content p{
    font-size:11px;
    color:#9db0cc;
    text-align:left;
}

.copyright{
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.10);
    color:#91a3bf;
    font-size:11px;
}

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

#backTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:45px;
    height:45px;
    border:0;
    border-radius:50%;
    background:var(--secondary);
    color:#18212f;
    font-size:16px;
    cursor:pointer;
    z-index:900;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:.3s;
    box-shadow:0 8px 25px rgba(0,0,0,.20);
}

#backTop.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

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

@media(max-width:1100px){
    nav a{font-size:12px;padding:8px 7px}
    .agenda-contenido{grid-template-columns:230px 1fr 190px;gap:30px}
    .talleres-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:850px){
    .nav{min-height:72px}
    .menu-mobile{display:block}
    nav{
        position:absolute;
        top:72px;
        left:0;
        width:100%;
        background:#06265c;
        padding:15px 5%;
        display:none;
        flex-direction:column;
        align-items:stretch;
    }

    nav.active{display:flex}

    nav a{text-align:center;padding:12px}

    .logo{width:48px;height:48px}

    .logo-text h1{font-size:14px}
    .logo-text span{font-size:9px}

    .hero{min-height:650px}

    .hero h2{letter-spacing:-1px}

    .nosotros-content{grid-template-columns:1fr;gap:35px}

    .cards{grid-template-columns:1fr}

    .agenda-contenido{
        grid-template-columns:1fr;
        text-align:center;
    }

    .agenda-img img{
        max-width:260px;
        margin:auto;
    }

    .agenda-texto{text-align:left}

    .agenda-botones{
        flex-direction:row;
        justify-content:center;
        flex-wrap:wrap;
    }

    .contact-grid{grid-template-columns:1fr}

    .contact-map,.contact-map iframe{min-height:400px}

    .gallery{grid-template-columns:1fr}
}

@media(max-width:550px){
    .section,.agenda-digital{padding:70px 0}

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .hero-buttons .btn{
        width:100%;
        max-width:320px;
    }

    .hero h2{font-size:39px}

    .hero p{font-size:15px}

    .nosotros-img img{height:320px}

    .nosotros-badge{
        left:15px;
        bottom:15px;
    }

    .talleres-grid{grid-template-columns:1fr}

    .gallery video{height:250px}

    .contact-info{padding:25px}

    .footer-content{flex-direction:column}

    .footer-content h3,.footer-content p{text-align:center}

    .btn-cerrar{
        right:5px;
        top:5px;
    }
}


/* PUBLICACIONES */

.publicaciones-section{background:#f7f9fc;}

.publicaciones-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;}

.publicacion-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 30px rgba(15,23,42,.07);transition:.3s;display:flex;flex-direction:column;}

.publicacion-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);}

.publicacion-imagen{position:relative;display:block;height:240px;overflow:hidden;background:#eef2f7;}

.publicacion-imagen img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}

.publicacion-card:hover .publicacion-imagen img{transform:scale(1.06);}

.publicacion-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.35);opacity:0;transition:.3s;}

.publicacion-overlay i{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.95);color:var(--primary);font-size:18px;}

.publicacion-card:hover .publicacion-overlay{opacity:1;}

.publicacion-body{padding:24px;display:flex;flex-direction:column;flex:1;}

.publicacion-fecha{display:flex;align-items:center;gap:7px;color:#64748b;font-size:11px;font-weight:500;margin-bottom:13px;}

.publicacion-fecha i{color:var(--primary);}

.publicacion-texto{margin:0;color:#334155;font-size:12px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:82px;}

.publicacion-btn{margin-top:20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:fit-content;padding:10px 17px;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;font-weight:600;transition:.3s;}

.publicacion-btn:hover{background:var(--primary-dark);transform:translateX(3px);}