/* =========================================================================
   FUTTO · sistema visual de la pagina informativa
   Paleta y reglas de marca: AgentePresentaciones/marca/MARCA.md
   Traduccion a web y por que Anton en vez de FK Screamer: MARCA-WEB.md
   ========================================================================= */

/* --- Tipografia de titular -------------------------------------------------
   Anton (SIL Open Font License) hace de sustituto de FK Screamer, que es la
   tipografia de marca pero cuya licencia de escritorio NO permite incrustarla
   en un sitio web. Detalle y como cambiarla: MARCA-WEB.md
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Titular";
  src: url("assets/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Titular";
  src: url("assets/fonts/anton-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* Paleta FUTTO — muestreada del logo oficial */
  --negro: #0a0a0a;
  --superficie: #151515;
  --superficie-alta: #1e1e1e;
  --linea: #2a2a2a;
  --lime: #a1ff00;
  --blanco: #ffffff;
  --gris-claro: #b8bcc4;
  --gris-medio: #7a8089;

  --titular: "Titular", "Arial Black", "Arial Bold", sans-serif;
  --texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;

  /* Sesgo de las etiquetas de transmision. Un solo lugar para cambiarlo. */
  --sesgo: -9deg;

  --ancho: 78rem;
  --borde: 1.5rem;

  color-scheme: dark;
}

/* --------------------------------------------------------------- cimientos */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(161 255 0 / 0.25);
}

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

a {
  color: var(--lime);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--titular);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0 0 1em;
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------- utilidades de layout */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: max(var(--borde), env(safe-area-inset-left));
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -110%;
  z-index: 100;
  background: var(--lime);
  color: var(--negro);
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  transition: translate 160ms ease-out;
}
.saltar:focus-visible {
  translate: -50% 0;
}

/* ------------------------------------------------------- glifos de las redes
   Los iconos de marca van inline (src/iconos.mjs) sobre un lienzo de 24x24, y
   por eso se pueden dimensionar todos con una sola regla.

   La medida base va en `em`, no en `rem`: asi el glifo crece y se achica con
   el texto que acompaña y nunca queda desparejo con su etiqueta. El color lo
   hereda con `currentColor` — un boton que se pone lima en hover arrastra el
   icono a negro sin una sola regla extra. Cada uso ajusta su tamaño abajo. */
.icono {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.18em;
  color: inherit;
}

/* ------------------------------------------------- LA FIRMA: etiqueta sesgada
   La grafica de una transmision deportiva no tiene esquinas redondeadas: tiene
   paralelogramos. El sesgo va en el contenedor y se contra-sesga el texto para
   que las letras queden rectas. Se usa con medida: en vivo, rotulos y horas.
   --------------------------------------------------------------------------- */
.etiqueta {
  display: inline-block;
  transform: skewX(var(--sesgo));
  background: var(--lime);
  color: var(--negro);
  padding: 0.32em 0.95em 0.28em;
  font-family: var(--titular);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.etiqueta > span {
  display: inline-block;
  transform: skewX(calc(var(--sesgo) * -1));
}
.etiqueta--hueca {
  background: transparent;
  color: var(--lime);
  box-shadow: inset 0 0 0 2px currentColor;
}
.etiqueta--apagada {
  background: var(--linea);
  color: var(--gris-claro);
}

/* ----------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(10 10 10 / 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}
.cabecera__logo {
  flex: 0 0 auto; /* sin esto el flex lo encoge y max-width:100% achica el logo */
  display: block;
}
.cabecera__logo img {
  width: clamp(5.5rem, 12vw, 8rem);
  height: auto;
}
/* Las pestañas. Ya no son anclas de una pagina de 23.000px: cada una es
   una pagina con su URL, y por eso NINGUNA se puede esconder — un enlace
   escondido antes se alcanzaba bajando, ahora deja la pagina inalcanzable. */
.cabecera__nav {
  margin-left: auto;
  display: flex;
  gap: 0.4rem clamp(0.9rem, 2vw, 1.9rem);
  align-items: center;
  /* Los mismos 0.55rem que el marco de la pestaña activa se sale de las letras.
     Sin esto, en /contacto —que es la ultima— el marco quedaba pegado al filo
     del contenedor y se veia apretado. Alinea el MARCO al margen de la pagina,
     no el texto: el marco es lo que se ve, y 9px de sangria en el texto no. */
  padding-right: 0.55rem;
}
.cabecera__nav a {
  position: relative;
  color: var(--gris-claro);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  padding-block: 0.4rem;
  transition: color 140ms ease-out;
}
.cabecera__nav a:hover {
  color: var(--lime);
}
/* La pestaña que se va del sitio (el tablero, en su propio subdominio). La señal
   es la flecha —la misma que los documentos del pie—, no un color: el menu tiene
   un solo acento y es la pestaña donde estás. Atenuada para que marque sin
   competirle a las letras, y al pasar el mouse se enciende con ellas. */
.cabecera__afuera {
  margin-left: 0.25em;
  font-size: 0.9em;
  /* 0.7 y no menos: es la UNICA señal a la vista de que el enlace se va del
     sitio —el aviso para lector de pantalla no se ve—, y a 0.6 quedaba en 4.3:1
     contra el negro. Asi pasa de 4.9:1 sin ganarle a las letras. */
  opacity: 0.7;
  transition: opacity 140ms ease-out;
}
.cabecera__nav a:hover .cabecera__afuera,
.cabecera__nav a:focus-visible .cabecera__afuera {
  opacity: 1;
}
/* La pestaña donde estás. El marco es el paralelogramo de `.etiqueta`, hueco:
   la firma de la marca aplicada al menu, no un subrayado cualquiera. Va en un
   ::before para que el sesgo no toque las letras — el mismo truco de dos capas
   que usa `.etiqueta`. */
.cabecera__nav a[aria-current="page"] {
  color: var(--lime);
}
.cabecera__nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 0 -0.55rem;
  border: 2px solid currentColor;
  transform: skewX(var(--sesgo));
  pointer-events: none;
}

