/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000; /* Cambia el color de fondo a negro */
    background-size: cover; /* Ajusta el tamaño de la imagen de fondo */
    height: 80%; /* Ajusta la altura a un valor que desees, por ejemplo, 80% de la altura de la ventana (viewport height) */
}

/* Encabezado */
header {
    position: relative; /* Para que los elementos absolutos se coloquen con respecto a este elemento */
    color: white;
    padding: 0;
    text-align: center;
    height: 100vh; /* Ajusta la altura del header al 100% del viewport height */

}
@media screen and (max-width: 768px) {
    header video {
        width: 100vw;
        height: 100vh;
    }
}
/* Contenido principal */
main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

header video {
    width: 100%; /* Abarca todo el ancho del header */
    height: 100%; 
    position: absolute; /* Posición absoluta para que esté detrás del contenido */
    z-index: -1; /* Colocar el video detrás de los elementos del header */
    object-fit: cover; /* Para cubrir completamente el header */
}
header h1 {
    margin: 0;
}
/* Estilo general del nav */
nav {
    margin: 0;
    padding: 0;
    width: 100%; /* Abarca todo el ancho del header */
    z-index: 1; /* Coloca el navbar delante del video */
}
/* Logo */
nav .logo {
    float: left;
    width: 250px !important;
    height: auto !important;
    margin-top: -30px; /* Ajusta este valor para subir más */
    display: block;
}
/* Estilos del menú */
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 20px;
}
nav ul li a {
    color: #d6b83a !important;
    text-decoration: none;
}
nav ul li a:hover {
    color: #FF5733 !important;
}
/* Cambiar el color del texto cuando se pasa el cursor sobre los menús */
nav ul li a:hover {
    color: #FF5733 !important; /* Cambia el color de texto a #FF5733 cuando se pasa el cursor sobre los enlaces */
}
/* Navbar general */
.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Agrega transiciones suaves */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil */
}
/* Eliminar sombra en pantallas pequeñas */
@media screen and (max-width: 768px) {
    .navbar {
        box-shadow: none !important;
    }
}

/* Navbar enlaces */
.navbar-nav .nav-item {
    margin-right: 10px; /* Ajusta el espacio entre los menús (puedes ajustar según sea necesario) */
}
.navbar-nav .nav-link {
    transition: transform 0.3s, font-size 0.3s; /* Agrega transición para transform y tamaño de fuente */
    font-size: 16px; /* Ajusta el tamaño de la fuente (puedes ajustar según sea necesario) */
}
.navbar-nav .nav-link:hover {
    transform: scale(1.2); /* Ajusta la escala al pasar el cursor sobre el menú */
}
/* Estilo responsivo */
@media (max-width: 768px) {
    .navbar-nav .nav-item {
        margin-right: 5px; /* Ajusta el espacio entre los menús en tamaños más pequeños */
    }

    .navbar-nav .nav-link {
        font-size: 14px; /* Ajusta el tamaño de la fuente en tamaños más pequeños */
        transform: none; /* Restablece la transformación en tamaños de pantalla más pequeños */
    }

    .navbar-nav .nav-link:hover {
        transform: none; /* Aplica la transformación solo al pasar el cursor en tamaños de pantalla más pequeños */
    }
}
.navbar-toggler-icon {
    opacity: 0.8; /* Ajusta la opacidad según tus preferencias */
}

/* Estilo de los elementos del menú */
.navbar-nav {
    margin-top: 5px;
    display: flex; /* Usamos flex para que los items tengan el mismo ancho */
    justify-content: space-around; /* Distribuir de manera equitativa */
    padding: 0;
    list-style-type: none;

}

.navbar-nav .nav-item {
    margin-top: 10px;
    flex: 1; /* Aseguramos que cada item tenga el mismo ancho */
    display: flex;
    justify-content: center; /* Centra el texto dentro de cada item */
}

