/*V 1.0 Formulario de contacto - ocupa el hueco .form-wrapper. Se carga DESPUES del CSS de pagina, asi gana a sus min-height sin editar cada hoja.*/

/* === 1. Contenedor === */
.form-wrapper.contact-form {min-height:0; align-self:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding:clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px); text-align:center;}

/* === 2. Titulo === */
.contact-form-title {margin:0; font-size:clamp(22px, 3vw, 28px); line-height:1.2; text-transform:uppercase; color:var(--primary-black);}
.contact-form-title .highlight {color:var(--primary-green);}

/* === 3. Hueco del formulario: reserva su alto para que la pagina no salte al cargar === */
.contact-form-slot {--contact-form-height:806px; width:100%; min-height:var(--contact-form-height);}
.contact-form-slot iframe {width:100%; border:none; display:block;}
@media (min-width:1200px) {.contact-form-slot {--contact-form-height:826px;}}
@media (max-width:450px) {.contact-form-slot {--contact-form-height:906px;}}
@media (max-width:400px) {.contact-form-slot {--contact-form-height:926px;}}
@media (max-width:370px) {.contact-form-slot {--contact-form-height:1006px;}}
@media (max-width:330px) {.contact-form-slot {--contact-form-height:1086px;}}
.contact-form-slot--pending {display:flex; align-items:center; justify-content:center; border:2px dashed #bbb; border-radius:8px; color:#666; font-weight:600;}

/* === 4. Telefono === */
.contact-form-phone {display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:320px; padding:14px 20px; border-radius:30px; font-size:16px; font-weight:700; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:all 0.3s ease;}
.contact-form-phone {background:transparent; border:2px solid var(--primary-black); color:var(--primary-black);}
.contact-form-phone:hover {background:var(--primary-black); color:var(--primary-white);}