/* Por debajo de 75rem las pestañas no caben al lado del logo: el menu baja a su
   propio renglon y lo que no entra RUEDA de lado dentro del nav, igual que la
   tabla de resultados. El cuerpo de la pagina nunca se desplaza a lo ancho.

   El limite era 62rem (992px) con seis pestañas. Con ocho —la del tablero
   entre ellas, que se llamó «Nuestros números» hasta el 2026-08-21 y hoy es
   «Métricas»— a 1024px el menu medía 888px al lado de un logo de 123: Contacto
   salia del renglon y se CORTABA, sin manera de llegar. Y no se ve como un
   desborde de pagina, porque `body` tiene `overflow-x: hidden`: se ve como una
   pestaña a medias. A 1100px entraba con cero holgura, y el ancho de estas
   letras depende de la fuente del sistema (Segoe UI, Helvetica, Arial no miden
   igual), asi que el corte va con margen: 75rem = 1200px, ~90px de aire.
   El rotulo corto de hoy dejó más aire y el corte NO se bajó por eso: si se
   agrega otra pestaña o se alarga un rotulo, hay que volver a medirlo — no
   calcularlo a ojo.

   Sin difuminado en los filos, y no por olvido: el que hubo tapaba justo la
   pestaña activa cuando era la primera o la ultima —que es el caso normal, con
   Torneos y Contacto en las puntas—. La pestaña cortada a medias en el borde ya
   dice "hay mas de lado", y dice la verdad.

   Ojo con el alto: `overflow-x: auto` tambien recorta en vertical, asi que el
   padding tiene que dejar pasar el foco del teclado (outline 3px + offset 3px). */
@media (max-width: 75rem) {
  .cabecera__fila {
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    min-height: 0;
    padding-block: 0.55rem;
  }
  .cabecera__nav {
    margin-left: 0;
    width: 100%;
    gap: 1.15rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0.45rem 0.75rem;
    margin-inline: -0.75rem;
  }
  .cabecera__nav::-webkit-scrollbar {
    display: none;
  }
  .cabecera__nav a {
    font-size: 0.75rem;
    letter-spacing: 0.07em;
  }
}

/* El header es sticky: sin esto, al llegar por un enlace con ancla (#servicio-nike
   desde otra pagina) el titulo queda escondido debajo. */
:target,
[id] {
  scroll-margin-top: 5.5rem;
}

/* ------------------------------------------------------------------ portada */
.portada {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* La portada es lo primero que se ve y llena la pantalla: es la unica pieza
     del sitio que puede. El video estuvo medio dia encima y se probo bajarla a
     84svh para compensar; volvio a 92svh cuando el video paso a segundo lugar. */
  min-height: min(92svh, 54rem);
  padding-block: 6rem 0;
  overflow: hidden;
}
.portada__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      var(--negro) 4%,
      rgb(10 10 10 / 0.86) 34%,
      rgb(10 10 10 / 0.42) 72%,
      rgb(10 10 10 / 0.62) 100%
    ),
    radial-gradient(120% 80% at 15% 85%, rgb(10 10 10 / 0.7), transparent 60%);
}
.portada__cuerpo {
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  width: 100%;
}
.portada h1 {
  /* El minimo tiene que ser chico: el titular lleva saltos de linea fijos y
     "FÚTBOL NO OFICIAL" se desbordaba a 320px de ancho. */
  font-size: clamp(2.15rem, 9.6vw, 7rem);
  margin: 1.1rem 0 0;
  max-width: 20ch;
}
.portada h1 em {
  font-style: normal;
  color: var(--lime);
}
.portada__bajada {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  color: var(--gris-claro);
  margin: 1.4rem 0 0;
  max-width: 48ch;
  border-left: 3px solid var(--lime);
  padding-left: 1.1rem;
}

/* ------------------------------------------- el tablero: que hay al aire hoy */
.aire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
}
.aire__estado {
  font-size: 0.875rem;
}
.aire--vivo .aire__estado {
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}
.aire__detalle {
  font-size: 0.9375rem;
  color: var(--gris-claro);
  font-variant-numeric: tabular-nums;
}
.aire__detalle b {
  color: var(--blanco);
}

.plataformas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.9rem;
  padding: 0;
  list-style: none;
}
.plataformas a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.25rem;
  border: 1px solid var(--linea);
  background: rgb(21 21 21 / 0.75);
  color: var(--blanco);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  transition: border-color 140ms ease-out, background-color 140ms ease-out,
    color 140ms ease-out;
}
.plataformas a:hover {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--negro);
}
/* Un solo boton resaltado entre varios significa «empeza por acá»: lo usa la
   404 para el enlace a Inicio. Con dos de tres resaltados no significa nada
   —parece que al tercero le falta el borde—, y por eso la portada NO usa esto. */
.plataformas a[data-principal="true"] {
  border-color: var(--lime);
}
/* La fila de la portada va completa: los tres son «acá nos ves». */
.plataformas--ver a {
  border-color: var(--lime);
}

/* Abre /torneos, pegada a la cabecera: sin `border-top`, que la cabecera ya
   cierra con su hairline y dos de 1 px juntas se ven como una línea de 2 px.
   Debajo de la portada de Inicio, hasta el 2026-08-21, ese borde sí hacía falta. */
.ciudades {
  background: var(--superficie);
}
.ciudades__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.6rem;
  padding-block: 1.05rem;
  font-family: var(--titular);
  font-size: clamp(0.9375rem, 1.7vw, 1.25rem);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.ciudades__fila span:not(.ciudades__horario) {
  color: var(--blanco);
}
.ciudades__horario {
  margin-left: auto;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.ciudades__punto {
  color: var(--gris-medio);
}
/* Cuando la franja no cabe en un renglón, el horario baja completo y los puntos
   se van. Los dos son errores de lectura, no de estética: con el horario colgado
   del final, «CALI · LUNES A VIERNES…» quedaba en la misma línea y se leía como
   el horario DE Cali —que es otro, y sale en su tarjeta—; y el punto que caía
   justo antes del corte quedaba solo al filo, separando de nada. */
@media (max-width: 56rem) {
  .ciudades__horario {
    flex-basis: 100%;
    margin-left: 0;
  }
  .ciudades__punto {
    display: none;
  }
}

/* ---------------------------------------------------------------- secciones */
.seccion {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  border-top: 1px solid var(--linea);
}
.seccion--oscura {
  background: var(--negro);
}
.seccion--superficie {
  background: var(--superficie);
}
.seccion--foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.seccion__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seccion--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    var(--negro) 8%,
    rgb(10 10 10 / 0.9) 42%,
    rgb(10 10 10 / 0.55) 100%
  );
}

