/* ==========================================================================
   MARIACHI INTERNACIONAL
   ==========================================================================
   Índice
     1.  Las fuentes
     2.  Los colores y las medidas
     3.  Lo básico
     4.  Los botones
     5.  La cabecera
     6.  La portada
     7.  El repertorio
     8.  Los formatos
     9.  La promoción
     10. El contacto
     11. El cuestionario
     12. El pie
     13. Los anchos
     14. Menos movimiento
   ========================================================================== */

/* ==========================================================================
   1. LAS FUENTES
   ==========================================================================
   Archivo y Archivo Black: las dos con licencia SIL Open Font License, que
   permite servirlas desde aquí. SE SIRVEN DESDE EL PROPIO SITIO Y NO DESDE
   GOOGLE, y el motivo no es el rendimiento: así no se avisa a un tercero cada
   vez que alguien entra a mirar el teléfono de un mariachi, no hay una conexión
   más que pueda fallar y la página no depende de que otro esté en pie.

   Archivo es VARIABLE: un solo archivo lleva los pesos de 400 a 900, y por eso
   se declara `font-weight: 100 900`. El español cabe entero en el bloque
   `latin` —la ñ es U+00F1 y las tildes están por debajo de U+00FF—, así que el
   `latin-ext` solo se baja si aparece algo de fuera.

   POR QUÉ ESTAS DOS Y NO UNA DE CARTEL CON MÁS CARÁCTER: se probó lo que pide
   el encargo —tipografía de cartel— y el problema es que las de cartel de
   verdad (Bodoni, Playfair) tienen el trazo fino finísimo, y esto se va a leer
   en un teléfono, de noche, con prisa. Archivo Black tiene el peso de un cartel
   sin perder el trazo a 14 píxeles, y Archivo aguanta el párrafo. El carácter
   lo pone la maquetación: la marca del cliente, el filete de plata, el dorado
   contado y las letras con aire de placa.
   ========================================================================== */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fuentes/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fuentes/archivo-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-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/archivo-black-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: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/archivo-black-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-20C4, U+2113,
    U+2C60-2C7F
}
/* ==========================================================================
   2. LOS COLORES Y LAS MEDIDAS
   ==========================================================================
   LOS COLORES SALEN DEL LOGOTIPO DEL CLIENTE, MEDIDOS DEL ARCHIVO. No de un
   catálogo y no de una idea de «mariachi»: se leyó el JPEG —1254×1254— con
   `_lupa/colores-logotipo.mjs`, que agrupa sus píxeles por familia de color y
   saca la mediana de cada una, y después se midió el color de cada parte del
   dibujo por zonas. De ahí salen estos cuatro:

       #e6b52d   EL ORO DE LAS LETRAS, medido en la franja de «MARIACHI»
       #a80f0f   EL ROJO DEL MOÑO del charro, medido en su zona
       #05519c   EL AZUL DEL GLOBO, medido en el hemisferio derecho
       #010100   EL NEGRO DEL FONDO, medido en el anillo del borde

   Y de cada uno hay DOS versiones, porque un color que se ve bien en un dibujo
   no siempre se lee como texto. La regla es la misma que ya usaba el sitio:

       · El color VIVO, para formas, filetes y superficies.
       · El color ACLARADO, para texto, cuando el vivo no llega al contraste
         mínimo de 4,5:1.

   Medido sobre el fondo de la página, #120D09:
       oro #e6b52d ................ 10,1:1   sirve para texto tal cual
       rojo #a80f0f ................ 2,5:1   NO sirve: es para filetes y fondos
       rojo aclarado #e0685c ....... 5,8:1   sirve para texto, pero ya no se usa
       azul del globo #05519c ...... 2,5:1   NO sirve: es para filetes
       azul del globo vivo #077ddb . 4,6:1   el acento de ahora; solo filetes
       azul aclarado #8fb4dc ....... 9,0:1   sirve, y es el que se lee

   ---------------------------------------------------------------------------
   EL ROJO SE CAMBIÓ A AZUL, Y LO PIDIÓ EL CLIENTE
   ---------------------------------------------------------------------------
   Textual: «ese color rojo yo lo veo rojo, está medio feo, muy opaco, no puedes
   ponerle algo así más llamativo azulito o algo así».

   TIENE RAZÓN, Y ESTÁ MEDIDO: el rojo del moño da 2,5:1 sobre el fondo oscuro, o
   sea que sobre esta página no se lee como rojo, se lee como barro. Por eso
   estaba solo en filetes y nunca en texto —y por eso no bastaba con dejarlo—.
   El azul vivo del globo da 4,6:1: sigue siendo un color de filete, pero se ve.

   Y NO SE INVENTÓ NINGÚN COLOR: el que sustituye al rojo es el azul que el
   cliente ya trae en el globo de su logotipo, aclarado para que se vea. Los tres
   sitios donde estaba el rojo son ahora los tres sitios donde está este azul, y
   en tres se quedan:
       · el filete del bloque de la promoción, que va con el oro
       · un acento corto del filete que separa secciones
       · la muesca de «esto es una promoción», al lado del oro
   Y NO ESTÁ en el botón, ni en los títulos, ni en el fondo, ni en los avisos del
   formulario. Lo vigilan las comprobaciones.

   EL ROJO NO SE BORRA DE AQUÍ, y es una decisión: sigue siendo un color de la
   marca —está en el moño del charro y en las ondas del marco— y el día que se
   quiera recuperar está declarado, con su valor medido, dos bloques más abajo.
   Lo que cambió es DÓNDE SE USA, no que exista.

   EL ORO SIGUE SIENDO LO ÚNICO QUE BRILLA, y es lo que hay que vigilar con esta
   paleta, porque hay tres colores de marca y el riesgo es que el botón de
   WhatsApp deje de destacar. Medido: el azul vivo está en 4,6:1 y el azul de
   texto en 9,0:1, LOS DOS POR DEBAJO DEL ORO, que está en 10,1:1. El oro es el
   más brillante de los tres y por eso puede seguir siendo el color de lo que hay
   que tocar. SI ALGUIEN ACLARA EL AZUL HASTA PASAR AL ORO, EL BOTÓN DEJA DE
   DESTACAR: este comentario es la razón por la que no se debe, y hay una
   comprobación que salta el día que pase.

   EL AZUL NO INUNDA LA PÁGINA. Es la misma regla que tenía el rojo, y ahora
   importa más porque el azul gusta más y es más fácil dejarlo crecer: filetes y
   acentos cortos, tres sitios y en tres se queda. Nada de fondos azules, ni
   títulos azules, ni párrafos azules. Si el azul se extiende, la página se vuelve
   un cartel y el dorado pierde su sitio, que es el único que tiene que llamar.

   EL AZUL DE LA CABECERA SE QUEDA COMO ESTABA, y no es una incoherencia: aquel
   filete es de 2 píxeles, va al 50 % de opacidad y cierra la cabecera —un trazo
   suave, no un acento—, así que sigue con el azul claro de siempre, #8fb4dc. El
   vivo, #077ddb, es el que sustituye al rojo, y su trabajo es el contrario:
   asomar y verse.

   EL FONDO NO SE TOCA. El logotipo es negro sobre negro y el sitio es oscuro:
   se llevan bien. Medido, el negro del logotipo es #010100 y el fondo del sitio
   #120D09, y entre los dos hay 1,08:1 de contraste, que el ojo no distingue.
   Pasar el sitio a claro rompería eso y no hay ninguna razón para hacerlo.
   ========================================================================== */
