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

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

.hero-historia{
    position:relative;
    padding:55px 8%;
    background-image:
        linear-gradient(
            rgba(7, 7, 7, 0.685),
            rgba(0, 0, 0, 0.705)
        ),url('img/1.jpg');
    
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
}


.hero-contenido{
    position:relative;
    color:white;
    max-width:850px;
    padding:10px;
}

.hero-contenido span{
    color:#FFC107;
    letter-spacing:3px;
    font-weight:700;
}

.hero-contenido h1{
    font-size:2rem;
    margin:20px 0;
    color:#ffffff;
}

.hero-contenido p{
    font-size:1.1rem;
    line-height:1.8;
}

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

@media(max-width:992px){

.hero-historia{
    padding:45px 6%;
}

.hero-contenido h1{
    font-size:1.7rem;
}

}

/*=========================
CELULAR
=========================*/

@media(max-width:768px){

.hero-historia{
    padding:55px 5%;
}

.hero-contenido h1{
    font-size:1.2rem;
    margin:14px 0;
}

.hero-contenido p{
    font-size:.7rem;
    line-height:1.6;
}

}

/*====================================
HISTORIA (QUIÉNES SOMOS)
=====================================*/

.historia-fundacion{
    padding:40px 8%;
    background:#b7b8bb;
}

.historia-grid{
    max-width:1300px;
    margin:auto;
    display:grid;
    grid-template-columns:45% 55%;
    gap:60px;
    align-items:center;
}

.historia-imagen img{
    width:100%;
    border-radius:25px;
    box-shadow:0 20px 50px rgba(0, 0, 0, 0.836);
}

.historia-info span{
    color:#F39C12;
    font-weight:700;
    letter-spacing:2px;
}

.historia-info h2{
    font-size:2rem;
    color:#0D47A1;
    margin:15px 0 25px;
}

.historia-info p{
    color:#555;
    font-size:1.1 ;
    line-height:2;
    margin-bottom:20px;
}

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

@media(max-width:992px){

.historia-grid{
    grid-template-columns:1fr;
    gap:40px;
}

.historia-info{
    text-align:center;
}

}

/*=========================
CELULAR
=========================*/

@media(max-width:768px){

.historia-fundacion{
    padding:30px 6%;
}

.historia-grid{
    gap:25px;
}

.historia-info h2{
    font-size:1.4rem;
}

.historia-info p{
    font-size:.7rem;
    line-height:1.6;
    margin-bottom:10px;
}

}

/*=====================================
MISIÓN - VISIÓN - VALORES
======================================*/

.mision{
    padding:30px 8%;
    background:#f7f9fc;
}

.titulo-seccion{
    text-align:center;
    margin-bottom:60px;
}

.mision .titulo-seccion h2{
    margin-top:15px;
    font-size:2.2rem;
    color:#0D47A1;
}

/* GRID */

.mision-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* TARJETAS */

.card-mision{
    background:#e4d3d3;
    border-radius:25px;
    padding:30px;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.493);
    transition:.35s;
    height:100%;
}

.card-mision:hover{
    transform:translateY(-8px);
}

/* ICONO */

.icono{
    width:50px;
    height:50px;
    background:#0D47A1;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:25px;
    margin-bottom:25px;
}

.card-mision h3{
    color:#0D47A1;
    margin-bottom:20px;
    font-size:1.4rem;
}

.card-mision p{
    color:#555;
    font-size:0.9rem;
    line-height:1.6;
}

.card-mision ul{
    list-style:none;
    margin-top:15px;
}

.card-mision ul li{
    margin:12px 0;
    color:#555;
    font-size:1rem;
}

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