.navbar-nav .nav-item a {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 24px; /* Aumenté el padding para mayor espacio */
    border-radius: 30px; /* Bordes redondeados más suaves */
    background: rgba(169, 169, 169, 0.8); /* Fondo gris suave */
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s ease; /* Transición más suave */
    width: 100%; /* Asegura que cada item ocupe todo el espacio disponible */
    text-align: center; /* Centra el texto dentro del enlace */
}

/* Efecto hover con transformación suave */
.navbar-nav .nav-item a:hover {
    background-color: rgba(135, 206, 235, 0.3); /* Azul claro suave y transparente */
    transform: translateX(8px); /* Desplazamiento lateral suave */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
}
/* Contenido principal */
}
.navbar-nav .nav-item a {
    transition: color 0.3s ease; /* Agrega una transición suave al color de texto */
}
.navbar-nav .nav-item a:hover {
    color: #ff5733; /* Cambia el color al pasar el cursor sobre los enlaces */
}
/* Estilos para los enlaces del navbar */

.navbar .nav-link {
    color: #ffffff; /* Texto blanco para los enlaces del navbar */
}

/* Estilos para los enlaces activos del navbar */
.navbar .nav-item.active .nav-link {
    color: #d6b83a; /* Texto dorado para el enlace activo del navbar */
}
.navbar-nav .nav-item:first-child .nav-link {
    min-width: 120px !important; /* Asegura que el botón de Inicio tenga el mismo ancho */
}

@media (max-width: 768px) {
    .navbar .logo {
        width: 190px !important; /* Aumentar el tamaño del logo */
        height: auto !important;
        margin-top: -10px !important; /* Mover un poco hacia arriba */
        margin-left: -10px !important; /* Mover un poco a la izquierda */
        display: block;
    }

}
/* 🔥 FIX SOLO PARA PANTALLAS GRANDES */
@media (min-width: 992px) {

    .navbar-nav .nav-item a {
        display: flex;
        align-items: center;      /* centra vertical */
        justify-content: center;  /* centra horizontal */
        gap: 6px;                 /* espacio icono-texto */
        height: 45px;             /* 🔥 altura fija uniforme */
        padding: 0 20px;          /* quitamos padding vertical */
    }

    .navbar-nav .nav-item a i {
        font-size: 14px;          /* iguala tamaño del icono */
        line-height: 1;
    }
}
.product {
    width: 45%;
    margin: 20px;
    padding: 10px;
    border: 1px solid #ddd;
}

.product img {
    max-width: 100%;
    height: auto;
}

/* Pie de página */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}
/* Estilos para los íconos de redes sociales */
.social-icons {
    margin-top: 20px;
}

.social-icon {
    font-size: 28px;
    color: white;
    margin: 0 10px;
    transition: transform 0 .2s;
}

.social-icon:hover {
    transform: scale(1.2);
    color: #FF5733;

}
/* Establece un tamaño fijo para las imágenes del carrusel */
.carousel-item img {
    width: 100%; /* Establece el ancho al 100% del contenedor */
    height: auto; /* Ajusta automáticamente la altura para mantener la proporción */
}
#contacto {
    background-image: url('../img/pool3.jpg'); /* Reemplaza 'tu jpg' con la ruta correcta a tu archivo GIF */
    background-size: cover;
    padding: 80px 0; /* Ajusta el espaciado según sea necesario */
    position: relative;
}
#contacto h2 {
    color: #333;
    margin-left: 15px; /* Desplazar hacia la derecha */
}

#contacto p {
    color: red;
    margin-left: 10px; /* Desplazar hacia la derecha */
}
#contacto form {
    position: relative;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
#contacto form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.3) 80%);
    z-index: -1;
}
#contacto form label {
    color: white;
    margin-bottom: 5px;
}
#contacto form input,
#contacto form textarea {
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    color: #333;
    border-radius: 5px;
    margin-bottom: 10px;
    width: calc(100% - 22px);
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#contacto form input:focus,
#contacto form textarea:focus {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#contacto form button {
    background-color: #ff5733;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
