/* assets/css/style.css (Versión CHICASGOLD - Tema Oscuro) */

/* === VARIABLES GLOBALES Y TEMA === */
:root {
    --brand-dark: #1a1a1a;
    --brand-gold: #d4af37;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Lato', sans-serif;
    
    /* Colores para el hover del botón (Ninfas) */
    --brand-black: #1a1a1a; 
    --brand-wine: #9A113A;
}

body {
    background-color: var(--brand-dark) !important;
    font-family: var(--font-sans);
    color: #f1f1f1; 
}

.font-playfair {
    font-family: var(--font-serif);
}

/* === NAVEGACIÓN Y LOGO === */
.navbar-brand img {
    height: 40px; 
    width: auto;
}
.nav-link {
    color: white;
}
.nav-link:hover, .nav-link.active {
    color: var(--brand-gold);
}

/* === BOTONES === */
.btn-gold, .btn-outline-warning {
    color: var(--brand-gold);
    border-color: var(--brand-gold);
}
.btn-gold:hover, .btn-outline-warning:hover {
    color: var(--brand-black);
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
}
.btn-outline-danger {
    color: var(--brand-wine);
    border-color: var(--brand-wine);
}
.btn-outline-danger:hover {
    color: white;
    background-color: var(--brand-wine);
    border-color: var(--brand-wine);
}


/* === SLIDER HÉROE (INDEX) === */
#heroSlider {
    height: 60vh;
    max-height: 550px;
    background-color: #000;
}
#heroSlider .carousel-item {
    height: 60vh;
    max-height: 550px;
}
#heroSlider .carousel-item img {
    object-fit: cover;
    height: 100%;
    opacity: 0.6;
}
#heroSliderMobile {
    height: 80vh; 
    max-height: 800px;
    background-color: #000;
}
#heroSliderMobile .carousel-item {
    height: 80vh;
    max-height: 800px;
}
#heroSliderMobile .carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    opacity: 0.7;
}

/* === GALERÍAS (CARDS) === */
.card {
    background-color: var(--brand-dark) !important;
    border-color: #333 !important; 
    color: #f1f1f1 !important;
    /* ¡NUEVO! Evita que las tarjetas se partan por la mitad */
    break-inside: avoid-column; 
}
.card.bg-black {
    background-color: var(--brand-dark) !important; 
}
.card a {
    transition: color 0.3s ease;
}
.card a:hover h5 {
    color: var(--brand-gold) !important;
}
.card-title.text-white {
    color: #f1f1f1 !important;
}
.badge.bg-dark {
    background-color: #343a40 !important; 
    color: #f1f1f1 !important;
    border: 1px solid #495057 !important;
}

/* * ============================================
 * == ¡ESTILOS DE CONTENEDOR ELIMINADOS! ==
 * ============================================
 * .image-container y .portfolio-caratula han sido borrados.
 * La imagen ahora tendrá altura automática.
 */


/* === MODAL DE VERIFICACIÓN DE EDAD === */
.modal-backdrop.show {
    opacity: 0.85; 
}
#ageGateModal .modal-content {
    background-color: #000000 !important; 
    color: #ffffff !important; 
    border: 1px solid var(--brand-gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
#ageGateModal .modal-header {
    border-bottom: 1px solid #444;
}
#ageGateModal .modal-header h5 {
    color: var(--brand-gold);
    font-family: var(--font-serif);
    font-size: 1.75rem;
}
#ageGateModal .modal-body {
    font-family: var(--font-sans);
    line-height: 1.6;
    font-size: 1.1rem; 
    color: #ffffff !important;
}
#ageGateModal .modal-body p {
    color: #ffffff !important;
    font-size: 1.1rem; 
}
#ageGateModal .modal-body p.small {
    font-size: 0.95rem; 
    color: #dddddd !important;
    line-height: 1.5;
}
#ageGateModal .modal-body .fw-bold {
    font-size: 1.25rem; 
    color: #ffffff !important;
}
#ageGateModal .modal-footer {
    border-top: 1px solid #444;
    justify-content: center;
}
#age-gate-denied {
    display: none; 
    text-align: center;
    padding: 40px;
}
#age-gate-denied .lead, #age-gate-denied .lead.text-white-50 {
    color: #aaa !important;
}

/* === BOTONES FLOTANTES === */
.floating-buttons-container {
    display: none;
}

/* === FOOTER === */
footer {
    background-color: #000 !important; /* Fondo negro */
    color: #aaa !important; /* Texto gris */
    border-top: 1px solid #333;
}
footer small a {
    color: #aaa !important;
    text-decoration: underline;
}
footer small a:hover {
    color: var(--brand-gold) !important;
}