/* Definición de variables de color */
:root {
    --azul-rey: #013473; /* Color predominante */
    --verde: #218341; /* Color para botones */
    --rojo: #E83417; /* Color resaltante */
    --hueso: #F9F9F9; /* Color de fondo */
    --blanco: #FFFFFF; /* Color de letras */
    --morado: #EE82EE; /* Color para áreas específicas */
    --negro: #000000; /* Color para texto */
    --azul-rey-claro: #4A69A0;
    --azul-cielo: #1E6FAD;
}

/* Estilo global para el documento */
html {
    font-size: 62.5%; /* 1rem = 10px, fácil de escalar */
    box-sizing: border-box; /* Incluye padding y bordes en el tamaño del elemento */
    scroll-behavior: smooth; /* Habilita un desplazamiento suave */
}

*, *::before, *::after {
    box-sizing: inherit; /* Asegura que todos los elementos y pseudoelementos usen el mismo box-sizing */
}

body {
    font-size: 1.6rem; /* Tamaño de fuente base de 16px */
    font-family: 'Lato', sans-serif; /* Establece la fuente principal */
    font-weight: 400; /* Peso normal de la fuente */
    background-color: var(--hueso); /* Fondo de la página */
    margin: 0; /* Elimina márgenes predeterminados */
    padding: 0; /* Elimina padding predeterminado */
}

a {
    text-decoration: none;
    cursor: pointer;
}

button{
    border: none; /* Sin borde */
}

/* Estilos para el botón de hamburguesa */


/* Personaliza la barra de desplazamiento completa */
::-webkit-scrollbar {
    width: 12px; /* Ancho de la barra */
    height: 12px; /* Altura de la barra (para scroll horizontal) */
}

/* Personaliza el "pulgar" de la barra (la parte que se mueve) */
::-webkit-scrollbar-thumb {
    background-color: var(--azul-rey); /* Color del pulgar */
    border-radius: 10px; /* Bordes redondeados */
    border: 2px solid var(--blanco); /* Bordes alrededor del pulgar */
}

/* Fondo de la barra de desplazamiento */
::-webkit-scrollbar-track {
    border-radius: 10px; /* Bordes redondeados */
}

/* Estilo cuando el pulgar está siendo presionado (activo) */
::-webkit-scrollbar-thumb:active {
    background-color: var(--azul-rey); /* Color del pulgar cuando está activo */
}


/*Todos los titulos van de color azul*/
.tittles {
    color: var(--azul-rey); /* Color del texto */
}

/* Inicio Header */

/* Estilo para el header */
header {
    background-color: var(--azul-rey);
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    position: relative;
}

header .logo{
    position: absolute;
    top: 50%; /* Centrado verticalmente dentro del contenedor */
    transform: translateY(-50%); /* Ajusta el centrado vertical */
    width: 25%;
}