:root {
  /* La noche — el mismo tono de siempre, que es el que se lleva bien con el
     logotipo */
  --tinta: #0b0d18;
  --tinta-2: #12172b;
  --tinta-3: #1a2138;
  --tinta-4: #232c49;

  /* La plata del traje */
  --plata: #d9d5cc;
  --plata-clara: #e9e8e2;
  --plata-media: #a9a29a;
  --plata-apagada: #8f877e;
  --filete: rgba(230, 181, 45, 0.32);
  --filete-fuerte: rgba(230, 181, 45, 0.55);

  /* EL ORO, medido de las letras «MARIACHI» del logotipo: #e6b52d */
  --oro: #e6b52d;
  --oro-hondo: #cca03a;
  --oro-tenue: rgba(230, 181, 45, 0.14);

  /* EL ROJO, medido del moño del charro: #a80f0f. El vivo solo para filetes; el
     aclarado para el poco texto que lo use, porque el vivo no se lee. */
  --rojo: #a80f0f;
  --rojo-claro: #e0685c;
  --rojo-tenue: rgba(168, 15, 15, 0.18);

  /* EL AZUL, medido del globo del logotipo. El del globo tal cual (#05519c) es
     para filetes; el aclarado es el que se lee, y es el que ya tenía el sitio. */
  --azul: #8fb4dc;
  --azul-globo: #05519c;
  --azul-globo-claro: #077ddb;

  /* Tipografía */
  --display: 'Archivo Black', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
    sans-serif;
  --texto: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --radio: 3px;
  --ancho: 1120px;
  --aire: clamp(3.5rem, 9vw, 7rem);
}

/* ==========================================================================
   3. LO BÁSICO
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* La cabecera se pega arriba, así que los saltos de sección tienen que dejar
     sitio o el titular queda debajo. Lo mide la comprobación de anclajes. */
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--plata);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* El fondo de la página lleva el motivo de los botones del pantalón charro,
   muy bajado: se tiene que intuir, no competir con el texto. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/motivo-botones.svg');
  background-size: 44px 44px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Todo el contenido por encima del fondo. */
body > * {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--oro);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* El foco, bien visible. 3 píxeles de oro sobre el fondo oscuro se ven desde
   lejos, y el filete de fuera asegura que se vea también sobre la foto. */
:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 3px;
  border-radius: 2px;
}

.salto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  /* `clip-path` y no `left: -9999px`: con `left` el enlace sigue estando en el
     flujo y arrastra el ancho de la página en algunos navegadores. */
  clip-path: inset(50%);
  white-space: nowrap;
}
.salto:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 0.75rem 1.25rem;
  background: var(--oro);
  color: var(--tinta);
  font-weight: 700;
  z-index: 100;
}

