/* Variante clara del formulario compartido, limitada a Contacto. */
.fs-home.fs-contacto { --fs-amarillo:#f4e85c; width:100%; font-family:'Open Sans',Arial,sans-serif; color:#252930; line-height:1.6; }
.fs-contacto *, .fs-contacto *::before, .fs-contacto *::after { box-sizing:border-box; }
.fs-contacto .fs-presupuesto { background:#fff; color:#252930; padding:32px 28px; scroll-margin-top:145px; }
.fs-contacto .fs-contenedor { max-width:780px; margin:0 auto; padding:0; }
.fs-contacto .fs-titulo { margin:0 0 16px; font-family:inherit; font-size:clamp(24px,2.2vw,30px); font-weight:700; line-height:1.3; text-align:left; text-transform:none; color:#252930; }
.fs-contacto .fs-intro { margin:0; font-size:15px; color:#637381; text-align:left; }
.fs-contacto .fs-intro--tienda { margin-top:8px; }
/* Sobre fondo blanco el amarillo de la home no se lee. */
.fs-contacto .fs-intro--tienda a:hover, .fs-contacto .fs-intro--tienda a:focus { color:#8a7600; }
.fs-contacto .fs-form { margin:28px 0 0; }
.fs-contacto .fs-campo > label, .fs-contacto .fs-campo > legend { color:#252930; font-size:14px; font-weight:600; }
.fs-contacto .fs-campo__opcional { color:#637381; font-weight:400; }
.fs-contacto .fs-campo input[type="text"],
.fs-contacto .fs-campo input[type="email"],
.fs-contacto .fs-campo input[type="tel"],
.fs-contacto .fs-campo select,
.fs-contacto .fs-campo textarea { background:#f6f7f8; border:1px solid #dce1e5; border-radius:4px; color:#252930; font-family:inherit; font-size:15px; min-height:48px; }
.fs-contacto .fs-campo input::placeholder, .fs-contacto .fs-campo textarea::placeholder { color:#687681; opacity:1; }
.fs-contacto .fs-campo textarea { min-height:120px; }
.fs-contacto .fs-campo input:focus, .fs-contacto .fs-campo select:focus, .fs-contacto .fs-campo textarea:focus { background:#fff; border-color:#8a7600; }
.fs-contacto .fs-check { gap:12px 20px; }
.fs-contacto .fs-check label { color:#47535d; font-size:14px; }
.fs-contacto .fs-check input { flex-shrink:0; }
.fs-contacto .fs-form__enviar { gap:16px; margin-top:8px; }
.fs-contacto .fs-btn { display:inline-flex; justify-content:center; align-items:center; padding:16px 28px; min-height:48px; border-radius:3px; background:var(--fs-amarillo); color:#252930; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; transition:background .18s ease; }
.fs-contacto .fs-btn:hover { background:#e6d83e; color:#252930; }
.fs-contacto .fs-form__aviso { color:#637381; font-family:inherit; font-size:12px; }
.fs-contacto .fs-campo--error input, .fs-contacto .fs-campo--error select, .fs-contacto .fs-campo--error textarea { border-color:#b42318; }
.fs-contacto .fs-campo__error { color:#b42318; }
.fs-contacto .fs-form__general { background:#fff3f1; border-color:#e6aaa5; color:#9f241c; }
.fs-contacto .fs-ok { background:#fffcec; border-color:#ded28b; text-align:left; }
.fs-contacto .fs-ok h3 { color:#252930; font-family:inherit; }
.fs-contacto .fs-ok p { color:#47535d; }
.fs-contacto :is(input,select,textarea,button,a):focus-visible { outline:2px solid #887400 !important; outline-offset:3px; }
/* L-28 (NAV-17): WooCommerce/Astra borra el contorno en input[type=text] y [type=email]
   con una regla mas especifica (.woocommerce-js input[type="text"]:focus), por eso el !important. */
/* L-28 (NAV-18): sobre fondo blanco el aviso RGPD no lleva el amarillo de la home. */
.fs-contacto .fs-form__aviso a { color:#47535d; text-decoration:underline; text-underline-offset:2px; }
.fs-contacto .fs-form__aviso a:hover, .fs-contacto .fs-form__aviso a:focus-visible { color:#252930; }
@media (max-width:767px) {
 .fs-contacto .fs-presupuesto { padding:24px 4px; }
 .fs-contacto .fs-form__fila { grid-template-columns:1fr; gap:0; }
 .fs-contacto .fs-form__enviar button { width:100%; }
}
/* --- Tablet: las dos columnas se apilan (21-09-2026) ---------------------
   Elementor guarda el ancho de escritorio de esta fila (30,187 % los datos de
   contacto y 67,456 % el formulario) dentro de @media(min-width:768px), y solo
   rompe a una columna por debajo de 768 px. Entre 768 y 1024 px, por tanto,
   la columna de datos se queda en ~232 px: el horario se parte en seis líneas,
   los teléfonos en dos («Soporte: 638 / 356 664») y hasta el título se corta.
   Aquí se apilan las dos columnas en ese tramo.
   El «body» de delante no es adorno: post-5117.css se carga DESPUÉS de esta
   hoja, así que con la misma especificidad ganaría Elementor. */
@media (min-width:768px) and (max-width:1024px) {
  body .elementor-5117 .elementor-element.elementor-element-d68d9c2 { --flex-direction:column; }
  body .elementor-5117 .elementor-element.elementor-element-c1a2f92,
  body .elementor-5117 .elementor-element.elementor-element-685d6d3 { --width:100%; }
  /* Los iconos sociales llevan el ajuste «centrado en tablet» de Elementor, que
     con la columna estrecha pasaba desapercibido. Ya a lo ancho quedaban solos
     en mitad de la página, lejos del resto, que va a la izquierda. */
  body .elementor-5117 .elementor-element.elementor-element-6c3835a .elementor-widget-container { text-align:left; }
}

@media (prefers-reduced-motion:reduce) { .fs-contacto * { transition:none !important; } }
.fs-contacto p { font-family:inherit; }