/* Estilo para la imagen del logo */
.logo img {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo para el nav-header */
.nav-header {
    position: absolute;
    display: flex;
    justify-content: space-around; /* Centra los enlaces dentro del nav-header */
    align-items: center;
    width: 100%;
    height: auto;
    background-color: var(--azul-rey);
    
}

/* Estilo para los enlaces dentro del nav-header */
.nav-header a {
    color: var(--blanco); /* Color de texto blanco */
    font-weight: bold; /* Texto en negrita */
    padding: 1rem; /* Espaciado interno para los enlaces */
    transition: background-color 0.3s ease; /* Suaviza la transición en hover */
    
}

.nav-header a:hover {
    background-color: var(--verde); /* Cambia el fondo al pasar el mouse */
    border-radius: 0.5rem; /* Bordes redondeados al hacer hover */
}


/* Estilo para las redes sociales */
.redes {
    position: absolute; /* Posicionamiento en el header */
    display: flex; /* Flexbox para las redes sociales */
    justify-content: space-around; /* Distribuye los íconos con espacio alrededor */
    align-items: center; /* Centra verticalmente los íconos */
    top: 0rem;
    height: 100%;
    padding: 0;
}


/* Estilo para el contenedor del clima */
.clima {
    position: absolute; /* Posicionamiento dentro del contenedor padre */
    top: 50%; /* Centrado verticalmente dentro del contenedor */
    transform: translateY(-50%); /* Ajusta el centrado vertical */
    display: flex; /* Flexbox para los días del clima */
    justify-content: space-between;
    height: 100%;
    right: 0rem; /* Separación desde el borde derecho */
}



.weather-day {
    display: flex; /* Se usa Flexbox para organizar el contenido dentro del día */
    flex-direction: column; /* El contenido (nombre del día, ícono y temperatura) se organiza en una columna vertical */
    justify-content: center; /* Centra verticalmente los elementos (nombre del día, ícono, temperatura) */
    align-items: center; /* Centra horizontalmente los elementos */
    width: 25%; /* Ancho del elemento que representa un día del clima */
    height: 100%; /* Altura del elemento que representa un día del clima */
}

/* Estilo para el nombre del día */
.day {
    color: var(--blanco);
    font-weight: bold;
    text-transform: capitalize; /* Primera letra de cada palabra en mayúscula */
    background-color: var(--verde);
    writing-mode: vertical-rl; /* Modo de escritura vertical */
    text-orientation: upright ; /* Asegura que las letras se mantengan derechas */
    position: absolute;
    height: 100%;/* Tamaño de fuente para el día */
    left: 0rem;
    top: 0rem;
}

.weather-day {
    position: relative;
}
.weather-day img{
    position: absolute;
    padding: 0;
}

/* Estilo para la temperatura */
.temp {
    color: var(--blanco);
    font-weight: bold; /* Negrita */
    position: absolute;
}

/* Aqui termina el header */
/* Ultima revisión 11/Nov/24 */







.slider {
    position: relative;
    width: 100%; /* Ocupa todo el ancho del contenedor */
    margin: 0 auto;
    margin-bottom: 5rem;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;

}

.dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.dot {
    background-color:var(--blanco);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent; /* Borde inicial invisible */
}

.dot.active {
    background-color: var(--verde);
}

.dot:hover {
    border-color: var(--rojo);
}


/* Termina slider */
/* Ultima revisión 11/Nov/24 */


.eslogan-1{
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 10rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--azul-rey);
    color: var(--blanco);
    font-size: 7rem;
}


.eslogan-2{
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 10rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    font-size: 7rem;
}

/* Estilo para el rectángulo rojo como adorno */
.rectangulo-rojo {
    width: 100%; /* Ancho completo del contenedor de texto */
    height: 2rem; /* Altura del rectángulo */
    background-color: var(--rojo); /* Color del rectángulo */
    margin: 1rem 0; /* Espacio alrededor del rectángulo */
}

/* Estilo para el rectángulo verde como adorno */
.rectangulo-verde {
    width: 100%; /* Ancho completo del contenedor de texto */
    height: 2rem; /* Altura del rectángulo */
    background-color: var(--verde); /* Color del rectángulo */
    margin: 0 auto; /* Espacio alrededor del rectángulo */
}



.linea-blanca {
    width: 50%; /* Ancho del rectángulo */
    height: 0.3rem; /* Altura del rectángulo */
    background-color: var(--blanco); /* Color del rectángulo */
    position: absolute; /* Posición absoluta para poder centrar con transform */
    top: 60%; /* Ajusta esto si necesitas un espaciado vertical específico */
    left: 50%; /* Mueve el punto de referencia horizontalmente al 50% */
    transform: translateY(-50%) translateX(-50%); /* Ajusta el rectángulo hacia la izquierda por la mitad de su ancho */
    display: flex; /* Usado para centrar el contenido en caso de tener texto o íconos */
    justify-content: center; /* Centra horizontalmente el contenido dentro del rectángulo */
    align-items: center; /* Centra verticalmente el contenido dentro del rectángulo */
    z-index: 1; /* Asegúrate de que la línea esté detrás del párrafo */
}

.horarios {
    position: relative;
    background-color: var(--azul-rey);
    border-radius: 2rem;
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1rem solid var(--verde);
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.horarios h2, .horarios p {
    color: var(--blanco);
    text-align: center;
}

.lista-horarios {
    list-style: none;
}

.lista-horarios li {
    color: var(--blanco);
}

.lista-horarios li strong {
    color: var(--rojo);
}

/* Estilo para el footer */
footer {
    background-color: var(--azul-rey);
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    position: relative;
}


footer .logo{
    position: absolute;
    top: 50%; /* Centrado verticalmente dentro del contenedor */
    transform: translateY(-50%); /* Ajusta el centrado vertical */
}

footer p {
    color: var(--blanco);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-150%); /* Desplaza el párrafo por encima de la línea blanca */
    left: 50%;
    transform: translateX(-50%) translateY(-150%);
    z-index: 2; /* Asegúrate de que el párrafo esté por encima de la línea blanca */
}

