/* =========================================================================
   LAQUIN FOODS · El bloque de contacto: el formulario y el mapa

   Lo carga el plugin «Laquin Foods — Optimización» (assets/contacto.css).
   Son las dos últimas secciones de la portada y llegaban con el mismo
   problema de fondo: puestas por omisión, sin decidir nada.

   Quien rellena este formulario no es un consumidor: es el comprador de una
   cadena o de una carnicería pidiendo que le llamen. Lo que está levantando
   es una ficha de pedido, y a eso se parece ahora —rótulos pequeños en
   versales de cobre, campos sobre papel, y una línea donde el formulario
   deja de preguntar quién eres y empieza a preguntar qué compras—. El único
   adorno es el botón, que es donde se decide la visita.

   Sobre cómo está escrito: SureForms no se pinta con reglas sueltas, se
   pinta con 127 variables propias que declara en el <form>. Redefinirlas es
   más limpio que ganarle en especificidad —no hay ni un `!important` en toda
   la hoja— y sobre todo alcanza a lo que uno no ve: los estados de foco, de
   error, el desplegable que se abre flotando, el prefijo del teléfono. Sólo
   se escriben reglas propias para lo que no tiene variable.

   Los colores no se inventan: son los de la paleta del tema (los mismos
   --ast-global-color-0 y -8, y el carmín del logo que ya usa el pie).
   ========================================================================= */

.srfm-form {
  --lq-papel: #fbf6ef;      /* el relleno de los campos, papel tibio */
  --lq-tinta: #1a0e11;      /* el mismo negro del pie */
  --lq-vino: #802525;       /* --ast-global-color-0 */
  --lq-vino-hondo: #5f1a1a;
  --lq-cobre: #a77443;      /* --ast-global-color-8 */
  --lq-crema: #f6e7d7;
  --lq-carmin: #dd183b;     /* el rojo de la etiqueta */
  --lq-linea: rgba(26, 14, 17, 0.14);
}

/* -------------------------------------------------------------------------
   1. Aire alrededor de la sección

   Venía con relleno cero arriba y abajo, así que el formulario quedaba
   pegado a los testimoniales por encima y a la ubicación por debajo, sin
   nada que dijera dónde acaba una cosa y empieza la otra.

   Se apunta de dos maneras a la vez con la misma regla: por el bloque que
   contiene el formulario —que no depende de ningún identificador— y por el
   identificador de Spectra, que es la red por si algún navegador no entiende
   `:has()`. Si algún día se rehace el bloque, la primera sigue sola.
   ------------------------------------------------------------------------- */

.wp-block-uagb-container.uagb-is-root-container:has(.srfm-form),
.wp-block-uagb-container.uagb-is-root-container.uagb-block-9eb50060 {
  padding-top: 104px;
  padding-bottom: 104px;
}