#contacto form button:hover {
    background-color: #555;
}
#contacto .btn-call2 {
    background-color: #ff5733;
    color: #fff;
    border: none;
    padding: 15px 40px; /* Ajusta el padding según lo largo que quieras el botón */
    border-radius: 50px; /* Redondea los bordes para hacer el botón circular */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    margin-top: 20px; /* Espaciado superior para separar el botón del formulario */
}

#contacto .btn-call:hover {
    background-color: #555;
    transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón al pasar el mouse */
}
/* Estilo para la sección de productos */
#productos {
    margin-top: 1px;
    background-color: #333;
    padding: 50px 0;
}
#productos h2 {
    color: #fff; /* Color de texto para el título de la sección */
    font-weight: bold; /* Peso de fuente (ajusta según tu preferencia) */
}
#productos p {
    color: #ccc; /* Color de texto para el párrafo de la sección */
}
.card:hover {
    transform: scale(1.05); /* Escala la tarjeta en hover para un efecto visual */
}
.card {
    background-color: #444; /* Color de fondo para las tarjetas de productos */
    color: #fff; /* Color de texto para las tarjetas de productos */
    border: 1px solid #555; /* Borde para las tarjetas de productos */
    border-radius: 10px; /* Añade bordes redondeados (ajusta según tu preferencia) */
    margin: 20px 0; /* Ajusta el margen entre las tarjetas de productos */
}

.card img {
    border-radius: 10px 10px 0 0; /* Añade bordes redondeados solo a la parte superior de la imagen */
}

.card-body {
    padding: 20px; /* Ajusta el espaciado interior del cuerpo de la tarjeta */
}

.card-title {
    font-weight: bold; /* Peso de fuente para el título de la tarjeta (ajusta según tu preferencia) */
}

.card-text {
    font-size: 16px; /* Tamaño de fuente para el texto de la tarjeta (ajusta según tu preferencia) */
}


.form-group label {
    color: #555; /* Color de texto para las etiquetas de los campos del formulario */
    font-weight: bold; /* Peso de fuente para las etiquetas (ajusta según tu preferencia) */
}

.form-control {
    border: 1px solid #ddd; /* Borde para los campos de entrada del formulario */
    border-radius: 5px; /* Añade bordes redondeados (ajusta según tu preferencia) */
    padding: 10px; /* Ajusta el espaciado interior de los campos de entrada */
}

textarea.form-control {
    min-height: 150px; /* Altura mínima para el campo de entrada de texto (ajusta según tus necesidades) */
}

.btn-primary {
    background-color: #333; /* Color de fondo para el botón de envío */
    color: #fff; /* Color de texto para el botón de envío */
    border: none; /* Quita el borde del botón */
    border-radius: 5px; /* Añade bordes redondeados al botón (ajusta según tu preferencia) */
    padding: 10px 20px; /* Ajusta el espaciado interior del botón */
}

.btn-primary:hover {
    background-color: #555; /* Cambia el color de fondo al pasar el cursor sobre el botón */
}

    .carousel-container {
        background-color: #333; /* Cambia el color de fondo a gris oscuro */
        border: 2px solid #FF5733; /* Cambia el color del borde y su grosor */
        border-radius: 15px; /* Agrega esquinas redondeadas */
        padding: 20px; /* Añade espacio interno alrededor del carrusel */
    }

    .carousel-title {
        color: #FF5733; /* Cambia el color del título */
    }

    .carousel-description {
        color: #ccc; /* Cambia el color del texto de descripción */
    }
    
/* Estilos para el modal de éxito */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background-color: #fff;
    margin: 20% auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

.close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    cursor: pointer;
}

#success-message {
    font-size: 18px;
}
.exit-link {
    color: #007BFF; /* Color azul para el enlace */
    text-decoration: none; /* Elimina el subrayado del enlace */
    font-size: 20px; /* Tamaño de fuente personalizado */
    margin-top: 10px; /* Espacio superior para separar del contenido */
    display: block; /* Hace que el enlace ocupe todo el ancho disponible */
}
.map-container {
    position: relative;
    overflow: hidden;
    height: 435px; /* Altura predeterminada */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Sombra exterior para efecto difuminado */
}