/* Aqui termina sección footer */
/* Ultima revisión 26/sep/24 */
/*Este estilo se usara en deportes*/
/* Estilo para la sección de golf */
.sport-content {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    display: flex; /* Flexbox para alinear contenido */
    margin-bottom: 10rem; /* Espacio inferior */
}

/* Estilo para el contenedor de texto */
.text-content {
    display: flex; /* Flexbox para alinear contenido interno */
    flex-direction: column; /* Organiza el contenido en columna */
    width: 50%; /* Ancho del contenedor de texto */
    height: auto; /* Altura completa del contenedor padre */
    position: relative;
}

/* Estilo para los encabezados dentro del texto */
.text-content h2 {
    position: static;
}

/* Estilo para los párrafos dentro del texto */
.text-content p {
    color: var(--azul-rey); /* Color del texto */
    text-align: justify; /* Justificación del texto */
    font-weight: normal; /* Texto en negrita */
    position: static;
    width: 90%;
    height: auto;
}

/* Estilo para el botón dentro del texto */
.boton-content {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--verde); /* Fondo verde */
    color: var(--blanco); /* Texto blanco */
    text-transform: uppercase; /* Texto en mayúsculas */
    font-weight: bold; /* Texto en negrita */
    border-radius: 2rem; /* Bordes redondeados */
    width: 100%; /* Ancho del botón */
    position: static;
    margin-bottom: auto;
}

.boton-content:hover,
.boton-formulario:hover {
    background-color: var(--rojo); /* Cambia a rojo al pasar el ratón sobre cualquiera de los dos */
}


/* Estilo para el video adicional */
.video-chico {
    width: 50%; /* Ancho del video */
    height: 100%; /* Ocupa toda la altura del contenedor padre */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo para el video dentro de video-chico */
.video-chico video {
    width: 95%; /* Ocupa todo el ancho del contenedor */
    height: 95%; /* Ocupa toda la altura del contenedor */
    border-radius: 2rem;
    object-fit: cover; /* Asegura que el video cubra todo el contenedor sin distorsionar */
}

/* Media Queris */

@media (min-width: 1920px) {
    /* Estilo para el header */
   header {
       height: 10rem; /* Altura fija para el header */
       margin-bottom: 10rem;
   }

   header .logo{
       left: 2.5rem; /* Separación desde el lado izquierdo */
       height: 10rem;
       width: 15%;
   }

   /* Estilo para el nav-header */
   .nav-header {
        top: 10rem;
        left: 0rem;
        height: auto;
   }

   /* Estilo para los enlaces dentro del nav-header */
   .nav-header a {
       font-size: 3rem; /* Tamaño de fuente grande */
   }

   .redes{
    width: 27%;
    right: 28%;
   }
   

   #whatsapp svg, #tiktok svg, #facebook svg {
       width: 83px;
       height: 83px;
   }
   
   #instagram svg {
       width: 85px;
       height: 85px;
   }


   .clima{
    width:27%;
   }
   
   .day{
       font-size: 2.8rem; /* Tamaño de fuente para el día */

   }

   /* Estilo para las imágenes de iconos climáticos */
   .weather-day img {
       width: 10rem; /* Ancho de la imagen */
       height: 10rem; /* Altura de la imagen */
       left: 3rem;
       bottom: 1.5rem;
   }

   .temp{
       font-size: 3rem; /* Tamaño de fuente para la temperatura */
       left: 4.7rem;
       bottom: 0rem;
   }

   /* Aqui termina el header */
   /* Ultima revisión 19/sep/24 */

   .video-grande{
       height: 55rem; /* Mantiene la proporción */
   }

   .slider{
       height: 35rem;
   }

   .dots{
       gap: 1rem;
   }

   .dot{
       width: 15px;
       height: 15px;
   }


   .sport-content{
       height: 44rem; /* Altura del contenedor */
   }

   .text-content h2{
       top: 2rem;
       left: 2rem;
       font-size: 13rem; /* Tamaño de fuente ajustado */
       margin: 0  auto;
       margin-left: 5%;
   } 

   .text-content p{
       font-size: 3.5rem;
       top: 14rem;
       left: 50%; /* Ajusta este valor para mover a la derecha */
       margin-bottom: 0.5rem;
       margin: 5%;
   }

   .boton-content{
       bottom: 2rem;
       font-size: 3rem; /* Tamaño de fuente */
       height: 4.5rem; /* Altura del botón */
       width: 90%;
       margin-left: 5%;
   }


   #esloganes{
    margin-bottom: 10rem;
}

   .eslogan-1, .eslogan-2{
    font-size: 10rem;
   }

   footer{
       height: 11rem;
   }

   footer .logo{
       right: 1rem;
       height: auto;
       width: 12%;
   }
   
   footer p{
    font-size: 3rem;
   }

   .mantenimiento{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   }

   .mantenimiento p{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10rem;
    height: auto;
    width: 90%;
    font-weight: bold;
    color: var(--azul-rey);
    }

    #tools{
        width: 25rem;
        height: 25rem;
    }

    .horarios{
        width: 70%;
    }

    .horarios h2, .horarios p,
    .lista-horarios li,
    .lista-horarios li strong {
        font-size: 5rem;
    }


}

