/*-------------------------------------------------------------
IMPORTACIÓN DE LAS FUENTES PARA LA PÁGINA
-------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/*-------------------------------------------------------------
VARIABLES GLOBALES
-------------------------------------------------------------*/
:root{
	--color-principal:  #ed1c16;
	--color-foco:  #da5a47;
	--color-blanco: #FCFCF9;
	--color-negro:  #111111;
	--gris-oscuro: #2d364c;
	--gris-claro:  #86898c;
	--fondo-blanco: #f5f5f5;
	--fondo-gris:  #606061;

	--white-alpha-50: rgba(255,255,255, 0.50);
	--white-alpha-25: rgba(206, 212, 218, 0.25);
	--blackdrop-filter-blur: blur(20px);
}

/*-------------------------------------------------------------
CONFIGURACIONES GLOBALES
-------------------------------------------------------------*/
*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	outline: none;
}

::before,
::after{
	box-sizing: border-box;
}

body.light{
	min-height: 100vh;
	background-color: var(--fondo-blanco);
	color: var(--gris-oscuro);
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
}

a,
a:hover{
	text-decoration: none;
	color: var(--gris-oscuro);
}

h1,h2{
	font-weight: 600;
}

h2,h3,h4,h5,h6{
	font-weight: 500;
}

.vertical-align,
.img-weather,
.publicidades{
	vertical-align: middle;
}

::-webkit-scrollbar{
	width: 8px;
	height: 80px;
}

::-webkit-scrollbar-thumb{
	background-color: var(--color-principal);
	border-radius: 1px;
}

::-webkit-scrollbar-track{
	background-color: var(--fondo-blanco);
}

.container::-webkit-scrollbar-track:hover,
.container::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

.img-publicidad{
  display: flex;
  justify-content: center;  
  align-items: center;      
  height: 200px;            
  border: 1px solid #ccc;
} 

/* .multimedia #carouselExampleIndicators .carousel-item.carousel-item-start{
	max-width: 60% !important;
} */

/*-------------------------------------------------------------
SECCION SUPERIOR DE LA PÁGINA
-------------------------------------------------------------*/

.weather-section{
	display: flex;
	background-color: var(--color-principal);
	color: var(--color-blanco);
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
	justify-content: space-around;
	padding: 5px 15vh;
}

.weather-section .logo{
	display: flex;
	justify-content: center;
}


.weather-section .logo img{
	position: initial;
	width: 100px;
	height: 100px;
	left: 40px;
}

.weather{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 5px auto;
}

.weather .img-weather{
	display: flex;
	width: auto;
	height: 80px;
	justify-content: end;
}

.weather .text-weather{
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding: 0px;
}

span.temperatura{
	font-size: 20px;
	font-weight: 700;
	padding: 0;
}
span.informacion{
	font-size: 14px;
	padding: 0;
}

span.ciudad{
	font-size: 12px;
	font-weight: 600;
	padding: 0;
}

.weather-section .redes-sociales ul{
	margin-right: 0px;
	margin-left: auto;
}

.redes-sociales{
	display: flex;
	padding: 2vh 15px;
	vertical-align: middle;
	max-height: 100%;
}

.redes-sociales ul{
	margin-top: auto;
	padding: 0;
	display: flex;
	vertical-align: middle;
}

.redes-sociales ul li{
	list-style: none;
	display: flex;
	line-height: 30px;
	margin: 0 5px;
	vertical-align: middle;
}

.redes-sociales ul li a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	font-size: 16pt;
	transition: 0.3s ease-in-out;
	z-index: 1;
	color: var(--color-blanco);
}

.redes-sociales ul li a i{
	vertical-align: middle;
}

.redes-sociales ul li a:hover{
	font-size: 20pt;
	transform: scaleX(2, 0.5);
	transform-origin: center;
}

/*-------------------------------------------------------------
NAVEGACIÓN DE LA PÁGINA
-------------------------------------------------------------*/
nav{
	margin-top: 15px;
}

.navbar-brand h1{
	font-size: 30pt;
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: middle;
}

.navbar-brand h1 span{
	color: var(--color-principal);
}

.navbar-toggler{
	background-color: var(--color-principal);
	color: var(--color-blanco);
	font-size: 18pt;
}

.nav-item{
	font-size: 18pt;
	font-weight: 500;
	text-transform: uppercase;
	margin-left: 5px;
}
.nav-item a{
	color: var(--gris-oscuro);
}