.rotulo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}
/* La misma banda, sin palabras: la marca lima y la linea. Para la seccion que
   no gana nada con un nombre (el video de Inicio: «EN VIDEO» repetia lo que el
   poster ya muestra).

   La marca es la etiqueta sin letras, y por eso NO es una barra fina: con
   0.5rem de alto el sesgo de -9deg mueve el borde medio pixel y el
   paralelogramo se ve rectangulo, o sea deja de ser la firma de la pagina.
   Va con el alto del cuerpo de una etiqueta, que es donde el sesgo se lee.

   Y el aire de abajo crece: la banda baja de ~25px a 18px de alto, y con el
   1.1rem de siempre el video le quedaba encima. */
.rotulo--mudo {
  margin-bottom: 1.5rem;
}
.rotulo--mudo::before {
  content: "";
  flex: none;
  width: 2.6rem;
  height: 1.15rem;
  background: var(--lime);
  transform: skewX(var(--sesgo));
}
/* Callejero FC encabeza con su logo en vez de la etiqueta verde: es la unica
   propiedad propia. La altura la manda el dato (logoAlto), no el CSS. */
.rotulo--logo {
  margin-bottom: 1.4rem;
}
.rotulo__logo {
  width: auto;
  max-width: min(100%, 22rem);
  object-fit: contain;
  object-position: left center;
}
/* El titulo de una seccion se selecciona por CLASE, no por tag: es <h1> cuando
   la seccion ES la pagina (Callejero FC, Internacional…) y <h2> cuando
   acompaña a otra (la historia debajo de las cifras). Una regla `.seccion h2`
   dejaba de agarrarlo en la mitad de las paginas y de paso le pegaba a los
   titulos de adentro, que tambien suben de nivel. */
.seccion__titulo {
  font-size: clamp(2.05rem, 5.2vw, 3.75rem);
  max-width: 26ch;
}
.seccion__bajada {
  color: var(--gris-claro);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  margin-top: 1.3rem;
}

/* --------------------------------------------------------------- tira de fotos
   Tres fotos en fila, la misma pieza en la ficha de un torneo y en un servicio.
   El `gap: 1px` sobre fondo `--linea` dibuja la reja sin bordes: las tres se leen
   como una sola imagen partida, que es lo que son. `aspect-ratio` + `cover`
   recortan sin deformar — la altura no depende de la proporcion del archivo.
   -------------------------------------------------------------------------- */
.tira {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
}
.tira__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

/* Celda vertical, para el bloque cuyas fotos son verticales.
   La pide `galeria.vertical` en datos/servicios.json y hoy la usa un solo caso:
   El Partido del Año. De las 57 fotos de Buenos Aires solo 4 son horizontales y
   ninguna es de las que eligio Juanes, asi que el 2026-08-21 decidio respetar su
   eleccion y mover el recorte. En la celda 4/3 de siempre una foto 2:3 perdia
   dos tercios de la imagen: el recorte se comia la tribuna, que es justo lo que
   la foto viene a mostrar.

   No se convierte en la regla: es la excepcion de un bloque. La celda apaisada
   sigue siendo la de la casa porque cose las tres fotos en una sola imagen
   partida, y tres verticales en fila son tres fotos separadas — se ve, y esta
   bien que se vea, porque estas son tres momentos distintos del mismo partido. */
.tira--vertical .tira__foto,
.tira--vertical .tira__hueco {
  aspect-ratio: 3 / 4;
}

/* Hueco a escala real mientras no llegan las fotos: ocupa exactamente lo que va
   a ocupar la foto, para que la seccion se lea con su ritmo definitivo. */
.tira--vacia {
  background: transparent;
  gap: 0.5rem;
}
.tira__hueco {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--linea);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 9px,
    rgb(255 255 255 / 0.022) 9px,
    rgb(255 255 255 / 0.022) 18px
  );
}
.tira__aviso {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  color: var(--gris-medio);
}

/* ----------------------------------------------------------------- carrusel
   La tira de fotos de la ISFA. Rueda de lado DENTRO de su caja: el cuerpo de la
   pagina nunca se desplaza a lo ancho, igual que .tabla-ancha y el menu.

   Sin difuminado en los filos, y por la misma razon que el menu: la foto cortada
   a medias en el borde ya dice "hay mas de lado", y lo dice mejor que un
   degradado que ademas taparia media foto.

   El `gap: 1px` sobre fondo --linea es la reja de .tira: las ocho se leen como
   una sola pelicula partida, que es lo que son.

   Ojo con el alto: `overflow-x: auto` tambien recorta en vertical. El foco del
   teclado (outline 3px + offset 3px) cae sobre la tira, que es lo que recibe el
   `tabindex`, y no sobre una foto de adentro: por eso no se ve cortado.
   -------------------------------------------------------------------------- */
.carrusel {
  margin-top: 3.25rem;
}
.carrusel__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
/* Con dos clases y no con `.sub`: el titulo del carrusel es el mismo `.sub` de
   "Lo que viene" y solo pierde el aire de arriba, que aca lo pone `.carrusel`.
   Asi la regla gana sin depender de quien va antes en el archivo. */
.carrusel__cabeza .sub {
  margin-top: 0;
}
.carrusel__mandos {
  display: flex;
  gap: 0.5rem;
  flex: none;
}
/* `display: flex` le gana a la regla `[hidden]` del navegador. Sin esto, las
   flechas que nacen tapadas —para que quien no tenga JavaScript no vea dos
   botones muertos— se verian igual. */
.carrusel__mandos[hidden] {
  display: none;
}
.carrusel__boton {
  width: 2.75rem; /* 44px: el minimo comodo para el dedo */
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--blanco);
  cursor: pointer;
  transition: color 140ms ease-out, border-color 140ms ease-out;
}
.carrusel__boton:hover:not(:disabled) {
  color: var(--lime);
  border-color: var(--lime);
}
.carrusel__boton:disabled {
  color: var(--gris-medio);
  cursor: default;
}
.carrusel__tira {
  display: flex;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--linea);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Sin barra de scroll, igual que el menu. No es por estetica: en Windows se
     dibuja un renglon gris de 11px que corre el claim de abajo, en Mac no se ve
     ninguna, y de paso seria la tercera pieza contestando lo mismo —las flechas
     ya dicen si hay mas, y la foto cortada en el filo dice para donde—. */
  scrollbar-width: none;
}
.carrusel__tira::-webkit-scrollbar {
  display: none;
}
.carrusel__toma {
  flex: 0 0 auto;
  /* Una foto y el filo de la siguiente en movil; dos y media en escritorio. El
     clamp evita tres reglas de media query para lo mismo. */
  width: clamp(16rem, 78vw, 32rem);
  scroll-snap-align: start;
}
.carrusel__marco {
  position: relative;
  margin: 0;
}
.carrusel__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04); /* el mismo trato que .tira__foto */
}
/* El lugar va ENCIMA de la foto: ocho pies en renglon aparte partirian la
   pelicula en ocho tarjetas. El velo es el mismo recurso que la seccion con
   foto de fondo. */