/* Computadoras de escritorio y monitores grandes */
@media (min-width: 1200px) and (max-width: 1919px){
    /* Estilos para pantallas de 1200px o más de ancho */
    /* Estilo para el header */
    header {
        height: 8rem; /* Altura fija para el header */
        margin-bottom: 8rem;
    }

    header .logo{
        left: 2rem; /* Separación desde el lado izquierdo */
        width: 20%;
    }

    /* Estilo para el nav-header */
    .nav-header {
        top: 8rem;
        left: 0rem;
    }

    /* Estilo para los enlaces dentro del nav-header */
    .nav-header a {
        font-size: 2.5rem; /* Tamaño de fuente grande */
    }
    
   .redes{
    width: 27%;
    right: 30%;
    top: 0.3rem;
   }
   

   #whatsapp svg, #tiktok svg, #facebook svg {
       width: 58px;
       height: 58px;
   }
   
   #instagram svg {
       width: 60px;
       height: 60px;
   }


   .clima{
    width:29%;
   }
   
   .day{
       font-size: 2.2rem; /* Tamaño de fuente para el día */

   }

   /* Estilo para las imágenes de iconos climáticos */
   .weather-day img {
       width: 7.5rem; /* Ancho de la imagen */
       height: 7.5rem; /* Altura de la imagen */
       left: 1.8rem;
       bottom: 1.5rem;
   }

   .temp{
       font-size: 2.2rem; /* Tamaño de fuente para la temperatura */
       left: 3.2rem;
       bottom: 0rem;
   }
    /* Aqui termina el header */
    /* Ultima revisión 19/sep/24 */

    .video-grande{
        height: 35rem; /* Mantiene la proporción */
    }

    .slider{
        height: 100%;
        width: 100%;
    }

    .dots{
        gap: 1rem;
    }

    .dot{
        width: 15px;
        height: 15px;
    }


    .sport-content{
        height: 44rem; /* Altura del contenedor */
    }

    .text-content h2{
        font-size: 13rem; /* Tamaño de fuente ajustado */
        margin: 0  auto;
        margin-left: 5%;
    } 

    .text-content p{
        font-size: 2.5rem;
        top: 17rem;
        left: 50%; /* Ajusta este valor para mover a la derecha */
        margin-bottom: 0.5rem;
        margin: 5%;
    }

    .boton-content{
        bottom: 2rem;
        font-size: 3rem; /* Tamaño de fuente */
        height: 4.5rem; /* Altura del botón */
        margin-top: 5%;
        width: 90%;
        margin-left: 4.5%;
    }

    #esloganes{
        margin-bottom: 6rem;
    }

    .eslogan-1, .eslogan-2{
        font-size: 9rem;
    }

    footer{
        height: 11rem;
    }
 
    footer .logo{
        right: 1rem;
        height: auto;
        width: 12%;
    }

    footer p{
        font-size: 2rem;
    }

    .mantenimiento{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .mantenimiento p{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 7.5rem;
        height: auto;
        width: 100%;
        font-weight: bold;
        color: var(--azul-rey);
    }
    
    #tools{
        width: 30rem;
        height: 30rem;
    }

    .horarios{
        width: 70%;
    }

    .horarios h2, .horarios p,
    .lista-horarios li,
    .lista-horarios li strong {
        font-size: 3.5rem;
    }


}