.map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.4) 70%); /* Difuminado radial */
    border-radius: 10px;
    pointer-events: none; /* Evita que la capa de fondo afecte los eventos del mapa */
}
#map {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #ccc;
}
@media (max-width: 767px) {
    .map-container {
        height: 225px; /* Altura ajustada para dispositivos más pequeños */
    }
}
/* Estilos base del botón */
.btn-call {
    background-color: transparent;
    border: none;
    color: #ddc847; /* Color del texto */
    font-size: 16px;
    position: fixed;
    bottom: 20px; /* Distancia desde el borde inferior */
    right: 20px; /* Distancia desde el borde derecho */
    padding: 8px 16px; /* Agregar relleno para el botón */
    border-radius: 15px; /* Agregar bordes redondeados */
    cursor: pointer;
    z-index: 999; /* Asegura que esté sobre otros elementos */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); /* Agregar una sombra sutil */
}

/* Media query para ajustar la posición del botón en pantallas pequeñas */
@media (max-width: 900px) {
    .btn-call {
        display: block; /* Asegura que el botón ocupe todo el ancho disponible */
        position: fixed;
        bottom: 20px; /* Distancia desde el borde inferior */
        right: 20px; /* Distancia desde el borde derecho */
    }
}

/* Media query para ajustar la posición del botón en pantallas grandes */
@media (min-width: 1200px) {
    .btn-call {
        position: fixed;
        bottom: 20px; /* Distancia desde el borde inferior */
        right: 20px; /* Distancia desde el borde derecho */
    }
}

/* Estilos para la sección de Servicios */
#servicios {
    background-color: #333; /* Fondo oscuro para que combine con el sitio */
    padding: 50px 0;
    text-align: center;
}

#servicios h2 {
    color: #d6b83a; /* Color dorado para el título */
    font-weight: bold;
}

#servicios p {
    color: #ccc; /* Texto en gris claro */
    margin-bottom: 30px;
}

/* Estilos para los íconos */
#servicios .row div {
    background-color: #444; /* Fondo gris oscuro para cada servicio */
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#servicios .row div:hover {
    transform: scale(1.05); /* Efecto de escala al pasar el cursor */
    background-color: #555; /* Cambio de color en hover */
}

#servicios i {
    color: #d6b83a; /* Íconos en dorado */
    margin-bottom: 10px;
}

#servicios h5 {
    color: white; /* Texto blanco */
    font-weight: bold;
    margin-top: 10px;
}

/* Media Query para móviles */
@media (max-width: 768px) {
    #servicios .row {
        display: flex;
        flex-direction: column; /* Asegura que los elementos se apilen verticalmente */
        align-items: center; /* Centra los elementos */
    }

    #servicios .row div {
        width: 90%; /* Ajusta el ancho para mejor presentación en móviles */
        margin-bottom: 15px; /* Espaciado entre elementos */
        padding: 15px; /* Reduce el padding para mejor ajuste */
    }

    #servicios h2 {
        font-size: 24px; /* Ajusta el tamaño del título */
    }

    #servicios h5 {
        font-size: 18px; /* Reduce el tamaño del subtítulo */
    }

    #servicios i {
        font-size: 2rem; /* Ajusta el tamaño del icono para que no sea demasiado grande */
    }
}
/* 🔵 Botón flotante para mostrar la barra */
.floating-button {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #25D366; /* Color de WhatsApp */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.floating-button:hover {
    background-color: #1ebc5a;
    transform: scale(1.1);
}

/* 🔵 Barra emergente con redes sociales */
.social-bar {
    position: fixed;
    bottom: 80px; /* Debajo del botón flotante */
    right: -80px; /* Oculta la barra al inicio */
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease-in-out;
}

/* Cuando se active, la barra se mostrará */
.social-bar.active {
    right: 20px;
}