.nav-item a.active,
.nav-item a:hover{
	color: var(--color-foco);
}

#slidePublicidades{
	max-width: 100%;
	margin: auto;
	border: none;
	border-radius: 5px !important;
}
/*-------------------------------------------------------------
CUERPO PRINCIPAL
-------------------------------------------------------------*/
h2{
	line-height: 1.5;
	background-color: var(--white-alpha-50);
	margin-top: 20px;
	padding: 3px 10px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: var(--color-principal);
	font-size: 24pt;
	font-weight: 600;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}

.carousel-inner{
	margin-top: 10px;
	max-width: 85%;
}

.publicidades a{
	display: block;
}

.almayaGo{
	animation: crecerDecrecer 2s infinite ease-in-out;
	animation-play-state: running;
}

.almayaGo img:hover{
	-webkit-transform: scale(1.150);
    transform: scale(1.150);
	opacity: 0.9;
	border-radius: 15px;
	transition: 0.8s;
	animation-play-state: paused;
}



@keyframes crecerDecrecer {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(0.9); } /* crece un 10% */
  100% { transform: scale(0.8); }   /* vuelve al tamaño original */
}

.multimedia,
.noticias{
	padding: 5vh 0;
	height: auto;
}

.multimedia .publicidades .slide{
	position: relative;
	display: inline-block;
}

.multimedia .publicidades .slide .carousel-inner{
	position: inherit;
	display: inline-block;
	width: 95%;
}

.carousel-item img{
	position: relative;
	display: inline-block;
	height: 100%;
}

.card{
	margin-top: 0;
	/* border-radius: 15px; */
	height: 100%;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}

.card:hover .bspImgWrapper{
    -webkit-transform: scale(1.025);
    transform: scale(1);
	opacity: 0.8;
	border-radius: 15px 15px 0px 0px;
    transition: 0.6s;
}

.card:hover{
	-webkit-transform: scale(1.025);
    transform: scale(1.025);
	opacity: 0.8;
	border-radius: 15px;
	transition: 0.6s;
}

.card.destacada:hover .bspImgWrapper{
    -webkit-transform: none;
    transform: scale(1);
	opacity: 1;
	border-radius: 0;
    transition: 0s;
}

.card.destacada:hover{
	-webkit-transform: none;
    transform: none;
	opacity: 1;
	border-radius: 0;
	transition: 0s;
}

.noticia-item{
	min-height: 100%;
}

.card.destacada .card-body a{
	color: var(--color-principal);
}

.card.destacada .card-body a:hover{
	color: var(--color-foco);
	transition: 0.5s;
}

p.card-text{
	color: var(--gris-claro);
	font-size: 9pt;
	font-weight: 700;
	text-transform: uppercase;
	font-weight: 600;
	opacity: 0.9;
	padding: 0;
	margin-top: -10;
	user-select: none;
}

.card-body h5{
	font-size: 16pt;
	font-weight: 600;
	color: var(--color-principal);
	text-transform: uppercase;
	padding: 0;
	margin-top: -10px;
	user-select: none;
}

.container h2 a{
	font-size: 12pt;
	padding: 5px 10px;
	background-color: var(--color-principal);
	color: var(--color-blanco);
	border-radius: 10px;
	float: right !important;
	margin-top: 7px;
}

.container h2 a:hover{
	background-color: var(--color-foco);
}

.error404{
	margin: 25vh 0;
}

.error404 .titulo{
	font-size: 45pt;
	font-weight: 700;
	color: var(--color-foco);
}

.error404 .texto{
	font-size: 28pt;
	color: var(--gris-oscuro);
}

.error404 .texto a{
	color: var(--color-principal);
}

.error404 .texto a:hover{
	color: var(--color-foco);
}

.emisoras{
	text-align: center;
}

.emisoras p{
	color: var(--color-principal);
	margin-bottom: -15px;
	font-size: 14pt;
	font-weight: 500;
}
.radio{
	padding: 0 5px;
}
.radio .img-emisora{
	max-width: 120px;
	height: auto;
}

/*-------------------------------------------------------------
FOOTER DE LA PÁGINA
-------------------------------------------------------------*/
footer{
	background-color: var(--color-principal);
	color: var(--color-blanco);
}

.informaciones{
	padding: 5vh 0 0 0;
}