/* Tablets y computadoras portátiles */
@media (min-width: 900px) and (max-width: 1199px) {
    /* Estilos para pantallas de 900px a 1199px de ancho */
    /* Estilo para el header */
    header {
        height: 7rem; /* Altura fija para el header */
        margin-bottom: 7rem;
    }

    header .logo{
        left: 1.5rem; /* Separación desde el lado izquierdo */
    }

        /* Estilo para el nav-header */
    .nav-header {
        left: 50%; /* Centra horizontalmente el nav-header dentro del header */
        top: 7rem;
        transform: translateX(-50%); /* Ajusta el centrado */
        width: 100%; /* Puedes ajustar el ancho si es necesario */
        height: auto;
    }

    /* Estilo para los enlaces dentro del nav-header */
    .nav-header a {
        font-size: 2rem; /* Tamaño de fuente grande */
    }

   .redes{
    width: 27%;
    right: 36%;
   }
   

   #whatsapp svg, #tiktok svg, #facebook svg {
       width: 53px;
       height: 53px;
   }
   
   #instagram svg {
       width: 55px;
       height: 55px;
   }


   .clima{
    width:35%;
   }
   
   .day{
       font-size: 1.9rem; /* Tamaño de fuente para el día */

   }

   /* Estilo para las imágenes de iconos climáticos */
   .weather-day img {
       width: 6rem; /* Ancho de la imagen */
       height: 6rem; /* Altura de la imagen */
       left: 2rem;
       bottom: 1.5rem;
   }

   .temp{
       font-size: 2rem; /* Tamaño de fuente para la temperatura */
       left: 2.8rem;
       bottom: 0rem;
   }

    /* Aqui termina el header */
    /* Ultima revisión 19/sep/24 */

    .video-grande{
        height: 30rem; /* Mantiene la proporción */
    }

    .slider{
        height: 20rem;
    }

    .dots{
        gap: 1rem;
    }

    .dot{
        width: 10px;
        height: 10px;
    }

    .sport-content {
        height: 90rem;
        display: flex;
        flex-direction: column; /* Alinea los hijos en columna */
        align-items: center;
        gap: 2rem; /* Espacio entre los hijos */
    }
    
    .text-content,
    .video-chico {
        height: 44rem;
        width: 90%; /* Ambos ocupan el 90% del ancho del contenedor */
    }
    
    .text-content {
        text-align: center;
        bottom: 0rem;
    }

    .video-chico{
        top: 0rem;

    }
    
    .video-chico video {
        width: 100%; /* El video ocupa todo el ancho de su contenedor */
        height: auto; /* Mantiene la proporción */
    }
    

    .text-content h2{
        top: 2rem;
        left: 2rem;
        font-size: 13rem; /* Tamaño de fuente ajustado */
        margin: 0  auto;
    } 

    .text-content p{
        font-size: 3rem;
        top: 15rem;
        left: 50%; /* Ajusta este valor para mover a la derecha */
        margin-bottom: 0.5rem;
    }

    .boton-content{
        bottom: 3rem;
        font-size: 2.5rem; /* Tamaño de fuente */
        height: 4.5rem; /* Altura del botón */
    }

    #esloganes{
        margin-bottom: 6rem;
    }

    .eslogan-1, .eslogan-2{
        font-size: 7rem;
    }

    footer{
        height: 11rem;
    }
 
    footer .logo{
        right: 1rem;
        height: auto;
        width: 12%;
    }

    footer p{
        font-size: 1.5rem;
    }

    .mantenimiento{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   }

    .mantenimiento p{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5.5rem;
    height: auto;
    width: 100%;
    font-weight: bold;
    color: var(--azul-rey);
    }

    #tools{
        width: 45rem;
        height: 45rem;
    }

    .horarios{
        width: 80%;
    }


    .horarios h2, .horarios p,
    .lista-horarios li,
    .lista-horarios li strong {
        font-size: 3rem;
    }
}

    /* Móviles en modo paisaje y tablets pequeñas */
