@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {

    /* Colors: */
    --gris1: #676767;
    --gris2: #606060;
    --blanco: #FFFFFF;
    --negro: #1D1D1B;
    --amarillo-pro: #FDD204;
    --unnamed-color-000000: #000000;
    
    /* Font/text values */
    --unnamed-font-family-raleway-extrabold: Raleway-ExtraBold;
    --unnamed-font-family-raleway-regular: Raleway-Regular;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-37: 37px;
    --unnamed-font-size-75: 75px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-90: 90px;
    --unnamed-line-spacing-44-400001525878906: 44.400001525878906px;
    }
    
    /* Character Styles */
    .textocuerpo {
    font-family: var(--unnamed-font-family-raleway-regular);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-37);
    line-height: var(--unnamed-line-spacing-44-400001525878906);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
    }
    .h1-gris {
    font-family: var(--unnamed-font-family-raleway-extrabold);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-75);
    line-height: var(--unnamed-line-spacing-90);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--gris1);
    }
    .h1-amarillo {
    font-family: var(--unnamed-font-family-raleway-extrabold);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-75);
    line-height: var(--unnamed-line-spacing-90);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--amarillo-pro);
    }

.responsive-html ,html, body{
    max-width: 800px;
    margin: auto;
    font-family: 'Raleway', sans-serif;
}

.nav-claro{
 background: var(--blanco) 0% 0% no-repeat padding-box;
    margin-right: auto;
    
    border-bottom: 2px solid black;

}

.nav-claro ul{
    display: flex;           /* Alinea los hijos (li) uno al lado del otro */
    flex-direction: row;     /* Asegura que sea en fila (horizontal) */
    flex-wrap: nowrap;       /* PROHIBE que salten a una segunda línea */
   
    justify-content: space-between; /* Distribuye los items por todo el ancho */
    align-items: center;     /* Los centra verticalmente */
    
    width: 100%;             /* Ocupa todo el contenedor */
    list-style: none;        /* Quita los puntos de la lista */
    padding: 1% 3%;
    margin: 0;
}

.nav-claro li, .nav-claro ul li {
    flex: 1;                 /* Obliga a cada item a ocupar el mismo espacio */
    text-align: center;
	margin: 3% 0;/* Centra el texto dentro de su espacio */
}

.nav-claro li a, .nav-claro ul li a {
          /* Hace que todo el espacio sea clickable */
    white-space: nowrap;     /* Evita que el texto del enlace se parta en dos */
    text-decoration: none;
    color: black;
}



.nav-claro li a.active {
    cursor: default;
    font-weight: bold;
    border-bottom: 2px solid #FDD204;        
	padding: 0 5%;
}

/* Efecto Hover para los demás botones (que no son el activo) */
.nav-claro li a:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.1); /* Un gris suave al pasar el mouse */
    transform: translateY(-2px);
}


.nav-oscuro{
    background: var(--negro) 0% 0% no-repeat padding-box;
}

nav{
    
    box-shadow: 3px 3px 6px #636363BF;
    opacity: 1;
}

.nav{
    list-style-type: none;

}

.nav h2{
    font-size: 20px;
    padding-top: 8px;
}
.nav li{
    display: inline-block;
    font-size: 10px;
    margin-left:15%;

}

.user-drp{
    color: white;
}


.lupita{
    color: var(--gris1);
    border: none;
    border-radius: 30px;
    background-color: white;
}
.buscar {
    width: 100%;
    border-radius: 30px;
    background-color: white;
    border: none;
    display: inline-block;
    padding: 2% 0;
}


form{
    width: 100%;

    
}

.btn-Enviar{
    background-color: #FDD204;
    color: black;
}

.btn-Temas{
    background: var(--negro) 0% 0% no-repeat;
    color: white;
    display: inline-block;
    text-align: left;

}

.dropdown-toggle{
    border:none;
}

.txt-Temas{
    letter-spacing: var(--unnamed-character-spacing-0);
    font-family: 'Raleway', sans-serif;

    color: var(--blanco);
    text-align: left;
    letter-spacing: 0px;
    font-size: medium;
    color: #FFFFFF;
}

input[type="text"]
{
    background: transparent;
    border: none;
    position: absolute;
	right: 3px;
    width: 60%;

}

.banner-img{
    width: 100%;
    border-radius: 24px;
    
}

.index-subtitulo, .epigrafe-nota p{
    background-color: var(--amarillo-pro);
}
.index-subtitulo p, .titulo-miniatura, .tema-miniatura{
    font-family: 'Raleway', sans-serif;
    word-spacing: var(--unnamed-character-spacing-0);
    color: var(--negro);
    text-align: center;
}
.tema-miniatura, .index-subtitulo p{
    font-size: 13px;
	
}

.form-contacto{
	display: block;         
    width: 80%;              
    margin: 50px auto;      
    
}



.tema-card {
    background-color: #1a1a1a;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 150px;
    transition: transform 0.2s;
}

.tema-alto {
    min-height: 100%;
    width: 100%;
	display: flex;
    align-items: center;    
    justify-content: center;
}


.tema-ancho {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
	
}

.tema-card a {
    color: white;
    font-size: clamp(1.2rem, 5vw, 2rem);
    font-weight: bold;
    line-height: 1.2;
	display: block;      
    width: 100%;            
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    text-align: center;
	hyphens: auto;             
    -webkit-hyphens: auto;    
    -moz-hyphens: auto;
}

