/* ============================================================================
   Contacto y Brook — Dirección A «La Carta»
   ----------------------------------------------------------------------------
   La página dejó de ser «un formulario»: es la puerta a Brook. El orden es de
   tiempo de respuesta descendente —instantáneo, horas, un día—, o sea una
   escalera y no una lista de canales.

   Ningún botón vino sólido: acá no se cobra. El de más peso es el de enviar de
   Brook, de 52px.
   ========================================================================= */

.bk-contacto {
  background: var(--papel);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
}
/* Sin `padding-bottom` propio: esos 8px dejaban una franja de papel entre la
   franja de arena del sello y el footer. El contenedor no suma espacio —el
   ritmo lo ponen sus hijos, igual que en el resto del sitio (components.css,
   «RITMO VERTICAL ÚNICO»)—, y acá además le ganaba a esa regla por orden de
   carga. */

.con-head { padding-inline: var(--edge); }

.con-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.06;
  margin: 9px 0 0;
  text-wrap: pretty;
}

.con-lema {
  font-family: var(--script);
  font-style: italic;
  font-size: 20px;
  line-height: 1.34;
  color: var(--wine);
  margin: 9px 0 0;
}

.con-lead { margin: 11px 0 0; font-size: 15.5px; line-height: var(--lh-texto); color: var(--tinta-2); }

.con-brook-pie {
  padding-inline: var(--edge);
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: var(--lh-texto);
  color: var(--cacao);
}

/* ============================================================================
   Canales, formulario y datos
   ========================================================================= */

.con-canales { padding-inline: var(--edge); }

.con-canal {
  margin-top: 12px;
  background: var(--white);
  color: var(--ink);
  padding: 15px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

.con-canal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.con-canal h2 { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.14; margin: 0; }
.con-canal-top span { font-family: var(--mono); font-size: 10px; color: var(--cacao); }
.con-canal p { margin: 7px 0 0; font-size: 15px; line-height: var(--lh-texto); color: var(--tinta-2); }

.con-tel { font-family: var(--mono); font-size: 12.5px; color: var(--ink) !important; margin-top: 9px !important; }
.con-canal .btn { margin-top: 11px; }

/* Clase repetida (0,2,0): `.con-canal p` es (0,1,1) y le ganaba el font-size,
   asi que esta nota salia a 15px pese a estar declarada en 10. */
.con-nota.con-nota { font-family: var(--mono); font-size: 10px; line-height: var(--lh-texto); color: var(--cacao); margin-top: 9px; }

/* La nota del canal va centrada bajo su boton; la del formulario sigue alineada a la izquierda. */
.con-canal .con-nota { text-align: center; }

.con-redes { display: flex; gap: 8px; margin-top: 11px; }

.con-redes a {
  background: rgba(110, 44, 52, .07);
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--wine);
  text-decoration: none;
  border-radius: 999px;
}

.con-form { padding-inline: var(--edge); }

.con-form-campos { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

.con-form-campos label { display: block; }

.con-form-campos label > span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--tinta-2);
  margin-bottom: 6px;
}

.con-form-campos label em { font-style: normal; color: var(--cacao); }

.con-form-campos input,
.con-form-campos select,
.con-form-campos textarea {
  width: 100%;
  border: 1px solid rgba(121, 87, 87, .4);
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  /* 16px exactos: por debajo iOS hace zoom al enfocar y descuadra el formulario. */
  font-size: 16px;
  box-sizing: border-box;
  border-radius: var(--r-campo);
}

.con-form-campos input,
.con-form-campos select { height: 52px; padding: 0 12px; }
.con-form-campos textarea { padding: 12px; line-height: var(--lh-texto); resize: vertical; }

.con-form-campos input:focus,
.con-form-campos select:focus,
.con-form-campos textarea:focus { outline: 2px solid var(--wine); outline-offset: -2px; }

/* Blanco y no `--paper` (#F0F0F0).
   Ese gris es del sistema visual viejo: desde que todo el sitio corre sobre el
   papel cálido de «La Carta», una caja gris encima se lee como una mancha, no
   como un bloque destacado — es el mismo defecto que Ignacio marcó en la
   página de búsqueda («está gris arriba y luego el fondo claro»). El blanco
   con hilo es el lenguaje de tarjeta que ya usa el resto del sitio. */
.con-datos {
  background: var(--white);
  border-top: 1px solid rgba(121, 87, 87, .18);
  border-bottom: 1px solid rgba(121, 87, 87, .18);
  color: var(--ink);
  /* Banda a sangre: el padding lateral lo pone components.css. */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.con-datos p:not(.eyebrow) { font-size: 15px; line-height: var(--lh-texto); margin: 3px 0 0; }
.con-datos .eyebrow { font-size: 9.5px; letter-spacing: .12em; }

.con-faq { padding-inline: var(--edge); }
.con-faq .faq-item:first-of-type { margin-top: 10px; }

@media (min-width: 900px) {
  .con-head,
  .con-canales,
  .con-form,
  .con-faq { max-width: var(--reading); margin-inline: auto; }

  /* El ancho de Brook en escritorio se resuelve en brook.css: esta hoja se
     encola ANTES que la del componente y la regla nunca ganaba. */
  .con-brook-pie { max-width: var(--reading); margin-inline: auto; }
  .con-datos { flex-direction: row; }
  .con-datos > div { flex: 1; }
}