/* ===========================================================================
   La cara del equipo, en las pantallas que ve el aficionado.
   ===========================================================================

   POR QUÉ EXISTE ESTE ARCHIVO
   ---------------------------
   El equipo tiene dos sitios: somoslobos.mx, que es la portada, y este
   boletaje. Quien llega aquí viene de allá, y hasta hoy el salto se notaba:
   otra tipografía, otro naranja, otros botones. Una persona que está a punto
   de teclear su tarjeta y siente que cambió de sitio, duda.

   Así que aquí vive el mismo sistema que la portada: Anton para los titulares,
   Barlow Condensed para etiquetas y botones, Barlow para el texto corrido, y
   el naranja del escudo.

   POR QUÉ SÓLO EL AFICIONADO
   --------------------------
   Todo cuelga de `body.cliente`. La taquilla, la puerta y el panel comparten
   este mismo layout y NO llevan esa clase: quien trabaja ahí lleva meses con
   una interfaz y la memoria de dónde está cada cosa vale más que la
   consistencia de marca. Se opera de pie, con prisa y con gente esperando.

   POR QUÉ LAS LETRAS SON NUESTRAS Y NO DE GOOGLE
   ----------------------------------------------
   Ésta es la pantalla donde alguien paga. Meter a un tercero en esa ruta
   significa que un mal día suyo es un mal día nuestro, y que cada comprador
   le anuncia su visita a un servidor que no es el del equipo. Los archivos
   pesan 106 KB, se cachean un año y salen del mismo sitio que todo lo demás.
   =========================================================================== */

/* --------------------------------------------------------------- las letras
   Los dos subconjuntos van a propósito. El navegador lee `unicode-range` y
   descarga sólo el que necesita: en español eso es `latin` -que ya trae
   á é í ó ú ñ ü- y `latin-ext` no llega a pedirse casi nunca.

   `font-display:swap` porque el texto tiene que poder leerse desde el primer
   momento. La alternativa es una pantalla de compra en blanco esperando una
   letra. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ================================================================== la cara */

