/* =====================================================
   APECRIM LA LIBERTAD
   Institutional Website 2026
   STYLE.CSS FINAL
===================================================== */


/* ===============================
   VARIABLES
================================ */

:root{

    --primary:#071827;
    --secondary:#102A43;

    --gold:#C99A2E;
    --gold-light:#E5C56A;

    --white:#FFFFFF;

    --gray:#F5F7FA;

    --text:#263238;

    --border:
    rgba(36,59,83,.12);

    --shadow:
    0 15px 40px rgba(0,0,0,.10);

}



/* ===============================
   RESET GENERAL
================================ */


*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Inter',Arial,sans-serif;

    color:var(--text);

    background:white;

    line-height:1.7;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

}



p{

    font-size:16px;

}



h1,
h2,
h3{

    font-family:'Montserrat',Arial,sans-serif;

    line-height:1.3;

}





/* ===============================
   CONTENEDOR
================================ */


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}





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


.header{

    position:fixed;

    width:100%;

    top:0;

    z-index:1000;

    background:
    rgba(7,24,39,.96);


    backdrop-filter:blur(10px);

}



.nav{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img{

    width:90px;

}





.menu{

    display:flex;

    align-items:center;

    gap:32px;

}



.menu a{

    color:white;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}



.menu a:hover{

    color:var(--gold-light);

}



.hamburger{

    display:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}







/* ===============================
   BOTONES
================================ */


.btn{

    display:inline-block;

    padding:13px 32px;

    border-radius:30px;

    font-weight:600;

    transition:.3s;

    cursor:pointer;

}



.btn-gold{

    background:var(--gold);

    color:white;

}



.btn-gold:hover{

    background:var(--gold-light);

    transform:translateY(-3px);

}



.btn-outline{

    border:2px solid var(--gold);

    color:var(--gold);

}



.btn-outline:hover{

    background:var(--gold);

    color:white;

}








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


.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;



    background:

    linear-gradient(
        rgba(7,24,39,.88),
        rgba(7,24,39,.95)
    ),

    url("../images/hero.jpg");



    background-size:cover;

    background-position:center;


    padding-top:90px;

}





.hero img{

    width:280px;

    max-width:80%;

    margin:0 auto 35px;


    filter:

    drop-shadow(
    0 10px 20px rgba(0,0,0,.45)
    );

}




.hero h1{

    font-size:48px;

    max-width:950px;

    margin:auto;

}



.hero h2{

    margin-top:15px;

    font-size:32px;

    color:var(--gold-light);

}



.hero p{

    margin:25px 0;

    font-size:22px;

    letter-spacing:4px;

}








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


.section{

    padding:90px 0;

}



.section-title{

    text-align:center;

    margin-bottom:50px;

}



.section-title h2{

    font-size:38px;

    color:var(--primary);

}



.section-title span{

    display:block;

    width:90px;

    height:3px;

    background:var(--gold);

    margin:20px auto;

}



.section-title p{

    max-width:750px;

    margin:auto;

    color:#555;

}







/* ===============================
   CARDS GENERALES
   (Pilares / Capacitación)
================================ */


.cards{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}




.card{

    background:white;

    padding:35px;

    border-radius:15px;

    box-shadow:var(--shadow);

    border-top:

    4px solid var(--gold);

    transition:.35s;

}




.card:hover{

    transform:translateY(-8px);

}



.card h3{

    color:var(--primary);

    margin:15px 0;

}



.card i{

    font-size:45px;

    color:var(--gold);

}



.card p{

    color:#555;

}








/* ===============================
   REVEAL ANIMATION
================================ */


.reveal{

    opacity:0;

    transform:

    translateY(40px);


    transition:

    all .8s ease;

}



.reveal.active{

    opacity:1;

    transform:

    translateY(0);

}








/* ===============================
   MISION Y VISION
================================ */


.institution-section{

    padding:110px 0;

    background:white;

}



.institution-grid{


    display:grid;

    grid-template-columns:

    1fr 1fr;


    gap:80px;

    margin-top:60px;

}



.institution-item{

    display:flex;

    gap:30px;

    align-items:flex-start;

}



.institution-item:first-child{

    border-right:

    1px solid var(--gold);

    padding-right:50px;

}



.institution-icon{


    min-width:75px;

    height:75px;

    border-radius:50%;


    background:var(--primary);

    color:var(--gold-light);


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:32px;

}