.columna-informacion{
	align-items: center;
	left: 50%;
	right: 50%;
	width: auto;
	text-align: center;
}

.columna-informacion button{
	padding: 5px 15px;
	font-size: 16pt;
	font-weight: 600;
	margin: auto;
	left: 50%;
	right: 50%;
	width: auto;
	background-color: var(--color-blanco);
	border: 1px solid var(--white-alpha-50);
	border-radius: 20px;
	opacity: 0.9;
}

.columna-informacion button:hover{
	color: var(--color-foco);
	-webkit-transform: scale(1.025);
    transform: scale(1.025);
	opacity: 1;
	transition: 0.3s;
}

footer .final{
	background-color: var(--gris-oscuro);
	color: var(--color-blanco);
	padding: 5px;
    font-size: 12px;
}

footer .final span{
	padding: 0px;
	margin-top: -15px;
}

footer .final span a{
	color: var(--color-foco);
	margin-left: 2px;
}

footer .final span a:hover{
	color: var(--color-blanco);
}

.desarrollador a{
    color: var(--color-foco);
}

/*-------------------------------------------------------------
DESPLIEGUE DE LA NOTICIA COMPLETA
-------------------------------------------------------------*/
.noticia-especifica{
	margin: 8vh auto !important;
}

.noticia-completa a.categoria{
	text-transform: capitalize !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: var(--gris-claro) !important;
	margin: 5px 0 !important;
	padding: 3px 10px !important;
	border: 1px solid var(--color-blanco) !important;
	border-radius: 10px !important;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) !important;
}

.noticia-completa h3.titulo-noticia,
.sobre-nosotros h3,
.formulario-contacto h3{
	color: var(--gris-oscuro) !important;
	padding: 3vh 0 !important;
	font-size: 24pt !important;
	font-weight: 600 !important;
}

.noticia-completa .resumen-noticia p.MsoNormal span{
	padding: 0 6vh !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13pt !important;
	font-weight: 600 !important;
}

.noticia-completa .resumen-noticia span.fecha-publicacion{
	position: relative;
	display: flex;
	color: var(--gris-claro);
	font-size: 10pt;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: -15px;
}
.noticia-completa .resumen-noticia span.autor{
	color: var(--gris-claro);
	font-size: 12pt;
	font-weight: 600;
	text-transform: uppercase;
}

.noticia-completa .resumen-noticia span.fecha-publicacion:hover{
	color: var(--color-principal);
	cursor: default;
	user-select: none;
}

.noticia-completa .foto-noticia{
	padding: 5vh 0;
	text-align: center;
}

.noticia-completa .foto-noticia img{
	max-width: 90% !important;
}

.noticia-completa .foto-noticia p.fotografo{
	color: var(--gris-claro);
	font-size: 10pt;
	font-weight: 600;
	padding: 5px 0;
	background-color: rgba(206, 212, 218, 0.25);
	width: 50%;
	margin: 0 auto;
}

.noticia-completa .informacion-completa p.MsoNormal span{
	color: var(--gris-oscuro) !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 12pt !important;
	padding: 0 0 5px 0 !important;
}
.noticia-completa .informacion-completa p.MsoNormal b{
	color: var(--gris-oscuro) !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 12pt !important;
	padding: 0 0 5px 0 !important;
	font-weight: 600;
}


.lo-mas-leido h4{
	font-size: 16pt;
	font-weight: 700;
	padding: 0 10px;
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: var(--color-principal);
}

.lo-mas-leido .noticias-leidas .noticia-mas-leida{
	max-height: auto !important;
	margin: 5px auto;
}

.lo-mas-leido .noticias-leidas .noticia-mas-leida .card{
	min-height: 100% !important;
}

.lo-mas-leido .noticias-leidas .noticia-mas-leida a .card .card-body h5{
	font-size: 13pt;
}

/*-------------------------------------------------------------
DESPLIEGUE DE LA NOTICIA COMPLETA
-------------------------------------------------------------*/
.categoria-noticias .noticia-item{
	padding-bottom: 20px;
}

.paginacion nav ul li{
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}

.paginacion nav ul.pagination li.page-item a{
	color: var(--color-principal);
	font-weight: 500;
}

.paginacion nav ul.pagination li.page-item.disabled a{
	color: var(--gris-claro);
}

.paginacion nav ul.pagination li.page-item.disabled:hover a{
	color: var(--gris-claro);
	background-color: transparent;
}