@media (min-width: 600px) and (max-width: 899px) {

    /*Revisión pendiente de estilo, la pagina presenta un espacio
    extra en 600 px*/
    html, body {
        overflow-x: hidden;
    }
    
    /* Estilos para pantallas de 600px a 899px de ancho */
    /* Estilo para el header */
    header {
        height: 5rem; /* Altura fija para el header */
        margin-bottom: 5rem;
    }

    header .logo{
        left: 1rem; /* Separación desde el lado izquierdo */
    }

    /* Estilo para el nav-header */
    .nav-header {
        left: 50%; /* Centra horizontalmente el nav-header dentro del header */
        transform: translateX(-50%); /* Ajusta el centrado */
        height: 60%;
        top: 5rem;
        background-color: var(--azul-rey);
    }

    /* Estilo para los enlaces dentro del nav-header */
    .nav-header a {
        font-size: 1.6rem; /* Tamaño de fuente grande */
    }

   .redes{
    width: 27%;
    right: 38%;
    top: 0.3rem;
   }
   

   #whatsapp svg, #tiktok svg, #facebook svg {
       width: 38px;
       height: 38px;
   }
   
   #instagram svg {
       width: 40px;
       height: 40px;
   }


   .clima{
    width:37%;
   }
   
   .day{
       font-size: 1.3rem; /* Tamaño de fuente para el día */

   }

   /* Estilo para las imágenes de iconos climáticos */
   .weather-day img {
       width: 5rem; /* Ancho de la imagen */
       height: 5rem; /* Altura de la imagen */
       left: 1.1rem;
       bottom: 0.8rem;
   }

   .temp{
       font-size: 1.5rem; /* Tamaño de fuente para la temperatura */
       left: 1.9rem;
       bottom: 0rem;
   }


    /* Aqui termina el header */
    /* Ultima revisión 19/sep/24 */

    .video-grande{
        height: 25rem; /* Mantiene la proporción */
    }

    .slider{
        height: 17rem;
    }

    .dots{
        gap: 1rem;
    }

    .dot{
        width: 10px;
        height: 10px;
    }

    .sport-content {
        height: 90rem;
        display: flex;
        flex-direction: column; /* Alinea los hijos en columna */
        align-items: center;
        gap: 2rem; /* Espacio entre los hijos */
        margin-bottom: 5rem;
    }
    
    .text-content,
    .video-chico {
        width: 90%; /* Ambos ocupan el 90% del ancho del contenedor */
    }
    
    .text-content {
        text-align: center;
        height: 50rem;
        bottom: 0rem;
    }

    .video-chico{
        height: 35rem;
        top: 0rem;
    }
    
    .video-chico video {
        width: 100%; /* El video ocupa todo el ancho de su contenedor */
        height: auto; /* Mantiene la proporción */
    }
    

    .text-content h2{
        top: 2rem;
        left: 2rem;
        font-size: 13rem; /* Tamaño de fuente ajustado */
        margin: 0  auto;
    } 

    .text-content p{
        font-size: 3rem;
        top: 15rem;
        left: 50%; /* Ajusta este valor para mover a la derecha */
        margin-bottom: 0.5rem;
    }

    .boton-content{
        bottom: 2rem;
        font-size: 2.5rem; /* Tamaño de fuente */
        height: 4.5rem; /* Altura del botón */
    }


    #esloganes{
        margin-bottom: 5rem;
    }

    .eslogan-1, .eslogan-2{
        font-size: 4.5rem;
   }

    footer{
        height: 8rem;
    }
 
    footer .logo{
        right: 1rem;
        height: auto;
        width: 12%;
    }

    footer p{
        font-size: 1rem;
    }

    .mantenimiento{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .mantenimiento p{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.5rem;
        height: auto;
        width: 100%;
        font-weight: bold;
        color: var(--azul-rey);
    }
    
    #tools{
            width: 60rem;
            height: 60rem;  
    }

    .horarios{
        width: 80%;
    }

    .horarios h2{
        font-size: 3rem;
    }

    .horarios p,
    .lista-horarios li,
    .lista-horarios li strong {
        font-size: 2rem;
    }
}

