/**
 * Contacto — la única página del sitio donde alguien escribe.
 *
 * No es otra landing con un formulario al final: el formulario es la página.
 * Todo lo demás está subordinado a él —el titular lo presenta, la escena lo
 * acompaña y los sellos lo respaldan—, y por eso acá no hay ni un botón que
 * compita: el único CTA de esta página es el que envía lo que se escribió.
 *
 * El vocabulario de la escena vive en `escenas.css` y el esqueleto en
 * `paginas.css`. Acá viven la composición de la conversación, el formulario y
 * sus cuatro estados.
 */

/* --- La conversación: formulario y su acompañamiento ----------------------
   Dos columnas de peso muy distinto. El formulario es una pieza sólida y
   opaca; el lado derecho es vidrio, texto chico y una escena más baja. Esa
   diferencia de densidad es lo que dice cuál de los dos hay que atender.

   El bloque no ocupa los 1520 px de la columna: un formulario a ancho de
   página se lee como una planilla. El aire de la derecha es deliberado. */

.charla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  align-items: start;
  gap: clamp(36px, 5vw, 88px);
  max-width: 1120px;
  margin-top: clamp(20px, 4vh, 48px);
}

.charla-lado { max-width: 420px; }
.charla-lado .hoja-nota { margin-bottom: 14px; }

/* La garantía es una línea, no tres sellos: el control se desarrolla en
   Seguridad, y acá solo hace falta nombrarlo al lado de donde se decide,
   con la puerta para leerlo completo. */
.charla-garantia {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* El enlace hereda el cuerpo de la línea. Con los 48 px de alto mínimo que
   trae de `site.css` abriría el renglón como si fuera un botón. */
.charla-garantia .text-link { min-height: 0; padding: 0; font-size: inherit; }

/* --- El formulario ---------------------------------------------------------
   Doble bisel por anillos de sombra: el único lugar del sitio donde alguien
   escribe merece verse como una pieza encajada, no como un panel apoyado. El
   vidrio acá sí se justifica —hace falta ver dónde termina cada campo. */

.demo-form {
  position: relative;
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radio-nucleo);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, .42),
    0 0 0 8px rgba(30, 27, 75, .07),
    var(--brillo-canto),
    var(--shadow-1);
}

.demo-form label {
  display: block;
  margin: 0 0 16px;
  color: var(--tinta-suave);
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: .002em;
}

.demo-form label > span { display: block; margin-bottom: 7px; }

/* Nombre y empresa son dos datos cortos: en un renglón el formulario se ve
   como lo que es —cuatro preguntas—, y apilados parece el doble de largo. */
.demo-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.demo-fila label { margin-bottom: 16px; }

.demo-form input,
.demo-form textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radio-chip);
  background: var(--panel-suave);
  color: var(--tinta);
  font: inherit;
  font-size: 14.5px;
  font-weight: 450;
  transition: border-color var(--paso) var(--curva), background var(--paso) var(--curva), box-shadow var(--paso) var(--curva);
}

/* La pregunta que importa es la que tiene más lugar para contestarse. */
.demo-form textarea { min-height: 122px; resize: vertical; }
.demo-form ::placeholder { color: var(--rotulo); opacity: 1; }
.demo-form input:hover, .demo-form textarea:hover { border-color: rgba(30, 27, 75, .26); }

.demo-form input:focus,
.demo-form textarea:focus {
  border-color: rgba(124, 58, 237, .55);
  background: var(--panel);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

/* El campo que el navegador marca como inválido **después** de intentar
   enviar. Sin `:user-invalid` el borde rojo aparece mientras se escribe, que
   es regañar a alguien por no haber terminado. */
.demo-form input:user-invalid,
.demo-form textarea:user-invalid { border-color: rgba(220, 38, 38, .55); }

/* Con el peso justo para ganarle a `.demo-form label`, que es `display:block`.
   Sin esto la casilla cae en su propio renglón, arriba del texto que explica
   qué se está aceptando. */
.demo-form .consent { display: flex; align-items: flex-start; gap: 11px; margin: 22px 0 0; color: var(--muted); font-weight: 400; line-height: 1.5; }
.demo-form .consent input { width: 24px; height: 24px; min-height: 24px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--violet-deep); }
.demo-form .consent span { margin: 0; font-size: 13px; }
.demo-form .consent a { color: var(--tinta-suave); }

.demo-form .button { width: 100%; margin-top: 22px; }
.demo-form .button[aria-busy="true"] { opacity: .75; }

/* El aviso de error. Vive arriba del botón y desaparece al reintentar.
   Es el único rojo del sitio y no sale de un token porque no hay uno: un
   error pintado de violeta se leería como parte del sistema en vez de como
   algo que salió mal. Mismo criterio que los verdes y cianes de estado en
   `escenas.css`. */
.form-aviso {
  display: none;
  margin: 18px 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(220, 38, 38, .35);
  border-radius: 11px;
  background: rgba(220, 38, 38, .06);
  color: #b91c1c;
  font-size: 13.5px;
  line-height: 1.5;
}

.demo-form[data-estado="error"] .form-aviso { display: block; }

