@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'news701bt';
    src: url('fonts/news701bt.eot');
    src: url('fonts/news701bt.eot') format('embedded-opentype'),
         url('fonts/news701bt.woff2') format('woff2'),
         url('fonts/news701bt.woff') format('woff'),
         url('fonts/news701bt.ttf') format('truetype'),
         url('fonts/news701bt.svg#news701bt') format('svg');
}

:root {
	--blu-brand:#212a4d;
	--blu-brand-text:#ffffff;
	--blu-blue:#162651;
	--blu-blue-text:#ffffff;
	--blu-blue-text-secundary:#9ec6e6;
	--blu-action:#2bb30d;
	--blu-action-text:#ffffff;
	--blu-solid:#ffffff;
	--blu-solid-text:#14274f;
	--blu-font:'roboto_regular';
	--blu-bold:'roboto_bold';
	--blu-yellow:#ffc703;
	--blu-light:#e0e6f5;
}


html {
	background:#ffffff;
}
body,body * {
	font-family:var(--blu-font);
}

#mask,
#mask * {
	font-family: 'Montserrat';
}

#mask em {
	font-family: 'news701bt';
    font-style: italic;
}

[scale] {
	transition:0.3s;
}
[scale]:hover {
	z-index:1000;
	transform:scale(1.05);
}

body::before {
	display:block;
	content:'';
	height:70px;
}
blu-navigation {
	display:block;
	position:fixed;
	left:0;
	right:0;
	top:0;
	background:var(--blu-brand);
	z-index:10000;
}
	blu-navigation > div {
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		height:80px;
	}
	blu-navigation [logo] {
		display:block;
		line-height:0;
	}
		blu-navigation [logo] > img {
			height:50px;
		}
	blu-menu {
		display:flex;
		flex-direction:row;
		align-items:center;
	}
		blu-menu > a {
		    font-weight:bold;
			color:var(--blu-brand-text);
			transition:0.3s;
		    white-space:nowrap;
		    padding:10px;
		}
		blu-menu > a:hover {
			color:var(--blu-yellow);
		}
		blu-menu > b {
			display:none !important;
	        align-items:center;
	        justify-content:center;
	        width:55px;
	        height:55px;
	        font-size:24px;
	        pointer-events:none;
			color:var(--blu-brand-text);
		}

blu-banner {
	display:block;
	background:var(--blu-blue) no-repeat center center;
	background-size:cover;
	border-radius:0;
}
	blu-banner > div {
		line-height:0;
		width:100% !important;
	}
		blu-banner > div img {
			width:100%;
			opacity:0;
			pointer-events:none;
		}

blu-about{
    display:block;
    background:#1d2957;
    padding:80px 0;
    margin:0;
}

blu-about > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:120px;
}

blu-about-background{
    flex:0 0 48%;
}

blu-about-background img{
    display:block;
    width:100%;
    border-radius:22px;
}

blu-about-background::before{
    display:none;
}

blu-about-content{
    flex:1;
    padding:0;
}

blu-about-content h3{
    margin:0 0 35px;
    font-family:'Montserrat';
    font-size:40px;
    line-height:1.05;
    font-weight:300;
    color:#ffe100;
}

blu-about-content h3 b{
    color:#ffe100;
    font-weight:700;
}

blu-about-content p{
    margin:0;
    max-width:620px;
    color:#fff;
    font-size:16px;
    line-height:1.45;
    text-align:left;
}

@media (max-width:900px){

    blu-about{
        padding:70px 0;
    }

    blu-about > div{
        flex-direction:column;
        gap:45px;
    }

    blu-about-background{
        width:100%;
    }

    blu-about-content{
        width:100%;
    }

    blu-about-content h3{
        font-size:42px;
    }

    blu-about-content p{
        max-width:none;
        font-size:16px;
    }

}

blu-datas-wrap{
    display:block;
    background:#fff;
    padding:90px 0 120px;
}

blu-datas-wrap h3{
    text-align:center;
    font-family:'Montserrat';
    font-size:40px;
    font-weight:300;
    color:#1d2957;
    margin-bottom:70px;
}

blu-datas-wrap h3 b{
    font-weight:700;
}

blu-datas-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
}

/* Cuadros: ahora solo contenedores para la imagen, texto/número ocultos siempre */
blu-data{
    flex:0 0 calc(25% - 10.5px); /* 4 columnas: (14px * 3 gaps) / 4 */
    box-sizing:border-box;
    background:none;
    min-height:auto;
    padding:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    position:relative;
}

blu-data > b,
blu-data > p,
blu-data > .foto-wrap{
    display:none;
}

/* Imagen que reemplaza el cuadro — visible siempre (desktop y mobile) */
blu-data .img-mobile{
    display:block;
    width:100%;
    height:auto;
}

@media(max-width:1100px){
    blu-data{
        flex:0 0 calc(50% - 7px); /* 2 columnas: (14px * 1 gap) / 2 */
    }
}

@media(max-width:700px){
    blu-data{
        flex:0 0 100%;
    }
}

#reporte{
    margin:70px auto;
}

blu-report {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:100px;
    padding:90px;
    padding-left:150px;
    padding-right:150px;
    background:#e7edf6;
    background:url('fondo-reporte.png') center/cover no-repeat;
    overflow:hidden;
}

blu-report-content{
    flex:1;
}

