@charset "utf-8";

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

.encabezados{
    width:min(92%, 1200px);
    margin:auto;
}

.app header .encabezados{
    width: min(92%, 1200px);
    display: flex;
    flex-direction: column;
}

.app header .encabezados .titulo{
    font-size:1.5rem;
    font-weight:600;
    color:#002855;
    text-align:left;
}

.app header .encabezados .subtitulo{
	font-weight:600;
}

.titulo{
    font-size:2rem;
    font-weight:700;
    color:#fff;
}

.subtitulo{
    font-size:1rem;
    color:#e6f3f3;
    margin-top:.5rem;
}

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

.content{

    font-size:1rem;
    line-height:1.8;

    color:#444;
}

.content h2{

    font-size:1.7rem;

    color:var(--azul-oscuro);

    margin:2rem 0 1rem;
}

.content h3{

    font-size:1.2rem;

    margin:1.5rem 0 1rem;

    color:var(--verde);
}

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

.content ul{

    padding-left:1.2rem;
}

.content li{
    margin-bottom:.7rem;
}

/* =========================================
   ESTATUTOS
========================================= */

.content .estatutos h4{

    font-size:1.4rem;

    color:var(--azul-principal);

    margin:2rem 0 1rem;
}

.content .estatutos h5{

    font-size:1.1rem;

    color:var(--verde);

    margin:1rem 0;
}

/* =========================================
   IDONEIDAD
========================================= */

.content .idoneidad{

    max-width:500px;

    margin:3rem auto;

    text-align:center;

    font-size:1.2rem;
}

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

.content .contacto{

    max-width:700px;

    margin:auto;

    text-align:center;
}

.content .contacto h5{

    font-size:1.5rem;

    margin-bottom:1rem;
}

.content .contacto hr{

    margin:2rem auto;

    border:none;

    height:1px;

    background:#ccc;
}

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

.content .historia ul{
    margin-top:1rem;
}

.content .historia ol{
    padding-left:1.5rem;
}

/* =========================================
   CONSEJEROS
========================================= */

.content .lista_consejeros li{
    margin-bottom:.8rem;
}

/* =========================================
   GALERIAS CERTIFICADOS
========================================= */

.galerias-certificados{

    display:grid;

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

    gap:2rem;

    margin-top:2rem;
}

.placa{

    background:#fff;

    border-radius:16px;

    padding:2rem;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.25s ease;
}

.placa:hover{

    transform:translateY(-5px);

    background:#f8fbff;
}

.placa .icono{

    width:72px;
    height:72px;

    margin:auto auto 1.5rem;

    border-radius:50%;

    background:var(--azul-principal);

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

.placa svg{

    width:34px;
    fill:#fff;
}

.placa h3{

    color:var(--azul-oscuro);

    margin-bottom:1rem;
}

.placa p{
    color:#666;
}

/* =========================================
   QR / AVALES
========================================= */

.LogoCMMI-peque{

    width:58px;
    height:64px;

    margin:auto;

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

.title_aval,
.otorga_aval{

    text-align:center;

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

.title_aval{

    font-size:1.2rem;
    font-weight:700;
}

.otorga_aval{

    font-size:1rem;
}
/* =========================================
   Para paginas de Expresidentes
========================================= */
.expresidentes article{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
/*
Para dar un poco más de ancho mínimo a las tarjetas.
.expresidentes{
    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));
}
*/
/*Para no tocar el grid*/
.expresidentes .titulos_img{
    white-space: nowrap;
    font-size: 0.95rem;
}
/* =========================================
   Para paginas de Vigencia y Certificacion
========================================= */
.content-certificacion{
    max-width:1200px;
    margin:auto;
    padding:2rem 1rem 4rem;
}

/* TITULO */

.titulo-seccion{
    text-align:center;
    margin-bottom:3rem;
}

.titulo-seccion h1{
    font-family:"Montserrat", sans-serif;
    font-size:1.8rem;
    font-weight:600;
    color:#002855;
    margin-bottom:1rem;
}

.titulo-seccion p{
    font-size:1.05rem;
    color:#5f5f5f;
    max-width:700px;
    margin:auto;
    line-height:1.7;
}

/********************************************************************
        TARJETAS PDF
********************************************************************/

.docs-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 350px));
    gap:1rem;
    margin-bottom:3rem;
    justify-content:center;
}

.doc-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;

    text-decoration:none;

    box-shadow:0 8px 22px rgba(0,0,0,.12);

    transition:all .25s ease;

    display:flex;
    flex-direction:column;

    width:100%;
    max-width:350px;

    margin:auto;
}

.doc-imagen{
    background:#f5f7fa;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1rem;
}

.doc-imagen img{
    display:block;
    width:100%;
    max-width:150px;
    height:auto;
    object-fit:contain;
}

.doc-caption{
    font-family:"Montserrat", sans-serif;
    font-size:1rem;
    font-weight:700;

    text-align:center;
}

.doc-info{
    padding:0rem 1.5rem;
    text-align:left;
}

.doc-info h3{
    font-size:1.3rem;
    color:#002855;
    margin-bottom:0;
    padding:0;
}

.doc-info p{
    color:#666;
    line-height:1.6;
    padding:0;
    margin-bottom:1rem;
}

/********************************************************************
        BLOQUE DE FORMATOS
********************************************************************/

.info-box{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:1.5rem;

    margin-bottom:3rem;
}

.info-item{
    background:#f8fbff;
    border-left:5px solid #005baa;

    padding:1.5rem;
    border-radius:10px;

    box-shadow:0 4px 10px rgba(0,0,0,.05);

    display:flex;
    flex-direction:column;
}

.info-item h4{
    font-family:"Montserrat", sans-serif;
    font-size:1.15rem;
    color:#002855;
    margin-bottom:1rem;
}

.info-item p{
    color:#555;
    line-height:1.6;
    margin-bottom:1.5rem;
    padding:0;
}

/* botón alineado abajo */
.info-item .btn-descarga{
    width:200px;

    margin:auto auto 0 auto;

    text-align:center;
}
/********************************************************************
        BOTONES
********************************************************************/

.btn-descarga{
    display:inline-block;

    background:#005baa;
    color:#fff !important;

    padding:.8rem 1.3rem;

    border-radius:6px;

    font-family:"Montserrat", sans-serif;
    font-size:.95rem;
    font-weight:500;

    transition:background .25s ease;
}

.btn-descarga:hover{
    background:#003f78;
    color:#fff !important;
}

/********************************************************************
        AVISO
********************************************************************/

.aviso-certificacion{
    background:#fff8e8;
    border:1px solid #f2d27c;

    padding:1.5rem;
    border-radius:10px;

    color:#6b5a24;

    line-height:1.7;

    box-shadow:0 2px 6px rgba(0,0,0,.05);
}

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

@media (max-width:768px){

    .content-certificacion{
        width:100%;
        padding:1.5rem 1rem 3rem;
    }

    .titulo-seccion h1{
        font-size:1.8rem;
        line-height:1.3;
    }

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

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

    .doc-imagen{
        text-align:center;
    }

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

    .info-box{
        grid-template-columns:1fr;
    }

    .titulo{
        font-size:1.6rem;
    }

    .content h2{
        font-size:1.4rem;
    }

    .content{
        font-size:.98rem;
    }
    
	.app header .encabezados .titulo,
	.app header .encabezados .subtitulo{
		margin-left:0;
		font-weight:500;
	}
}