.institution-item h3{


    font-size:30px;

    color:var(--primary);

    margin-bottom:20px;


}



.institution-item p{


    font-size:17px;

    line-height:1.9;

    color:#555;

}







/* ===============================
   ESPECIALIDADES HOME
================================ */


.specialties-preview{


    display:grid;

    grid-template-columns:

    1.2fr 1fr;


    gap:70px;

    align-items:center;


    margin-top:60px;


}





.specialties-image{


    height:480px;

    overflow:hidden;

    border-radius:25px;

    position:relative;

}



.specialty-slider{


    width:100%;

    height:100%;

    position:relative;

}



.specialty-slider img{


    position:absolute;


    width:100%;

    height:100%;


    object-fit:cover;


    opacity:0;


    transition:

    opacity 1.2s ease;

}



.specialty-slider img.active{

    opacity:1;

}






.specialties-list{


    display:grid;

    grid-template-columns:

    1fr 1fr;


    gap:25px;

}




.specialties-list div{


    display:flex;

    align-items:center;

    gap:15px;

    color:var(--primary);

}



.specialties-list i{


    color:var(--gold);

    font-size:25px;

}



.specialties-list .btn{


    grid-column:1/-1;

    width:max-content;

    margin-top:30px;

}
/* ===================================
   VALORES INSTITUCIONALES
=================================== */


.values-section{

    padding:100px 0;

    background:var(--gray);

}




.values-grid{


    display:grid;

    grid-template-columns:

    1fr 1fr;


    gap:45px 80px;


    margin-top:60px;


}




.value-item{


    display:flex;


    gap:25px;


    padding-bottom:30px;


    border-bottom:

    1px solid var(--border);


}



.value-number{


    font-size:42px;


    font-weight:700;


    color:var(--gold);


    line-height:1;


    min-width:65px;


    font-family:'Montserrat',sans-serif;


}



.value-item h3{


    margin-bottom:10px;


    font-size:24px;


    color:var(--primary);


}



.value-item p{


    color:#555;


    line-height:1.7;


}








/* ===================================
   REPEACRIM LL
=================================== */


.repeacrim-section{


    background:white;


}



.repeacrim-grid{


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:70px;


    margin-top:60px;


    align-items:start;


}




.repeacrim-content h3,


.repeacrim-register h3{


    color:var(--primary);


    font-size:30px;


    margin-bottom:25px;


}





.repeacrim-content p{


    color:#555;


    font-size:17px;


    line-height:1.8;


}






.repeacrim-content ul{


    margin-top:30px;


}





.repeacrim-content li{


    list-style:none;


    margin-bottom:18px;


    color:#444;


    display:flex;


    gap:12px;


    align-items:flex-start;


}




.repeacrim-content i{


    color:var(--gold);


    margin-top:5px;


}







/* FORMULARIO */


.repeacrim-register{


    background:var(--gray);


    padding:40px;


    border-radius:20px;


}





.repeacrim-register input,


.repeacrim-register textarea{


    width:100%;


    padding:15px;


    margin-bottom:18px;


    border:


    1px solid #ddd;


    font-family:inherit;


    font-size:15px;


}





.repeacrim-register textarea{


    height:130px;


    resize:none;


}





.repeacrim-register button{


    border:none;


}





.repeacrim-bottom{


    margin-top:70px;


    padding:50px;


    text-align:center;


    background:var(--primary);


    color:white;


    border-radius:20px;


}





.repeacrim-bottom h3{


    color:var(--gold-light);


    font-size:30px;


    margin-bottom:15px;


}





.repeacrim-bottom p{


    max-width:850px;


    margin:0 auto 30px;


}








/* ===================================
   CAPACITACIÓN
=================================== */


#capacitacion{


    background:var(--gray);


}









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


#contacto{


    background:white;


    text-align:center;


}





#contacto strong{


    color:var(--gold);


}








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


.footer{


    background:var(--primary);


    color:white;


    text-align:center;


    padding:45px 20px;


}



.footer strong{


    color:var(--gold-light);


    font-size:20px;


}









/* ===================================
   PAGINAS INTERNAS
=================================== */


.interior{


    min-height:55vh;


    padding-top:120px;


}




.interior h1{


    font-size:50px;


    color:var(--primary);


}