body.cliente {
  /* El naranja del escudo, el mismo que la portada. El anterior (#ea580c) era
     el naranja de una paleta de utilidades, no el del equipo. */
  --naranja: #f26a21;

  /* En la portada el botón ACLARA al pasar el ratón en vez de oscurecerse: la
     marca empuja hacia la luz. El token conserva el nombre viejo porque lo
     leen reglas de todo el sitio; lo que cambia es a qué apunta. */
  --naranja-osc: #ff7d2e;

  /* Hay que recalcularlo aquí. Un `color-mix` dentro de una variable se
     resuelve en el elemento donde se declara, no donde se usa: el `:root` del
     layout lo dejaría calculado sobre el naranja anterior y se heredaría ya
     resuelto. */
  --naranja-tinta: color-mix(in srgb, #f26a21 78%, #000);

  font-family: 'Barlow', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* De noche se invierte: un naranja oscurecido sobre fondo oscuro no se lee. */
@media (prefers-color-scheme: dark) {
  body.cliente { --naranja-tinta: color-mix(in srgb, #f26a21 82%, #fff); }
}

/* ------------------------------------------------------------- los titulares
   Anton sólo existe en un peso. Si una regla le pide 700, el navegador se lo
   inventa engordando los trazos, y una condensada engordada a la fuerza se ve
   sucia. Por eso el peso se fija aquí. */
.cliente h1,
.cliente h2,
.cliente h3,
.cliente .titular {
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.05;
  text-wrap: balance;
}

/* Anton es alta y estrecha: al mismo tamaño en puntos se lee más chica que la
   del sistema, y los titulares se quedaban cortos frente al resto. */
.cliente h1 { font-size: clamp(1.7rem, 4.5vw, 2.1rem); }
.cliente h2 { font-size: 1.3rem; }
.cliente h3 { font-size: 1.1rem; }

/* --------------------------------------------------------------- los botones
   Igual que en la portada: condensada, versalitas, muy espaciada. Es la pieza
   que más se reconoce de un sitio a otro. */
.cliente .boton {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: .85rem 1.6rem;
  transition: background .18s ease, transform .12s ease;
}
.cliente .boton:active:not(:disabled) { transform: scale(.97); }

/* El botón fantasma no lleva el naranja, así que necesita que el borde se note
   al pasar por encima; si no, parece que no responde. */
.cliente .boton.fantasma:hover:not(:disabled) {
  background: color-mix(in srgb, var(--tinta) 6%, transparent);
}

/* ----------------------------------------------------------- las etiquetitas
   Las líneas cortas en versalitas -«Próximo juego en casa», «Vie 28 Ago»- son
   señalización, no lectura. En condensada caben enteras sin partirse y se
   distinguen del texto de un vistazo. */
.cliente .etq,
.cliente .fecha,
.cliente .titulillo,
.cliente label,
.cliente .rotulo {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cliente label { font-size: .95rem; }

/* -------------------------------------------------------------- los números
   Importes, totales y cuentas de asientos. Tabulares para que las columnas de
   pesos queden alineadas y no bailen mientras alguien elige lugares. */
.cliente .der,
.cliente table.resumen td,
.cliente .importe,
.cliente .total {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- los formularios
   Los campos se quedan en Barlow y no en la condensada: aquí se teclea un
   correo y un nombre, y hay que poder releer lo escrito sin esfuerzo. */
.cliente input,
.cliente select,
.cliente textarea {
  font-family: 'Barlow', Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

/* Los <button> tampoco heredan la fuente por su cuenta: los controles de
   formulario usan la del sistema salvo que se les diga. Sin esta línea los
   mandos del croquis se quedaban con la letra anterior, al lado de todo lo
   demás ya cambiado. */
.cliente button {
  font-family: inherit;
}

/* ------------------------------------------------- pesos que no existen
   Barlow llega hasta 700. Una regla que pide 800 hace que el navegador se
   invente el peso engordando los trazos, y eso se ve sucio justo en los datos
   que mas importan: el numero de asiento y el total a pagar. */
.cliente .boleto .lugar,
.cliente .tirador .suma {
  font-weight: 700;
}

/* ------------------------------------------------------ el nombre del rival
   Mismo tratamiento que en la portada del sitio oficial: condensada, versalita
   y apretada. Es el eco que hace que las dos listas de partidos -la de alla y
   la de aca- se lean como el mismo sitio. */
.cliente .juego .rival {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* ------------------------------------------------------- la firma de abajo
   El crédito de quien construyó la plataforma, en el pie de las pantallas de
   venta. Vive aquí y no en el <style> del layout por la misma razón que todo
   lo demás de este archivo: la hoja sólo se enlaza cuando la página es del
   aficionado, así que la taquilla y la puerta no reciben ni el marcado ni las
   reglas. Un pie de proveedor en la pantalla de quien cobra sería ruido.

   El tratamiento es el del pie de somoslobos.mx —condensada, versalita, muy
   espaciada—: los dos sitios firman igual, que es de lo que trata este
   archivo entero. */
.cliente .envoltura { padding-bottom: 2rem; }

.cliente .pie-credito {
  border-top: 1px solid var(--borde);
  padding: 1.4rem 1.2rem 2rem;
  text-align: center;
}
/* El enlace NO es flex, aunque parezca el caso obvio. En un teléfono angosto la
   firma no cabe en un renglón y se parte en dos; como flex, el isotipo y la
   flecha son hermanos del texto y se quedan flotando uno a cada lado, lejos de
   las palabras. Fluyendo como texto corriente, el isotipo se queda pegado a la
   primera palabra y la flecha a la última, que es como se lee una firma. */
.cliente .pie-credito a {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
  text-decoration: none;
}
.cliente .pie-credito a:hover,
.cliente .pie-credito a:focus-visible { color: var(--naranja-tinta); }

/* Isotipo y no logotipo completo: la bajada "agencia creativa" queda en tres
   píxeles de alto a este tamaño y se lee como suciedad. */
.cliente .pie-credito svg { height: 15px; width: auto; fill: currentColor;
                            vertical-align: -.22em; margin-right: .2rem; }

/* La flecha se corre al pasar el puntero. Es lo que distingue una firma de una
   liga sin tener que subrayarla ni pintarla de naranja en reposo.

   Se mueve con el margen y no con transform, que pediría un inline-block. Un
   inline-block es un átomo: el renglón puede partirse justo antes de él, y
   entonces la flecha baja sola a la segunda línea aunque la preceda un espacio
   duro. Como texto corriente, ese espacio duro sí la mantiene con el nombre. */
.cliente .pie-credito .flecha { transition: margin-left .18s ease; }
.cliente .pie-credito a:hover .flecha { margin-left: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cliente .pie-credito .flecha { transition: none; }
}