/* ══════════════════════════════════════════════════════════════════════════
   AGENDAR — lo que nace en esta página y en ninguna otra
   ══════════════════════════════════════════════════════════════════════════
   Se carga DESPUÉS de `landing-nueva.css`, igual que `about.css`. Todo lo que
   ya existe allá —tokens, letra, barra, botones, pie, `.dupla`, `.nota`— se
   reusa tal cual y aquí no se repite ni un color.

   LO ÚNICO QUE NACE AQUÍ ES EL FORMULARIO. La landing no tiene un solo campo
   de captura: se buscó `input`, `textarea`, `label` y `form` en las 86 000
   líneas de `landing-nueva.css` y no hay nada. Así que estos estilos no pisan
   a nadie.

   ⚠ NADA DE ESTO CARGA EN LA LANDING. Ella solo enlaza `landing-nueva.css`;
     no puede romperse por nada que se escriba en este archivo.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── LAS DOS COLUMNAS ───────────────────────────────────────────────────────
   Reusa `.dupla` con dos correcciones, las dos por la misma razón: `.dupla`
   se diseñó para TEXTO + VISUAL, y aquí las dos mitades son contenido.

   1. `align-items: start`. El default centra verticalmente, que es lo correcto
      cuando al lado hay una ilustración cuadrada. Con un formulario de tres
      campos al lado de un titular, centrar deja las dos columnas flotando a
      distintas alturas y ninguna arranca donde la vista espera. */
.agendar__dupla {
  align-items: start;
  gap: clamp(40px, 5vw, 88px);
}

/* 2. ⚠ EL VUELCO DE TELÉFONO — la misma trampa que ya mordió en `about.css`.
      `landing-nueva.css` trae `@media (max-width:860px){ .dupla > :last-child
      { order:-1 } }`, y allá está BIEN: al apilarse, el visual debe subir
      encima del texto. Aquí el último hijo es el FORMULARIO, y subirlo pone
      los campos ANTES del titular que explica para qué son — se pide el
      teléfono antes de decir qué se va a hacer con él. Se devuelve a su sitio.

      Esto no se ve en el código ni en ninguna medida de ancho: solo aparece
      en la captura de 390 px. Si algún día se agrega otra `.dupla` a una
      página nueva, revisar esto ANTES de fotografiar. */
@media (max-width: 860px) {
  .agendar__dupla > :last-child { order: 0; }
}

/* ⚠ EL TOPE VA EN LAS RAZONES, NO EN LA COLUMNA ENTERA — se hizo al revés
   primero y se vio en la foto de 1 600 px. Con `max-width:46ch` puesto en el
   contenedor, el TITULAR también quedaba amarrado a esos ~390 px y «Agenda una
   demo» se partía en «Agenda una / demo» sin ninguna razón: en su celda de 576
   px cabe entero a 62 px. El tope existe para que los renglones de apoyo no se
   estiren cuando la pantalla es ancha; el titular no lo necesita. */
/* ⚠ Y EL TITULAR BAJA UN PELO, POR SEIS PÍXELES MEDIDOS. Quitarle el tope a la
   columna no bastó: a 1 600 px la celda del texto mide 484 px —no 580, porque
   `.franja` mete sus 96 px de margen POR LADO antes de repartir— y «Agenda una
   demo» a 62 px pide ~490 px de tinta. Se partía en «Agenda una / demo» por
   seis píxeles. A 58 px pide ~458 y entra de una sola línea en 1 600, 1 512 y
   todo lo de abajo. Los cuatro píxeles de letra no los ve nadie; el renglón
   suelto con «demo» solo, sí.

   ⚠ Es el titular DE ESTA PÁGINA, no la escala de la landing: `.dupla .h1`
     sigue en 62 y allá los titulares de dos renglones son decisión tomada. */
.agendar__dicho .h1 { font-size: clamp(34px, 4.2vw, 58px); }

.razones { max-width: 46ch; }
.agendar__dicho .bajada { max-width: 46ch; }


/* ── LAS TRES RAZONES ───────────────────────────────────────────────────────
   No son viñetas: son tres pares de «qué» + «cómo». El qué va en negrita y
   corto —se lee de un vistazo—; el cómo va en `.nota`, la misma letra de
   apoyo que usa toda la página, para que no compitan.

   Sin bolitas ni palomitas a propósito: la dirección firmada el 2026-08-24
   prohíbe «elementos decorativos». El aire entre pares ya separa. */
.razones {
  margin-top: var(--aire-titulo);
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}
.razon__que {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.014em;
}
.razon__como { margin: 6px 0 0; }


/* ── EL FORMULARIO ──────────────────────────────────────────────────────────
   SIN TARJETA, y es decisión de dirección, no de gusto: `landing-nueva.css`
   §planes dice que ése es «el único lugar donde la dirección autoriza
   tarjetas». Meter el formulario en una caja con borde abriría un segundo.
   Los campos ya tienen borde propio —lo necesitan para leerse como campos— y
   con eso basta para que el bloque se lea como una unidad. */
.forma { max-width: 460px; }

.forma__titulo {
  margin: 0 0 clamp(18px, 1.8vw, 24px);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.018em;
}

.campo { display: block; }
.campo + .campo { margin-top: clamp(18px, 1.8vw, 24px); }

/* La etiqueta va ARRIBA del campo y es un `<label>` de verdad atado por `for`.
   No va de placeholder dentro del campo: el placeholder desaparece en cuanto
   escribes y quien vuelve a revisar ya no sabe qué le pidieron. */