/* ===================================
   TABLET
=================================== */


@media(max-width:992px){



.cards{


    grid-template-columns:

    repeat(2,1fr);


}





.hero h1{


    font-size:40px;


}




.menu{


    gap:20px;


}




.specialties-preview{


    grid-template-columns:1fr;


}





.institution-grid{


    gap:40px;


}




.repeacrim-grid{


    grid-template-columns:1fr;


}




}









/* ===================================
   MOBILE
=================================== */


@media(max-width:768px){



.nav{


    height:80px;


}



.logo img{


    width:70px;


}





.hamburger{


    display:block;


}





.menu{


    position:absolute;


    top:80px;


    left:0;


    width:100%;


    background:var(--primary);


    display:none;


    flex-direction:column;


    padding:25px 0;


}





.menu.active{


    display:flex;


}



.menu a{


    padding:12px;


}






.nav > .btn{


    display:none;


}







.hero{


    padding:120px 20px 60px;


}





.hero img{


    width:190px;


}



.hero h1{


    font-size:30px;


}



.hero h2{


    font-size:22px;


}




.hero p{


    font-size:15px;


    letter-spacing:2px;


}





.section{


    padding:60px 0;


}





.section-title h2{


    font-size:28px;


}







.cards{


    grid-template-columns:

    1fr;


}







.card{


    padding:25px;


}





.institution-grid{


    grid-template-columns:

    1fr;


}





.institution-item{


    gap:20px;


}





.institution-item:first-child{


    border-right:none;


    border-bottom:

    1px solid var(--gold);


    padding-right:0;


    padding-bottom:40px;


}







.institution-icon{


    min-width:60px;


    height:60px;


    font-size:25px;


}





.institution-item h3{


    font-size:24px;


}





.specialties-image{


    height:330px;


}




.specialties-list{


    grid-template-columns:

    1fr;


}





.values-grid{


    grid-template-columns:

    1fr;


    gap:35px;


}





.value-number{


    font-size:35px;


    min-width:55px;


}




.value-item h3{


    font-size:21px;


}





.repeacrim-grid{


    grid-template-columns:

    1fr;


}





.repeacrim-register{


    padding:25px;


}




.repeacrim-bottom{


    padding:35px 20px;


}




.repeacrim-bottom h3{


    font-size:24px;


}





.interior h1{


    font-size:35px;


}





}









/* ===================================
   SMALL MOBILE
=================================== */


