/* Variables */
:root {
    --primary-yellow: #FFD700;
    --dark-black: #000000;
    --light-black: #1a1a1a;
}
body { font-family: 'Roboto', sans-serif; color: #333; }
h1, h2, h3, h4, .navbar-brand { font-family: 'Oswald', sans-serif; }

/* Utilidades */
.text-yellow { color: var(--primary-yellow) !important; }
.bg-yellow { background-color: var(--primary-yellow) !important; }
.bg-black { background-color: var(--dark-black) !important; }
.bg-dark { background-color: var(--light-black) !important; }

/* Navbar */
.navbar { background-color: rgba(0, 0, 0, 0.9); padding: 1rem 0; transition: all 0.3s ease; }
.navbar-brand { font-size: 1.5rem; font-weight: 700; }
.nav-link { color: #fff !important; margin-right: 15px; }
.nav-link:hover { color: var(--primary-yellow) !important; }

/* Botones */
.btn-yellow {
    background-color: var(--primary-yellow); color: #000; font-weight: 700;
    border: 2px solid var(--primary-yellow); padding: 10px 25px; border-radius: 0;
}
.btn-yellow:hover { background-color: transparent; color: var(--primary-yellow); }
.btn-outline-yellow {
    border: 2px solid var(--primary-yellow); color: var(--primary-yellow);
    font-weight: 700; border-radius: 0; padding: 10px 25px;
}
.btn-outline-yellow:hover { background-color: var(--primary-yellow); color: #000; }

/* === HERO SECTION CORREGIDO === */
.hero-section {
    height: 100vh;
    min-height: 600px; /* Evita que se encoja demasiado en pantallas raras */
    
    /* 1. Color de fondo de seguridad (Negro) por si la imagen falla */
    background-color: #000000; 
    
    /* 2. Imagen de fondo definida explícitamente */
    background-image: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=1920&auto=format&fit=crop');
    
    /* 3. Propiedades para que se vea bien */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    position: relative;
    margin-top: -76px;
}

/* Asegura que el overlay funcione bien */
.overlay { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.5); /* Oscurece la imagen un 50% */
    z-index: 1; /* Asegura que esté sobre la imagen */
}

/* Asegura que el texto esté ENCIMA del overlay */
.hero-section .container {
    z-index: 2;
    position: relative;
}

/* Overlay oscuro para que el texto blanco se lea bien sobre la foto */
.overlay { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.6); /* Capa negra al 60% de opacidad */
}
/* ========================================== */

/* Cards & Secciones */
.section-padding { padding: 80px 0; }
.section-title { font-weight: 700; margin-bottom: 1rem; position: relative; display: inline-block; }
.section-title::after { content: ''; display: block; width: 50px; height: 3px; background: var(--primary-yellow); margin: 10px auto 0; }
.price { font-size: 2.5rem; font-weight: 700; font-family: 'Oswald', sans-serif; }
.transform-scale { transform: scale(1.05); z-index: 10; box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2); }
@media (max-width: 768px) { .transform-scale { transform: scale(1); } }
.border-yellow { border: 2px solid var(--primary-yellow) !important; }
.border-yellow-thick { border: 4px solid var(--primary-yellow) !important; }