@media (max-width: 976px) {

  .wp-block-uagb-container.uagb-is-root-container:has(.srfm-form),
  .wp-block-uagb-container.uagb-is-root-container.uagb-block-9eb50060 {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

@media (max-width: 767px) {

  .wp-block-uagb-container.uagb-is-root-container:has(.srfm-form),
  .wp-block-uagb-container.uagb-is-root-container.uagb-block-9eb50060 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* -------------------------------------------------------------------------
   2. La paleta del formulario, por sus propias variables

   El azul marino del botón y el gris de los rótulos no estaban escritos en
   ninguna regla: salían de `--srfm-color-scheme-primary` y compañía. Cambiar
   ahí el color arrastra de una vez el botón, el borde al enfocar, el
   resplandor del foco, la opción marcada del desplegable y el estado
   deshabilitado, todos derivados del mismo tono.

   El rótulo pasa a cobre y a doce píxeles: la pregunta deja de medir lo
   mismo que la respuesta, que era lo que hacía ilegible el formulario en
   diagonal. El campo se rellena de papel tibio en vez de gris azulado, y su
   borde inferior se vuelve cobre al enfocar.
   ------------------------------------------------------------------------- */

.srfm-form {
  /* El tono del que cuelga todo lo demás. */
  --srfm-color-scheme-primary: var(--lq-vino);
  --srfm-color-scheme-text: var(--lq-tinta);
  --srfm-color-scheme-text-on-primary: var(--lq-crema);

  /* Rótulos: la voz de una guía de embarque. */
  --srfm-color-input-label: var(--lq-cobre);
  --srfm-label-font-size: 12px;
  --srfm-label-font-weight: 600;
  --srfm-label-line-height: 18px;

  /* La aclaración de debajo acompaña, no compite. */
  --srfm-color-input-description: rgba(26, 14, 17, 0.52);
  --srfm-description-font-size: 13.5px;
  --srfm-description-line-height: 19px;
  --srfm-description-margin-top: 4px;

  /* Campos. */
  --srfm-color-input-text: var(--lq-tinta);
  --srfm-color-input-background: var(--lq-papel);
  --srfm-color-input-background-hover: #fdfaf6;
  --srfm-color-input-border: var(--lq-linea);
  --srfm-color-input-border-hover: rgba(167, 116, 67, 0.55);
  --srfm-color-input-border-focus-glow: rgba(167, 116, 67, 0.16);
  --srfm-color-input-placeholder: rgba(26, 14, 17, 0.38);
  --srfm-color-input-prefix: rgba(26, 14, 17, 0.55);
  --srfm-input-height: 52px;
  --srfm-input-field-padding: 14px 16px;
  --srfm-input-field-border-radius: 4px;
  --srfm-input-field-font-size: 16px;
  --srfm-input-field-line-height: 24px;
  --srfm-input-field-margin-top: 4px;
  --srfm-flag-section-padding: 14px 0 14px 14px;

  /* Desplegables: mismo tamaño de letra que los campos escritos, para que
     una pregunta no parezca menos importante por responderse eligiendo. */
  --srfm-dropdown-font-size: 16px;
  --srfm-dropdown-placeholder-color: rgba(26, 14, 17, 0.38);
  --srfm-dropdown-icon-color: var(--lq-cobre);
  --srfm-dropdown-option-text-color: var(--lq-tinta);
  --srfm-dropdown-menu-border-color: var(--lq-linea);
  --srfm-dropdown-option-padding: 11px 16px;

  /* Aire entre preguntas: con ocho seguidas, dieciocho píxeles las apelmazan. */
  --srfm-row-gap-between-blocks: 24px;
  --srfm-row-gap-between-fields: 20px;

  /* El botón lleva además reglas propias, más abajo. Estas son las medidas
     de las que SureForms deriva su estado de carga y el deshabilitado. */
  --srfm-btn-font-size: 13px;
  --srfm-btn-font-weight: 600;
  --srfm-btn-line-height: 20px;
  --srfm-btn-border-radius: 3px;
  --srfm-btn-padding: 18px 38px;
}

/* Lo que no tiene variable: las versales y la letra abierta del rótulo. */
.srfm-form .srfm-block-label,
.srfm-form .srfm-block-legend {
  font-family: 'Lexend', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* El asterisco en el carmín de la etiqueta: el único sitio de la sección
   donde ese rojo significa algo. La letra vuelve a cerrarse, que si no queda
   flotando lejos de su palabra. */
.srfm-form .srfm-required {
  color: var(--lq-carmin);
  letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   3. Dónde el formulario cambia de asunto

   Las ocho preguntas son en realidad dos: las cinco primeras son quién eres
   —nombre, apellido, correo, empresa, whatsapp— y las tres últimas, qué
   compras. La línea marca ese cambio, y se ve sin leer.

   Se apunta por el nombre del campo, que es lo que SureForms escribe en la
   clase. Si algún día se renombra, desaparece la línea y no se rompe nada.
   ------------------------------------------------------------------------- */

.srfm-form .srfm-slug-tipo-de-negocio {
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid var(--lq-linea);
}

/* -------------------------------------------------------------------------
   4. El botón

   Era el azul marino de fábrica, de 83 por 38 píxeles, perdido en medio del
   ancho: el gesto que decide la visita parecía el menos importante de la
   página.

   Ahora es un sello: vino de la marca, versales de crema con la letra
   abierta, y un segundo filo de cobre por fuera, separado cinco píxeles,
   como el doble borde de un timbre de tinta. Al pasar por encima el filo se
   cierra sobre él y el sello se hunde un punto, que es lo que hace un sello
   cuando se aprieta.

   Es el único adorno de la sección, y está aquí a propósito: si algo tenía
   que llamar la atención en un formulario de ocho preguntas, es el final.
   ------------------------------------------------------------------------- */

/* El sello se alinea con el borde izquierdo de los campos, no en medio: la
   columna entera se lee de arriba abajo por ese canto, y el botón es el
   último renglón de esa lectura, no una pieza aparte.

   Va con flexbox y no con `text-align` porque el bloque trae un
   `style="text-align: center"` en el propio marcado, y un atributo gana a
   cualquier hoja. Los hijos de un contenedor flex no atienden a
   `text-align`, así que la alineación pasa a mandarla `justify-content` sin
   necesidad de un `!important`. */
.srfm-form .wp-block-button {
  display: flex;
  justify-content: flex-start;
  margin-top: 44px;
}

.srfm-form .srfm-submit-button {
  position: relative;
  min-width: 260px;
  border: 0;
  background-color: var(--lq-vino);
  box-shadow: 0 0 0 1px rgba(167, 116, 67, 0.55);
  font-family: 'Lexend', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lq-crema);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    transform 200ms ease;
}

/* El segundo filo va en un pseudoelemento y no en un `outline` porque el
   outline no admite radio propio en todos los navegadores, y aquí lo lleva. */
.srfm-form .srfm-submit-button::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(167, 116, 67, 0.45);
  border-radius: 6px;
  pointer-events: none;
  transition: inset 200ms ease, border-color 200ms ease;
}

.srfm-form .srfm-submit-button:hover {
  background-color: var(--lq-vino-hondo);
  transform: translateY(1px);
}

.srfm-form .srfm-submit-button:hover::after {
  inset: -2px;
  border-color: var(--lq-cobre);
}

/* El foco de teclado no se hereda del hover: tiene que verse solo. */
.srfm-form .srfm-submit-button:focus-visible {
  outline: 2px solid var(--lq-cobre);
  outline-offset: 7px;
}

/* Quien pide menos movimiento no recibe el hundido ni el cierre del filo. El
   color sigue cambiando, que es lo que dice que se puede pulsar. */
@media (prefers-reduced-motion: reduce) {

  .srfm-form .srfm-submit-button,
  .srfm-form .srfm-submit-button::after {
    transition: none;
  }

  .srfm-form .srfm-submit-button:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   5. El mapa

   El bloque trae el alto metido a mano en el marcado (`<embed height>`), y
   en la web pública ese número se quedó en 300 mientras la columna de al
   lado mide 666: el mapa flotaba en mitad de la tarjeta con dos franjas
   vacías encima y debajo.

   En vez de corregir el número —que se volvería a descuadrar al tocar el
   bloque, o al crecer el texto de al lado— el mapa se estira a lo que mida
   su columna. Así las dos mitades de la tarjeta acaban a la misma altura
   siempre, se edite lo que se edite.

   En móvil las columnas se apilan y la columna deja de tener alto propio:
   ahí `height: 100%` se resuelve como `auto` y vuelve a mandar el alto del
   bloque, que es justo lo que conviene.
   ------------------------------------------------------------------------- */

#ubicacion .wp-block-uagb-google-map {
  align-self: stretch;
  height: 100%;
  min-height: 300px;
}

#ubicacion .wp-block-uagb-google-map .uagb-google-map__iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
}