/* Texto que solo existe para quien usa un lector de pantalla. Es el mismo truco
   del enlace de saltar, y sirve para decir en palabras lo que en la pantalla es
   un número: el mando de integrantes empieza en 7 «sin elegir», y quien no ve
   la pantalla tiene que poder saberlo. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ancho {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* El rótulo pequeño: plata, en mayúsculas y muy espaciado. Es el recurso que
   ordena la página entera y sale en todas las secciones. */
.rotulo {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--plata-media);
  margin: 0 0 0.9rem;
}

/* El filete de plata: la línea de 1 píxel que separa secciones, con un tramo
   dorado. Es el motivo gráfico de la botonadura, reducido a lo mínimo. */
.filete {
  height: 1px;
  background: var(--filete);
  border: 0;
  margin: 0;
  position: relative;
}
.filete::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, var(--oro), transparent);
}

section {
  padding: var(--aire) 0;
  scroll-margin-top: 76px;
}

.titular {
  font-size: clamp(1.75rem, 6.4vw, 3rem);
  color: var(--plata-clara);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.entrada {
  font-size: clamp(1rem, 3.6vw, 1.15rem);
  color: var(--plata-media);
  max-width: 56ch;
  margin: 0 0 2rem;
}

/* ==========================================================================
   4. LOS BOTONES
   ==========================================================================
   Dos clases y nada más: el de WhatsApp, que es el dorado, y los demás, que
   son de plata. El dorado es el que hay que pulsar, y por eso solo hay uno por
   pantalla a la vista.
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  /* 48 píxeles de alto: el mínimo que recomienda cualquiera para el pulgar. */
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radio);
  border: 1px solid var(--filete-fuerte);
  background: transparent;
  color: var(--plata-clara);
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.boton:hover {
  background: rgba(233, 232, 226, 0.07);
  border-color: var(--plata-media);
}

.boton--oro {
  background: linear-gradient(180deg, var(--oro), var(--oro-hondo));
  border-color: var(--oro);
  color: #2a1c08;
}
.boton--oro:hover {
  background: var(--oro);
  border-color: var(--plata-clara);
}

.boton--ancho {
  width: 100%;
}

.boton__icono {
  width: 20px;
  height: 20px;
  flex: none;
}

/* ==========================================================================
   5. LA CABECERA
   ==========================================================================
   Pegada arriba y oscura. Lleva la marca y el WhatsApp y nada más: en un menú
   de secciones en el teléfono se pierde el que entra con prisa.
   ========================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(18, 13, 9, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filete);
}
/*
 * EL FILETE DE AZUL, que era «el de las estrellas del logotipo viejo» y ahora es
 * el del GLOBO del logotipo nuevo. Sigue siendo una sola vez en todo el sitio.
 *
 * Se usa el azul aclarado —#8fb4dc— y no el del globo tal cual —#05519c—, porque
 * el del globo sobre este fondo da 2,5:1 y aquí, aunque sea un filete y no texto,
 * tiene que verse. El del globo se reserva para las superficies, más abajo.
 */
.cabecera::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(143, 180, 220, 0.5), transparent);
}

/*
 * Y EL ROJO, AQUÍ Y EN DOS SITIOS MÁS. El logotipo lo trae en el moño del charro y
 * en las ondas del marco, y el cliente pidió que la paleta se adaptara al logotipo.
 *
 * ESTE ES UNO DE LOS TRES SITIOS DONDE SE USA, y es el más pequeño de los tres: un
 * filete de un píxel, a `position: absolute`, que NO ocupa sitio y NO se repite.
 * El cuerpo del filete sigue siendo plata; el rojo es la punta.
 *
 * NO SE USA EN LOS TÍTULOS, NI EN LOS PÁRRAFOS, NI EN EL FONDO, NI EN EL BOTÓN.
 * El rojo sobre fondo oscuro vibra y cansa la vista, y en cuanto se pone en una
 * superficie grande la página se vuelve un cartel de feria. Lo vigilan las
 * comprobaciones.
 */
.filete::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, var(--oro), var(--azul-globo-claro), transparent);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.cabecera__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--plata-clara);
  min-width: 0;
}

/*
 * EL LOGOTIPO DE LA CABECERA. Era la paloma, que medía 58 × 44 apaisada; ahora es
 * el logotipo, que es CUADRADO, así que a la misma altura ocupa más ancho. Se pone
 * a 44 y no a 46 por eso: el cuadrado de 46 dejaba el nombre sin sitio a 320.
 */
.cabecera__marca img {
  width: 44px;
  height: auto;
  flex: none;
}

/*
 * EL NOMBRE DE LA CABECERA, QUE ES MÁS LARGO QUE EL VIEJO.
 *
 * «Mariachi Internacional» son 22 caracteres, seis más que el nombre viejo. Con
 * aquel, a 320 píxeles, el nombre cabía en el hueco que deja el botón de WhatsApp;
 * con el nuevo SE CORTABA a media palabra, y se vio al mirar la captura de 320:
 * ponía «Mariachi Internacion».
 *
 * SE ARREGLA DEJANDO QUE O CUPE ENTERO. Tres cosas, y ninguna quita nada:
 *
 *   · El nombre baja de 0,92 a 0,82 rem por debajo de 400 px: sigue leyéndose de
 *     sobra y son unos 18 píxeles que se ganan.
 *   · Se le permite partirse en DOS LÍNEAS, que es como estaba antes de este
 *     cambio. Partido no se corta.
 *   · Y el botón de WhatsApp se aprieta un poco en ese tramo.
 *
 * POR QUÉ NO SE QUITA EL BOTÓN DE LA CABECERA: es la acción principal del sitio y
 * el sitio se mira en el teléfono, con prisa. Un botón que desaparece justo en la
 * pantalla más estrecha es quitarlo donde más hace falta.
 */