.carrusel__pie {
  position: absolute;
  inset: auto 0 0 0;
  /* El velo crece con la foto: 2.75rem sobre una foto de 341px es un cuarto de
     la imagen, pero sobre los 203px del movil era mas de un tercio. */
  padding: clamp(1.5rem, 7vw, 2.75rem) 1rem 0.8rem;
  background: linear-gradient(to top, rgb(10 10 10 / 0.9), rgb(10 10 10 / 0));
  color: var(--blanco);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__tira {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------ torneos */
/* Son cuatro torneos: 1 columna en movil y 2 en el resto. Con auto-fit salian
   tres arriba y uno solo abajo, que se ve como un error. */
.torneos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 46rem) {
  .torneos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* El acento del torneo enmarca la tarjeta entera, no solo el borde de arriba
   (Juanes, 2026-08-21). Es el mismo grosor en los cuatro lados: con 4px arriba y
   1px gris en el resto, el marco se leia como un borde suelto sobre la foto. */
.torneo {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 4px solid var(--acento, var(--lime));
  overflow: hidden;
}
.torneo__foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}
.torneo__cuerpo {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
/* Los escudos no se equilibran por la caja, se equilibran a ojo: un escudo
   vertical a la misma altura que un wordmark horizontal se ve la mitad. Cada
   torneo trae su propia altura de display en datos/torneos.json (logoAlto), y
   el contenedor tiene alto fijo para que las cuatro tarjetas alineen.

   Se queda en 7rem, y eso ya se probo: el 2026-08-21, cuando el TDB paso al
   lockup con patrocinadores, se subio a 9.5rem para que su escudo se leyera al
   tamano que tenia solo. En la captura se veia peor, no mejor. Este alto es
   COMPARTIDO, asi que subirlo por un logo deja a los otros tres flotando en tres
   rem de aire y la fila entera se lee floja; y re-equilibrar los cuatro para
   llenar la caja nueva engordaba la fila de logos un tercio, empujando ciudad,
   horario y formato —lo que el visitante vino a buscar— mas abajo. El lockup
   entra en 7rem y su escudo queda en 5.3rem: sigue siendo el escudo mas grande
   de los cuatro, y es lo mismo que ya hacia Rey del Barrio, cuyo logo tambien
   trae sus patrocinadores adentro. */
.torneo__marca {
  display: flex;
  align-items: center;
  height: 7rem;
  margin-bottom: 0.9rem;
}
.torneo__logo {
  width: auto;
  height: var(--logo-alto, 4.5rem);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
/* `:is(h2, h3)` y no `h3` a secas: el nombre del torneo sube a <h2> el dia que
   los torneos sean su propia pagina. La tarjeta nunca tiene los dos. */
.torneo :is(h2, h3) {
  font-size: 1.75rem;
}
/* La ciudad es el acento del torneo, lo unico con color en toda la tarjeta.
   Mientras hubo parrafo de descripcion, `.torneo p` le ganaba por especificidad
   (0-1-1 contra 0-1-0) y la pintaba gris: el acento estaba escrito y no se veia.
   Al irse el parrafo se fue la regla, y con ella el pisotón. */
.torneo__ciudad {
  font-family: var(--titular);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.875rem;
  color: var(--acento-texto, var(--lime));
  margin: 0.35rem 0 1.5rem;
}
.torneo__datos {
  margin: 0 0 1.3rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--linea);
  display: grid;
  gap: 0.7rem;
  font-size: 0.875rem;
}
.torneo__datos > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
}
.torneo__datos dt {
  color: var(--gris-medio);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 0.6875rem;
  font-weight: 700;
}
.torneo__datos dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.torneo__pie {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}
/* La fila de redes se va al filo derecho del pie: la etiqueta con el nombre
   oficial manda a la izquierda y los iconos cierran, que es donde se los
   busca. Cuando no caben en una fila, bajan pegados a la izquierda. */
.torneo__pie .redes-marca {
  margin-left: auto;
}
/* El nombre oficial del torneo es la etiqueta mas larga del sitio —«Torneo del
   Barrio Pulsar by BetPlay», 35 caracteres— y `.etiqueta` es nowrap. Con el
   rastreo de 0.1em no cabia en la tarjeta: a 320px se salia 48px y se CORTABA
   sin desbordar la pagina, el mismo enga~no de las cifras el 2026-08-18 (body
   oculta el desborde). Aca el rastreo sobra: las otras etiquetas son rotulos de
   dos palabras y esta es una frase. Se midio, no se calculo:
   scripts/mirar.py mide esta etiqueta contra su tarjeta y avisa. */
.torneo__pie .etiqueta {
  letter-spacing: 0.04em;
  padding-inline: 0.6em;
}
@media (max-width: 24rem) {
  .torneo__pie .etiqueta {
    font-size: 0.75rem;
  }
}

/* ------------------------------------------------------- redes de una marca
   Los torneos y la ISFA, no FUTTO (esas son `.redes`, en Contacto, y ahi si
   van con nombre y usuario porque son la casa).
   Aca el glifo va SOLO: el @ de un torneo —"@torneo_del_barrio_"— es largo,
   parte lineas y no aporta nada que el icono no diga antes. El nombre lo pone
   `aria-label` en el HTML.
   El hover toma el acento del torneo (`--acento-texto`, que la tarjeta ya
   define) y cae a lima donde no hay tarjeta: una sola regla sirve a los cinco
   lugares. La caja es de 2.5rem para que sea tocable en movil aunque el
   dibujo mida 1.125rem. */
.redes-marca {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.redes-marca a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--linea);
  color: var(--gris-claro);
  text-decoration: none;
  transition: color 140ms ease-out, border-color 140ms ease-out,
    background-color 140ms ease-out;
}
.redes-marca a:hover,
.redes-marca a:focus-visible {
  color: var(--acento-texto, var(--lime));
  border-color: currentColor;
  background: var(--superficie-alta);
}
.icono--marca {
  width: 1.125rem;
  height: 1.125rem;
}
/* Red sin glifo: el enlace deja de ser cuadrado y muestra el nombre. Feo a
   proposito —es un aviso de que falta un icono en iconos.mjs—, pero visible. */