@media(max-width:420px){



.hero h1{


    font-size:26px;


}




.hero p{


    font-size:14px;


}





.value-item{


    gap:15px;


}



.value-number{


    font-size:30px;


}




}
/* APECRIM | Actividades Institucionales 2026 */
#capacitacion{scroll-margin-top:94px}
.ape-activities{background:#f5f7fa;padding:105px 0 95px;color:#243b53}
.ape-activities *{box-sizing:border-box}
.ape-activities-head{text-align:center;max-width:800px;margin:0 auto 52px}
.ape-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:2.7px;font-weight:800;color:#a77918}
.ape-activities-head h2{font-size:clamp(29px,4vw,46px);line-height:1.2;color:#071827;margin:18px 0}
.ape-activities-head h2 em{font-style:normal;color:#af8126}
.ape-activities-head>p{color:#627587;font-size:16px;line-height:1.85}
.ape-feature-grid{display:grid;grid-template-columns:1.22fr 1fr 1fr;gap:18px}
.ape-feature{display:flex;flex-direction:column;min-height:285px;background:#fff;border:1px solid #e4eaf0;border-radius:17px;padding:29px;transition:transform .3s,border-color .3s,box-shadow .3s}
.ape-feature:hover{transform:translateY(-5px);border-color:#dec482;box-shadow:0 15px 32px rgba(7,24,39,.08)}
.ape-feature-lead{background:linear-gradient(145deg,#0a2236,#16374d);border-color:#24435c;color:#fff}
.ape-feature-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:33px;color:#be922d}
.ape-feature-head i{font-size:29px}.ape-feature-lead .ape-feature-head{color:#e5c56a}
.ape-feature-count{font-size:10px;letter-spacing:1.6px;font-weight:750}
.ape-feature h3{color:#071827;font-size:22px;margin-bottom:13px}.ape-feature-lead h3{color:#fff}
.ape-feature p{font-size:14px;line-height:1.8;color:#627587}.ape-feature-lead p{color:#d3e0e9}
.ape-keywords{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:20px}
.ape-keywords span{border:1px solid #527084;border-radius:30px;padding:5px 10px;color:#e0e8ee;font-size:10px}
.ape-text-link{margin-top:auto;padding-top:20px;color:#9a7020;font-size:13px;font-weight:750;display:inline-flex;gap:9px;align-items:center}
.ape-text-link:hover{color:#071827}
.ape-catalog{display:grid;grid-template-columns:.65fr 1.35fr;gap:70px;align-items:start;margin-top:86px;scroll-margin-top:110px}
.ape-catalog-intro h3{font-size:30px;color:#071827;margin:12px 0 16px}.ape-catalog-intro p{color:#637687;line-height:1.85}
.ape-accordion{display:grid;gap:14px}.ape-topic{background:#fff;border:1px solid #e0e6ed;border-radius:14px;overflow:hidden}
.ape-topic[open]{border-color:#cbad65}.ape-topic summary{cursor:pointer;display:flex;align-items:center;gap:15px;padding:20px 22px;list-style:none}.ape-topic summary::-webkit-details-marker{display:none}
.ape-topic-symbol{display:grid;place-items:center;background:#edf2f5;border-radius:11px;min-width:47px;height:47px;color:#ac8129;font-size:19px}
.ape-topic summary strong,.ape-topic summary small{display:block}.ape-topic summary strong{color:#102a43;font-size:16px}.ape-topic summary small{font-size:12px;color:#7c8996;margin-top:4px}
.ape-plus{margin-left:auto;color:#b58a30}.ape-topic[open] .ape-plus{transform:rotate(45deg)}
.ape-topic-inner{border-top:1px solid #e8edf2;padding:14px 23px 24px}
.ape-topic-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;list-style:none;margin:0;padding:0}
.ape-topic-list li{position:relative;padding-left:17px;font-size:13px;line-height:1.6;color:#50677a}.ape-topic-list li:before{content:'•';color:#c99a2e;position:absolute;left:0;font-weight:bold}
.ape-community-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin-top:83px}
.ape-community-card{background:#fff;border:1px solid #e0e6ed;border-radius:16px;padding:27px;display:flex;flex-direction:column;min-height:270px}
.ape-community-icon{width:52px;height:52px;display:grid;place-items:center;background:#102a43;color:#e5c56a;border-radius:12px;font-size:21px;margin-bottom:22px}
.ape-community-card h3{color:#102a43;font-size:19px;margin-bottom:11px}.ape-community-card>p{font-size:13px;line-height:1.8;color:#627587}
.ape-community-card details{margin-top:auto;padding-top:18px}.ape-community-card summary{color:#a77918;font-size:13px;font-weight:700;cursor:pointer}.ape-community-card details ul{padding:15px 0 0 20px;color:#627587;font-size:12px;line-height:1.8}.ape-community-card li{margin-bottom:6px}
.ape-activities-footer{background:#0b2539;color:#fff;border-radius:15px;padding:24px 34px;margin-top:26px;display:flex;gap:19px;align-items:center}
.ape-activities-footer i{font-size:27px;color:#e5c56a}.ape-activities-footer p{color:#e0e8ee;font-size:14px;line-height:1.7}
@media(max-width:960px){.ape-feature-grid{grid-template-columns:1fr 1fr}.ape-feature-lead{grid-column:1/-1;min-height:220px}.ape-catalog{gap:35px}.ape-community-grid{gap:12px}.ape-community-card{padding:21px}}
@media(max-width:700px){.ape-activities{padding:68px 0}.ape-feature-grid,.ape-catalog,.ape-community-grid{grid-template-columns:1fr}.ape-feature-lead{grid-column:auto}.ape-feature{min-height:auto}.ape-feature-head{margin-bottom:20px}.ape-catalog{gap:26px;margin-top:60px}.ape-topic-list{grid-template-columns:1fr}.ape-community-grid{margin-top:58px}.ape-community-card{min-height:0}.ape-activities-footer{padding:24px;align-items:flex-start}.ape-activities-head{margin-bottom:33px}}
@media(prefers-reduced-motion:reduce){.ape-feature{transition:none}.ape-feature:hover{transform:none}}