/* Importación de hojas de estilos*/
@import 'header.css';
@import 'reproductor.css';
@import 'programas.css';

/************ WEB ************/
:root {
    --primary-color: #384859;
    --secudary-color: white;
    --accent-color: deepskyblue; 
    --background-color: whitesmoke;
    --border-color: #f1f1f1;
    --text-color: #212121;
    --header-background-color:deepskyblue;
    --hover-color: #12f7ff;
	--altura-header: 60px;
	--ancho-maximo: 1200px;
	--padding-left-right: 1.5rem;
}
.loading {
    position: relative;
}


.loading::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}
*{
	margin: 0; /* Eliminar márgenes por defecto */
	padding: 0;
	box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth; /* desplazamiento suave */
}
body {
    font-family: 'Manrope', Arial, Helvetica, sans-serif;
	Background-color: var(--background-color);
}
main{
    max-width: 1200px; /* Ancho máximo para pantallas grandes */
    min-width: 320px;  /* Ancho mínimo para pantallas pequeñas */
    margin: 0 auto;  /* Centra el elemento horizontalmente */
    padding: 1.5rem;
	text-align: justify;
}

@font-face {
    font-family: 'Manrope';
    src: url('../assets/fonts/manrope/Manrope-VariableFont_wght.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../assets/fonts/manrope/Manrope-VariableFont_wght.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lamejor';
    src: url('../assets/fonts/breeze/Breeze Personal Use.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
/* Puedes añadir más variantes si lo necesitas */
p {
  padding-bottom: 1rem;  
}
img {
	width: 100%;
 	height: auto;
}
footer{
    font-family: 'Manrope', Arial, Helvetica, sans-serif;
	padding-bottom: 100px;
}