.redes-marca__texto {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.redes-marca a:has(.redes-marca__texto) {
  width: auto;
  padding-inline: 0.7rem;
}

/* La fila de la ISFA no vive en una tarjeta, asi que necesita decir de quien
   son las cuentas: sin el rotulo se lee como "las redes de esta pagina". */
.marca-redes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.marca-redes__logo {
  height: 1.6rem;
  width: auto;
}
.marca-redes__rotulo {
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--gris-claro);
}

/* -------------------------------------------------------------------- fechas
   Ya no hay una seccion de programacion: la parrilla vive DENTRO de la seccion
   a la que pertenece cada fecha —el mundial en Internacional, la gira en
   Callejero FC—. Es la misma pieza en los dos lugares a proposito.
   -------------------------------------------------------------------------- */
.parrilla {
  margin-top: 1.4rem;
  border: 1px solid var(--linea);
  /* Casi opaca a proposito: en Callejero FC la parrilla cae sobre la parte
     clara de la foto de fondo y a 0.55 el texto gris quedaba lavado. */
  background: rgb(10 10 10 / 0.88);
}

.evento {
  display: grid;
  grid-template-columns: minmax(8.5rem, 11rem) 1fr auto;
  gap: 0.6rem 1.5rem;
  align-items: baseline;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--linea);
}
.evento:last-child {
  border-bottom: 0;
}
.evento[data-destacado="true"] {
  background: rgb(161 255 0 / 0.05);
  border-left: 3px solid var(--lime);
}
.evento__fecha {
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: clamp(1.0625rem, 2.1vw, 1.375rem);
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.evento__que {
  min-width: 0;
}
.evento__que :is(h3, h4) {
  font-size: 1.1875rem;
  line-height: 1.15;
}
.evento__que p {
  margin: 0.45rem 0 0;
  font-size: 0.875rem;
  color: var(--gris-claro);
}
.evento__lugar {
  font-size: 0.8125rem;
  color: var(--gris-medio);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 46rem) {
  .evento {
    grid-template-columns: 1fr;
  }
  .evento__lugar {
    text-align: left;
  }
}

/* Encabezado corto que abre una parrilla dentro de una seccion que ya tiene h2. */
.sub {
  margin-top: 3.25rem;
  font-size: 1.25rem;
  color: var(--gris-claro);
}

.nota {
  margin-top: 1.6rem;
  font-size: 0.875rem;
  color: var(--gris-medio);
  max-width: 70ch;
}

/* ------------------------------------------------------------- callejero fc */
.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 3rem;
  align-items: start;
}
/* Estos dos titulos no tenian regla y vivian del tamaño que el navegador le da
   a un <h3>. Al pasar Callejero FC a su propia pagina subieron a <h2> y con el
   tag les cambiaba el tamaño solo: ahora esta escrito. */
.dos-columnas :is(h2, h3) {
  font-size: 1.25rem;
  margin-bottom: var(--aire-titulo);
}
/* Los tres rotulos de esta pagina —«Lo que fue la gira», «Cómo se juega» y «Las
   cuatro paradas»— se apoyaban en el recuadro de abajo: los titulos van con
   `margin: 0` y `line-height: 0.92`, asi que el nombre quedaba pegado al borde
   de la caja y se leia como el primer renglon de la caja, no como su titulo
   (Juanes, 2026-08-21).

   El aire va en UNA variable y no en tres numeros: es el mismo gesto repetido
   tres veces en la misma pantalla —«Las cuatro paradas» tenia 1.3rem y los otros
   dos cero, y se veia el desnivel—. Con valores separados, el dia que se ajuste
   uno quedan dos sin ajustar. */
.dos-columnas,
.gira {
  --aire-titulo: 1.75rem;
}
.hechos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.hechos li {
  background: var(--negro);
  outline: 1px solid var(--linea);
  padding: 0.95rem 1.2rem;
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: 1.125rem;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
/* Los dos formatos de juego. Reusa la reja de .torneo__datos pero con el nombre
   arriba y el detalle debajo: los nombres son largos y en dos columnas partian. */
.formatos {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.formatos > div {
  background: var(--negro);
  padding: 1.1rem 1.2rem;
}
.formatos dt {
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  color: var(--lime);
}
.formatos dd {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  color: var(--gris-claro);
}

/* --------------------------------------------------------- las cuatro paradas
   Una foto por ciudad al cierre de Callejero FC: la foto es la prueba de que la
   gira existio, no el argumento, asi que va al final y a todo el ancho — el
   mismo lugar que la tira de fotos de un servicio.

   Aca el `gap` NO es de 1px sobre `--linea` como en `.tira`: esas tres fotos son
   una sola imagen partida y se leen como una; estas cuatro son cuatro ciudades
   distintas, cada una con su nombre. Separadas, no cosidas.

   Cuatro celdas: 4 en fila desde 60rem y 2x2 debajo. Nunca 3 — es el mismo error
   que ya se corrigio en la rejilla de torneos, tres arriba y uno solo abajo se
   lee como un descuido.
   -------------------------------------------------------------------------- */
.gira {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
.gira__fotos {
  margin-top: var(--aire-titulo);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 60rem) {
  .gira__fotos {
    grid-template-columns: repeat(4, 1fr);
  }
}
.gira__ciudad {
  position: relative;
  margin: 0;
}
/* El credito de una foto que no es nuestra. Mismo tamano y color que
   `.tira__aviso` —es la misma clase de nota al pie— pero con su propia clase
   porque las dos pueden salir juntas: hoy mismo, Bogota lleva credito y ninguna
   ciudad falta, pero mientras faltaba, el aviso y el credito eran dos renglones
   distintos diciendo cosas distintas. */
.gira__credito {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  color: var(--gris-medio);
}
.gira__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04); /* el mismo trato que .tira__foto */
}
/* El hueco es el mismo de `.tira--vacia` —misma trama, misma proporcion— y por
   eso reusa `.tira__hueco` en vez de tener su propia version. */

/* La ciudad va ENCIMA de la foto, con velo: el mismo trato que `.carrusel__pie`.
   Cuatro nombres en renglon aparte partirian la fila en cuatro tarjetas. Y
   cuando la foto todavia no llego, el nombre igual se lee sobre el hueco: se ve
   que falta ESA ciudad, no un pedazo cualquiera. */
.gira__nombre {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 7vw, 2.75rem) 0.9rem 0.75rem;
  background: linear-gradient(to top, rgb(10 10 10 / 0.9), rgb(10 10 10 / 0));
  color: var(--blanco);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* --------------------------------------------------------------------- video
   Fachada, no <iframe>: lo que se pinta es el poster propio y un boton. El
   reproductor de YouTube lo inyecta vivo.js recien al darle play, asi que
   nadie se baja ~1 MB de terceros por pasar de largo. El pie lleva el enlace
   a YouTube y esa es la salida cuando no hay JavaScript.
   -------------------------------------------------------------------------- */
.video {
  margin: 2.75rem 0 0;
}
.video__fachada {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linea);
  background: var(--negro);
  cursor: pointer;
  overflow: hidden;
}
.video__poster,
.video__marco {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}
/* El iframe reemplaza al boton, asi que hereda su marco: sin esto el video
   queda sin borde justo despues del clic y el bloque "salta". */