.campo__etiqueta {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.006em;
}
.campo__dato {
  box-sizing: border-box;   /* con `width:100%` y padding, sin esto se desborda */
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;          /* ⚠ 16 px o más: por debajo, Safari de iPhone hace
                                  zoom solo al tocar el campo y descuadra todo */
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--curva-chica);
  transition: border-color .18s ease;
}
.campo__dato::placeholder { color: var(--tinta-suave); opacity: 1; }
.campo__dato:hover { border-color: var(--tinta-suave); }
.campo__dato:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
  border-color: var(--marca);
}
textarea.campo__dato { min-height: 92px; resize: vertical; }

/* El botón ocupa el ancho de la columna. `.btn` es `inline-flex`; se pasa a
   `flex` para que `width:100%` mande sin pelearse con el ancho del texto. */
.forma__accion {
  display: flex;
  width: 100%;
  margin-top: clamp(22px, 2.2vw, 30px);
}
.forma__nota { margin-top: 12px; }



/* ── LA VUELTA ──────────────────────────────────────────────────────────────
   Mismo cierre que `about.html`: un enlace de regreso y nada más.

   ⚠ SE LE RECORTA EL AIRE DE ARRIBA, y también salió de la foto. `.seccion`
     reparte `--aire-seccion` (hasta 220 px) arriba y abajo, y `--suelta` la
     mitad: entre la última línea del formulario y este botón quedaban ~275 px
     de blanco. En la landing ese respiro separa dos bloques que pesan; aquí
     separa un formulario de su propia salida, y a esa distancia ya no se leen
     como la misma página — se lee como que se acabó y sobró hoja. Con esto
     quedan ~120 px, que es lo que separa dos cosas relacionadas. */
.agendar__salida { padding-top: clamp(28px, 3vw, 48px); }
.agendar__volver { margin-top: 0; }


/* ── EL SEGUNDO RENGLÓN DE LA ENTRADA ────────────────────────────────────────
   Llegó con el texto firmado del Director del 2026-08-25: debajo del subtítulo
   va una línea más —«Hablas con una persona de nuestro equipo, no con un video
   grabado.»— que no vale lo mismo que la de arriba. La de arriba dice qué
   ganas; ésta mata una duda.

   Por eso es `.nota` y no `.cuerpo`: mismo gris, tamaño menor. Y por eso el
   aire que la separa es CORTO —son la misma idea en dos tiempos, no dos
   párrafos—, con el ancho de lectura de la columna para que no se estire más
   que el subtítulo al que acompaña. */
.agendar__aclara {
  margin-top: 10px;
  max-width: 46ch;
}

/* ── EL AVATAR DE LA DEMO — CHICO Y EN LA ESQUINA ────────────────────────────
   ⚠ MISMA ORDEN DEL DIRECTOR QUE EN `about.css` (2026-08-25): chicos y
     esquinados, sin llegar a pegarse al filo. Aquí nació a escala de retrato y
     al pie de la columna izquierda, y de paso la dejó MÁS ALTA que el
     formulario —el desbalance que había, volteado de lado—. Al salir del flujo
     ese problema se va con él: la columna vuelve a medir lo que mide su texto.

   1. EL TAMAÑO — `--alto-3d-esquina`, el escalón chico. La constante 1.1117
      manda el ancho igual que allá, así que este personaje y el morado de
      «Nosotros» miden exactamente lo mismo.

   2. EL SITIO — esquina inferior IZQUIERDA de la sección, que es la única
      libre: el formulario ocupa la derecha y termina más abajo que la columna
      de texto. Medido a 1600 px: la columna cierra en y=635, el formulario en
      720 y la sección en 824. El hueco de abajo a la izquierda es real.

   ⚠ AQUÍ EL ANCLA ES LA COLUMNA, NO LA SECCIÓN, y es la única diferencia con
     `about.css`. Allá la sección tiene un solo bloque angosto y centrado, así
     que amarrar el avatar al fondo de la sección nunca lo acerca al texto.
     Aquí el avatar comparte la BANDA HORIZONTAL de la columna izquierda —a
     1280 px la columna arranca en x=97 y el avatar en x=58—, así que amarrarlo
     al fondo de la sección lo dejaba a 11 px del último renglón de las razones.
     `top: 100%` sobre `.agendar__dicho` lo cuelga SIEMPRE por debajo de donde
     acabe la columna, mida lo que mida: el choque deja de ser posible en vez de
     quedar dependiendo de que los números sigan cuadrando.

   ⚠ EL `inset-inline-start` NEGATIVO es lo que lo saca de la columna hasta el
     filo de la pantalla. Se calcula hacia atrás: se resta el margen exterior de
     la franja y el `--margen` de adentro, de forma que lo que queda es la
     distancia al filo de la pantalla —`clamp(24px, 3vw, 60px)`— y no a la
     columna. Es el mismo hueco de `about.css`, del otro lado.

   ⚠ EL CORTE EN 1120 px es el mismo de `about.css`. Por debajo, primero se
     cierra el hueco vertical bajo la columna y a 860 las dos columnas se apilan
     y ya no queda esquina que valga: el avatar vuelve al flujo, al filo derecho
     de la columna, entre las razones y el formulario. Ese orden de lectura es
     el mismo de pantalla ancha —primero por qué vale la pena, luego con quién,
     y hasta el final los campos—. */
.escena--demo {
  max-width: calc(var(--alto-3d-esquina) / 1.1117);
  margin-inline-start: auto;
  margin-inline-end: 0;
  margin-top: clamp(20px, 2vw, 32px);
}

@media (min-width: 1120px) {
  .agendar__dicho { position: relative; }
  .escena--demo {
    position: absolute;
    top: calc(100% + clamp(16px, 2vw, 36px));
    inset-inline-start: calc(clamp(24px, 3vw, 60px)
                             - max(0px, (100vw - var(--franja)) / 2)
                             - var(--margen));
    margin: 0;
  }
}