:root{
    --font_family_titles: "Audiowide", serif;
    --font_family_body: "Electrolize", serif;
}

html {
    font-size: 62.5%; /* Convierte 1rem = 10px */
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: var(--font_family_body);
    font-size: 1.6rem;
    line-height: 1.8;
}
p {
    color: white;
    font-size: 2rem;
}

a {
    text-decoration: none;
}

img,
picture {
    width: 100%;
}

h1, h2, h3 {
    font-family: var(--font_family_titles);
    margin: calc(5rem / 2) 0;
    font-weight: 300;
    text-align: center;
    
}

h1 {
    font-size: 3.8rem;
}
h2 {
    font-size: 3.4rem;
}
h3 {
    font-size: 3rem;
}
h4 {
    font-size: 2.6rem;
}

html,
body{
    height: 100vh;
}

.hero {
    width: 100%; /* El contenedor ocupa todo el ancho */
    height: 100vh; /* El contenedor ocupa toda la altura de la pantalla */
    overflow: hidden; /* Elimina cualquier desbordamiento */
    position: relative; /* Asegura que el contenido se posicione de forma correcta */
}

.hero-img{
    width: 100%; /* La imagen ocupará todo el ancho del contenedor */
    height: 100%; /* La imagen ocupará toda la altura del contenedor */
    object-fit: cover; /* Ajusta la imagen para que cubra todo el espacio sin distorsionarse */
    object-position: center center; /* Centra la imagen en el contenedor */
}

@media (min-width: 1020px) {
    .hero-img{
        object-fit: initial; /* Reseteamos la propiedad */
        object-position: initial; /* Reseteamos la propiedad */
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Capa semitransparente que oscurece la imagen */
    z-index: 5; /* Se coloca debajo del contenido, pero encima de la imagen */
}

/* Barra de navegación */
.navbar {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px;
    border-radius: 5px;
    z-index: 10;
}

@media (min-width: 768px) {
    .navbar{
        right: 0%;
        transform: translateX(0%);
    }
}



.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.menu-item {
    position: relative;
}

.menu-item > a {
    color: white;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: bold;
}

.menu-item:hover > a {
    color: #ff9800; /* Cambio de color al pasar el ratón */
}

/* Submenús */
.submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro para los submenús */
    border-radius: 5px;
    width: 200px;
    z-index: 10;
}

.menu-item:hover .submenu {
    display: block; /* Mostrar submenú al pasar el ratón por encima */
}

.submenu li {
    padding: 10px;
}

.submenu li a {
    color: white;
    text-decoration: none;
    font-size: 1.3rem;
}

.submenu li a:hover {
    color: #ff9800; /* Cambio de color al pasar el ratón */
}

.hero-content{
    position: absolute;
    top: 60%; /* Centra el contenido verticalmente */
    left: 50%; /* Centra el contenido horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta la posición para centrarlo completamente */
    color: white; /* Texto blanco para asegurar que sea legible sobre la imagen */
    text-align: center; /* Centra el texto */
    z-index: 10; /* Asegura que el contenido esté encima de la imagen */
    padding: 20px; /* Espaciado alrededor del contenido */
    max-width: 95%; /* Asegura que el contenido no se expanda demasiado */
}

@media (min-width: 768px) {
    .hero-content h1{
        white-space: nowrap; /* Impide que el texto se divida en varias líneas */
    }
}