/* --- 1. SLIDER DE FONDO --- */
    #home {
        position: relative;
        background: none !important; 
        overflow: hidden;
    }

    .bg-slider-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .bg-slide-item {
        width: 100%;
        height: 100vh; 
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* --- 2. CAPA DE OSCURECIMIENTO (Restaurada) --- */
    .bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Negro al 50%. Si quieres más oscuro, sube a 0.7 */
        background: rgba(0, 0, 0, 0.2); 
        z-index: 1;
        display: block; 
    }

    /* Aseguramos que el contenido esté ENCIMA del slider */
    #home .container {
        position: relative;
        z-index: 10; 
    }

    /* --- 3. FORMULARIO OSCURO --- */
    #reservation {
        /* Fondo Negro/Gris muy oscuro al 90% de opacidad */
        background-color: rgba(20, 20, 20, 0.9) !important; 
        
        padding: 30px;
        border-radius: 10px;
        /* Sombra negra fuerte para dar profundidad */
        box-shadow: 0 15px 40px rgba(0,0,0,0.6); 
        
        /* IMPORTANTE: Forzamos el texto a blanco para que se lea */
        color: #ffffff !important;
    }

    /* Aseguramos que el título y etiquetas dentro del form sean blancos */
    #reservation .star-content, 
    #reservation label {
        color: #ffffff !important;
    }

    /* Inputs: Los mantenemos blancos para que sea fácil escribir, pero con borde discreto */
    #reservation input, 
    #reservation textarea {
        background-color: #ffffff !important;
        border: none !important;
        border-bottom: 3px solid #555 !important; /* Detalle de diseño */
        color: #333 !important;
        border-radius: 4px;
    }

    /* Botón de enviar: Un color que resalte (puedes cambiarlo) */
    #reservation .btn-content {
        width: 100%;
        margin-top: 10px;
        font-weight: bold;
    }

      /* PARA REDES SOCIALES*/
        /* --- Estilos Tarjetas Redes Sociales --- */
        .social-box {
            background: #fff;
            padding: 30px 10px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            border-bottom: 4px solid transparent;
            cursor: pointer;
            display: block;
            text-decoration: none !important;
            color: #555;
            height: 100%; /* Para que todas tengan la misma altura */
        }

        .social-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .social-box i {
            font-size: 40px;
            margin-bottom: 15px;
            transition: color 0.3s;
        }

        .social-box h4 {
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 5px;
            text-transform: uppercase;
        }

        .social-box span {
            font-size: 12px;
            color: #888;
        }

        /* --- Colores Específicos --- */
        /* Google */
        .social-go:hover { border-bottom-color: #4285F4; }
        .social-go:hover i { color: #4285F4; }

        /* YouTube */
        .social-yt:hover { border-bottom-color: #FF0000; }
        .social-yt:hover i { color: #FF0000; }

        /* Facebook */
        .social-fb:hover { border-bottom-color: #1877f2; }
        .social-fb:hover i { color: #1877f2; }

        /* Instagram */
        .social-ig:hover { border-bottom-color: #e1306c; }
        .social-ig:hover i { color: #e1306c; }

        /* TikTok */
        .social-tk:hover { border-bottom-color: #000000; }
        .social-tk:hover i { color: #000000; }

        /* --- Truco para 5 Columnas --- */
        /* Esto centra las tarjetas si no caben todas y permite 5 en línea en pantallas grandes */
        .row-centered {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        /* Ajuste para pantallas grandes: forzar ancho del 20% (1/5) */
        @media (min-width: 992px) {
            .col-md-2-4 {
                width: 20%; /* 100% dividido entre 5 */
                float: left;
                padding-left: 15px;
                padding-right: 15px;
            }
        }

/* --- ESTILOS SECCIÓN TÉRMINOS --- */
.terms-box {
    background: #ffffff;
    border: 1px solid #e1e1e1; /* Borde suave */
    padding: 30px;
    text-align: left; 
    font-size: 13px;
    line-height: 1.8;
    color: #777;
    border-radius: 8px;
    margin-top: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.terms-box h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.btn-terms {
    background: #333; /* Botón oscuro elegante */
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    outline: none !important;
}

.btn-terms:hover {
    background: #555;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-terms i {
    margin-left: 5px;
}