.paginacion nav ul.pagination li.page-item.active a{
	background-color: var(--color-principal);
	border-color: var(--color-foco);
	color: var(--color-blanco);
	user-select: none;
	cursor: default;
}

.paginacion nav ul.pagination li.page-item:hover a{
	background-color: var(--color-foco);
	color: var(--color-blanco);
}

/*-------------------------------------------------------------
PAGINA SOBRE NOSOTROS
-------------------------------------------------------------*/
.seccion-contacto{
	margin: 5vh auto;
}

.sobre-nosotros{
	padding-bottom: 25px;
}

.sobre-nosotros-item{
	font-size: 14pt;
	padding-bottom: 5px;
}

.formulario-contacto{
	padding-bottom: 15px;
	background-color:rgba(209,100, 6, 0.2);
	border-radius: 15px;
	margin-bottom: 15px;
	padding: 15px 15px 50px 15px;
	margin-bottom: -70px;
}

.formulario-contacto h3{
	color: var(--color-principal);
	text-align: center;
}


.formulario-contacto label{
	color: var(--color-principal);
	font-size: 12pt;
	font-weight: 500;
}

.formulario-contacto .form-text{
	font-size: 10pt;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
}

.formulario-contacto input,
.formulario-contacto textarea{
	border: 1px solid var(--color-blanco);
	box-shadow: none;
}

.formulario-contacto input:focus,
.formulario-contacto textarea:focus{
	border: 1px solid var(--color-principal);
	box-shadow: none;
}

.formulario-contacto button{
	padding: 5px 20px;
	font-size: 14pt;
	background-color: var(--color-principal);
	color: var(--color-blanco);
	border-radius: 10px;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
	float: right;
}

.formulario-contacto button:hover{
	background-color: var(--color-foco);
	color: var(--color-blanco);
}


/*-------------------------------------------------------------
PUNTOS DE QUIEBRE PARA EL RESPONSIVE
-------------------------------------------------------------*/

@media all and (min-width:1400px){
	/* .multimedia #carouselExampleIndicators .carousel-item.carousel-item-start{
		max-width: 85%;
	} */
	.weather-section{
		padding: 5px 30vh;
	}
	
	.carousel-inner{
		margin-top: 10px;
		max-width: 90%;
	}

	.noticias #slidePublicidades{
		width: 100% !important;
		margin-left: 30px;
		margin-top: 15px;
	}
}
@media all and (min-width: 992px) and (max-width: 1366px){
	/* .multimedia #carouselExampleIndicators .carousel-item.carousel-item-start{
		max-width: 100%;
	} */
	.formulario-contacto h3{
		font-size: 18pt;
	}

	.carousel-inner{
		margin-top: 10px;
		max-width: 80%;
	}

	.noticias #slidePublicidades{
		width: 100% !important;
		margin-left: 60px;
		margin-top: 15px;
	}
}
@media all and (min-width: 768px) and (max-width: 991px){
	/* .multimedia #carouselExampleIndicators .carousel-item.carousel-item-start{
		max-width: 100%;
	} */
    .navbar-collapse{
		border-radius: 5px;
	}
	.nav-item{
		padding: 5px 0;
		border-bottom: 1px solid rgba(209,100, 6, 0.2);;
	}
    h2{
		font-size: 22pt;
	}
	.card-body h5{
		font-size: 12pt;
	}

	p.card-text{
		font-size: 8pt;
	}

	.foto-noticia img{
		display: inherit;
		width: 80%;
		margin: auto;
	}

	.lo-mas-leido h4{
		font-size: 14pt;
	}

	.noticias #slidePublicidades{
		width: 100% !important;
		margin-left: 10%;
		margin-top: 15px;
	}

}

