/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · contact.css — hoja de la página /contact
   Maqueta el Figma `/contact — Desktop 1440` (91:70).

   La jerarquía es el diseño: tarjeta navy con botón coral para la prueba de nivel (CTA
   principal) y tarjeta blanca con botón navy para el formulario (acción secundaria). Si eso
   se invierte, la página deja de cumplir la regla de un solo CTA.

   Los estilos del formulario valen igual para la maqueta y para el formulario real de
   WPForms: por eso las reglas apuntan a `input`, `select` y `textarea` dentro de `.c3`, no
   solo a las clases propias.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.contact {
  --co-ancho: 1440px;
  --co-lateral: 72px;
}

.contact .c1__inner,
.contact .c2__inner,
.contact .c3__inner,
.contact .c4__inner,
.contact .c5__inner {
  max-width: var(--co-ancho);
  margin-inline: auto;
  padding-inline: var(--co-lateral);
}

.contact .boton {
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
}

/* ── C1 · Hero ───────────────────────────────────────────────────────────────────────── */

.c1 { background: var(--c-crema-calida); }
.c1__inner { padding-block: 56px 48px; }

.c1__etiqueta {
  margin: 0;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-acento);
}

.c1__titular {
  margin: var(--e-3) 0 var(--e-4);
  max-width: 44rem;
  font-size: var(--t-h1);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.c1__entrada { margin: 0; max-width: 52rem; font-size: var(--t-lead); color: var(--c-navy); }

/* Dos columnas solo cuando hay foto: sin ella el modificador no se pinta y el texto se
   queda a ancho completo, como estaba. */
.c1__inner--cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--e-7);
  align-items: center;
}

/* Con foto al lado, el titular ya no necesita el tope de 44rem: lo pone la columna. */
.c1__inner--cols .c1__titular,
.c1__inner--cols .c1__entrada { max-width: none; }

.c1__foto {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.c1__foto img {
  display: block;
  width: 100%;
  height: auto;
}

.c1__whatsapp {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  align-items: flex-start;
  margin: var(--e-5) 0 0;
}

/* Botón de línea propio de la página, no `boton--linea`: ese modificador vive en home.css
   y aquí no se carga —el mismo tropiezo que ya dio /pricing—. Va de línea a propósito: el
   CTA principal de /contact es la prueba de nivel de C2, y dos botones coral en la misma
   pantalla no dejan ver cuál es el camino.
   El icono acompaña al texto con gap propio, para no depender de un espacio en el marcado
   que el minificador se puede comer. */
.c1__whatsapp-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--c-navy);
  border: 2px solid var(--c-navy);
}

.c1__whatsapp-boton:hover,
.c1__whatsapp-boton:focus-visible {
  background: var(--c-navy);
  color: var(--c-blanco);
}

.c1__whatsapp-icono { flex: 0 0 auto; }

.c1__whatsapp-nota {
  font-size: var(--t-muletilla);
  color: var(--c-pizarra);
}

/* ── C2 · Dos caminos ────────────────────────────────────────────────────────────────── */

.c2 { background: var(--c-crema); }

.c2__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-block: 48px;
  align-items: stretch;
}

.c2__camino {
  border-radius: var(--r-xl);
  padding: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}

.c2__camino--principal { background: var(--c-navy); color: var(--c-blanco); }
.c2__camino--secundario { background: var(--c-blanco); border: 1px solid var(--c-borde); }

.c2__titulo {
  margin: 0;
  font-size: var(--t-h3);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.c2__camino--principal .c2__titulo { color: var(--c-blanco); }

.c2__texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }
.c2__camino--principal .c2__texto { color: var(--c-texto-navy); }

.c2__cta { margin-top: auto; }

/* La entrada al formulario es enlace, nunca botón: no compite con el CTA. */
.c2__enlace { margin: auto 0 0; font-size: var(--t-tarjeta); font-weight: 700; }

/* ── C3 · Formulario ─────────────────────────────────────────────────────────────────── */

/* Es destino de ancla («Go to the form ↓») y la cabecera es sticky: se le reserva el hueco
   para que el titular del formulario no quede debajo de la cabecera al saltar. */
.c3 {
  background: var(--c-blanco);
  scroll-margin-top: calc(var(--altura-cabecera) + var(--e-4));
}

.c3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 32px;
  padding-block: 64px;
  align-items: start;
}

.c3__form {
  background: var(--c-crema);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-xl);
  padding: 36px;
}

.c3__titular {
  margin: 0 0 var(--e-5);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

/* Aviso de maqueta: se ve, no se esconde. Desaparece solo cuando WPForms toma el relevo. */
.c3__aviso {
  margin: 0 0 var(--e-5);
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--c-acento);
  background: var(--c-error-fondo);
  font-size: var(--t-tarjeta);
  color: var(--c-navy);
}

