/* ============================================================
   VantaCard — Contacto
   Page-specific styles only. Todo lo compartido (nav, footer, btn,
   accent-italic, reveal-up, brand-mark, .chapter / .step) vive en
   styles.css — este archivo nunca los redefine. La sección "Qué pasa
   después" usa .chapter y .step tal cual, sin una línea aquí.

   La página tiene tres bloques y cada uno hace algo distinto: los
   canales son para quien ya sabe qué quiere y solo busca el número,
   el compositor es para quien no sabe qué escribir, y el proceso
   responde la pregunta que queda después de mandar el mensaje.
   ============================================================ */

/* ---------- Apertura ----------
   Más corta que la de compromiso.html a propósito: esta página es
   una acción, no una lectura. Quien llega aquí ya decidió escribir,
   así que los canales tienen que estar cerca del borde inferior de
   la primera pantalla, no debajo de un viewport completo de texto. */
.contact-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: calc(var(--space-6) + 2.5rem) var(--space-4) var(--space-5);
  text-align: center;
}

.contact-hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin: 0 0 var(--space-3);
}

.contact-hero__lede {
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0 auto;
}

/* ---------- Canales ---------- */
.channels {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.channels__head {
  max-width: 60ch;
  margin-bottom: var(--space-5);
}

.channels__head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

.channels__head p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  line-height: 1.65;
}

.channels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.channel:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

/* WhatsApp lleva el borde vivo porque es el canal al que apunta todo
   el resto del sitio: cada "Cotizar" de cada página termina ahí. Si
   las tres tarjetas pesaran igual, la página estaría contradiciendo
   a los botones. */
.channel--primary {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-raised));
}

.channel__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}

.channel__icon svg {
  width: 21px;
  height: 21px;
}

.channel__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: var(--space-1) 0 0;
}

/* El dato en mono: es lo que la persona viene a copiar, y la mono lo
   separa del texto corrido sin necesidad de recuadro. */
.channel__value {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text-primary);
  margin: 0;
  word-break: break-word;
}

.channel__desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Empuja el enlace al fondo para que las tres tarjetas lo alineen
   aunque sus descripciones midan distinto. */
.channel__cta {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 0.92rem;
  color: var(--accent-strong);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color 0.25s var(--ease-premium);
}

.channel__cta:hover {
  border-bottom-color: var(--accent-strong);
}

/* ---------- Arma tu mensaje ----------
   Misma retícula que .chapter (texto sticky a la izquierda, contenido
   a la derecha) para que la página no cambie de estructura a media
   lectura. No reusa .chapter directamente porque el formulario no es
   .chapter__body: necesita fondo, borde y padding propios. */
.composer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-6);
  align-items: start;
}

.composer__aside {
  position: sticky;
  top: 104px;
  align-self: start;
}

.composer__aside h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

.composer__aside > p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  line-height: 1.65;
}

.composer__note {
  font-size: 0.88rem;
  color: var(--text-tertiary);
}

.composer__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field label {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.field__opt {
  color: var(--text-tertiary);
  font-size: 0.8rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease-premium);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-tertiary);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--border-strong);
}

/* El foco visible no puede depender solo del borde: con el teclado
   tiene que verse desde lejos cuál campo está activo. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* La vista previa del mensaje. En mono y con el borde a la izquierda
   para que se lea como una cita de lo que se va a mandar, no como un
   párrafo más del formulario. Vacía no ocupa espacio: el bloque solo
   aparece cuando ya hay algo que enseñar. */
.composer__preview {
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-2);
  border-left: 2px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.composer__preview:empty {
  display: none;
}

.composer__send {
  align-self: flex-start;
}

.composer__alt {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-tertiary);
}

.composer__alt a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.composer__alt a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--border-strong);
}

/* ---------- Responsive ----------
   900px es el mismo corte que usa .chapter en styles.css; cambiarlo
   aquí haría que las dos retículas de la página se rompieran en
   momentos distintos al ir achicando la ventana. */
@media (max-width: 900px) {
  .channels__grid {
    grid-template-columns: 1fr 1fr;
  }

  .composer {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-block: var(--space-5);
  }

  .composer__aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .contact-hero {
    padding-top: calc(var(--space-6) + 1.5rem);
  }

  .channels__grid {
    grid-template-columns: 1fr;
  }

  .composer__send {
    align-self: stretch;
    justify-content: center;
  }
}

/* El botón de WhatsApp tiene un imán que lo sigue con el puntero
   (js/contacto.js). Sin puntero fino no hay nada que seguir, y el
   transform que deja puesto descuadra el botón en el resto de los
   casos. */
@media (hover: none) {
  .channel:hover {
    transform: none;
  }
}