.cabecera__nombre {
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* El segundo renglón que llevaba el nombre viejo —«MARIACHI» debajo— se fue con
   el nombre nuevo: o repetiría «Mariachi» o sería una palabra de relleno. La
   regla se deja por si vuelve a hacer falta. */
.cabecera__nombre span {
  display: block;
  font-family: var(--texto);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata-apagada);
  margin-top: 0.15rem;
}

@media (max-width: 400px) {
  /*
   * EL NOMBRE DEL GRUPO, EN EL TRAMO ESTRECHO.
   *
   * «Mariachi Internacional» son 22 caracteres y no cabía: a 320 px se cortaba a
   * media palabra —ponía «Mariachi Internacion»— y en un segundo intento quedaba
   * pegado al botón, sin un píxel de aire. Ahora baja de tamaño, se parte en dos
   * líneas y el botón se aprieta: cabe entero con sitio alrededor.
   */
  .cabecera__nombre {
    font-size: 0.82rem;
    line-height: 1.15;
    /* El nombre puede partirse en dos líneas; lo que no puede es cortarse. */
    overflow-wrap: break-word;
  }
  .cabecera .boton {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
  }
  .cabecera .boton__icono {
    width: 18px;
    height: 18px;
  }
  /*
   * A 320 PÍXELES EL LOGOTIPO BAJA A 32 Y EL AIRE SE APRIETA. El cuadrado del
   * logotipo ocupa más que la paloma apaisada que había antes, y a este ancho cada
   * píxel cuenta: el nombre y el botón tienen que caber los dos con aire en medio.
   */
  .cabecera__marca img {
    width: 32px;
  }
  .cabecera__marca {
    gap: 0.4rem;
  }
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.cabecera .boton {
  min-height: 42px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* ==========================================================================
   6. LA PORTADA
   ==========================================================================
   La foto va DEBAJO del texto y no detrás. Es la única foto que hay, es la que
   enseña a los músicos, y ponerla de fondo obliga a taparla con un velo para
   que el titular se lea: se acabaría viendo un fondo borroso en vez de a los
   músicos. Así se ve entera y el titular se lee sobre el fondo liso.

   La foto NO SE RECORTA por una razón que está explicada en
   `preparar-imagenes.mjs`: el logotipo del cliente está incrustado en su
   esquina, y cualquier recorte se lo lleva por delante.
   ========================================================================== */
.portada {
  padding-top: clamp(2.25rem, 7vw, 4rem);
  padding-bottom: 0;
}

/*
 * EL LOGOTIPO DE LA PORTADA.
 *
 * Aquí estaba `.portada__paloma`, que medía 58 × 44 —la paloma era un dibujo
 * pequeño— y ahora es el logotipo del cliente, que es cuadrado y lleva el nombre
 * dibujado dentro. Por eso cambian el nombre de la clase Y la medida: se enseña a
 * 296 píxeles, porque es la enseña del grupo y es lo que abre la página.
 *
 * NO LLEVA SOMBRA NI MARCO. El logotipo trae su propio fondo negro y su propio
 * marco ornamentado: añadirle una sombra sería dibujar alrededor de un dibujo que
 * ya está terminado.
 */
.portada__logotipo {
  width: min(296px, 74vw);
  height: auto;
  margin: 0 0 1.25rem;
}

/*
 * LA LÍNEA DE ZONA DE LA PORTADA.
 *
 * Va DEBAJO DEL NOMBRE y ENCIMA del párrafo, y es el dato que más hace por este
 * negocio: «mariachi en Guadalajara» es lo que teclea quien quiere contratar.
 *
 * ES UN RENGLÓN, NO UN PÁRRAFO. Oro, como el resto de lo que hay que leer primero
 * —es el dato que trae al cliente—, pero SIN NEGRITA y sin crecer: el que manda
 * sigue siendo el nombre, y si esta línea pesara más que el titular, la portada
 * dejaría de decir de quién es.
 */
.portada__zona {
  font-size: clamp(1rem, 3.8vw, 1.15rem);
  color: var(--oro);
  margin: 0 0 0.9rem;
  max-width: 46ch;
}

/* Y en la 404, pequeño: ahí el logotipo es una firma y lo que hace falta es el
   nombre escrito y una salida. */
.portada__logotipo--chico {
  width: min(168px, 44vw);
}

.portada__saludo {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--plata-media);
  margin: 0 0 0.7rem;
}

/*
 * EL TITULAR, CON EL NOMBRE NUEVO.
 *
 * Estaba en `clamp(2.5rem, 12vw, 5rem)` y con el nombre viejo —«Cielo de
 * América»— iba bien. Con el nuevo, la palabra más larga es «Internacional» y a
 * 320 píxeles SE SALÍA DE SU CAJA: medido, el texto ocupaba 291 píxeles dentro de
 * una caja de 280. NO SE VEÍA CORTADO porque el relleno del contenedor lo tapaba
 * —de ahí que la captura pareciera correcta y las comprobaciones de desborde no
 * dijeran nada: la página seguía midiendo 320—.
 *
 * SE LE BAJA EL SUELO Y EL TECHO, y las dos cosas por el mismo motivo: que la
 * palabra más larga quepa en la caja más estrecha.
 *
 * SIGUE SIENDO EL TEXTO MÁS GRANDE DE LA PÁGINA, así que el nombre no pierde
 * peso: lo que pierde es el desborde.
 */
.portada__titulo {
  font-size: clamp(2.1rem, 11.5vw, 4.5rem);
  color: #fff;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.portada__entrada {
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  color: var(--plata);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

/* Las tres verdades del negocio, en fila. Los tres datos son del cliente: el
   repertorio, el número de integrantes y el teléfono. */
.portada__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--plata-media);
}
.portada__datos li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.portada__datos li::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--oro);
}