@media(max-width:992px){

.mision{
    padding:45px 6%;
}

.titulo-seccion{
    margin-bottom:40px;
}

.mision .titulo-seccion h2{
    font-size:2.2rem;
}

.mision-grid{
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.card-mision{
    padding:25px;
}

.icono{
    width:65px;
    height:65px;
    font-size:24px;
}

.card-mision h3{
    font-size:1.2rem;
}

.card-mision p{
    font-size:.92rem;
}

.card-mision ul li{
    font-size:.9rem;
}

}

/*=====================================
CELULAR
======================================*/

@media(max-width:768px){

.mision{
    padding:15px 4%;
}

.titulo-seccion{
    margin-bottom:30px;
}

.mision .titulo-seccion h2{
    font-size:1.5rem;
}

.mision-grid{
    grid-template-columns:repeat(1,1fr);
    gap:10px;
}

.card-mision{
    padding:20px;
    border-radius:18px;
}

.icono{
    width:40px;
    height:40px;
    font-size:18px;
    margin-bottom:15px;
}

.card-mision h3{
    font-size:1rem;
    margin-bottom:10px;
}

.card-mision p{
    font-size:.7rem;
    line-height:1.5;
}

.card-mision ul{
    margin-top:8px;
}

.card-mision ul li{
    font-size:.7rem;
    margin:6px 0;
}

}

/*====================================
HISTORIA SLIDER
====================================*/

.historia-slider{
    padding:30px 8%;
    background:#7e808675;
}

.historia-slider .titulo-seccion h3{
    font-size:1.6rem;
    color:#0D47A1;
    padding:10px;
}

.titulo-seccion p{
    font-size:.85rem;
    color:#666;
}

.slider-container{
    max-width:1400px;
    margin:40px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
}

.slide{
    flex:1;
    display:grid;
    grid-template-columns:40% 55%;
    gap:50px;
    align-items:center;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0, 0, 0, 0.747);
}

/*=========================
FOTO
=========================*/

.slide-img{
    overflow:hidden;
    height:500px;
}

.slide-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.15s;
}

.slide:hover img{
    transform:scale(1.05);
}

/*=========================
INFO
=========================*/

.slide-info{
    padding:12px;
}

.slide-info span{
    display:inline-block;
    font-size:2rem;
    color:#FF8C00;
    font-weight:700;
    margin-bottom:10px;
}

.slide-info h2{
    color:#0D47A1;
    font-size:1.6rem;
    margin-bottom:20px;
}

.slide-info p{
    color:#555;
    line-height:1.6;
    font-size:.7rem;
    margin-bottom:45px;
}

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

.btn-galeria{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    background:#FF8C00;
    color:#fff;
    border-radius:40px;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.btn-galeria:hover{
    background:#0D47A1;
    transform:translateY(-3px);
}

/*=========================
FLECHAS
=========================*/

.slider-btn{
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:#0D47A1;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    transition:.3s;
    opacity:.5;
    flex-shrink:0;
}

.slider-btn:hover{
    background:#FF8C00;
    transform:scale(1.08);
}

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

.slider-indicadores{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:15px;
}

.slider-indicadores span{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#bbb;
    transition:.3s;
}

.slider-indicadores .activo{
    background:#FF8C00;
    width:38px;
    border-radius:20px;
}

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

@media(max-width:992px){

.slide{
    grid-template-columns:1fr;
}

.slide-img{
    height:350px;
}

.slide-info{
    text-align:center;
}

.slider-container{
    gap:15px;
}

.slider-btn{
    width:48px;
    height:48px;
    font-size:18px;
}

}

/*=========================
CELULAR
=========================*/

@media(max-width:768px){

.historia-slider{
    padding:20px 5%;
}

.slider-container{
    gap:8px;
}

.slide{
    grid-template-columns:1fr;
}

.slide-img{
    height:200px;
}

.slide-info{
    padding:10px;
}

.slide-info span{
    font-size:0.8rem;
}

.slide-info h2{
    font-size:1rem;
}

.slide-info p{
    font-size:.6rem;
    line-height:1.4;
    margin-bottom:20px;
}

.slider-btn{
    width:34px;
    height:34px;
    font-size:13px;
    border-radius:50%;
}

.btn-galeria{
    width:100%;
    justify-content:center;
    font-size:0.85rem;
    padding:10px;
}

.historia-slider .titulo-seccion h3{
    font-size:1.4rem;
    padding:10px;
}

.titulo-seccion p{
    font-size:.7rem;
}

}

/*====================================
INFORMACIÓN LEGAL
====================================*/

.legal{
    padding:30px 8%;
    background:#f8f9fc;
}

.legal .titulo-seccion h2{
    font-size:1.8rem;
    color:#0D47A1;
    margin-top:15px;
}

/* CONTENEDOR */

.legal-grid{
    max-width:1200px;
    margin:20px auto 0;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    align-items:stretch;
    padding-bottom:4px;
}

/* TARJETAS */

.legal-card{
    background:#f0efef;
    border-radius:18px;
    padding:15px 15px;
    text-align:center;
    text-decoration:none;
    color:#333;
    box-shadow:0 8px 20px rgba(0, 0, 0, 0.575);
    transition:.35s;
    border-top:4px solid #0D47A1;
    min-height:100px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.legal-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.18);
    border-top:4px solid #FF8C00;
}

