.single-page-hero {
    background: url('../img/banner-page.webp') center/cover no-repeat fixed;  
}

 .contact-card {
     background: #ffffff;
     border: none;
     border-radius: 24px;
     /* Bordes muy redondeados como la imagen */
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
     /* Sombra suave y difusa */
     padding: 20px;
     margin-top: 30px;
 }

 /* 4. Columna Izquierda (Texto) */
 .contact-informacion {
     padding: 40px;
     color: #1a1a1a;
     /* Texto oscuro, ya no blanco */
     background: transparent;
     /* Quitamos el fondo azul */
 }

 .contact-informacion h3 {
     font-size: 2.5rem;
     font-weight: 800;
     line-height: 1.2;
     color: #111;
     margin-bottom: 20px;
 }

 .contact-subtext {
     color: #666;
     margin-bottom: 40px;
     font-size: 1rem;
     line-height: 1.6;
 }

 .info-item {
     margin-bottom: 25px;
     display: flex;
     align-items: center;
 }

 .info-item i {       
     font-size: 1.2rem;
     margin-right: 15px;
 }

 .info-item a {
     color: #333;
     text-decoration: none;
     font-weight: 500;
     font-size: 1.1rem;
 }

 /* 5. Columna Derecha (El Formulario) */
 .contact-form {
     padding: 30px;
 }

 /* ESTILO CLAVE: Inputs Grises como en la imagen */
 .form-floating>.form-control {
     background-color: #f3f4f6;
     /* El gris claro de la imagen */
     border: 1px solid transparent;
     border-radius: 12px;
     color: #333;
 }

 .form-floating>.form-control:focus {
     background-color: #fff;
     border-color: #e0e0e0;
     box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
 }

 .form-floating>label {
     color: #888;
 }