.portada__foto {
  position: relative;
  margin: 0;
}
.portada__foto img {
  width: 100%;
  height: auto;
}
/* El degradado que une la foto con el fondo de la página, para que no termine
   en un canto recto. */
.portada__foto::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(18, 13, 9, 0), var(--tinta) 88%);
  pointer-events: none;
}

/* ==========================================================================
   7. EL REPERTORIO
   ==========================================================================
   Nueve géneros. El encargo pedía que no parecieran una lista de supermercado,
   y se resuelve de dos maneras a la vez:

     · En el TELÉFONO son nueve chapas numeradas en dos columnas, con el número
       en plata grande: se leen de un vistazo y se pueden tocar.
     · En PANTALLA GRANDE son nueve filas con su número a la izquierda, como la
       botonadura de un pantalón charro puesta en horizontal.

   Y SON TOCABLES, que es lo que las saca de ser una lista: cada una se marca y
   viaja en el mensaje de WhatsApp. Eso es lo que convierte el repertorio en una
   decisión en vez de en un adorno.
   ========================================================================== */
.repertorio__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.chapa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 58px;
  padding: 0.6rem 0.75rem;
  text-align: left;
  background: var(--tinta-2);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  color: var(--plata);
  font-family: var(--display);
  font-size: clamp(0.86rem, 3.4vw, 1rem);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.chapa:hover {
  border-color: var(--filete-fuerte);
  background: var(--tinta-3);
}

.chapa__n {
  font-family: var(--display);
  font-size: 0.8rem;
  color: var(--plata-apagada);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.chapa__marca {
  margin-left: auto;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--filete-fuerte);
  border-radius: 2px;
  display: grid;
  place-items: center;
  color: transparent;
}
.chapa__marca svg {
  width: 12px;
  height: 12px;
}

/* Marcada: filete de oro, fondo dorado tenue y la palomita en oro. No se
   distingue solo por color: aparece la palomita y el número se pone en oro. */
.chapa[aria-pressed='true'] {
  border-color: var(--oro);
  background: var(--oro-tenue);
  color: #fff;
}
.chapa[aria-pressed='true'] .chapa__marca {
  border-color: var(--oro);
  color: var(--oro);
}
.chapa[aria-pressed='true'] .chapa__n {
  color: var(--oro);
}

.repertorio__nota {
  font-size: 0.9rem;
  color: var(--plata-media);
  margin: 0;
}
.repertorio__nota strong {
  color: var(--plata-clara);
}

/* ==========================================================================
   8. LOS FORMATOS
   ==========================================================================
   LA DECISIÓN PRÁCTICA DE ESTE NEGOCIO ESTÁ AQUÍ: de 3 a 12 integrantes.
   Quien contrata no elige un género, elige CUÁNTOS músicos. Por eso el número
   es un mando y no una lista: se arrastra y el mensaje de WhatsApp ya sale con
   el número puesto.
   ========================================================================== */
.formatos__mando {
  background: var(--tinta-2);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  padding: 1.5rem 1.25rem;
}

.formatos__cifra {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.formatos__numero {
  font-family: var(--display);
  font-size: clamp(3.5rem, 16vw, 5.5rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.formatos__unidad {
  font-family: var(--display);
  font-size: clamp(0.9rem, 3.6vw, 1.15rem);
  color: var(--plata-media);
}

.formatos__escala {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--plata-apagada);
  font-variant-numeric: tabular-nums;
  margin-top: 0.5rem;
}

/* El mando de rango. Se le quita el aspect por defecto del navegador y se
   dibuja a mano: el de fábrica, sobre fondo oscuro, es casi invisible en
   Windows. */
.mando {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  margin: 0.5rem 0 0;
  cursor: pointer;
}
.mando::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--tinta-4);
  border: 1px solid var(--filete);
}
.mando::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--tinta-4);
  border: 1px solid var(--filete);
}
.mando::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -13px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--oro), var(--oro-hondo));
  border: 2px solid #2a1c08;
}
.mando::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--oro), var(--oro-hondo));
  border: 2px solid #2a1c08;
}

