@charset "utf-8";

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

.barra_logo{

    position:sticky;
    top:0;
    z-index:1000;

    width:100%;
    height:var(--header-height);

    background:#B8B8B8;

    border-bottom:1px solid rgba(0,0,0,.08);

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:2rem;

    padding:0 5%;
}

.logo_cmmi_sup{

    width:317px;
    height:7rem;

    flex-shrink:0;

    background:
        url("../../img/Logo-50-Aniversario-CMMI-Largo.png")
        center center / contain
        no-repeat;
}

.datos_contacto{

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

.contacto_sup{
    width:auto;
}

.contacto_sup p{

    font-size:.85rem;
    font-weight:500;
    color:var(--azul-oscuro);

    margin:0;
}

/* =========================
   MENU
========================= */

.menu{
    position:sticky;
    top:var(--header-height);

    z-index:999;
}

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

.contenedor{
    width:100%;
}

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

footer{

    margin-top:auto;

    background:var(--azul-oscuro);

    color:#fff;

    padding:2rem 1rem;
}

.redes_soc,
.legal{

    text-align:center;
    color:#d6d6d6;

    max-width:900px;
    margin:auto;
}

.redes_soc ul {
    padding: 0;
    margin: 1rem 0;
}

.redes_soc li {
    display: inline-flex;
    margin: 0 1rem;
}

.redes_soc img {
    width: 40px;
    height: auto;
}
/* =========================
   INTERIORES
========================= */

.app header{
    position: sticky;
    top: calc(var(--header-height) + var(--menu-height));
    z-index: 100;

    background: linear-gradient(90deg, var(--verde), #fff);
    height: 6.5rem;

    padding: 1.5rem 0;
    display: flex;
    justify-content: center;
}

main{
    padding:2rem 0;
}

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

@media (max-width:900px){

	:root{
        --header-height:150px;
    }
    
    .barra_logo{
		position:sticky;
		top:0;

		z-index:1000;

		height:var(--header-height);

		background:#B8B8B8;

		border-bottom:1px solid rgba(0,0,0,.08);

		display:flex;
		align-items:center;
		justify-content:space-between;

		gap:1rem;

		padding:0 4%;
    }

    .logo_cmmi_sup{
		width:317px;
		height:7rem;

		flex-shrink:0;

		background:
			url("../../img/Logo-50-Aniversario-CMMI-Largo.png")
			left center / contain
			no-repeat;
    }

    .datos_contacto{
		display:flex;
		align-items:center;
		justify-content:flex-end;

		margin-left:auto;

		text-align:right;
    }
    
    .contacto_sup p{
		margin:0;

		font-size:.85rem;
		line-height:1.4;
	}
}

@media (max-width:768px){

    :root{
        --header-height:95px;
    }

    .barra_logo{
        padding:0 1rem;
    }

    .logo_cmmi_sup{

        width:180px;
        height:5rem;

        background:
            url("../../img/Logo-50-Aniversario-CMMI.png")
            left center / contain
            no-repeat;
    }

    .datos_contacto{
        max-width:52%;
    }

    .contacto_sup p{

        font-size:.65rem;
        line-height:1.3;
    }
}