@media all and (min-width: 576px) and (max-width: 767px){


	span.temperatura{
		font-size: 16px;
	}

	span.informacion{
		font-size: 12px;
	}

	span.ciudad{
		font-size: 10px;
	}

	.weather-section .redes-sociales ul{
		display: inherit;
	}

    .navbar-brand{
        align-content: flex-start;
    }
	.navbar-brand h1{
		font-size: 26pt;
        align-content: center;
	}

	.navbar-collapse{
		border-radius: 5px;
	}
	.nav-item{
		padding: 5px 0;
		border-bottom: 1px solid rgba(209,100, 6, 0.2);;
	}

	h2{
		font-size: 18pt;
	}

	.publicidades .carousel{
		max-height: 380px;
		max-width: 290px;
		margin: auto;
		margin-top: 20px;
	}

	.publicidades .carousel .carousel-inner .carousel-item img{
		max-height: 380px;
		max-width: 290px;
	}

	.noticia-item{
		padding-bottom: 15px;
	}

	.card-body h5{
		font-size: 14pt;
	}

	p.card-text{
		font-size: 9pt;
	}
	
	.foto-noticia img{
		display: inherit;
		width: 80%;
		margin: auto;
	}

	.lo-mas-leido h4{
		margin-bottom: 15px;
	}

	.container h2 a{
		font-size: 10pt;
		margin-top: 3px;
	}

	.noticia-completa .foto-noticia p.fotografo{
		font-size: 8pt;
		padding: 3px 0;
	}

	/* #slidePublicidades{
		max-width: 90%;
		margin-top: 15px;
	} */
	
	.noticias #slidePublicidades{
		width: 100% !important;
		margin-left: 40px;
		margin-top: 15px;
	}

}	

@media all and (max-width: 575px) {

	/* .multimedia #carouselExampleIndicators{
		width: 100%;
		height: 150%;
	} */

	.logo{
	    width: 100%;
	}

	.weather-section{
		flex-direction: column;
		justify-content: space-around;
		padding: 5px 0;
	}
	.weather-section .redes-sociales ul{
		display: inherit;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
	}

	.navbar-brand h1{
		font-size: 20pt;
		visibility: none;
	}

	/* .navbar-brand h1 span{
		display: inherit;
	} */

	.navbar-collapse{
		margin: auto 5px;
		border-radius: 5px;
	}
	.nav-item{
		padding: 5px 0;
		border-bottom: 1px solid rgba(209,100, 6, 0.2);
		font-size: 14pt;
	}

	h2{
		font-size: 18pt;
	}

	.publicidades .carousel{
		max-height: 320px;
		max-width: 244px;
		margin: auto;
		margin-top: 20px;
	}

	.publicidades .carousel .carousel-inner .carousel-item img{
		max-height: 320px;
		max-width: 244px;
	}

	.card{
		display: block;
		width: 70%;
		margin: auto;
	}
	
	.noticia-item{
		margin-bottom: 15px;
	}

	.card-body h5{
		font-size: 13pt;
	}

	p.card-text{
		font-size: 8pt;
	}

	.columna-informacion{
		width: 100%;
		margin: 15px auto;
	}

	.columna-informacion .redes-sociales ul{
		display: inherit;
		margin: auto;
	}

	footer{
		font-size: 10pt;
	}

	.noticia-completa a.categoria{
		font-size: 14px;
	}
	.noticia-completa h3.titulo-noticia,
	.sobre-nosotros h3,
	.formulario-contacto h3{
		font-size: 20pt;
	}

	.noticia-completa .resumen-noticia{
		font-size: 12pt;
	}

	.noticia-completa .resumen-noticia span.fecha-publicacion{
		font-size: 8pt;
	}

	.foto-noticia img{
		display: inherit;
		width: 85%;
		margin: auto;
	}

	.noticia-completa .informacion-completa{
		font-size: 10pt;
	}

	.lo-mas-leido h4{
		margin-bottom: 12px;
	}

	.container h2 a{
		font-size: 10pt;
		margin-top: 3px;
	}

	.categoria-noticias .noticia-item{
		padding-bottom: 5px;
	}

	.paginacion nav ul.pagination li.page-item a{
		font-size: 8pt;
	}

	.sobre-nosotros-item{
		font-size: 11pt;
		padding-bottom: 5px;
	}

	.formulario-contacto{
		width: 90%;
		margin: auto;
	}

	.error404 .titulo{
		font-size: 35pt;
	}
	
	.error404 .texto{
		font-size: 18pt;
	}

	.vjs-modal-dialog-content{
		font-size: 12px !important;
	}

	.noticia-completa .foto-noticia p.fotografo{
		font-size: 8pt;
		padding: 3px 0;
	}

	#slidePublicidades{
		max-width: 70%;
		margin: auto;
		margin-top: 10px;
	}

	.noticias #slidePublicidades{
		max-width: 100%;
		margin-top: 15px;
	}

	.noticias #slidePublicidades{
		width: 100% !important;
		margin-left:10%;
		margin-top: 15px;
	}
	
}