.formatos__nota {
  font-size: 0.9rem;
  color: var(--plata-media);
  margin: 1rem 0 0;
}

/* ==========================================================================
   9. LA PROMOCIÓN
   ==========================================================================
   EL HUECO MÁS GRANDE DE ESTE ENCARGO, y aquí está resuelto sin inventar nada.

   El cliente dice que hay PROMOCIÓN DE LUNES A JUEVES y NO dice en qué
   consiste. No se sabe si es un descuento, un precio especial, una hora más o
   un integrante de regalo. Cualquiera de esas cosas sería una invención, y la
   que más caro se paga: quien contrata leyendo «un integrante de regalo» y
   luego no lo tiene se siente engañado ANTES de la serenata.

   ASÍ QUE SE PUBLICA LO QUE SÍ SE SABE —que existe y qué días— Y SE DICE QUE
   EL CONTENIDO SE PREGUNTA. El hueco no se tapa con una frase de relleno: se
   tapa con un botón que lleva a la única persona que sabe la respuesta.

   EL BLOQUE ES EL ÚNICO SITIO DEL SITIO CON FONDO DORADO, y es a propósito: el
   oro está reservado para lo que hay que decidir o tocar.
   ========================================================================== */
/*
 * LA PROMOCIÓN, CON EL ROJO DEL LOGOTIPO. Es el SEGUNDO de los tres sitios donde
 * se usa, y el único donde el rojo hace de filete grueso.
 *
 * POR QUÉ AQUÍ Y NO EN OTRO SITIO: este es el bloque que hay que mirar —lo que
 * está en promoción—, y el oro solo ya no bastaba para separarlo del resto, porque
 * ahora el oro está también en el filete de las secciones. El rojo le da al bloque
 * un borde que no se confunde con nada.
 *
 * Y SIGUE SIN SER UNA SUPERFICIE ROJA: son dos filetes de un píxel y un fondo que
 * sigue siendo dorado tenue. El rojo es el borde, no el relleno.
 */
.promocion {
  background: linear-gradient(180deg, rgba(230, 181, 45, 0.15), rgba(230, 181, 45, 0.05));
  border-top: 1px solid rgba(168, 15, 15, 0.75);
  border-bottom: 1px solid rgba(168, 15, 15, 0.75);
}

/*
 * Y LA MUESCA: un trozo de rojo macizo de 46 píxeles, al lado del rótulo. Es lo
 * que dice «esto es una promoción» sin escribirlo, y es el TERCER sitio donde se
 * usa el rojo. No se pone en ningún otro rótulo del sitio.
 */
.promocion .rotulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.promocion .rotulo::before {
  content: '';
  width: 46px;
  height: 2px;
  flex: none;
  background: var(--azul-globo-claro);
}

.promocion__rejilla {
  display: grid;
  gap: 1.5rem;
}

.promocion__dias {
  font-family: var(--display);
  font-size: clamp(1.6rem, 7vw, 2.5rem);
  color: #fff;
  margin: 0 0 0.5rem;
}

.promocion__titulo {
  font-family: var(--display);
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  color: var(--oro);
  margin: 0 0 0.75rem;
}

.promocion__texto {
  color: var(--plata);
  max-width: 52ch;
  margin: 0 0 1.25rem;
}

.promocion__texto strong {
  color: #fff;
}

/* ==========================================================================
   10. EL CONTACTO
   ========================================================================== */
.contacto__rejilla {
  display: grid;
  gap: 0.75rem;
}

.contacto__via {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--tinta-2);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--plata-clara);
  transition: border-color 0.15s, background-color 0.15s;
}
.contacto__via:hover {
  border-color: var(--oro);
  background: var(--tinta-3);
}
.contacto__via svg {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--oro);
}
.contacto__rotulo {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plata-apagada);
  display: block;
}
.contacto__dato {
  font-family: var(--display);
  font-size: 1.05rem;
  word-break: break-word;
}

/* ==========================================================================
   11. EL CUESTIONARIO
   ==========================================================================
   Sin servidor. Al pulsar «Abrir WhatsApp», el guion arma el mensaje con lo que
   se haya escrito y navega a `wa.me`. NO SE MANDA NADA A NINGÚN SERVIDOR Y NO
   SE GUARDA NADA, y la página lo dice dos veces, porque es justo lo que nadie
   cree.
   ========================================================================== */
.cuestionario {
  background: var(--tinta-2);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 5vw, 2rem);
}

.cuestionario__rejilla {
  display: grid;
  gap: 1.15rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo__etiqueta {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plata-clara);
}

.campo__ayuda {
  font-size: 0.85rem;
  color: var(--plata-apagada);
  margin: 0;
}

/* La cuenta de lo que se ha marcado en el repertorio y en los formatos. Es el
   resumen que ata las tres secciones, así que va con aire alrededor. */
#ayuda-elegido {
  margin: 1.15rem 0 0;
}

.campo__entrada {
  /* 16 px o más: por debajo, el iPhone hace zum al enfocar el campo y la página
     salta. Es un detalle tonto que arruina el llenado en el teléfono. */
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  background: var(--tinta);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  width: 100%;
}

