/* ... otros estilos ... */

/* --- ESTILO HERO PRO --- */
.hero-pro {
    padding: 120px 0;
    background: linear-gradient(135deg, #fff 50%, #f8f8f8 50%); /* Fondo sutil dividido */
}

/* En móvil se ven apilados normalmente */
.hero-grid-pro {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* Caja de texto con estilo */
.hero-text-box {
    background: rgba(255, 255, 255, 0.95); /* Fondo casi blanco para legibilidad */
    padding: 40px 50px;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1); /* Sombra suave y elegante */
    position: relative;
    z-index: 2; /* Asegura que esté sobre la imagen */
}

/* Imagen con estilo */
.hero-img-box img {
    border-radius: 20px;
    transform: rotate(3deg); /* Un toque dinámico */
    box-shadow: 20px 20px 0px var(--color-primary); /* Sombra sólida de tu color */
    transition: transform 0.5s;
}
.hero-img-box img:hover { transform: rotate(0deg); }


/* --- MAGIA EN ESCRITORIO --- */
@media (min-width: 992px) {
    .hero-grid-pro {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    
    .hero-text-box {
        max-width: 50%;
        margin-right: -120px; /* SUPERPOSICIÓN: Empuja el texto sobre la imagen */
    }
    
    .hero-img-box {
        max-width: 55%;
        z-index: 1;
    }
}
/* Estilo del botón de envío */
    .btn-submit {
        background-color: black;
        color: white;
        border: none;
        padding: 15px 50px;
        font-size: 1.2rem;
        font-weight: 700;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .btn-submit:hover {
        background-color: var(--color-primary); /* Amarillo */
        color: black;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }