@charset "utf-8";

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

.btn-descarga{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.9rem 1.4rem;

    border-radius:8px;

    background:var(--azul-principal);
    color:#fff !important;

    font-weight:600;
    font-size:.95rem;

    transition:.25s ease;
}

.btn-descarga:hover{
    background:var(--azul-oscuro);
    transform:translateY(-2px);
}

/* =========================================
   TARJETAS GENERALES
========================================= */

.card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;
}

/* =========================================
   CERTIFICACIÓN / ACERCA
========================================= */

.cert_acerca-perfil{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    background:var(--gris);
}

.cert_acerca-perfil .bloques{

    width:23rem;
    min-height:22rem;

    padding:2rem;

    color:#fff;

    display:flex;
    flex-direction:column;
}

.cert_acerca-perfil .azul{
    background:var(--azul-principal);
}

.cert_acerca-perfil h1{

    font-size:1.6rem;
    font-weight:600;

    margin-bottom:1rem;

    color:#fff;
}

.cert_acerca-perfil .negro{
    color:#000;
}

/* =========================================
   QUIENES SOMOS
========================================= */

.quienes_somos{

    width:min(92%, 1200px);

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap:2rem;

    padding:5rem 0;
}

.quienes_somos .titulo{

    grid-column:1 / -1;

    text-align:center;
}

.quienes_somos .titulo p{

    font-size:2.3rem;
    font-weight:700;

    color:var(--azul-principal);
}

.quienes_somos .titulo .subtit{

    font-size:1.15rem;
    color:#666;
}

.quienes_somos .bloques{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s ease;
}

.quienes_somos .bloques:hover{
    transform:translateY(-6px);
}

.quienes_somos .icon{
    overflow:hidden;
}

.quienes_somos .icon img{

    width:100%;

    transition:transform .7s ease;
}

.quienes_somos .bloques:hover img{
    transform:scale(1.08);
}

.quienes_somos .texto{

    padding:1.5rem;
}

.quienes_somos h1{

    font-size:1.3rem;
    margin-bottom:1rem;
}

.quienes_somos p{
    color:#666;
}

/* =========================================
   REDES SOCIALES
========================================= */

.redes_sociales{

    width:min(92%, 1200px);

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap:2rem;

    padding:5rem 0;
}

 .titulo{
    grid-column:1 / -1;

    text-align:center;
}

.redes_sociales .titulo p{
    font-size:2.3rem;
    font-weight:700;

    color:var(--azul-principal);
}

.redes_sociales .bloques{
	height:100%;
    min-height:300px;

    padding:2rem;

    border-radius:14px;

    display:flex;
    flex-direction:column;

	background-size:cover;
    background-position:center;

    box-shadow:var(--shadow);
}

.redes_sociales .twiter .bloques{
    background-image:
    linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.90)),
    url(../../img/redes_x.jpg);
}

.redes_sociales .facebook .bloques{
    background-image:
    linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.90)),
    url(../../img/redes_facebook1.jpg);
}

.redes_sociales .instagram .bloques{
    background-image:
    linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.90)),
    url(../../img/redes_instagram1.jpg);
}

.redes_sociales .twit,
.redes_sociales .face,
.redes_sociales .insta{

    font-size:1.4rem;
    font-weight:600;
	
	padding-left:2.2rem;
    position:relative;
	
    margin-bottom:1rem;

    color:var(--azul-oscuro);
}

.redes_sociales .twit::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);

    width:1.3rem;
    height:1.3rem;

    background:url("../../img/redes_icon_x.svg") center/contain no-repeat;
}

.redes_sociales .face::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);

    width:1.3rem;
    height:1.3rem;

    background:url("../../img/redes_icon_facebook.svg") center/contain no-repeat;
}

.redes_sociales .insta::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);

    width:1.3rem;
    height:1.3rem;

    background:url("../../img/redes_icon_instagram.svg") center/contain no-repeat;
}

