/* La web comercial. Se carga DESPUÉS de `panel/estilo.css`, no en su lugar.
 *
 * Depender de la hoja del panel y no recopiar los tokens es la misma decisión
 * que ya se tomó en la portada de la aplicación: tuvo su paleta copiada a mano
 * y se quedó atrás el día que el producto pasó a ser papel. Una copia de la
 * paleta solo sirve hasta que alguien actualiza el original y no ella.
 *
 * De ahí vienen los colores, la fuente Archivo y `.accion`. Lo que hay aquí es
 * lo único que el panel no puede prestar: **el panel es una aplicación y esto
 * es un documento que convence.** Repetir aquí su rejilla de tarjetas con
 * sombra —una por sección, todas iguales— habría hecho que la única página que
 * lee alguien que aún no ha comprado nada se pareciera a una hoja de cálculo.
 *
 * Un solo objeto en toda la página: el billete del hero. Todo lo demás es
 * tinta sobre papel.
 */

/* Más grande y más aireado que el panel: el panel se consulta de un vistazo y
   esto se lee. La medida se topa en unos 60 caracteres, que es donde el ojo
   deja de perder el renglón al saltar de línea. */
body {
  font-size: 16.5px;
  line-height: 1.62;
}

/* **Una sola medida para toda la página, y esto se corrigió mirándola.**
   Estaba a 46rem con la prosa topada aparte a 34rem, y el resultado en un
   portátil era que los párrafos terminaban en un eje y los recuadros en otro
   ocho centímetros más a la derecha: el borde derecho quedaba dentado y la
   página parecía a medio maquetar. Es el mismo defecto que ya se pagó en el
   panel entre la cabecera y las tarjetas.

   40rem son unos 72 caracteres a este cuerpo, que es la medida a la que el ojo
   no pierde el renglón al saltar de línea. */
.hoja {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 24px 72px;
}

/* --------------------------------------------------------------- encabezado
   La marca va ARRIBA y en tinta. Arriba porque la regla del producto es «el
   nombre de quien es dueño de la pantalla», y esta pantalla es nuestra: no hay
   ningún cliente a quien encabezar. En tinta y no con el acento por lo mismo
   que en la cartera: pintar de rojo el cromado más repetido gasta la señal en
   lo que menos significa. */
.encabezado {
  display: flex; align-items: center; gap: 8px;
  padding: 26px 0 0;
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
}
.encabezado .billete { width: 22px; height: 22px; flex: none; }

/* -------------------------------------------------------------------- hero */

.hero { padding: 52px 0 8px; }

/* El titular usa el eje de ANCHURA de Archivo, no solo el de peso. Es lo que
   la fuente sabe hacer y casi ninguna otra: ensanchar en vez de engordar deja
   la mancha de texto densa sin que las astas se cierren. La misma firma que
   llevan las cifras del panel, aplicada a una frase. */
.titular {
  margin: 0;
  font-size: clamp(30px, 6.4vw, 46px);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -.028em;
  max-width: 17ch;
}
.titular .segunda { color: var(--tinta-suave); display: block; }

