/* Definición de la variable */
:root {
    --max-ancho: 1400px;
}

/* Estilos globales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Importar la fuente desde Google Fonts o cualquier otro servicio de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Establecer la fuente por defecto para todo el sitio */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Tamaño de fuente base */
}

/* Estilos para los títulos y subtítulos */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Más peso para los títulos */
}

/* Estilos para los enlaces y botones */
a, button {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Peso normal para texto interactivo */
}

/* Estilos para el contenedor principal */
.container {
    width: 100%;
    max-width: var(--max-ancho);
    margin: 0 auto;
    padding: 20px;
}

/* Estilos para la barra de navegación */
.nav-bar {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Añade un sombreado ligero */
    padding: 1rem;   
}

/* Estilos para el logo */
.logo {
    flex: 1;
}

.logo img {
    width: 20vw; /* El logo ocupará el 10% del ancho de la vista */
    max-width: 200px; /* El logo no excederá los 150px */
    height: auto; /* Mantiene la proporción del logo */
}

/* Estilos para los enlaces del menú central */
.menu {
    flex: 1;
    list-style: none;
    display: flex;
    justify-content: center;
}

.menu li {
    margin: 0 10px;
}

.menu a {
    text-decoration: none;
    color: black;
    border-bottom: 1px solid black; /* Subrayado */
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.menu a:hover {
    color: green;
    border-bottom-color: green;
}

/* Estilos para los iconos de redes sociales */
.social-icons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.social-icons a {
    color: black;
    font-size: 24px; /* Tamaño de los iconos */
    margin-left: 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: green;
}

/* Estilos para la sección hero */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #f9f9f9; /* Color de fondo opcional */
}

/* Estilos para el contenido de la sección */
.hero__content {
    flex: 1;
    padding-left: 3rem; /* Espacio entre el texto y la imagen */
    text-align: left; /* Alineación del texto a la derecha */
}

.main__heading {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem;
}

.main__sub {
    font-size: 16px;
    color: #666;
    margin-bottom: 1rem;
}

.main__button {
    background-color: black; /* Botón negro */
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 2px 2px 5px black; /* Leve sombra */
    transition: background-color 0.3s, box-shadow 0.3s; /* Transición suave */

    /* Efecto al pasar el mouse (hover) */
    &:hover {
        background-color: green; /* Verde */
        box-shadow: 4px 4px 8px green; /* Glow verde claro */
    }
}

/* Estilos para la imagen */
.hero__img {
    max-width: 40%;
    height: auto;
    border-radius: 5px; /* Opcional: bordes redondeados */
}


/* Estilos para el contenido principal */
main {
    max-width: var(--max-ancho); /* Ancho máximo de 1400px */
    margin: 0 auto; /* Centrar horizontalmente */
    padding: 20px; /* Espacio interno */
}

/* Estilos para los títulos (h2) */
.video-title {
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px; /* Espacio inferior */
    margin-top: 2rem;
}

/* Estilos para los párrafos (p) */
.video-description {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-bottom: 20px; /* Espacio inferior */
}

/* Estilos para los iframes de YouTube */
iframe {
    display: block; /* Asegura que el iframe ocupe todo el ancho disponible */
    margin: 0 auto; /* Centra horizontalmente */
    margin-bottom: 3rem;
}






/* Estilos para el footer */
.footer {
    background-color: black; /* Fondo negro */
    color: white; /* Texto blanco */
    text-align: center; /* Alineación centrada */
    max-width: var(--max-ancho); /* Ancho máximo de 1400px */
    margin: 0 auto; /* Centrar horizontalmente */
    padding: 1rem; /* Espacio interno */
}


/* Media queries para la responsividad */
@media (max-width: 1200px) {
    .container {
        padding: 15px;
    }
}

@media (max-width: 992px) {
    .container {
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 5px;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 2px;
    }
}