/* 🔵 Estilos de los íconos */
.top-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.top-link:hover {
    transform: scale(1.1);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
}

/* 🔵 Colores específicos para cada icono */
.top-link.whatsapp i {
    color: #25D366;
    font-size: 28px;
}

.top-link.facebook i {
    color: #3b5998;
    font-size: 28px;
}

/* 🔵 Responsivo para pantallas pequeñas */
@media (max-width: 480px) {
    .floating-button {
        width: 45px;
        bottom: 75px;
        height: 45px;
        font-size: 20px;
    }
    .social-bar {
        bottom: 70px;
    }
    .top-link {
        width: 45px;
        height: 45px;
    }
    .top-link i {
        font-size: 24px;
    }
}

/* Estilos generales */
#video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}   

#video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transform: scale(1.1); /* Aumenta el tamaño del video */
}
/* Media queries para ajuste responsivo */
@media screen and (max-width: 768px) {
    #video-container {
         height: 100vh; /* Mantiene el contenedor con altura completa */
    }
    #video-container iframe {
        position: absolute;
        top: 0; /* Subí el video un poco más arriba */
        left: -60%;
        width: auto;
        height: 100vh;
        object-fit: cover;
        display: block;
        transform-origin: center; /* Mantiene el zoom centrado */
        transform: scale(1.4); /* Aumenta el tamaño del video */
    }
    header {
        height: auto;
        min-height: 100vh;
    }
    
}

@media (max-width: 900px) {
  header{
    height: auto;
    min-height: 100vh;
  }

}
/* Contenedor del loader (GIF) */
#video-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black; /* Fondo negro para evitar parpadeos */
    z-index: 1; /* El GIF se muestra encima del video al principio */
    opacity: 1;
    transition: opacity 0.5s ease-in-out; /* Transición suave para ocultar el GIF */
}

/* Imagen del GIF con dimensiones del video */
#video-loader img {
    width: 100%;
    height: 100%;
   object-fit: cover;
}

.popup-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
        }
.popup-content {
         background: #fff;
            color: #333;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            width: 90%;
            max-width: 400px;
            position: relative;
            font-family: Arial, sans-serif;
            cursor: pointer;
        }
.popup-content h4 {
            color: #000;
            font-size: 20px;
            margin-bottom: 10px;
        }
.popup-content p {
            color: #444;
            font-size: 16px;
        }
.close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            cursor: pointer;
            background: none;
            border: none;
}
/* 🔶 Sección de ubicaciones */
.ubicaciones-section {
    background: #000;
    padding: 60px 0;
    text-align: center;
}

.ubicaciones-section h2 {
    color: #d6b83a;
    font-weight: bold;
    margin-bottom: 40px;
}

/* 🔥 Forzar misma altura en columnas */
.ubicaciones-section .row {
    display: flex;
    align-items: stretch;
}

/* Tarjetas */
.ubicacion-card {
    background: linear-gradient(145deg, #1c1c1c, #2a2a2a);
    border-radius: 15px;
    padding: 30px;
    color: #ccc;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;

    /* 🔥 claves para igualar altura */
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* efecto orgánico tipo brillo */
.ubicacion-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(214,184,58,0.15), transparent 60%);
    transform: rotate(25deg);
    pointer-events: none;
}

/* hover */
.ubicacion-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(214,184,58,0.3);
}

/* icono */
.ubicacion-card .icono {
    font-size: 40px;
    color: #d6b83a;
    margin-bottom: 15px;
}

/* título */
.ubicacion-card h4 {
    color: #fff;
    margin-bottom: 15px;
}

/* texto */
.ubicacion-card p {
    min-height: 70px; /* 🔥 ayuda a uniformar */
    margin-bottom: 20px;
}

/* link */
.ubicacion-card a {
    display: inline-block;
    margin-top: auto; /* 🔥 empuja el botón hacia abajo */
    color: #ff5733;
    text-decoration: none;
    font-weight: bold;
}

.ubicacion-card a:hover {
    color: #d6b83a;
}