/* ════════════════════════════════════════════════════════════════════
   WEBLYM · «CONTÁCTANOS»                                        (12/10)

   La página del formulario de contacto. Sin referencia, así que repite lo
   que ya tiene la portada en vez de inventar:
   · La composición de las preguntas frecuentes (faq.css): el titular a la
     izquierda y, desde el 44,2 % del ancho, el formulario.
   · El titular y el lema, los de las cabeceras de sección (43u y 18u).
   · Los campos, la receta del correo del inicio de móvil: canto #c9c9c9,
     sombra por dentro y azul de la casa al enfocar. El mensaje no es una
     píldora: con varias líneas el radio sería absurdo, así que 12 px.
   · El botón es el azul de los de descuento (`.inicio__accion`, con su
     relieve y su hover).
   ════════════════════════════════════════════════════════════════════ */

.contacto {
  --u: calc(min(100vw, 1920px) / 1088);
  display: grid;
  grid-template-columns: 44.2% 1fr;
  align-items: start;
  max-width: 1920px;
  margin: 0 auto;
  padding: calc(56 * var(--u)) calc(43 * var(--u)) calc(120 * var(--u)) 0;
  box-sizing: border-box;
}

.contacto__cabeza {
  padding-left: calc(46 * var(--u));
}

.contacto__titulo {
  margin: 0;
  font-size: max(26px, calc(43 * var(--u)));
  font-weight: 400;
  line-height: 1.11;
}

.contacto__lema {
  margin: calc(18 * var(--u)) 0 0;
  font-size: max(14px, calc(18 * var(--u)));
  line-height: 1.3;
  color: var(--tinta-suave);
}

.contacto__formulario,
.contacto__hecho {
  grid-column: 2;
  max-width: calc(560 * var(--u));
}

.contacto__campo {
  display: block;
  margin-bottom: calc(20 * var(--u));
}

.contacto__etiqueta {
  display: block;
  margin: 0 0 6px 2px;
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 500;
}

.contacto__entrada {
  display: block;
  width: 100%;
  height: max(42px, calc(46 * var(--u)));
  padding: 0 16px;
  border: 1px solid #c9c9c9;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.05);
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s ease;
}

.contacto__entrada--mensaje {
  height: auto;
  min-height: 150px;
  padding: 12px 16px;
  border-radius: 12px;
  line-height: 1.5;
  resize: vertical;
}

.contacto__entrada:focus {
  border-color: var(--boton-azul);
}

/* Un campo que no vale, marcado en el canto y no con un texto debajo de
   cada uno: el error dice cuál en una sola línea. */
.contacto__entrada[aria-invalid="true"] {
  border-color: #c4361d;
}

.contacto__captcha {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 14px;
  color: #4a4a4a;
}

.contacto__captcha[hidden] {
  display: none;
}

.contacto__captcha-barra {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #ececec;
  overflow: hidden;
}

.contacto__captcha-barra i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--boton-azul);
  transition: width 0.2s linear;
}

.contacto__error {
  margin: 0 0 16px;
  color: #c4361d;
  font-size: 15px;
}

.contacto__enviar {
  margin-top: 4px;
  font: inherit;
  font-size: max(15px, calc(17.7 * var(--u)));
  cursor: pointer;
}

.contacto__enviar:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contacto__nota {
  margin: 14px 0 0 2px;
  font-size: 13.5px;
  color: #6b6b6b;
}

.contacto__nota a,
.contacto__volver {
  color: #4a4a4a;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contacto__hecho-titulo {
  margin: 0;
  font-size: max(22px, calc(28 * var(--u)));
  font-weight: 400;
}

.contacto__hecho-texto {
  margin: 12px 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* ── MÓVIL ─────────────────────────────────────────────────────────
   En una columna y en píxeles, como el resto de la portada de móvil (el
   porqué, en ia.css). `.inicio__accion` va oculto en el móvil de la
   portada —allí el inicio usa el formulario del correo—, así que aquí se
   vuelve a enseñar. */
@media (max-width: 640px) {
  .contacto {
    display: block;
    padding: 32px 20px 64px;
  }

  .contacto__cabeza {
    padding-left: 0;
  }

  .contacto__titulo {
    font-size: 30px;
  }

  .contacto__lema {
    margin-top: 12px;
    font-size: 16px;
  }

  .contacto__formulario,
  .contacto__hecho {
    max-width: none;
    margin-top: 28px;
  }

  .contacto__campo {
    margin-bottom: 16px;
  }

  .contacto__enviar {
    display: flex;
    width: 100%;
    height: 44px;
    font-size: 17px;
  }
}