.video__marco {
  border: 1px solid var(--linea);
}
.video__poster {
  object-fit: cover;
  transition: opacity 200ms ease-out, scale 400ms ease-out;
}
/* El triangulo se dibuja con bordes: un glifo ▶ cambia de forma segun la fuente
   que tenga el sistema, y ahi el boton principal de la seccion se ve distinto
   en cada maquina. */
.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(3.75rem, 7vw, 5.25rem);
  height: clamp(3.75rem, 7vw, 5.25rem);
  border-radius: 50%;
  background: var(--lime);
  transition: scale 200ms ease-out;
}
.video__play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  /* Optico, no geometrico: el centro visual de un triangulo cae a la izquierda
     de su caja, asi que se corre a la derecha o se ve descentrado. */
  translate: 12% 0;
  border-style: solid;
  border-width: 0.72em 0 0.72em 1.15em;
  border-color: transparent transparent transparent var(--negro);
  font-size: clamp(1rem, 1.9vw, 1.4rem);
}
.video__fachada:hover .video__poster {
  opacity: 0.72;
  scale: 1.02;
}
.video__fachada:hover .video__play {
  scale: 1.07;
}
/* Debajo del cuadro va una sola linea, y es el enlace: el nombre del video y su
   descripcion estuvieron aca y se quitaron (el poster ya muestra de que se
   trata). El enlace se queda porque sin JavaScript es la unica salida. */
.video__pie {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  color: var(--gris-medio);
}
.video__pie a {
  white-space: nowrap;
}

/* La fachada dentro de una banda de /servicios, donde ocupa el lugar que en los
   otros bloques ocupa la tira de fotos. Hoy la usa un solo caso: el videoclip de
   «Vivo por Ella», que no tiene ni una foto nuestra.

   El tope de ancho no es decorativo. La tira son tres celdas 4/3 a lo ancho de
   la banda (~1248px), o sea 311px de alto; un 16/9 a ese mismo ancho mide 702px
   y el bloque del videoclip pesaria el doble que los otros cinco solo por llevar
   video. A 34rem el cuadro queda en ~306px de alto, que es el alto de la tira:
   asi la seccion mantiene su ritmo y ningun caso grita mas que los demas.

   El margen de arriba se anula porque `.servicio__galeria` ya pone el suyo; el
   de `.video` esta calculado para la seccion suelta de Inicio. */
.video--servicio {
  max-width: 34rem;
  margin-top: 0;
}

/* ---------------------------------------------------------- otros servicios
   Los casos que no son transmitir un torneo —hoy seis, y crecen—. Cada uno es
   una banda con la marca a la izquierda, el relato a la derecha y la tira de
   fotos cruzando las dos columnas: la foto es la prueba de que el evento
   existio, va abajo y a todo el ancho. Por debajo de 52rem se apila y la marca queda de encabezado.
   -------------------------------------------------------------------------- */
.servicios {
  margin-top: 3rem;
  display: grid;
  gap: 0;
}
/* Cuando el titulito de «Ejemplos de lo que hemos hecho» abre la lista, el que
   separa es el: la reja no vuelve a separar o quedan 6rem de aire muerto. */
.sub + .servicios {
  margin-top: 1.4rem;
}
.servicio {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: 1.5rem clamp(1.75rem, 4vw, 3.25rem);
  padding: 2.25rem 0;
  border-top: 1px solid var(--linea);
}
.servicio:last-child {
  border-bottom: 1px solid var(--linea);
}
.servicio__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
.servicio__logo {
  max-width: min(100%, 9rem);
  max-height: 2.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) brightness(1.9);
}
.servicio__marca .marca__nombre {
  color: var(--blanco);
  line-height: 1;
}
.servicio__que {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gris-medio);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  line-height: 1.4;
}
.servicio__titulo {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
}
.servicio__cuerpo > p {
  margin: 0.9rem 0 0;
  color: var(--gris-claro);
  font-size: 0.9375rem;
  overflow-wrap: break-word;
}
.hicimos {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.hicimos li {
  padding-left: 1.3rem;
  position: relative;
  color: var(--gris-claro);
  overflow-wrap: break-word;
}
/* Marca de lista propia: el paralelogramo de la etiqueta, en chiquito. */
.hicimos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.2rem;
  background: var(--lime);
  transform: skewX(var(--sesgo));
}
/* El enlace a la pieza publicada afuera. Cierra el relato del caso, asi que
   pesa como la lista de al lado y no como letra chica: sin subrayado en reposo,
   la fila de vinetas lima ya marca el bloque. La flecha se pega al texto con un
   &nbsp; en el HTML —no con `nowrap`, que en 320px desbordaria la caja. */