/* Ajustes específicos para Smartphones */
@media (max-width: 799px) {
    .tema-card {
        min-height: 100%;
    	border-radius:30px;
    	margin: 0;
    	
    }
    
    .tema-ancho {
    	height:100%;
		margin: 0 5%;
    	
    }
}


.contacto-input{
    border-bottom: 2px solid black;
}

.contacto-input input{
    outline:none;
	padding-left:10%
	
}

.contacto-input textarea{
    width: 100%;
    outline: none;
    box-shadow: none;
    border:none;
}

.borde-amarillo {
    border-radius: 70px;
    background-color: #FDD204;
    padding: 3px 15px;
	color:black;
    
}

.borde-amarillo:hover{
	color:white;
}

.pagina-contacto h1,h3{
    align-items: center;
    font-weight: bold;
    justify-content: center;
	
}
.pagina-contacto h1{
	font-size: clamp(1.7rem, 6vw, 3rem);
}

.suscribite {
    /* El tamaño será 1.5rem en móviles, crecerá un 5% del ancho de pantalla (5vw) 
       pero nunca superará los 3rem en pantallas grandes */
    font-size: clamp(1rem, 4vw, 2rem);
    font-weight: bold;
}

h1.sobre-nosotros{
    font-weight: bold;
	margin-inline:5%;
	
}

p.sobre-nosotros{
    text-align: justify;
    font-size: large;
	margin-inline:5%;
}

.titulo-miniatura{
    padding: 10px 5px;
	display: table-cell;
	vertical-align: middle;
	height:100px;
	font-size: clamp(15px, 3.5vw, 20px);
	line-height: 90%;
}

.titulo-miniatura span, .titulo-nota span{
    color: var(--amarillo-pro);
}

.index-subtitulo span{
    color: var(--gris1);
    text-align: left;
}

.bg-contenido, .bg-portales{
    background: var(--gris1) 0% 0% no-repeat padding-box;
    border-radius: 20px;
}

.bg-contenido{
	height:240px;
    box-shadow: 3px 3px 6px #636363BF;
}

.burbuja a{
    padding: auto;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

.miniatura-img{
    border-radius: 15px;
	display: block;
   	width: 100%;
	height:110px;
	display: table-cell;
	object-fit:cover;
}


.nota a,a:hover,.nav a{
    text-decoration: none;
    color: #FDD204;
}

.epigrafe-nota p{
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    color: var(--negro);
    font-size: 14px;
    padding: 5px 15px;
}

.titulo-nota h1{
    color: var(--gris1);
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 25px;
}

.subtitulo{
    font-style: italic;
    font-size: 15px;

}

.imagen-nota{
    border-radius:6%;
}

.compartir,  .descargar-informe a {
    color: white;
    text-decoration: none;
    font-size: 100%;
}

.compartir-pos{
    position: fixed;
    left: 80vw;
    bottom: 10vh;
    
}
.compartir{
    size: 80%;
}
.compartir i{
    border: 3vw solid var(--amarillo-pro);
    border-radius: 100%;
    background-color: var(--amarillo-pro);
    width: 100%;
	font-size: 5vw;
}
.dropdown-menu{
    border-radius: 20px;
}
.bg-footer{
    margin-top: 20px;
    padding-top: 20px;
    background-color: #1D1D1B;
}

footer h2{
    font-size: 15px;
}

footer li{
    font-size: 10px;
}



.descargar-informe{
    background-color: rgb(41, 38, 38);
    height: 70px;
}
h6 {
    color: white;
}

.subrayado{
    background-color: black;
    width: 80%;
    height: 2px;
}

.redes{
    color: white;
    font-size: 30px;
}

.redes a{
    text-decoration: none;
    color: white;
}

.redes img{
    width: 40px;

}

.medios a{
    text-decoration: none;
    color: var(--negro);
}
 .lista-nota-medios{
    list-style-type: square;
 }

.chaska-logo{
    position: relative;
    bottom: 10px;
}

.c6, .c0{
    font-weight: bold;
}

.c1{
    font-style: italic;
}

.whatsapp-desktop{
	display:none;
}
.whatsapp-mobile{
	display: block;
}

@media screen and (max-width: 365px){

    .redes img{
        width: 32px;
    }
	.bg-contenido{
		height: 250px;
	}
	.mail-footer{
		font-size:10px;	
	}
	.whatsapp-desktop{
		display:none;
	}
	.whatsapp-mobile{
		display: block;
	}
}

@media screen and (min-width: 800px){
    .compartir i{
        border: 1vw solid var(--amarillo-pro);
    	font-size: 2vw;
        
    }
    .compartir-pos{
        left: calc(calc(100vw - 700px) / 2 + 820px);
        
    }
     .tema-miniatura, .index-subtitulo p{
        font-size: 20px;
        
    }
    .titulo-miniatura{
        height: 84px;
    }
    .titulo-nota h1{
        font-size: 50px;
    }
    .subtitulo{

        font-size: 18px;
    
    }
    .epigrafe-nota p{
        font-size: 23px;
    }
    .cuerpo-nota{
        font-size: 20px;
    }
	.bg-contenido{
	height:300px;
	}
	input[type="text"]{
    	right: 7px;
    	width: 70%;
	}
	.lista-nota-medios a{
		font-size: 20px;
	}
	.miniatura-img{
		height:180px;
	}
    .redes{
        color: white;
        font-size: 30px;
    }
    
    .redes a{
        text-decoration: none;
        color: white;
    }
    
    .redes img{
        width: 40px;
    
    }

	.mail-footer{
		font-size:20px;	
	}
	.whatsapp-mobile{
		display:none;
	}
	.whatsapp-desktop{
		display: block;
	}
}