/* El calendario nativo, sobre fondo oscuro, sale con texto negro. Con esta
   regla el icono se ve. */
.campo__entrada[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.65);
  cursor: pointer;
}

textarea.campo__entrada {
  min-height: 112px;
  resize: vertical;
}

/*
 * EL TEXTO DE AYUDA DE DENTRO DEL CAMPO.
 *
 * Estaba en #6F675F, que sobre el fondo del campo da 3,5:1: por debajo del 4,5
 * que piden las pautas para texto normal. Se veía, pero justo: en un teléfono a
 * pleno sol y con el brillo bajo, el «El salón, la colonia o la ciudad» se
 * perdía. En #8A827A da 5,1:1. Sigue leyéndose como una ayuda y no como algo
 * escrito, que es lo que tiene que pasar con un texto de dentro del campo.
 */
.campo__entrada::placeholder {
  color: #8a827a;
}

/* El campo mal se marca de tres maneras —filete grueso, fondo y un texto
   debajo—, porque el color solo no basta. */
.campo--mal .campo__entrada {
  border-color: #f0a08a;
  border-width: 2px;
  background: rgba(240, 160, 138, 0.08);
}

.campo__error {
  font-size: 0.88rem;
  color: #f5b8a6;
  margin: 0;
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}
.campo__error::before {
  content: '▲';
  font-size: 0.7rem;
  line-height: 1.6;
}

/* El resumen de errores, que es lo que anuncia el lector de pantalla. */
.resumen {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #f0a08a;
  border-left-width: 4px;
  border-radius: var(--radio);
  background: rgba(240, 160, 138, 0.1);
  color: #f7d2c6;
  font-size: 0.95rem;
}
.resumen ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}
.resumen[hidden] {
  display: none;
}

.cuestionario__pie {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filete);
}

.aviso {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--plata-media);
  margin: 0 0 1.15rem;
  max-width: 58ch;
}
.aviso svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.15rem;
  color: var(--oro);
}
.aviso strong {
  color: var(--plata-clara);
}

/* El repaso del mensaje, antes de abrir WhatsApp. Es la última red: aquí se ve
   lo que va a llegar y se puede volver atrás. */
.repaso {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--tinta);
  border: 1px solid var(--filete);
  border-left: 3px solid var(--oro);
  border-radius: var(--radio);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--plata);
  max-height: 15rem;
  overflow-y: auto;
}
.repaso:empty {
  display: none;
}

/* Sin guion no hay botón de enviar, así que se dice lo que pasa y se ofrece el
   WhatsApp a pelo. La clase `js` la pone el propio guion antes de pintar. */
.sin-guion {
  display: block;
}
.js .sin-guion {
  display: none;
}

/* ==========================================================================
   12. EL PIE
   ========================================================================== */
.pie {
  border-top: 1px solid var(--filete);
  padding: 2.5rem 0 2rem;
  font-size: 0.9rem;
  color: var(--plata-media);
}

.pie__rejilla {
  display: grid;
  gap: 1.5rem;
}

/* El logotipo en el pie, como firma. */
.pie__logotipo {
  width: 76px;
  height: auto;
  margin-bottom: 0.6rem;
}

/* El nombre del grupo en el pie, con la tipografía de los títulos: es la marca
   mientras no haya un logotipo nuevo. */
.pie__nombre {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--plata-clara);
  margin: 0;
}

.pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.pie__lista a {
  color: var(--plata-clara);
  text-decoration: none;
  border-bottom: 1px solid var(--filete-fuerte);
}
.pie__lista a:hover {
  border-bottom-color: var(--oro);
}

.pie__legal {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filete);
  font-size: 0.82rem;
  color: var(--plata-apagada);
  display: grid;
  gap: 0.5rem;
}

/* ==========================================================================
   13. LOS ANCHOS
   ==========================================================================
   Mobile primero. Todo lo de arriba está pensado para 320 píxeles y estas
   reglas solo AÑADEN lo que hace falta cuando hay sitio. Los tramos están donde
   el contenido cambia de forma, no en los anchos de los aparatos de moda.
   ========================================================================== */

/*
 * LAS TRES COLUMNAS DEL REPERTORIO EMPIEZAN EN 520 Y NO EN 430, y no es un
 * número elegido a ojo: es el que salió de medir.
 *
 * A 430 px, tres columnas dejan 125 px por chapa, y ahí «Rancheras» y
 * «Guapangos» miden 91 px a 15 px de letra. Con el número, la palomita y los
 * dos huecos, el contenido pasaba de 150 y LA PALOMITA SE SALÍA DE LA TARJETA
 * 12 píxeles, con lo que la página entera ganaba scroll horizontal. Lo encontró
 * la comprobación de desborde a 430 px, no el ojo.
 *
 * Hasta 520 van DOS columnas, que a 430 dejan 190 px por chapa: de sobra.
 */