.redes_sociales .bloques p{
    font-family:"Montserrat",sans-serif;
    font-size:0.95rem;
    line-height:1.6;
    color:#444;
}

.redes_sociales .bloques a{
    margin-top:auto;

    width:12rem;
    text-align:center;

    display:inline-block;
    padding:0.7rem 1.4rem;

    border-radius:6px;
    text-decoration:none;
    font-family:"Montserrat",sans-serif;
    font-weight:500;
    color:#fff;

    align-self:center;
}

.btn-x{ background:#000; }

.btn-facebook{ background:#1877f2; }

.btn-instagram{ background:#c13584; }

.redes_sociales a:hover{
    opacity:.85;
}

/* =========================================
   SITIOS DE INTERÉS
========================================= */

.sitios_interes{

    width:min(92%, 1200px);

    margin:0 auto;

    padding:5rem 0;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:2rem;
}

.sitios_interes .titulo{
    text-align:center;

    width:100%;
}

.sitios_interes .titulo p{
    font-size:2.3rem;
    font-weight:700;

    color:var(--azul-principal);
}

.sitios_interes-grid{

    width:100%;

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 240px));

    justify-content:center;

    gap:2.5rem;
}

.sitios_interes .bloques{

    width:240px;

    background:#fff;

    border-radius:14px;

    padding:2rem;

    text-align:center;

    box-shadow:var(--shadow);

    display:flex;
    flex-direction:column;
    align-items:center;

    transition:.25s ease;
}

.sitios_interes .bloques:hover{

    transform:translateY(-5px);

    background:#f7fbff;
}

.sitios_interes .texto h1{

    font-size:1.15rem;

    margin:1rem 0;
}
.sitios_interes-grid .icon{

    width:100%;

    display:flex;
    justify-content:center;
}

.sitios_interes-grid .icon img{

    max-width:120px;
    display:block;
    margin:auto;
}
/* =========================================
   DOCUMENTOS PDF
========================================= */

.docs-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap:2rem;
}

.doc-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.25s ease;
}

.doc-card:hover{
    transform:translateY(-4px);
}

.doc-imagen{

    padding:2rem;

    background:#f7f9fc;

    text-align:center;
}

.doc-imagen img{
    max-width:140px;
    margin:auto;
}

.doc-info{
    padding:1.5rem;
}

.doc-info h3{

    color:var(--azul-oscuro);

    margin-bottom:1rem;
}

.doc-info p{
    color:#666;
}

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

.info-box{

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap:1.5rem;
}

.info-item{

    background:#fff;

    border-left:5px solid var(--verde);

    padding:1.5rem;

    border-radius:12px;

    box-shadow:var(--shadow);
}

.info-item h4{

    color:var(--azul-oscuro);

    margin-bottom:1rem;
}

/* =========================================
   AVISOS
========================================= */

.aviso,
.aviso-certificacion{

    padding:1.5rem;

    border-radius:12px;

    background:#fff8e8;

    border:1px solid #f2d27c;

    color:#6b5a24;
}

/* =========================================
   FORMULARIOS
========================================= */

.form{

    background:#fff;

    padding:2rem;

    border-radius:12px;

    box-shadow:var(--shadow);
}

input,
textarea,
select{

    width:100%;

    padding:.9rem 1rem;

    border:1px solid #ccc;

    border-radius:8px;

    font-family:var(--font-main);
}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--azul-principal);
}

/* =========================================
   GRID GALERÍAS
========================================= */

.cards{

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap:2rem;
}

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

@media (max-width:768px){

    .quienes_somos,
    .redes_sociales,
    .sitios_interes{

        width:94%;
    }

    .cert_acerca-perfil .bloques{
        width:100%;
    }
    
    
    .sitios_interes{

        grid-template-columns:1fr;

        justify-items:center;
    }

    .sitios_interes .bloques{

        width:100%;
        max-width:320px;
    }
}