.c3__campo { margin: 0 0 var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }

/* Labels SIEMPRE visibles: el placeholder no es una etiqueta. */
.c3 label {
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-semi);
  color: var(--c-navy);
}

.c3 input[type='text'],
.c3 input[type='email'],
.c3 select,
.c3 textarea,
.c3 .wpforms-field input[type='text'],
.c3 .wpforms-field input[type='email'],
.c3 .wpforms-field select,
.c3 .wpforms-field textarea {
  font: inherit;
  width: 100%;
  min-height: 48px;
  padding: var(--e-3) var(--e-4);
  border: 1.5px solid var(--c-borde-calido);
  border-radius: var(--r-sm);
  background: var(--c-blanco);
  color: var(--c-tinta);
}

.c3 textarea { min-height: 120px; resize: vertical; }

/* WPForms cuelga del propio campo una clase de tamaño (`small` 25 %, `medium` 60 %, `large`
   100 %) con un `max-width` que gana al `width: 100%` de arriba. Con `medium` por defecto,
   nombre, email y desplegable salían a 60 % y el textarea al 100 %: la columna quedaba
   descuadrada. El tamaño se siembra ya en `large`, pero la regla se queda como red de
   seguridad para cualquier campo que se añada luego desde el panel. */
.c3 .wpforms-field-small,
.c3 .wpforms-field-medium,
.c3 .wpforms-field-large { max-width: 100%; }

/* La validación nativa marca el campo en rojo solo cuando el usuario ya ha escrito algo:
   `:user-invalid` evita el error prematuro que hace abandonar formularios. */
.c3 input:user-invalid,
.c3 textarea:user-invalid,
.c3 select:user-invalid {
  border-color: var(--c-error);
  background: var(--c-error-fondo);
}

.c3__consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin: 0 0 var(--e-5);
}

.c3__consentimiento input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.c3__consentimiento label { font-weight: var(--peso-regular); font-size: var(--t-muletilla); color: var(--c-pizarra); }

.c3__envio { margin: 0; }

/* Envío en navy: acción secundaria de la página (el coral es del CTA principal). */
.c3__boton,
.c3 .wpforms-submit {
  min-height: 48px;
  cursor: pointer;
}

.c3 .wpforms-submit {
  font: inherit;
  font-weight: var(--peso-extra) !important;
  background: transparent !important;
  color: var(--c-navy) !important;
  border: 2px solid var(--c-navy) !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 28px !important;
}

.c3 .wpforms-submit:hover { background: var(--c-navy) !important; color: var(--c-blanco) !important; }

.c3__lateral { display: flex; flex-direction: column; gap: 16px; }

.c3__ficha {
  background: var(--c-superficie-hundida);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}

.c3__ficha-titulo { margin: 0 0 var(--e-2); font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-navy); }
.c3__ficha-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

/* ── C4 · FAQ ────────────────────────────────────────────────────────────────────────── */

.c4 { background: var(--c-crema); }
.c4__inner { padding-block: 64px; max-width: 1000px; }

.c4__titular {
  margin: 0 0 var(--e-5);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

/* ── C5 · Cierre ─────────────────────────────────────────────────────────────────────── */

.c5 { background: var(--c-navy); color: var(--c-blanco); }

.c5__inner {
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
}

.c5__titular { margin: 0; font-size: var(--t-h2); line-height: var(--i-titular); font-weight: var(--peso-extra); color: var(--c-blanco); }
.c5__texto { margin: 0; max-width: 46rem; font-size: var(--t-lead); color: var(--c-texto-navy); }

/* ── Tablet ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .contact { --co-lateral: var(--e-6); }

  .c2__inner { grid-template-columns: 1fr; }
  .c3__inner { grid-template-columns: 1fr; }
  /* La foto se estrecha antes de romperse en una columna: a 1100 todavía cabe al lado. */
  .c1__inner--cols { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--e-6); }
}

/* ── Móvil ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .contact { --co-lateral: 20px; }

  .c1__inner { padding-block: 32px; }
  .c1__titular { font-size: var(--t-h3); }
  /* En el pulgar el orden es al revés que en escritorio: primero la cara, luego el texto.
     Es lo que hace la home con su hero y evita abrir la página con un muro de letra. */
  .c1__inner--cols { grid-template-columns: 1fr; gap: var(--e-5); }
  .c1__inner--cols .c1__foto { order: -1; }
  .c1__whatsapp-boton { width: 100%; justify-content: center; }

  .c2__inner,
  .c4__inner,
  .c5__inner { padding-block: 40px; }

  .c2__camino { padding: 24px; }
  .c2__cta { width: 100%; text-align: center; }

  .c3__inner { padding-block: 40px; }
  .c3__form { padding: 24px 20px; }
  .c3__boton { width: 100%; }
  .c5__cta { width: 100%; text-align: center; }
}