/* Móviles en modo retrato */
@media (min-width: 320px) and (max-width: 599px) {
    /* Estilos para pantallas de hasta 599px de ancho */
    /*Revisión pendiente de estilo, la pagina presenta un espcio
    extra en 320 px*/
    html, body {
        overflow-x: hidden;
    }
    /* Estilo para el header */
    header {
        height: 3rem; /* Altura fija para el header */
        margin-bottom: 0rem;
    }
 
    header .logo {
        left: 0.5rem; /* Separación desde el lado izquierdo */
    }

    /* Estilo para el nav-header */
    .nav-header {
        left: 50%; /* Centra horizontalmente el nav-header dentro del header */
        transform: translateX(-50%); /* Ajusta el centrado */
        width: 100%; /* Puedes ajustar el ancho si es necesario */
        height: 60%;
        top: 3rem;
        background-color: var(--azul-rey);

    }

    /* Estilo para los enlaces dentro del nav-header */
    .nav-header a {
        font-size: 0.8rem; /* Tamaño de fuente adecuado para móviles */
    }

    .nav-header a {
        padding: 0.5rem; /* Ajusta el relleno para controlar el área del hover */
    }
    

    /* Estilo para las redes sociales */
   .redes{
    width: 30%;
    right: 42%;
    top: 0.2rem;
   }
   

   #whatsapp svg, #tiktok svg, #facebook svg {
       width: 20px;
       height: 20px;
   }
   
   #instagram svg {
       width: 22px;
       height: 22px;
   }


   .clima{
    width:41%;
   }
   
   .day{
       font-size: 0.8rem; /* Tamaño de fuente para el día */

   }

   /* Estilo para las imágenes de iconos climáticos */
   .weather-day img {
       width: 2.7rem; /* Ancho de la imagen */
       height: 2.7rem; /* Altura de la imagen */
       left: 0.77rem;
       bottom: 0.7rem;
   }

   .temp{
       font-size: 0.85rem; /* Tamaño de fuente para la temperatura */
       left: 1.15rem;
       bottom: 0rem;
   }


    /* Estilo para el video grande */
    .video-grande {
        height: 25rem; /* Mantiene la proporción */
        margin-bottom: 1rem;
    }

    /* Estilo para el slider */
    .slider {
        height: 10rem;
        margin-bottom:5rem;
    }

    .dots {
        gap: 1rem;
    }

    .dot {
        width: 10px;
        height: 10px;
    }

    .sport-content {
        display: flex;
        flex-direction: column; /* Alinea los hijos en columna */
        align-items: center;
        gap: 2rem; /* Espacio entre los hijos */
        margin-bottom: 5rem;
    }
    
    .text-content,
    .video-chico {
        width: 90%; /* Ambos ocupan el 90% del ancho del contenedor */
    }
    
    .text-content {
        text-align: center;
        bottom: 0rem;
    }

    .video-chico{
        height: auto;
        top: 0rem;
    }
    
    .video-chico video {
        width: 100%; /* El video ocupa todo el ancho de su contenedor */
        height: auto; /* Mantiene la proporción */
    }
    

    .text-content h2{
        top: 2rem;
        left: 2rem;
        font-size: 13rem; /* Tamaño de fuente ajustado */
        margin: 0  auto;
    } 

    .text-content p{
        font-size: 3rem;
        top: 15rem;
        left: 50%; /* Ajusta este valor para mover a la derecha */
        margin-bottom: 0.5rem;
    }

    .boton-content{
        bottom: 0rem;
        font-size: 1.7rem; /* Tamaño de fuente */
        height: 4.5rem; /* Altura del botón */
    }

    #esloganes{
        margin-bottom: 3rem;
    }

    /* Estilo para los eslóganes */
    .eslogan-1, .eslogan-2 {
        font-size: 2rem;
    }

    /* Estilo para el footer */
    footer {
        margin-top: 0rem;
        height: 6rem;
    }

    footer .logo {
        right: 0.5rem;
        height: auto;
        width: 20%;
    }

    footer p {
        font-size: 0.5rem;
    }

    .mantenimiento{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40rem;
   }

    .mantenimiento p{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    height: auto;
    width: 100%;
    font-weight: bold;
    color: var(--azul-rey);
    }

    #tools{
        width: 30rem;
        height: 30rem;
    }

    .horarios{
        width: 90%;
    }

    .horarios h2{
        font-size: 2rem;
    }

    .lista-horarios li,
    .lista-horarios li strong {
        transform: translateX(-10px); /* Ajusta el valor negativo para mover hacia la izquierda */

    }

    .horarios p,
    .lista-horarios li,
    .lista-horarios li strong {
        font-size: 1rem;
    }
    
}   


/* Media Queris base*/

/*

@media(min-width: 1920px){
}

@media(min-width: 1200px) and (max-width: 1919px){
}

@media(min-width: 900px) and (max-width: 1199px){
}

@media(min-width: 600px) and (max-width: 899px){
}

@media(min-width: 320px) and (max-width: 599px){
}


*/