/* ==========================================================================
   MARIACHI CIELO DE AMÉRICA
   ==========================================================================
   Í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, U+A720-A7FF;
}

/* ==========================================================================
   2. LOS COLORES Y LAS MEDIDAS
   ==========================================================================
   UN MARIACHI SE DEFINE POR LA NOCHE: traje negro, botones de plata, moño
   dorado, serenata a las tres de la mañana. DE AHÍ SALE TODO LO DE ABAJO, y no
   de un catálogo de plantillas.

   EL FONDO NO ES NEGRO PLANO. Es un marrón muy oscuro, #1A130C: el mismo tono
   que tiene la pared de piedra de la foto del cliente cuando se le baja la luz.
   Un negro puro da luto; este da noche. Los tres fondos están escalonados —el
   de la página, el de las bandas y el de las tarjetas— para que la página tenga
   profundidad sin necesidad de sombras.

   EL COLOR SIGNIFICA ALGO, Y SIEMPRE LO MISMO:
       plata  → el traje: los filetes, las letras de las secciones, los números
       oro    → lo que hay que decidir o tocar: la promoción y el botón de
                WhatsApp. CON MODERACIÓN, y por eso el oro no se usa para nada
                más: si todo brilla, nada brilla.
       azul   → el de las estrellas del logotipo. Aparece una sola vez, en el
                filete de la cabecera.

   SOBRE EL CONTRASTE
   ------------------
   Todo el texto del sitio va sobre fondo oscuro, así que se mide contra el
   fondo más oscuro que puede haber debajo, que es #120D09:
       #E9E8E2  plata clara ..... 15,9:1   texto normal, de sobra
       #D9D5CC  plata .......... 13,3:1   texto normal, de sobra
       #A9A29A  gris plata ...... 7,7:1   texto normal, correcto
       #E8B96C  oro ............. 11,2:1   texto normal, correcto
       #8FB4DC  azul claro ....... 8,4:1   texto normal, correcto
   El gris más oscuro que se usa para texto es #A9A29A, y está por encima de
   4,5:1:1 holgado. Los pelos de plata —filetes de 1 píxel— no son texto y no
   necesitan contraste, pero se mantienen en 0,25 de opacidad o más, que es
   donde se ven en una pantalla de teléfono a pleno sol.
   ========================================================================== */
:root {
  /* La noche */
  --tinta: #120d09;
  --tinta-2: #1a130c;
  --tinta-3: #241a11;
  --tinta-4: #2e2216;

  /* La plata del traje */
  --plata: #d9d5cc;
  --plata-clara: #e9e8e2;
  --plata-media: #a9a29a;
  --plata-apagada: #7d766e;
  --filete: rgba(233, 232, 226, 0.16);
  --filete-fuerte: rgba(233, 232, 226, 0.3);

  /* El oro del moño */
  --oro: #e8b96c;
  --oro-hondo: #c9944a;
  --oro-tenue: rgba(232, 185, 108, 0.14);

  /* Las estrellas del logotipo */
  --azul: #8fb4dc;

  /* 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 de las estrellas del logotipo, una sola vez en el sitio. */
.cabecera::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(143, 180, 220, 0.5), 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;
}

.cabecera__marca img {
  width: 46px;
  height: auto;
  flex: none;
}

.cabecera__nombre {
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.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;
}

.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;
}

.portada__marca {
  width: min(280px, 62vw);
  height: auto;
  margin: 0 0 1.5rem;
}

.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;
}

.portada__titulo {
  font-size: clamp(2.5rem, 12vw, 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.
   ========================================================================== */
.promocion {
  background: linear-gradient(180deg, rgba(232, 185, 108, 0.15), rgba(232, 185, 108, 0.05));
  border-top: 1px solid rgba(232, 185, 108, 0.35);
  border-bottom: 1px solid rgba(232, 185, 108, 0.35);
}

.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;
}

.pie__marca {
  width: 150px;
  height: auto;
  margin-bottom: 0.9rem;
}

.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;
}

/* 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__marca {
    width: 300px;
  }
  .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. */
@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;
  }
}