/* =================================== */
/* Estilos para el Hero Banner (Inicio)*/
/* =================================== */

.hero-section {
    /* Fondo con tu color azul corporativo */
    background-color: var(--color-gris-menu); 
    color: var(--color-blanco-puro);
    
    /* =================================== */
    /* !! CAMBIO 1: ESPACIO INTERNO REDUCIDO !! */
    /* =================================== */
    padding: 35px 20px; /* Reducido de 40px a 35px (mínimo) */

    text-align: center;
    position: relative; /* Fundamental para el logo de fondo */
    overflow: hidden; /* Evita desbordamientos */
    
    /* =================================== */
    /* !! CAMBIO 2: ERROR CORREGIDO !!      */
    /* =================================== */
    /* margin-top: 140px; <-- ¡ESTE ERA EL ERROR! Ya lo quité. */
    /* El body ya tiene el padding-top, no necesitamos esto. */
}

/* Marca de agua del logo */
.hero-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; 
    height: 300px;
    background-image: url('../img/150x150.png'); /* ¡Tu logo! */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.04; /* Muy sutil */
    z-index: 1;
}

.hero-content {
    position: relative; /* Se pone por encima de la marca de agua */
    z-index: 2;
}

.hero-content h1 {
    font-size: 3rem; 
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-blanco-puro);
}

/* Usamos tu eslogan como subtítulo */
.hero-content p.subtitle {
    font-size: 1.3rem;
    color: var(--color-dorado-acento); /* ¡Tu color dorado! */
    margin-bottom: 25px; /* Menos espacio antes del botón */
    font-weight: 300;
}

/* Botón de "Agendar Cita" */
.hero-content .btn-inicio-hero {
    background-color: var(--color-dorado-acento);
    color: var(--color-negro-autoridad) !important; 
    padding: 15px 30px; 
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.hero-content .btn-inicio-hero:hover {
    background-color: #f0c300;
    transform: translateY(-3px);
}

/* Ajuste responsivo para el banner */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .hero-content p.subtitle {
        font-size: 1.1rem;
    }
    .hero-section {
        padding: 30px 20px; /* Aún más corto en móvil */
    }
}