@media (min-width: 520px) {
  .repertorio__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * Y EL TEXTO DE LA CHAPA TIENE QUE PODER ENCOGER.
 *
 * Una celda de rejilla y un hijo de flex traen `min-width: auto` de fábrica, o
 * sea que NO bajan de su ancho de contenido por mucho que se les pida. Con
 * `min-width: 0` el texto puede encogerse y partirse, y deja de empujar la
 * palomita fuera de la tarjeta. Es la causa de fondo del desborde de arriba.
 */
.chapa__texto {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ==========================================================================
   LA ZONA
   ==========================================================================
   Las once localidades, con la misma pieza que el repertorio y SIN NADA QUE
   PULSAR. Se reutiliza `.chapa` porque ya está comprobada en los nueve anchos y ya
   se ve bien; lo único que se quita es el aspecto de botón, porque un botón que no
   hace nada es peor que un texto.
   ========================================================================== */
.zona__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

/* Sin cursor de botón y sin el filete que se enciende al pasar por encima: esto
   no se pulsa. */
.chapa--sola {
  cursor: default;
}
.chapa--sola:hover {
  border-color: var(--filete);
  background: var(--tinta-2);
}

.zona__pregunta {
  font-size: 0.95rem;
  color: var(--plata-media);
  margin: 0;
  max-width: 54ch;
}

/*
 * ==========================================================================
 * LAS COLONIAS: LA NOTA PEQUEÑA DEBAJO DE LOS MUNICIPIOS
 * ==========================================================================
 * POR QUÉ SON MÁS PEQUEÑAS Y SIN CHAPA, que es toda la decisión de este bloque:
 * las once de arriba son MUNICIPIOS y llevan la chapa —número, borde y relleno—,
 * que es la pieza más pesada de la página. Una colonia NO ES UN MUNICIPIO: es un
 * detalle dentro de uno. Si llevaran la misma ropa, cinco colonias parecerían
 * cinco municipios más y la lista grande perdería su sentido.
 *
 * Así que van en texto corrido, a 0,86rem, en el gris de plata que ya se usa para
 * lo secundario —7,7:1 de contraste sobre el fondo, medido, o sea que se lee— y
 * separadas por un punto medio, como el repertorio y los municipios. Se leen como
 * lo que son: una nota al pie de la lista de arriba.
 *
 * NO SON TOCABLES. Ni cursor de botón, ni borde, ni estado de pulsado: no hay
 * nada que marcar. Un botón que no hace nada es peor que un texto.
 *
 * EL PUNTO MEDIO VA EN EL `::before` DE CADA ELEMENTO MENOS EL PRIMERO, y no en
 * el HTML, por dos motivos: no se copia al portapapeles si alguien selecciona la
 * lista, y no lo cuenta el filtro de palabras prohibidas del montaje, que mira el
 * texto de la página. Un separador no es un dato.
 */
.zona__colonias-titulo {
  font-family: var(--texto);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--plata-clara);
  margin: 1.5rem 0 0.5rem;
}

.zona__colonias {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--plata-media);
  max-width: 54ch;
}

.zona__colonias li {
  /* Sin `min-width: auto` no hay problema aquí —son palabras sueltas—, pero el
     `overflow-wrap` sí hace falta: un nombre largo en una pantalla de 320 px
     tiene que poder partirse antes que empujar la página a lo ancho. */
  overflow-wrap: break-word;
}

.zona__colonias li + li::before {
  content: '·';
  margin: 0 0.5rem;
  color: var(--plata-apagada);
}

/* A partir de 620 el cuestionario va a dos columnas y la promoción se parte. */
@media (min-width: 620px) {
  .cuestionario__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .campo--ancho {
    grid-column: 1 / -1;
  }
  .promocion__rejilla {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 2.5rem;
  }
  .contacto__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pie__rejilla {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* A partir de 820 la marca crece y el repertorio pasa a tres columnas.
   LA MARCA NO SE VA A UNA COLUMNA PROPIA, y es una corrección hecha mirando la
   primera maqueta: estaba a la derecha, en su propia columna, y en el teléfono
   quedaba entre el titular y los botones, cortando la lectura justo donde hay
   que decidir. Va encima, abriendo la página, en los nueve anchos. */
@media (min-width: 820px) {
  .portada__logotipo {
    width: 340px;
  }
  .repertorio__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .chapa {
    min-height: 64px;
  }
}

/* A partir de 1024 el repertorio se pone en una sola fila de nueve, como la
   botonadura de un pantalón puesta en horizontal, y las secciones respiran. */
/*
 * LA ZONA PASA A TRES COLUMNAS EN 640 Y NO EN 520 COMO EL REPERTORIO, y el motivo
 * está medido: «Ixtlahuacán del Río» son veinte caracteres, y a 640 píxeles un
 * tercio deja unos 190 por chapa, que es donde ese nombre cabe en una línea. Antes
 * de eso se parte en tres renglones y la lista deja de leerse de un vistazo.
 */
@media (min-width: 640px) {
  .zona__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .repertorio__rejilla {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .chapa {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 0.75rem;
    min-height: 118px;
  }
  .chapa__marca {
    margin-left: 0;
  }
  .pie__rejilla {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* ==========================================================================
   14. MENOS MOVIMIENTO
   ==========================================================================
   El sitio no tiene animaciones de entrada, así que no hay nada que apagar;
   pero `scroll-behavior: smooth` sí es movimiento, y con esta preferencia
   puesta el salto a una sección tiene que ser instantáneo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}