blu-report-content h2 {
    margin:0 0 50px;
    font-family:'Montserrat';
    color:#1d2957;
    font-size:35px;
    line-height:1.05;
    font-weight:300;
}

blu-report-content h2 b {
    font-weight:700;
}

.btn-descargar{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    width:310px;
    height:74px;
    padding-left:30px;
    border-radius:14px;
    background:#2e9add;
    color:#fff;
    text-decoration:none;
    font-size:24px;
    transition:.25s;
}

.btn-descargar:hover{
    background:#2189ca;
}

.btn-descargar .icon-download{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:8px;
    border-radius:50%;
    background:#ffe000;
    flex-shrink:0;
}

.btn-descargar .icon-download svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:#1d2957;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media (max-width: 900px) {

    #reporte{
    margin-top: -60px;
    }
    
    blu-report {
        flex-direction: column-reverse;
        gap: 0;
        padding: 50px 30px;
    }

    blu-report-image {
        flex: unset;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    blu-report-content h2 {
        margin-top: -140px;
        font-size: 32px;
        margin-bottom: 25px;
    }

    .btn-descargar {
        width: 90%;
        margin: 0 auto;
    }

}

/* Título de la sección */
.titulo-capitulos {
    text-align: center;
    font-size: 32px;
    color: #1d2957;
    margin-bottom: 40px;
    font-weight: normal;
}

.titulo-capitulos strong {
    font-weight: 800;
}

/* Grilla de dos columnas */
.grid-capitulos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 15px 30px; /* 15px de espacio vertical, 30px horizontal */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Estilo general del botón */
.btn-capitulo {
    display: flex;
    align-items: center;
    background: #1d2957;
    border-radius: 8px;
    padding: 10px 15px;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.2s, background 0.2s;
}

.btn-capitulo:hover {
    background: #25346e; /* Un tono un poco más claro al pasar el mouse */
    transform: translateY(-2px);
}

/* Círculo del número */
.cap-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0; /* Gris/celeste claro de la imagen */
    color: #1d2957;
    font-weight: 400;
    font-size: 14px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Texto del botón */
.cap-texto {
    flex-grow: 1; /* Esto empuja el ícono de descarga hacia la derecha */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.cap-texto strong {
    font-weight: bold;
}

/* Ajuste especial para el botón sin número (GRI) */
.btn-sin-numero .cap-texto {
    /* Sumamos el ancho del círculo (32px) + el margen (15px) para alinear el texto con los de arriba */
    margin-left: 47px; 
}

/* Ícono de descarga amarillo */
.icon-download-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffe000;
    margin-left: 15px;
    flex-shrink: 0;
}

.icon-download-small svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #1d2957;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Responsivo para celulares */
@media (max-width: 600px) {
    .grid-capitulos {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
    }
    
    .btn-sin-numero .cap-texto {
        margin-left: 0; /* Quitamos el margen extra en móviles para centrar mejor */
        text-align: center;
    }
}

blu-report-image { 
    flex:0 0 430px;
}

blu-report-image img {
    width:100%;
    display:block;
    border-radius:24px;
}


blu-footer {
	display:block;
	background:var(--blu-brand);
	padding:60px 0;
	margin-top: 80px;
}
	blu-footer > div {
		display:flex;
		flex-direction:row;
		justify-content:space-between;
	}
	blu-footer [logo] {
		height:50px;
	}
	blu-footer blu-socials {
		display:flex;
		flex-direction:row;
		align-items:center;
	}
		blu-footer blu-socials a {
			color:var(--blu-brand-text);
			padding:10px;
		}

blu-copy {
	display:block;
	background:var(--blu-blue);
	padding:20px 0;
}
	blu-copy > div,
	blu-copy a {
		color:var(--blu-blue-text-secundary);
	}
	blu-copy a:hover {
		text-decoration:underline;
	}

@media only screen and (max-width:770px), only screen and (max-device-width:770px) {
	blu-button > * { 
	    font-size: 15px; 
	}
	blu-report {
	    padding:60px 30px;
	}
}

@media only screen and (max-width:680px), only screen and (max-device-width:680px) {
	blu-menu {
	    flex-direction:column;
        align-items:flex-end;
        position:absolute;
        right:15px;
        top:15px;
        background:var(--blu-brand);
	}
		blu-menu > b {
			display:flex !important;
		}
		blu-menu > a {
			display:none;
			padding:10px 20px;
		}
		blu-menu:hover > a {
			display:block;
		}

}




@font-face {
    font-family:'roboto_thin';
    src:url('/src/font/roboto-thin-webfont.woff2') format('woff2'),
         url('/src/font/roboto-thin-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_light';
    src:url('/src/font/roboto-light-webfont.woff2') format('woff2'),
         url('/src/font/roboto-light-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_regular';
    src:url('/src/font/roboto-regular-webfont.woff2') format('woff2'),
         url('/src/font/roboto-regular-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_medium';
    src:url('/src/font/roboto-medium-webfont.woff2') format('woff2'),
         url('/src/font/roboto-medium-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_bold';
    src:url('/src/font/roboto-bold-webfont.woff2') format('woff2'),
         url('/src/font/roboto-bold-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_black';
    src:url('/src/font/roboto-black-webfont.woff2') format('woff2'),
         url('/src/font/roboto-black-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}