/*
 * Archivo: index-style.css
 * Descripción: Estilos específicos para la página de inicio (index.php).
 * Incluye la sección Hero y otras secciones únicas del landing.
 * Última actualización: 28 de Julio, 2025.
 */

/* --- Hero Section (para index.php) --- */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/hero_background.jpg') no-repeat center center/cover;
    color: var(--color-texto-claro);
    text-align: center;
    padding: 100px 20px;
    border-radius: 8px;
    margin-bottom: 50px;
}
.hero-section h1 {
    font-size: 3.5em;
    margin-bottom: 15px;
    color: var(--color-acento); /* Color de acento para el título principal */
}
.hero-section h2 {
    font-size: 2.2em;
    margin-bottom: 25px;
    color: var(--color-texto-claro);
}
.hero-section p {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.2em;
    line-height: 1.8;
}
.hero-actions .btn {
    margin: 0 15px;
    min-width: 200px;
}

/* --- Secciones Generales para Index (Clases Destacadas, etc.) --- */
.section-clases-destacadas {
    padding: 40px 0;
    margin-bottom: 30px;
}
.section-description { /* Descripción genérica de sección */
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.1em;
    color: var(--color-gris-medio);
}

/* Ajustes para los enlaces de reserva en el horario (específico si solo el index los usa así) */
.btn-reserve.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-gris-oscuro);
}
.btn-reserve.disabled:hover {
    background-color: var(--color-gris-oscuro);
    transform: none;
}


/* --- Media Queries para Responsive Design (específicas del index) --- */
@media (max-width: 768px) {
    .hero-section {
        padding: 80px 15px;
    }
    .hero-section h1 {
        font-size: 2.8em;
    }
    .hero-section h2 {
        font-size: 1.8em;
    }
    .hero-section p {
        font-size: 1em;
    }
    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .hero-actions .btn {
        width: 100%;
        margin: 0;
    }
}