/* Enviado. El formulario se va y queda la confirmación: dejar los campos
   llenos y una línea de texto abajo hace dudar de si se mandó. El intercambio
   lo hace el selector de hermano adyacente, así que los dos bloques tienen que
   seguir uno al lado del otro en el HTML. */
.enviado {
  display: none;
  padding: clamp(30px, 4vw, 44px) clamp(26px, 3vw, 34px);
  border: 1px solid rgba(124, 58, 237, .3);
  border-radius: var(--radio-nucleo);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(167, 139, 250, .18), transparent 70%),
    var(--glass-2);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, .42),
    0 0 0 8px rgba(30, 27, 75, .07),
    var(--brillo-canto);
  text-align: center;
}

.demo-form[data-estado="enviado"] { display: none; }
.demo-form[data-estado="enviado"] + .enviado { display: block; }

.enviado .cara { --cara: 56px; margin-bottom: 20px; }
.enviado h2 { margin: 0 0 10px; font-size: 23px; font-weight: 620; letter-spacing: -.03em; }
.enviado p { margin: 0 auto; max-width: 38ch; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* El campo que solo un robot completa. Fuera de pantalla y no `display:none`:
   un campo oculto de verdad tampoco lo llenan los que queremos atrapar. */
.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- La escena: de una frase a un agente -----------------------------------
   Cuatro tiempos en vertical —solicitud, objetivo, agentes, resultado—, que es
   la misma historia que el formulario acaba de empezar. Va en columna y no en
   fila porque acompaña a un formulario alto y angosto, y una escena ancha al
   lado se llevaría la mirada que le corresponde a los campos. */

.charla-escena {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 430px;
  padding: clamp(24px, 3vw, 34px);
}

/* El hilo que une un tiempo con el siguiente. Va en su propio SVG dentro del
   flujo en vez de estirado sobre el lienzo: sus extremos son entonces los de
   las piezas reales, y no hay porcentaje que recalcular cuando el texto de la
   solicitud envuelve en tres renglones en lugar de dos. El `viewBox` es más
   ancho que la línea para que el halo del pulso no quede recortado. */
.charla-hilo { display: block; width: 16px; height: 40px; }

.charla-solicitud { justify-self: stretch; }

.charla-solicitud blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(124, 58, 237, .32);
  color: var(--tinta);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
}

/* Los tres oficios en fila, sobre un riel continuo: un agente de Sylar es una
   cadena de etapas, no tres tareas que corren por su lado. El riel va del eje
   de la primera cara al de la última —con tres columnas iguales y dos huecos,
   ese eje está a media columna del borde—, y su altura son los 18 px que hay
   hasta el centro de una cara de 42 px por la proporción .88 del símbolo. */
.charla-fila {
  --hueco: clamp(8px, 2vw, 18px);
  position: relative;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hueco);
}

.charla-fila .esc-riel {
  left: calc((100% - 2 * var(--hueco)) / 6);
  right: calc((100% - 2 * var(--hueco)) / 6);
  top: 18px;
}

/* El riel es un elemento posicionado y se pintaría por encima de las caras si
   ellas se quedaran en el flujo normal. Un `z-index` las devuelve arriba. */
.charla-fila .esc-agente { position: relative; z-index: 1; }
.charla-fila .cara { --cara: 42px; }

/* --- Cierre ----------------------------------------------------------------
   Sin botón: la única acción de la página está arriba, y repetirla acá la
   debilitaría. El mensaje de One Sylar abre la portada; el cierre lo muestra
   en miniatura en vez de volver a decirlo. */

.hoja-cierre .hoja > p {
  max-width: 56ch;
  margin: clamp(22px, 3vh, 30px) auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.72;
  text-wrap: pretty;
}

/* El Arquitecto escuchando: la escena del formulario reducida a sus tres
   tiempos —la frase, el rostro que la escucha y el objetivo en que se
   convierte—. Sin lienzo de vidrio: el cierre recuerda la historia, no la
   vuelve a contar. Los hilos son los mismos SVG en flujo de la escena grande,
   y por la misma razón: sus extremos son los de las piezas reales. */
.cierre-escucha {
  display: grid;
  justify-items: center;
  max-width: 460px;
  margin: clamp(36px, 5vh, 52px) auto 0;
  text-align: center;
}

.cierre-escucha blockquote {
  margin: 0;
  color: var(--tinta);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
}

.cierre-escucha .cara { --cara: 72px; }
.cierre-hilo { display: block; width: 16px; height: 34px; }

/* --- Escalas ---------------------------------------------------------------
   En angosto la escena **baja**, no sube: primero se completa el formulario y
   después se mira lo que pasa con lo escrito. Poner el dibujo arriba obligaría
   a pasar de largo por él para llegar al primer campo. */

@media (max-width: 1000px) {
  .charla { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vh, 60px); max-width: 680px; }
  .charla-lado { max-width: none; }
}

@media (max-width: 760px) {
  .demo-form { padding: 22px 18px; border-radius: 20px; }
  /* Dos campos en un renglón de teléfono son dos campos ilegibles. */
  .demo-fila { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .enviado { padding: 30px 22px; border-radius: 20px; }

  /* A ancho completo la escena ya no necesita alto mínimo: lo que la sostenía
     era la columna angosta de al lado, que a esta altura ya no existe. */
  .charla-escena { min-height: 0; padding: 28px 20px; }
}