/* HERO SECTION - AJUSTE DE ESPACIOS */

/* Versión Escritorio */
.hero { 
    /* Reducimos el padding superior para subir el contenido.
       Antes: 140px. Ahora: 130px (Considerando que el menú ahora es más alto, esto cierra el gap visualmente). */
    padding: 130px 0 60px; 
    position: relative;
    overflow: hidden; /* Evita scrolls horizontales raros */
}

.hero-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 50px; /* Reduje un poco el gap lateral */
    align-items: center; 
}

.badge { 
    display: inline-block; 
    background: rgba(197, 160, 89, 0.1); 
    color: var(--gold); 
    padding: 6px 14px; 
    border-radius: 6px; 
    font-size: 0.85rem; 
    font-weight: 800; 
    letter-spacing: 1px;
    margin-bottom: 25px; 
}

.hero h1 { 
    font-size: 3.5rem; 
    line-height: 1.15; 
    margin-bottom: 20px; 
    color: var(--primary); 
    font-weight: 800; /* Títulos más potentes */
}

.hero p { 
    font-size: 1.25rem; 
    color: var(--text-muted); 
    margin-bottom: 40px; 
    max-width: 95%; 
    line-height: 1.7;
}

.hero-actions { 
    display: flex; 
    gap: 15px; 
    flex-wrap: wrap; /* Para que en pantallas medianas no se rompa */
}

.hero-visual img { 
    box-shadow: 0 20px 40px rgba(0,0,0,0.12); /* Sombra mejorada */
    transform: rotate(2deg); /* Pequeña rotación moderna */
    border: 6px solid #fff; 
    border-radius: 12px;
    transition: transform 0.5s ease;
}

.hero-visual img:hover {
    transform: rotate(0deg) scale(1.02); /* Efecto interactivo sutil */
}

/* --- RESPONSIVE --- */

/* Tablets y Laptops pequeñas */
@media (max-width: 1100px) {
    .hero h1 { font-size: 3rem; }
}

/* Celulares y Tablets verticales */
@media (max-width: 900px) {
    .hero { 
        /* En móvil el menú es más delgado, así que subimos más el contenido */
        padding: 100px 0 50px; 
    }
    
    .hero-grid { 
        grid-template-columns: 1fr; /* Una sola columna */
        text-align: center; 
        gap: 40px;
    }
    
    .hero-content {
        order: 1; /* Texto primero */
    }
    
    .hero-visual { 
        display: block; /* Aseguramos que se vea la imagen en móvil si quieres, o 'none' para ocultar */
        order: 2;
        margin: 0 auto;
        max-width: 80%; /* Imagen más pequeña en móvil */
    }
    
    .hero h1 { 
        font-size: 2.5rem; /* Título ajustado para celular */
    }
    
    .hero p {
        margin-left: auto;
        margin-right: auto;
        font-size: 1.1rem;
    }

    .hero-actions { 
        justify-content: center; 
    }
}

/* Celulares muy pequeños (iPhone SE, etc) */
@media (max-width: 400px) {
    .hero h1 { font-size: 2.2rem; }
    .btn { width: 100%; text-align: center; } /* Botones full width */
}