.servicio__enlace {
  margin: 1.2rem 0 0;
  font-size: 0.9375rem;
}
.servicio__enlace a {
  text-decoration: none;
  font-weight: 700;
}
.servicio__enlace a:hover {
  text-decoration: underline;
}
.servicio__galeria {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}
@media (max-width: 52rem) {
  .servicio {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .servicio__marca {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1rem;
  }
  .servicio__que {
    flex-basis: 100%;
  }
}

/* ------------------------------------------------------------------- cifras */
/* La cifra mayor abre la sección al doble de tamaño. Seis cajas iguales hacían
   que ninguna pesara; acá el tamaño ES la jerarquía: primero cuánto tiempo nos
   dio la gente, y debajo lo que lo sostiene. */
.cifra-mayor {
  display: block;
  margin-top: 3rem;
  background: var(--negro);
  outline: 1px solid var(--linea);
  padding: 2.25rem 1.6rem 1.9rem;
}
.cifra-mayor__valor {
  display: block;
  font-family: var(--titular);
  /* -30% en los tres valores el 2026-08-21, por pedido de Juanes: a 7.5rem el
     número se comía la pantalla y el rótulo —que es el que dice QUIÉN vio a
     quién— quedaba de pie de foto. Sigue siendo la cifra más grande de la
     página, que es lo que sostiene la jerarquía.
     El mínimo se escala igual porque bajarlo solo ayuda: existía para que
     3.505.977 —nueve glifos— quepa en una línea a 320px, y a 2.1rem sobra.
     Con tabular-nums cada dígito ocupa lo mismo y no baila al cambiar. */
  font-size: clamp(2.1rem, 8.4vw, 5.25rem);
  line-height: 0.9;
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cifra-mayor__rotulo {
  display: block;
  margin-top: 0.6rem;
  font-weight: 700;
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  color: var(--lime);
}
.cifra-mayor__equivale {
  margin-top: 1rem;
}
.cifra-mayor__pie {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  color: var(--gris-medio);
}

/* Columnas declaradas, no auto-fit: con seis cifras el auto-fit daba seis
   columnas de ~277px y «21.129.478» —diez glifos, sin espacios donde partir—
   se salía de su caja con el último dígito cortado.

   ⚠️ En TELÉFONO va UNA sola columna, y no es una decisión de gusto: está
   medida. A 320px una celda de dos columnas deja 91px de texto útil y
   «120.000» mide 109; a 390px deja 126 y «410.121.413» mide 153. O sea que en
   dos columnas los números de siete glifos ya se salían —desde antes de las
   cifras de Meta— y los de nueve se salen hasta en un iPhone de 430px. No se
   veía porque `body` tiene overflow-x: hidden: el dígito se monta sobre el
   borde de la celda y la página no se desplaza, así que el chequeo de desborde
   no lo cazaba. Ahora `mirar.py` mide el texto contra su celda y avisa.

   La alternativa era encogerle la letra a los números largos: a 320px había
   que bajarlos a ~17px, del tamaño de su propio rótulo. Un número que no se
   puede leer no es una cifra, es una nota al pie.

   El corte va en 34rem (544px) porque ahí la celda de dos columnas da 202px de
   texto útil y el número más largo mide 153. */
.cifras {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 1px;
}
@media (min-width: 34rem) {
  .cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Total impar: la ultima cifra quedaba sola en su renglon con un hueco negro
     al lado, y un hueco al lado de una tarjeta se lee como una tarjeta que
     falta —es el mismo problema que dejo la rejilla de torneos en 1 o 2
     columnas y nunca 3—. Estira al ancho completo. Se vio con nueve cifras en
     la captura de movil el 2026-08-18.

     Vive dentro de este media query: en una columna no tiene nada que hacer, y
     en tres no hace falta porque construir.mjs obliga a que el total sea
     multiplo de 3 y ahi la ultima fila siempre cierra. */
  .cifras > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 56rem) {
  .cifras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cifras > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}
.cifra {
  background: var(--negro);
  outline: 1px solid var(--linea);
  padding: 1.7rem 1.4rem;
}
/* ⚠️ El número va BLANCO y el rótulo LIMA, no al revés (Juanes, 2026-08-21).
   Es la única sección donde el lima no pinta el dato: nueve números lima en
   rejilla eran nueve acentos peleándose y ninguno destacaba. Blanco los deja
   leerse como una tabla y el lima pasa a lo que hay que leer para entenderlos
   —el rótulo—. Va en las dos escalas, la destacada y la de la rejilla: mezclar
   las dos se lee como un error de build. */
.cifra__valor {
  display: block;
  font-family: var(--titular);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 0.95;
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
}
.cifra__rotulo {
  display: block;
  margin-top: 0.55rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--lime);
}
.cifra__pie {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--gris-medio);
}
/* Hueca y no sólida: la etiqueta llena es de la cifra mayor, y dos rellenos
   lima en la misma pantalla se pelean. Acá basta el contorno. */
.cifra__equivale {
  margin-top: 0.6rem;
  background: transparent;
  color: var(--lime);
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: 0.6875rem;
}

/* ------------------------------------------------------------ internacional */
/* La tabla no cabe por debajo de ~340px: rueda dentro de su propia caja, y así
   el cuerpo de la página nunca se desplaza a lo ancho. */
.tabla-ancha {
  overflow-x: auto;
  margin-top: 2.5rem;
}
.resultados {
  width: 100%;
  min-width: 21rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.resultados caption {
  text-align: left;
  color: var(--gris-medio);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  padding-bottom: 0.9rem;
}
.resultados th,
.resultados td {
  text-align: left;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: 0.9375rem;
}
.resultados th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gris-medio);
}
.resultados td:first-child {
  font-family: var(--titular);
  font-size: 1.125rem;
  color: var(--lime);
  width: 5rem;
}
.resultados td:last-child {
  font-weight: 700;
  white-space: nowrap;
}
/* Texto que sigue a una etiqueta en el mismo renglón, sin pegarse a ella. */
.junto {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--gris-claro);
  font-size: 0.9375rem;
}

.claim {
  margin-top: 2rem;
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.8vw, 1.875rem);
  line-height: 1.1;
  max-width: 30ch;
}

/* ------------------------------------------------------------------- marcas
   Las rejillas de tarjetas NO pintan la reja como fondo del contenedor: con 9
   marcas la ultima fila queda incompleta y el hueco se veia como un bloque gris
   suelto. Cada celda dibuja su borde con `outline`, que no ocupa espacio y se
   solapa en el gap de 1px: la reja se ve igual y aguanta cualquier cantidad. */
.marcas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: 1px;
  margin-top: 3rem;
}
.marca {
  background: var(--negro);
  outline: 1px solid var(--linea);
  min-height: 7rem;
  padding: 1.4rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.marca img {
  max-width: min(100%, 8.5rem);
  max-height: 2.75rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.9);
  opacity: 0.85;
  transition: filter 180ms ease-out, opacity 180ms ease-out;
}
.marca:hover img {
  filter: none;
  opacity: 1;
}
.marca__nombre {
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  color: var(--gris-claro);
}