.entradilla {
  margin: 18px 0 0;
  font-size: 17.5px;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- el billete
   El único objeto de la página, y el mismo que el logo: un billete de turno,
   ladeado, con su muesca a media altura y su línea de corte. Lleva la pregunta
   que llega de verdad a una clínica en vez de un número, porque el número no
   dice nada a quien todavía no sabe qué es esto.

   La inclinación es de 1.4 grados y no de los 9 del logo: una pieza pequeña
   ladeada es un objeto sobre un mostrador, y un bloque de texto ladeado nueve
   grados es un renglón que cuesta leer. */
.billete-grande {
  position: relative;
  margin: 38px 0 0;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transform: rotate(-1.4deg);
}
/* Las muescas laterales: el mismo mordisco que tiene el trazo del logo a media
   altura. Se pintan del color del mostrador, no en transparente, porque lo que
   simulan es papel recortado sobre la mesa. */
.billete-grande::before, .billete-grande::after {
  content: ""; position: absolute; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 50%;
}
.billete-grande::before { left: -10px; clip-path: inset(0 0 0 50%); }
.billete-grande::after  { right: -10px; clip-path: inset(0 50% 0 0); }

.billete-arriba { padding: 22px 26px 20px; }
.billete-hora {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 650; font-stretch: 112%;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.billete-pregunta {
  margin: 0;
  font-size: 20px; line-height: 1.34; font-weight: 500;
}

/* La línea de corte, punteada y de borde a borde: es por donde se arranca el
   billete. Separa lo que preguntó el paciente de lo que pasó después. */
.billete-corte { border: 0; border-top: 1px dashed var(--linea-fuerte); margin: 0; }

.billete-abajo {
  padding: 16px 26px 20px;
  display: flex; align-items: baseline; gap: 9px;
  font-size: 14.5px; color: var(--tinta-suave);
}
.billete-abajo b { color: var(--ok); font-weight: 650; }

/* El único movimiento de la página, y contesta a lo que la página afirma: que
   se contesta solo. Aparece una vez al cargar y no se repite. Quien haya
   pedido menos movimiento en su sistema no lo ve, y no se pierde nada: el
   texto está ahí igual. */
@media (prefers-reduced-motion: no-preference) {
  .billete-abajo { animation: aparece .5s ease-out .9s backwards; }
}
@keyframes aparece { from { opacity: 0; transform: translateY(4px); } }

.hero .accion { margin-top: 34px; }

/* ------------------------------------------------------------------- pasos
   Van numerados y eso hay que ganárselo: numerar por adorno es el tic de
   cualquier página. Aquí SÍ es una secuencia —es el orden en el que ocurren
   las cosas dentro de una misma conversación— y además el número es la firma
   de la identidad, tratado como en el panel: ancho, con la etiqueta debajo
   diminuta, como en el papel del turno. */
.pasos { margin: 76px 0 0; padding: 0; list-style: none; }
.paso {
  display: grid; grid-template-columns: 62px 1fr; gap: 0 22px;
  padding: 22px 0;
  border-top: 1px solid var(--linea);
}
.paso-numero {
  font-size: 30px; font-weight: 650; font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -.02em;
}
.paso h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 650; }
.paso p { margin: 0; color: var(--tinta-suave); }

/* ----------------------------------------------------------------- secciones */

.seccion { margin: 76px 0 0; }
.seccion > h2 {
  margin: 0 0 6px;
  font-size: 25px; font-weight: 700; font-stretch: 108%;
  letter-spacing: -.02em; line-height: 1.2;
}
.seccion > p { margin: 0; color: var(--tinta-suave); }

/* Los dos canales, y el segundo dice la verdad sobre sí mismo. Un borde y no
   una tarjeta con sombra: son dos hechos, no dos productos. */
.canales { display: grid; gap: 14px; margin-top: 24px; }
.canal {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 15px 18px;
  background: var(--tarjeta);
}
/* El que aún no está se dice con el ámbar, que en todo el producto significa
   «mira esto» y no «se rompió». Nunca con el verde de lo que va bien. */
.canal.en-camino { border-left-color: var(--alerta); }
.canal h3 { margin: 0; font-size: 16px; font-weight: 650;
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.canal p { margin: 5px 0 0; font-size: 14.5px; color: var(--tinta-suave); }

/* El precio, con el trato que la casa le da a una cifra que importa. */
.precio { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 6px; }
.precio b {
  font-size: 46px; font-weight: 650; font-stretch: 125%;
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.precio span { font-size: 16px; color: var(--tinta-suave); }
/* La cifra necesita aire por debajo: pegada, el párrafo parece su pie de foto
   en vez del texto que la explica. */
.precio + p { margin-top: 14px; }

/* --------------------------------------------------------------- formulario
   Aquí sí hay una tarjeta, y es la única de la página: es el sitio donde se
   deja algo, y merece parecer un mostrador aparte del texto que lo rodea. */
.peticion {
  margin: 76px 0 0;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 26px;
  scroll-margin-top: 20px;
}
.peticion h2 { margin: 0 0 4px; font-size: 21px; font-weight: 700;
               font-stretch: 108%; letter-spacing: -.02em; }
.peticion > p { margin: 0 0 22px; color: var(--tinta-suave); font-size: 15px; }

.peticion textarea { min-height: 84px; resize: vertical; }
.peticion .accion { margin-top: 4px; }

/* Dos columnas solo donde caben dos: nombre y negocio son cortos, el correo y
   el mensaje quieren la línea entera.

   **La ayuda va DEBAJO del campo, no dentro de la etiqueta**, y ahí está la
   alineación. Con la ayuda dentro de la etiqueta, la celda del teléfono —cuya
   ayuda ocupa dos renglones— medía más que la del correo y los dos campos de la
   misma fila quedaban a distinta altura. Estirar las celdas y empujar el campo
   al fondo lo alineaba, sí, pero entonces «Tu correo» quedaba flotando lejos de
   su casilla, que se ve peor. Con la ayuda abajo, todas las etiquetas miden una
   línea y los campos se alinean sin trucos. */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.campo { margin-bottom: 16px; }
.campo label { margin-bottom: 6px; }
.ayuda { font-size: 12.5px; color: var(--tinta-suave); margin: 5px 0 0; }

/* El error va pegado a su campo y dice qué hacer, no que algo «es inválido».
   En rojo de peligro y no en el de sello: el de sello es el botón que está
   justo debajo, y con el mismo color el error parecería parte de él. */
.error { color: var(--peligro); font-size: 13px; font-weight: 600;
         margin: 5px 0 0; }
.error-general {
  background: var(--alerta-suave); color: var(--alerta);
  border-radius: var(--radio); padding: 12px 15px;
  font-size: 14px; margin: 0 0 20px;
}
/* El cebo para robots. `left: -9999px` y no `display: none`: un robot que mire
   el estilo descarta lo oculto, y esto tiene que parecerle un campo normal.
   `aria-hidden` y `tabindex="-1"` van en el HTML para que quien navegue con
   teclado o con lector no se lo encuentre. */
.cebo { position: absolute; left: -9999px; width: 1px; height: 1px;
        overflow: hidden; }

/* ---------------------------------------------------------------------- pie */

.pie {
  margin: 72px 0 0; padding-top: 24px;
  border-top: 1px solid var(--linea);
  font-size: 14px; color: var(--tinta-suave);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
}
.pie a { color: var(--tinta-suave); }

/* --------------------------------------------------------- el aviso legal */

.legal { padding-top: 40px; }
.legal h1 { font-size: 28px; font-weight: 700; font-stretch: 108%;
            letter-spacing: -.02em; margin: 0 0 6px; }
.legal h2 { font-size: 17px; font-weight: 650; margin: 34px 0 8px; }
.legal p, .legal li { color: var(--tinta-suave); }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal .fecha { color: var(--tinta-tenue); font-size: 14px; margin-top: 0; }

/* ------------------------------------------------------------------- móvil
   El dueño de una clínica abre esto en el teléfono, entre paciente y paciente.
   Es el ancho por defecto del que se parte, no una corrección al final. */
@media (max-width: 620px) {
  .hoja { padding: 0 20px 56px; }
  .hero { padding: 40px 0 4px; }
  /* El billete se endereza: ladeado y a ancho completo, una esquina se sale de
     la pantalla y aparece una barra de desplazamiento horizontal. */
  .billete-grande { transform: none; margin-top: 30px; }
  .billete-arriba { padding: 18px 20px 16px; }
  .billete-abajo { padding: 14px 20px 16px; }
  .billete-pregunta { font-size: 18px; }
  .paso { grid-template-columns: 46px 1fr; gap: 0 16px; padding: 18px 0; }
  .paso-numero { font-size: 25px; }
  .par { grid-template-columns: 1fr; }
  .peticion { padding: 22px 20px; }
}