/* ICONO */

.legal-card i{
    font-size:20px;
    color:#0D47A1;
    margin-bottom:18px;
    transition:.3s;
}

.legal-card:hover i{
    color:#FF8C00;
    transform:scale(1.15);
}

/* TEXTO */

.legal-card h3{
    color:#0D47A1;
    font-size:1rem;
    line-height:1.4;
    font-weight:600;
}

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

@media(max-width:1100px){

.legal{
    padding:30px 6%;
}

.legal-grid{
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.legal-card{
    min-height:90px;
    padding:10px 6px;
}

}

/*====================================
CELULAR
====================================*/

@media(max-width:768px){

.legal{
    padding:15px 5%;
}

.legal .titulo-seccion h2{
    font-size:1.2rem;
}

.legal .titulo-seccion p{
    font-size:.6rem;
}

.legal-grid{
    grid-template-columns:repeat(5,1fr);
    gap:8px;
}

.legal-card{
    min-height:70px;
    padding:6px 3px;
}

.legal-card i{
    font-size:16px;
    margin-bottom:6px;
}

.legal-card h3{
    font-size:.4rem;
    line-height:1.2;
}

}

/*=============================
TARJETA CON VARIOS PDF
==============================*/

.dropdown-card{
    position:relative;
}

/* Menú oculto */

.dropdown-pdf{
    position:absolute;
    bottom:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%);
    width:220px;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:15px;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:99999;
}

/* Mostrar al pasar el mouse */

.dropdown-card:hover .dropdown-pdf{
    opacity:1;
    visibility:visible;
    margin-top:10px;
}

/* Links */

.dropdown-pdf a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    text-decoration:none;
    color:#333;
    font-size:.7rem;
    border-bottom:1px solid #eee;
    transition:.3s;
}

.dropdown-pdf a:last-child{
    border-bottom:none;
}

.dropdown-pdf a:hover{
    background:#0D47A1;
    color:#fff;
}

.dropdown-pdf a i{
    color:#E53935;
    font-size:10px;
}

.dropdown-pdf a:hover i{
    color:#fff;
}

/* Tablet: el menú puede quedar más angosto que el contenedor, lo ajustamos */

@media (max-width:1100px){

    .dropdown-pdf{
        width:200px;
    }

}

/* Solo para celular: se activa con toque (ver JS) en vez de hover.
   Sigue flotando (position:absolute heredado de la regla base) para
   que al abrirse NO empuje ni deforme las demás casillas de la grilla. */

@media (max-width:768px){

    .dropdown-pdf{
        display:none;
        width:90px;
    }

    .dropdown-card.activo .dropdown-pdf{
        display:flex;
        opacity:1;
        visibility:visible;
        margin-top:0;
    }

    .dropdown-pdf a{
        padding:6px 6px;
        font-size:.4rem;
        gap:2px;
    }

    .dropdown-pdf a i{
        font-size:7px;
    }

}