/* ------------------------------------------------------------------ historia */
.linea-tiempo {
  margin-top: 3rem;
  display: grid;
  gap: 0;
}
.hito {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) 1fr;
  gap: 1.5rem;
  padding: 1.7rem 0;
  border-top: 1px solid var(--linea);
}
.hito:last-child {
  border-bottom: 1px solid var(--linea);
}
.hito__anio {
  font-family: var(--titular);
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  line-height: 0.95;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
/* El nombre del hito va LIMA, los seis (Juanes, 2026-08-21). Es la misma regla
   que quedó escrita en las cifras dos secciones arriba: el lima no pinta el dato
   —acá el dato es el año—, pinta lo que hay que leer para entender de qué se
   trata. Va por `:is(h2, h3)` y no por el tag, porque el nivel cambia según la
   página que encabece la sección.

   OJO con el año: `.hito p` le gana a `.hito__anio` (clase+tag le gana a clase
   sola), así que su `font-size` y su `color` de abajo están muertos y el año
   sale a 0.9375rem gris. Se deja así a propósito —un año lima al lado de un
   título lima son dos acentos peleándose, que es justo lo que se descartó en las
   cifras—, pero si algún día se quiere el año grande, no alcanza con tocar
   `.hito__anio`: hay que subirle la especificidad. */
.hito :is(h2, h3) {
  font-size: 1.3125rem;
  margin-bottom: 0.55rem;
  color: var(--lime);
}
.hito p {
  margin: 0;
  color: var(--gris-claro);
  font-size: 0.9375rem;
}
@media (max-width: 40rem) {
  .hito {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* ----------------------------------------------------------------- preguntas */
/* Ocho pares de pregunta y respuesta al cierre de /nosotros, en dos columnas.
   Es la misma pieza que la linea de tiempo —filas separadas por una linea de un
   pixel— porque es la misma clase de contenido: entradas discretas que se leen
   sueltas. Sin acordeon a proposito, y esto no es una preferencia visual: lo
   plegado no lo encuentra Ctrl+F ni lo extrae el asistente que arma una
   respuesta, y ahorrar ocho renglones al final de una pagina no vale eso.
   El borde de abajo lo cierra el contenedor y no la ultima tarjeta: asi no
   depende de que el total de preguntas sea par. */
.preguntas {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
  border-bottom: 1px solid var(--linea);
}
.pregunta {
  padding: 1.6rem 0;
  border-top: 1px solid var(--linea);
}
/* Por clase y con :is(), nunca por tag: la seccion baja de h3 a h4 —o sube—
   segun que pagina la lleve, y una regla `.pregunta h3` se caeria sola. */
.pregunta :is(h2, h3, h4) {
  font-size: 1.0625rem;
  margin-bottom: 0.6rem;
}
.pregunta p {
  margin: 0;
  color: var(--gris-claro);
  font-size: 0.9375rem;
}
/* Una columna antes que las demas rejillas: la respuesta son 40 a 60 palabras y
   a la mitad de 60rem quedan renglones de seis palabras. */
@media (max-width: 62rem) {
  .preguntas {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* ------------------------------------------------------------------ contacto */
.contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  margin-top: 3rem;
}
.persona {
  background: var(--negro);
  outline: 1px solid var(--linea);
  padding: 1.6rem 1.4rem;
}
.persona :is(h2, h3) {
  font-size: 1.1875rem;
}
.persona__cargo {
  display: block;
  color: var(--gris-medio);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  margin: 0.3rem 0 0.9rem;
}
.persona a {
  display: block;
  font-size: 0.9375rem;
  overflow-wrap: break-word;
}

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 3rem;
  background: var(--linea);
  border: 1px solid var(--linea);
  list-style: none;
  padding: 0;
}
.redes li {
  flex: 1 1 9rem;
  background: var(--negro);
  outline: 1px solid var(--linea);
}
/* La celda se selecciona por `.red`, NO por `.redes a, .redes span`: ese
   selector alcanzaba tambien a los <span> de adentro y les metia 1.2rem de
   relleno a cada uno, que era el hueco muerto entre el nombre y el usuario. */
.red {
  display: grid;
  justify-items: start;
  gap: 0.55rem;
  padding: 1.35rem 1.1rem;
  text-decoration: none;
  color: var(--blanco);
  transition: background-color 140ms ease-out;
}
a.red:hover {
  background: var(--superficie-alta);
}
/* El glifo manda en la celda: es lo primero que se reconoce, antes de leer.
   Va en rem —no en em— porque no acompaña a un texto, encabeza la celda. */
.icono--red {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gris-claro);
  transition: color 140ms ease-out;
}
a.red:hover .icono--red {
  color: var(--lime);
}
.red__nombre {
  display: block;
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1;
}
.red__dato {
  display: block;
  font-size: 0.8125rem;
  color: var(--gris-medio);
  font-variant-numeric: tabular-nums;
  margin-top: -0.2rem;
}
/* Una red sin URL confirmada sale como <span>, no como <a>: la celda existe
   pero no enlaza, y se apaga para que se lea como dato pendiente y no como
   enlace roto. Hoy no hay ninguna —Facebook era la ultima y se resolvio el
   2026-08-18—, pero construir.mjs sigue tomando este camino si vuelve a faltar. */
span.red .red__nombre,
span.red .icono--red {
  color: var(--gris-claro);
}
span.red {
  opacity: 0.72;
}

/* --------------------------------------------------------------------- pie */
.pie {
  border-top: 1px solid var(--linea);
  background: var(--superficie);
  padding-block: 3rem 2.5rem;
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-end;
  justify-content: space-between;
}
.pie img {
  width: 8.5rem;
  height: auto;
}
.pie__legal {
  font-size: 0.8125rem;
  color: var(--gris-medio);
  max-width: 46ch;
}
.pie__legal p {
  margin: 0 0 0.35rem;
  max-width: none;
}
/* Los terminos y la politica de datos viven en legal.futto.co, que es otro
   despliegue. El pie es el unico lugar de la pagina donde se enlazan: es donde
   se buscan, y no compiten con nada. */
.pie__documentos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}
.pie__documentos a {
  text-decoration: none;
  font-weight: 700;
}
.pie__documentos a:hover {
  text-decoration: underline;
}
.pie__slogan {
  font-family: var(--titular);
  text-transform: uppercase;
  font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  color: var(--blanco);
  line-height: 1.05;
  max-width: 18ch;
}