/* ============================================================
   Diego Torres - Mi Norte & Mi Sur Tour
   Prueba de landing con datos en vivo de Bandsintown.

   Los colores NO estan inventados: salen de muestrear los PNG
   oficiales del tour (logotipo, lockup y arte del album).
     amarillo #FFC546  <- color dominante opaco de mnyms.png
     crema    #FFFCF4  <- color dominante opaco de DT.png
     noche    #212028  <- fondo de la pieza FYC del album
   ============================================================ */

/* Douglas es la tipografia del album. Va en los titulares; el cuerpo
   sigue en Poppins, que es la del arte del tour. Del OTF de 918 KB se
   subseteo a latin + acentos: 123 KB en woff2. */
@font-face {
  font-family: Douglas;
  src: url("assets/douglas.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* --- paleta (un solo acento en toda la pagina: el amarillo) --- */
  --noche:        #212028;
  --noche-hondo:  #1A1A21;
  --noche-alto:   #2A2932;
  --amarillo:     #FFC546;
  --crema:        #FFFCF4;
  --crema-fuerte: rgba(255, 252, 244, .74);
  --crema-suave:  rgba(255, 252, 244, .54);
  --linea:        rgba(255, 252, 244, .13);
  --linea-fuerte: rgba(255, 252, 244, .26);

  /* --- formas: dos radios y una regla ---
     pildora para controles (botones, pills, chips)
     caja 14px para superficies (tarjetas, filas, imagenes) */
  --r-pildora: 999px;
  --r-caja:    14px;

  --display: Douglas, Archivo, "Segoe UI", sans-serif;

  --ancho:  1240px;
  --salto:  cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------ base */

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

/* la barra pegada mide 68px: sin esto, las anclas tapan el titulo */
/* overflow-x clip (no hidden, que rompe position:sticky) porque el
   mapa rompe el contenedor con 50vw, y 50vw incluye la barra de
   scroll: sin el clip aparece un desborde de ~15px */
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--noche);
  color: var(--crema);
  font-family: Archivo, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto NO es opcional: con los atributos width/height puestos,
   max-width sin esto achica el ancho y deja el alto del atributo, o
   sea que deforma cada imagen de la pagina. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

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

/* ------------------------------------------------------------ carga

   La brujula busca el rumbo, duda y asienta apuntando norte-sur; se
   queda unos segundos a proposito, es la portada de entrada al sitio.
   Sale con un fundido y no vuelve a aparecer en la misma sesion. Con
   movimiento reducido la aguja no gira y la capa se va enseguida.
   ------------------------------------------------------------ */

.carga {
  position: fixed;
  inset: 0;
  z-index: 90;               /* por encima de la barra (50) */
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 24px;
  background: var(--noche);
  transition: opacity .7s var(--salto), visibility .7s;
}
.carga--saliendo { opacity: 0; visibility: hidden; }
.carga--fuera { display: none; }

.carga__brujula { width: 128px; height: 128px; }
.carga__aro { fill: none; stroke: var(--linea-fuerte); stroke-width: 2; }
.carga__letra {
  fill: var(--crema-suave);
  font: 700 11px Archivo, sans-serif;
  letter-spacing: .1em;
}
.carga__letra--ns { fill: var(--amarillo); }

.carga__marca {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--amarillo);
}

.carga__aguja { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .carga__aguja { animation: buscarRumbo 2.2s cubic-bezier(.34, 1.3, .4, 1) infinite; }
  .carga__marca { animation: latidoMarca 2.2s ease-in-out infinite; }
}
@keyframes buscarRumbo {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(700deg); }
  58%  { transform: rotate(660deg); }
  70%  { transform: rotate(684deg); }
  80%, 100% { transform: rotate(720deg); }   /* asienta norte-sur */
}
@keyframes latidoMarca {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ------------------------------------------------------------ botones

   "Sello": rotados como un timbre de gira, con la estrella que ya
   esta en el collage de la tapa (el punto que marca la montaña). Un
   solo angulo para todo el sitio, no uno al azar por boton: eso es
   lo que lo hace leerse a proposito y no como un accidente de layout.
   ------------------------------------------------------------ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 7px;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;          /* una sola linea, nunca parte */
  cursor: pointer;
  transition: background-color .25s var(--salto),
              border-color .25s var(--salto),
              color .25s var(--salto),
              transform .12s var(--salto);
}

.boton--lleno {
  position: relative;
  background: var(--amarillo);
  color: #1A1712;                /* 11,9:1 sobre el amarillo */
  box-shadow: inset 0 0 0 1.5px rgba(26, 23, 18, .16);
  padding-left: 30px;
}

/* la perforacion de un talon de entrada, que es lo que el boton
   compra: un tren de puntitos troquelados en el borde izquierdo */
.boton--lleno::after {
  content: "";
  position: absolute;
  inset: 6px auto 6px 12px;
  width: 3px;
  background-image: radial-gradient(circle, rgba(26, 23, 18, .5) 1.1px, transparent 1.6px);
  background-size: 3px 8px;
  background-repeat: repeat-y;
  background-position: center;
}

.boton--linea {
  background: rgba(255, 252, 244, .05);   /* algo de cuerpo, no linea flotante */
  color: var(--crema);
  border-width: 2px;                      /* a 1.5px el borde se ve debil */
  border-color: var(--linea-fuerte);
}

/* la estrella solo va en los dos CTA principales del hero. Repetirla
   en las catorce filas de fechas seria ruido, no un sello: se nota
   una vez, no catorce. Es geometria via clip-path, no un icono suelto. */
.boton:not(.boton--chico)::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                      50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.boton--lleno::before { background: #1A1712; }
.boton--linea::before { background: var(--amarillo); }

/* Se probo rotar los botones como sellos y los bordes rotados se
   antialiasan mal a cualquier escala (medido con un clon a 4x):
   quedan derechos. El caracter del sello vive en la tipografia, la
   estrella y el borde grueso, no en el angulo. */
.boton:active { transform: scale(.96); }
.video:active { transform: scale(.99); }
.interruptor:active .interruptor__pista { transform: scale(.96); }

.boton--chico { min-height: 38px; padding: 0 16px; font-size: .72rem; }
.boton--lleno.boton--chico { padding-left: 24px; }
.boton--lleno.boton--chico::after { inset: 5px auto 5px 9px; }

/* ------------------------------------------------------------ barra */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  display: flex;
  align-items: center;
  background: rgba(33, 32, 40, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--salto), background-color .3s var(--salto);
}
.barra[data-pegada="si"] { border-bottom-color: var(--linea); }

.barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.barra__marca img { height: 20px; width: auto; }

.barra__nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: .9rem;
  font-weight: 500;
}
/* :not(.boton) porque `.barra__nav a` (0,1,1) le gana en especificidad
   a `.boton--lleno` (0,1,0): sin esto el boton Entradas de la barra
   quedaba con texto crema sobre el amarillo, 1,54:1. */
.barra__nav a:not(.boton) {
  color: var(--crema-fuerte);
  text-decoration: none;
  transition: color .2s var(--salto);
}

@media (max-width: 720px) {
  /* la barra queda solo con la marca: el "Ver fechas" del hero ya
     cumple la mision del boton Entradas, que ademas la apretaba */
  .barra__nav { display: none; }
}

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

.hero {
  position: relative;
  min-height: calc(100dvh - 68px);
  display: flex;
  align-items: stretch;       /* si no, sobran 22px abajo y la figura flota */
  padding-block: 36px 0;      /* la figura tiene que llegar al piso */
  overflow: hidden;
  background: var(--noche);
}

/* UN solo degradado al pie, a lo ancho de todo. Antes habia tres
   superpuestos (fondo del hero, mascara de la ilustracion y piso de la
   figura) y donde no coincidian se veia una franja. */
.hero__piso {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;   /* se ancla al hero, no al contenedor */
  height: 190px;
  background: linear-gradient(180deg,
              rgba(26, 26, 33, 0) 0%,
              rgba(26, 26, 33, .72) 52%,
              var(--noche-hondo) 100%);
  pointer-events: none;
}

/* La ilustracion del album cubre el pano derecho entero, de arriba
   abajo, fundida con una elipse anclada a la derecha: asi muere sola
   hacia el titulo, hacia arriba y hacia abajo. (Se probo con dos
   mascaras lineales cruzadas y `mask-composite`, y no compusieron: el
   borde izquierdo quedaba recto.) */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: min(82vw, 1080px);
  background: url("assets/ilustracion.webp") right top / cover no-repeat;
  opacity: .38;
  filter: saturate(.76) contrast(.94);
  -webkit-mask-image: radial-gradient(ellipse 104% 132% at 88% 34%,
                      #000 26%, rgba(0, 0, 0, .66) 60%, transparent 88%);
  mask-image: radial-gradient(ellipse 104% 132% at 88% 34%,
              #000 26%, rgba(0, 0, 0, .66) 60%, transparent 88%);
  pointer-events: none;
}

/* resplandor calido, para que el recorte se despegue de la ilustracion */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 44%;
  right: 8%;
  width: min(44vw, 560px);
  aspect-ratio: 1;
  transform: translate(0, -50%);
  background: radial-gradient(circle,
              rgba(255, 197, 70, .17) 0%,
              rgba(255, 197, 70, .05) 44%,
              transparent 70%);
  pointer-events: none;
}

.hero .contenedor {
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}

.hero__lockup {
  width: min(100%, 470px);
  margin-bottom: 22px;
  margin-inline: auto;
}

.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* centrado siempre por encima de 700px (abajo de eso, el bloque
   "TELEFONO" mas adelante lo vuelve a alinear a la izquierda a
   proposito). Antes quedaba pegado al borde izquierdo de su columna
   y se sentia desbalanceado frente a la ilustracion. */
.hero__contenido { padding-bottom: 52px; position: relative; z-index: 3; text-align: center; }

/* Antes iba centrada verticalmente y quedaba flotando, con la base
   cortada en seco. Ahora se apoya en el piso del hero, y el degradado
   la funde con la seccion siguiente. */
.hero__figura {
  position: relative;
  justify-self: end;
  align-self: end;
}


/* Va la foto del tour, que es un recorte con fondo transparente.
   La portada del disco vive en su propia seccion: repetirla aca la
   gastaba. (Se probo tambien recortar la silueta del arte a mano y
   salio deformada: el perfil de la cara se pierde, que es justo lo
   que la hace reconocible.)
   Manda la ALTURA, no el ancho: con el ancho la figura empujaba el
   hero a 872px en una ventana de 720 y los botones quedaban fuera. */
/* max-height, no height fija: con altura fija + max-width la imagen
   se APLASTA cuando la columna es mas angosta que su ancho natural
   (el navegador respeta las dos y sacrifica la proporcion). Con
   maximos en los dos ejes, la proporcion no se negocia. */
.hero__figura img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(78dvh, 660px);
  margin-inline: auto;
  filter: drop-shadow(0 26px 50px rgba(10, 9, 14, .5));
}

/* mismo patron poster que el telefono: texto arriba, figura apoyada
   al piso. Antes este rango tenia un tercer layout propio (figura
   chica arriba del titulo) y era el unico tramo donde el hero se
   veia desarmado. */
@media (max-width: 900px) {
  .hero {
    min-height: calc(100dvh - 68px);
    padding-block: 24px 0;
    background: var(--noche);
  }
  .hero .contenedor {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
  }
  .hero__contenido { order: 1; padding-bottom: 0; text-align: center; }
  .hero__figura {
    order: 2;
    justify-self: center;
    align-self: end;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .hero__figura img {
    width: auto;
    max-width: min(64%, 440px);
    max-height: 52dvh;
    object-fit: contain;
    object-position: bottom;
  }
  .hero::before { inset: 0; width: 100%; opacity: .3; }
  .hero::after { top: 30%; right: 50%; transform: translate(50%, -50%); width: 118vw; }
  .hero__lockup { margin-inline: auto; margin-bottom: 22px; }
  .hero__acciones { justify-content: center; }
}

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

.seccion { padding-block: clamp(72px, 9vw, 128px); }
.seccion--hondo { background: var(--noche-hondo); }
/* sin titular, la seccion no necesita el mismo aire que las demas */
.seccion--corta { padding-block: clamp(44px, 5.5vw, 76px); }

.seccion__titulo {
  font-family: var(--display);
  /* Douglas solo existe en Regular: sin esto, el 700 heredado de los
     h2 hace que el navegador fabrique una negrita sintetica y los
     trazos salgan empastados */
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 3.6rem);
  letter-spacing: .005em;
  margin-bottom: 14px;
}
.seccion__intro {
  max-width: 54ch;
  margin: 0 0 44px;
  color: var(--crema-fuerte);
}

/* ------------------------------------------------------------ fechas */

.mes {
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linea);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amarillo);
}
.grupo + .grupo { margin-top: 52px; }

/* El fondo del hover se extiende hacia AFUERA con margen negativo:
   asi el dia respira dentro del rectangulo sin correr el contenido,
   que sigue alineado con los titulos de mes. */
.fecha {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 22px 24px;
  margin-inline: -24px;
  border-radius: var(--r-caja);
  transition: background-color .22s var(--salto);
}
.fecha + .fecha { border-top: 1px solid var(--linea); }

.fecha__dia {
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.2vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
}
.fecha__mes {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* La ciudad en Douglas, como los titulos. Peso 400 SIEMPRE: Douglas
   solo existe en Regular y cualquier otro peso fabrica una negrita
   sintetica empastada (ya paso con los titulos de seccion).
   El venue va AL LADO, mas chico y en Archivo: cuando no esta, la
   fila no parece incompleta. El pais queda abajo. */
.fecha__ciudad {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  letter-spacing: .01em;
}
.fecha__lado {
  font-family: Archivo, "Segoe UI", sans-serif;   /* no hereda Douglas */
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--crema-suave);
}
.fecha__recinto {
  margin-top: 2px;
  font-size: .92rem;
  color: var(--crema-suave);
}
.fecha__codigo {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--crema-fuerte);
  font-variant-numeric: tabular-nums;
}

.fecha__agotado,
.fecha__pronto {
  font-size: .85rem;
  font-weight: 500;
  color: var(--crema-suave);
  white-space: nowrap;
}
.fecha__agotado { color: var(--crema-fuerte); }

@media (max-width: 760px) {
  .fecha {
    grid-template-columns: 68px 1fr;
    gap: 8px 18px;
    padding: 20px 4px;
  }
  .fecha__accion { grid-column: 2; justify-self: start; margin-top: 12px; }
}

/* la proxima parada, como cartel de embarque arriba de la lista.
   El keyart del tour aparece fundido a la derecha. */
.parada {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 40px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 197, 70, .32);
  border-radius: var(--r-caja);
  overflow: hidden;
  background: var(--noche-alto);
}
.parada::before {
  content: "";
  position: absolute;
  inset: 0 0 0 34%;
  background: url("assets/ilustracion.webp") right 35% / cover no-repeat;
  opacity: .22;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0, #000 55%);
  pointer-events: none;
}
.parada > * { position: relative; }

.parada__fecha {
  text-align: center;
  padding-right: 22px;
  border-right: 1px dashed var(--linea-fuerte);   /* el corte del talon */
}
.parada__fecha b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--amarillo);
}
.parada__fecha span {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crema-suave);
}

.parada__info small {
  display: block;
  margin-bottom: 3px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amarillo);
}
.parada__info b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
}
.parada__info b span {
  font-family: Archivo, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--crema-suave);
  vertical-align: 3px;
  margin-left: 6px;
}
.parada__info i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: .9rem;
  color: var(--crema-fuerte);
}

.parada__ir {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.parada__ir > span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .parada {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 18px;
    padding: 18px;
    margin-bottom: 30px;
  }
  .parada::before { inset: 0 0 0 20%; opacity: .14; }
  .parada__fecha { padding-right: 16px; }
  .parada__fecha b { font-size: 2.1rem; }
  .parada__ir {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- estados: cargando, error, vacio --- */

.esqueleto {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 24px 8px;
  border-top: 1px solid var(--linea);
}
.esqueleto span {
  display: block;
  height: 15px;
  border-radius: var(--r-pildora);
  background: linear-gradient(90deg,
              rgba(255, 252, 244, .06) 0%,
              rgba(255, 252, 244, .13) 50%,
              rgba(255, 252, 244, .06) 100%);
  background-size: 220% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .esqueleto span { animation: brillo 1.5s ease-in-out infinite; }
}
@keyframes brillo {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.esqueleto span:nth-child(1) { height: 34px; }
.esqueleto span:nth-child(2) { width: 58%; height: 20px; }
.esqueleto span:nth-child(3) { width: 118px; height: 40px; }

.aviso {
  padding: 30px 26px;
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  background: var(--noche-alto);
  color: var(--crema-fuerte);
}
.aviso p { margin: 0 0 18px; }
.aviso p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ album */

.album {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 6vw, 84px);
}

.album__tapa {
  border-radius: var(--r-caja);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(10, 9, 14, .6);
}

.album__singles {
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}
.album__singles li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 1.05rem;
  font-weight: 500;
}
.album__singles span {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amarillo);
}

@media (max-width: 860px) {
  .album { grid-template-columns: 1fr; }
  .album__tapa { max-width: 420px; }
}

/* ------------------------------------------------------------ mapa de la gira */

.recorrido__intro { max-width: 62ch; }
.seccion__titulo--solo { margin-bottom: 0; }   /* sin bajada, el aire lo pone .eje__cifras */

.eje__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 52px;
  margin-top: 36px;
}
.eje__cifra strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.3rem, 4vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
}
.eje__cifra span {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crema-suave);
}

.mapa { margin-top: clamp(32px, 5vw, 56px); }
/* el mapa rompe el contenedor y toma el viewport entero */
.mapa {
  position: relative;
  margin-inline: calc(50% - 50vw);
}

/* el viewBox no termina en borde seco: se funde con la seccion */
.mapa__svg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.mapa__svg { width: 100%; height: auto; overflow: visible; }

/* contornos generados desde Natural Earth, no dibujados a mano */
.mapa__tierra {
  fill: rgba(255, 252, 244, .075);
  stroke: rgba(255, 252, 244, .16);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

/* --- el cielo del album: estrellas en el oceano --- */
.estrella { fill: var(--crema); }
@media (prefers-reduced-motion: no-preference) {
  .estrella--brilla { animation: titilar 3.6s ease-in-out infinite; animation-delay: var(--e, 0s); }
}
@keyframes titilar {
  0%, 100% { opacity: .55; }
  50%      { opacity: .1; }
}

/* --- paralelos: la latitud es el tema. El ecuador apenas mas
   presente, como la linea que separa el norte del sur. --- */
.mapa__paralelo {
  stroke: rgba(255, 252, 244, .05);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mapa__ecuador {
  stroke: rgba(255, 197, 70, .22);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  vector-effect: non-scaling-stroke;
}

/* el circulo invisible que agranda el dedo: el punto dibujado mide
   7-9px reales en telefono y con eso no acierta nadie */
.marca__toque { fill: transparent; }

.marca { cursor: pointer; }

/* rotulos fijos de las ciudades por venir. El trazo oscuro de fondo
   (paint-order) los hace legibles aunque caigan sobre tierra. */
.mapa__rotulo {
  fill: var(--crema-fuerte);
  font: 600 9.5px Archivo, sans-serif;
  letter-spacing: .02em;
  paint-order: stroke;
  stroke: rgba(26, 26, 33, .8);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
@media (max-width: 700px) {
  .mapa__rotulo { display: none; }   /* en el carril serian ruido */
}


.marca__punto { fill: var(--crema-suave); transition: fill .25s var(--salto); }
/* con el filtro de desenfoque encima, el halo es un resplandor real
   y no un anillo plano: la opacidad sube porque el blur la licua */
.marca__halo  { fill: rgba(255, 197, 70, .55); }

.marca--proxima .marca__punto { fill: var(--amarillo); }


@media (prefers-reduced-motion: no-preference) {
  .marca--proxima .marca__halo { animation: latir 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes latir {
  0%, 100% { opacity: .85; transform: scale(.86); }
  50%      { opacity: .32; transform: scale(1.14); }
}

/* las rutas de vuelo: lo volado en gris, lo que falta en ambar */
.ruta {
  stroke: rgba(255, 197, 70, .4);
  stroke-width: 1.4;
  fill: none;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ruta--pasada { stroke: rgba(255, 252, 244, .15); }

@media (prefers-reduced-motion: no-preference) {
  /* las rutas aparecen DESPUES de que los puntos aterrizan */
  .mapa .ruta { opacity: 0; }
  .mapa[data-revela="visto"] .ruta {
    animation: trazarRuta .9s var(--salto) forwards;
    animation-delay: 1.15s;
  }
  /* el proximo tramo lleva el punteado andando, como un vuelo en curso */
  .mapa[data-revela="visto"] .ruta--activa {
    animation: trazarRuta .9s var(--salto) forwards,
               volar 2.6s linear infinite;
    animation-delay: 1.15s, 0s;
  }
}
@keyframes trazarRuta { to { opacity: 1; } }
@keyframes volar { to { stroke-dashoffset: -22; } }

/* el globo que reemplaza al tooltip nativo del navegador */
.mapa__globo {
  position: absolute;
  z-index: 5;
  padding: 9px 16px 10px;
  background: var(--noche-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(10, 9, 14, .55);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 15px)) scale(.94);
  transform-origin: bottom center;
  transition: opacity .16s var(--salto), transform .16s var(--salto);
  text-align: center;
  white-space: nowrap;
}
.mapa__globo::after {
  content: "";
  position: absolute;
  left: var(--flecha, 50%);   /* la flecha sigue al punto aunque el globo se corra */
  bottom: -5px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--noche-alto);
  border-right: 1px solid var(--linea-fuerte);
  border-bottom: 1px solid var(--linea-fuerte);
}

/* Cerca del techo del mapa el globo sale por DEBAJO del punto.
   La clase va DOBLADA a proposito: `.mapa__globo--abajo[data-visible]`
   empata en especificidad con la regla base `[data-visible]` que esta
   despues, y perdia: el volteo no se aplicaba nunca (las ciudades de
   España quedaban con el globo cortado fuera del mapa). */
.mapa__globo.mapa__globo--abajo {
  transform: translate(-50%, 0) scale(.94);
  transform-origin: top center;
}
.mapa__globo.mapa__globo--abajo[data-visible] { transform: translate(-50%, 0) scale(1); }
.mapa__globo.mapa__globo--abajo::after {
  bottom: auto;
  top: -5px;
  transform: translateX(-50%) rotate(225deg);
}
.mapa__globo[data-visible] {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 15px)) scale(1);
}
.mapa__globo b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--crema);
}
.mapa__globo span {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
}



/* solo se rotulan los extremos: 30 etiquetas serian ilegibles */
.mapa__extremo {
  fill: var(--crema);
  font-family: Douglas, sans-serif;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: .06em;
}
.mapa__lat {
  fill: var(--amarillo);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mapa__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 26px 0 0;
  font-size: .88rem;
  color: var(--crema-suave);
}
.llave { display: inline-flex; align-items: center; gap: 9px; }
.llave::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: var(--r-pildora);
  background: var(--crema-suave);
}
.llave--proxima::before { background: var(--amarillo); }

@media (max-width: 700px) {
  .mapa__extremo { font-size: 30px; }
  .mapa__lat     { font-size: 25px; }
}

/* ------------------------------------------------------------ controles del listado */

.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
  margin-bottom: 40px;
}
.cabecera .seccion__titulo { margin-bottom: 0; }

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--crema-fuerte);
  user-select: none;
}
.interruptor input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.interruptor__pista {
  position: relative;
  width: 40px;
  height: 23px;
  flex: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pildora);
  background: transparent;
  transition: background-color .25s var(--salto), border-color .25s var(--salto),
              transform .16s var(--salto);
}
.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 15px; height: 15px;
  border-radius: var(--r-pildora);
  background: var(--crema-suave);
  transition: transform .25s var(--salto), background-color .25s var(--salto);
}
.interruptor input:checked + .interruptor__pista {
  background: var(--amarillo);
  border-color: var(--amarillo);
}
.interruptor input:checked + .interruptor__pista::after {
  transform: translateX(17px);
  background: #1A1712;
}
.interruptor input:focus-visible + .interruptor__pista {
  outline: 2px solid var(--amarillo);
  outline-offset: 3px;
}

/* las que ya pasaron se ven, pero no compiten con las que estan a la venta */
.fecha--pasada { opacity: .55; }
.fecha--pasada .fecha__dia { color: var(--crema-suave); }

/* el sello de pasaporte: torcido y desparejo A PROPOSITO, como lo
   estampa un oficial de migraciones. (El aliasing del borde rotado,
   que en los botones era un defecto, aca es la textura.) */
.estampa {
  display: inline-block;
  padding: 5px 13px;
  border: 2px solid rgba(255, 252, 244, .38);
  border-radius: 8px 10px 7px 11px;
  transform: rotate(-8deg);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* ------------------------------------------------------------ album */

.album__reproductor {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-caja);
  color-scheme: normal;   /* el embed trae su propio tema oscuro */
}

/* --- los videos del album, dentro de la seccion del disco --- */

.album__videos { grid-column: 1 / -1; margin-top: clamp(30px, 4vw, 52px); }

.album__subtitulo {
  margin-bottom: 18px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 400;
  color: var(--crema);
}

/* la galeria del album: tres por fila, dos en tablet, una en telefono.
   `.videos` se declara despues con la misma especificidad, asi que
   estas van dobladas para ganarle por peso y no por orden. */
.videos.videos--galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .videos.videos--galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .videos.videos--galeria { grid-template-columns: 1fr; } }

.video--chico .video__play { width: 46px; height: 46px; }
.video--chico .video__play svg { width: 16px; height: 16px; }
.video--chico .video__titulo { left: 15px; right: 15px; bottom: 13px; font-size: .95rem; }

.video__con {
  display: block;
  margin-top: 1px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--amarillo);
}

/* ------------------------------------------------------------ videos */

.videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
@media (max-width: 760px) { .videos { grid-template-columns: 1fr; } }

/* Se muestra la miniatura y el iframe de YouTube recien se carga al
   hacer clic: si no, cada video baja casi un mega de scripts antes de
   que nadie le haya dado play. */
.video {
  position: relative;
  transition: transform .16s var(--salto);
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-caja);
  overflow: hidden;
  background: var(--noche-alto);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--salto), opacity .3s var(--salto);
}

.video::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(16, 15, 21, .88));
  pointer-events: none;
}

.video__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 62px; height: 62px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pildora);
  background: var(--amarillo);
  display: grid;
  place-items: center;
  transition: transform .28s var(--salto);
  z-index: 2;
}
.video__play svg { width: 22px; height: 22px; fill: #1A1712; margin-left: 3px; }

.video__titulo {
  position: absolute;
  left: 20px; right: 20px; bottom: 17px;
  z-index: 2;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--crema);
}

.video iframe { width: 100%; height: 100%; border: 0; display: block; }

.videos__mas { margin: 34px 0 0; }

/* ------------------------------------------------------------ postales de gira */

.postales {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.postales::-webkit-scrollbar { display: none; }

.postal {
  position: relative;
  flex: 0 0 clamp(180px, 22vw, 220px);
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--noche-alto);
  text-decoration: none;
}
.postal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--salto);
}
.postal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 15, 21, .3) 0%, transparent 30%,
              transparent 52%, rgba(16, 15, 21, .92) 100%);
}

/* las flechas del carrusel: en tactil no existen, ahi se arrastra */
.flechas { display: none; gap: 10px; }
@media (hover: hover) and (pointer: fine) {
  .flechas { display: flex; }
}
.flecha {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--r-pildora);
  background: transparent;
  color: var(--crema-fuerte);
  cursor: pointer;
  transition: color .2s var(--salto), border-color .2s var(--salto), opacity .2s var(--salto);
}
.flecha svg { width: 15px; height: 15px; }
.flecha:disabled { opacity: .3; cursor: default; }
.flecha:active:not(:disabled) { transform: scale(.94); }

/* el sello de la fecha, torcido como los de pasaporte de la lista */
.postal__sello {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  border: 1.5px solid rgba(255, 252, 244, .6);
  border-radius: 6px 8px 5px 9px;
  transform: rotate(7deg);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 252, 244, .85);
}

.postal__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pildora);
  background: rgba(16, 15, 21, .55);
  border: 1.5px solid rgba(255, 252, 244, .5);
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  transition: transform .25s var(--salto), background-color .25s var(--salto);
}
.postal__play svg { width: 15px; height: 15px; fill: var(--crema); margin-left: 2px; }

.postal__pie {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  text-align: left;
}
.postal__pie b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.05;
  color: var(--crema);
}
.postal__pie span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amarillo);
}
.postal:active { transform: scale(.985); transition: transform .12s var(--salto); }

/* la tarjeta de cierre: lo que no esta aca, esta en el Instagram */
.postal--ig {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px dashed var(--linea-fuerte);
  background: transparent;
  text-align: center;
  transition: border-color .25s var(--salto), background-color .25s var(--salto);
}
.postal--ig::after { content: none; }   /* sin el degradado de foto */
.postal__red { width: 30px; height: 30px; fill: var(--amarillo); }
.postal--ig b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--crema);
}
.postal--ig > span { font-size: .78rem; font-weight: 600; color: var(--crema-suave); }

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

/* el mapa ya trae su propio colchon abajo: 72 + 128 daban 200px de nada */
.pie { padding-block: 56px 44px; text-align: center; }

/* Centrado, como el cierre de un poster de gira: el lockup manda y
   todo cuelga de su eje. Antes eran dos `.contenedor` sueltos y los
   sellos quedaban flotando sin relacion con nada. */
.pie__alto,
.pie__bajo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.pie__bajo {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--linea);
}

.pie__marca { display: block; }
.pie__marca img { width: 320px; margin-inline: auto; }

/* --- redes --- */

.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pildora);
  color: var(--crema-fuerte);
  transition: color .2s var(--salto),
              border-color .2s var(--salto),
              background-color .2s var(--salto),
              transform .16s var(--salto);
}
.redes a:active { transform: scale(.94); }

.red { width: 18px; height: 18px; fill: currentColor; }

/* --- sellos --- */

/* Los tres logos salen del propio poster del tour, ya en version clara.
   Se muestran POR DEBAJO de su tamaño nativo (118, 35 y 157 px de
   ancho) para que sigan nitidos en pantallas densas. */
.sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px;                 /* 20% mas que los 30 de antes */
  opacity: .68;
  transition: opacity .3s var(--salto);
}
.sellos img { width: auto; }
.sellos img:nth-child(1) { height: 22px; }   /* Sony, horizontal: 19 +15% */
.sellos img:nth-child(2) { height: 33px; }   /* DT, monograma vertical: 29 +15% */
.sellos img:nth-child(3) { height: 17px; }   /* Dale Play, horizontal: 15 +15% */

/* --- credito --- */

.pie__nota {
  margin: 0;
  font-size: .70rem;
  color: var(--crema-suave);
}
.pie__nota a {
  color: var(--crema-fuerte);
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: 3px;
  transition: color .2s var(--salto), text-decoration-color .2s var(--salto);
}


/* ------------------------------------------------------------ hover

   Todo junto y detras de `hover: hover`: en pantalla tactil el hover
   se dispara al tocar y queda pegado hasta que tocas otra cosa, o sea
   que la fila queda iluminada despues de soltarla.
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .boton--lleno:hover { background: #FFD470; }
  .boton--linea:hover { border-color: var(--crema); background: rgba(255, 252, 244, .06); }
  .barra__nav a:not(.boton):hover { color: var(--crema); }
  .fecha:hover { background: rgba(255, 252, 244, .04); }
  .marca:hover .marca__punto { fill: var(--crema); }
  .marca--proxima:hover .marca__punto { fill: #FFD470; }
  .interruptor:hover .interruptor__pista { border-color: var(--crema); }
  .video:hover img { transform: scale(1.035); opacity: .78; }
  .video:hover .video__play { transform: translate(-50%, -50%) scale(1.09); }
  .redes a:hover {
    color: #1A1712;
    background: var(--amarillo);
    border-color: var(--amarillo);
  }
  .sellos:hover { opacity: .82; }
  .pie__nota a:hover { color: var(--crema); text-decoration-color: var(--crema); }
  .postal:hover img { transform: scale(1.05); }
  .postal--ig:hover { border-color: var(--amarillo); background: rgba(255, 197, 70, .05); }
  .postal:hover .postal__play { transform: translate(-50%, -50%) scale(1.1); background: rgba(16, 15, 21, .75); }
  .flecha:hover { border-color: var(--crema); color: var(--crema); }
}

/* ------------------------------------------------------------ entrada en escena

   Una entrada sobria y corta para todo, y UN momento propio: en el
   mapa los puntos aterrizan de norte a sur, que es literalmente de lo
   que habla el disco. El resto no compite con eso.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

  [data-revela] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .42s var(--salto), transform .42s var(--salto);
  }
  [data-revela="visto"] { opacity: 1; transform: none; }

  /* las fechas llegan por fetch: en cascada disimulan el salto del
     esqueleto al contenido, en vez de aparecer las catorce de golpe */
  .fecha {
    opacity: 0;
    animation: entrar .38s var(--salto) forwards;
    animation-delay: calc(var(--i, 0) * 38ms);
  }

  /* el momento del mapa */
  .mapa .marca {
    opacity: 0;
    transform: scale(.62);
    transform-origin: center;
    transform-box: fill-box;
  }
  .mapa[data-revela="visto"] .marca {
    animation: aterrizar .46s var(--salto) forwards;
    animation-delay: calc(var(--i, 0) * 42ms);
  }
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@keyframes aterrizar {
  from { opacity: 0; transform: scale(.62); }
  to   { opacity: 1; transform: scale(1); }
}


/* ============================================================
   TELEFONO
   Medido a 375 x 812. Lo que se arregla y por que:
   - el interruptor media 23px de alto y los iconos 42: van a 44+
   - las etiquetas de 11 a 13px suben, que en la mano no se leen
   - el hero ocupaba 578 de 812 y quedaba un tercio vacio
   - en el mapa cada punto media 1,6px reales: se agrandan por CSS
   - los 6 videos apilados eran scroll puro: pasan a carrusel
   ============================================================ */

@media (max-width: 700px) {

  /* --- ritmo general --- */
  .contenedor { padding-inline: 20px; }
  .seccion { padding-block: clamp(56px, 13vw, 84px); }
  .seccion--corta { padding-block: 34px; }
  .seccion__titulo { font-size: clamp(2.1rem, 9.5vw, 2.9rem); }
  .seccion__intro { font-size: 1rem; margin-bottom: 32px; }

  /* --- hero: llena la pantalla en vez de dejar un tercio vacio --- */
  .hero {
    min-height: calc(100dvh - 68px);
    padding-block: 20px 0;
    text-align: left;
  }
  .hero .contenedor {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
  }
  .hero__contenido {
    order: 1;
    text-align: left;
    padding-bottom: 0;
    padding-top: 8px;
  }
  .hero__figura {
    order: 2;
    justify-self: center;
    align-self: end;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  /* la figura desborda el padding lateral a proposito: el limite era
     el ancho del contenedor y quedaban 124px de aire muerto arriba */
  .hero__figura img {
    width: min(calc(100% + 64px), 500px);
    max-width: none;
    height: auto;
    max-height: 56dvh;
    margin-inline: -32px;
    object-fit: contain;
    object-position: bottom;
  }
  /* mismo ancho que los botones, bordes alineados: a 340px fijos
     quedaba 3px mas angosto y arrancaba corrido */
  .hero__lockup { width: 100%; margin-inline: auto; margin-bottom: 26px; }
  .hero__acciones { justify-content: flex-start; gap: 10px; }
  .hero__acciones .boton { flex: 1 1 auto; min-width: 44%; }
  .hero::before {
    inset: 0;
    width: 100%;
    opacity: .32;
    background-image: url("assets/ilustracion-alta.webp");
    background-position: center top;
  }
  .hero__piso { height: 150px; }

  /* --- targets: nada por debajo de 44px --- */
  .boton { min-height: 46px; }
  /* el padding generico pisaba el hueco del troquel y los puntitos
     quedaban pegados al texto */
  .boton--chico { min-height: 40px; padding: 0 16px; }
  .boton--lleno.boton--chico { padding-left: 27px; }
  .boton--lleno.boton--chico::after { inset: 6px auto 6px 10px; }
  .barra { height: 62px; }
  .barra__marca { display: flex; align-items: center; min-height: 44px; }
  .barra__marca img { height: 17px; }

  /* el interruptor medía 23px de alto: el area tactil sube a 46 */
  .cabecera { gap: 6px 20px; }
  .interruptor { min-height: 46px; padding: 6px 0; font-size: .95rem; }
  .interruptor__pista { width: 44px; height: 26px; }
  .interruptor__pista::after { width: 18px; height: 18px; }
  .interruptor input:checked + .interruptor__pista::after { transform: translateX(18px); }

  /* --- fechas: el boton vuelve a la misma linea --- */
  /* Tres columnas SIEMPRE. Con el boton abajo la fila medía 141px y
     catorce fechas eran 1974px de scroll. */
  .fecha {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
    padding: 13px 0;
    margin-inline: 0;    /* sin hover, el sangrado del escritorio no aplica */
  }
  .fecha__cuando { text-align: center; }
  .fecha__dia { font-size: 1.75rem; }
  .fecha__mes { font-size: .8rem; margin-top: 1px; letter-spacing: .1em; }
  .fecha__ciudad { font-size: 1.2rem; line-height: 1.2; }
  .fecha__recinto { font-size: .84rem; }
  .fecha__accion { grid-column: auto; justify-self: end; margin-top: 0; }
  .fecha__accion .boton { min-height: 38px; padding: 0 12px; font-size: .72rem; }
  .fecha__accion .boton--lleno { padding-left: 23px; }
  .fecha__ciudad { overflow-wrap: anywhere; }
  .fecha__agotado, .fecha__pronto { font-size: .8rem; }
  .mes { font-size: .84rem; }
  .eje__cifra span { font-size: .8rem; }
  .album__singles span, .video__con { font-size: .86rem; }

  /* --- album --- */
  .album { gap: 26px; }
  .album__tapa { max-width: 300px; margin-inline: auto; }
  .album__subtitulo { font-size: 1.25rem; }

  /* --- videos: carrusel en vez de seis bloques apilados --- */
  .videos {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    margin-inline: -20px;
    padding-inline: 20px 20px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .videos::-webkit-scrollbar { display: none; }
  .videos .video {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .videos--galeria .video { flex-basis: 74%; }
  .video__titulo { font-size: 1rem; left: 16px; right: 16px; bottom: 14px; }
  .video__con { font-size: .84rem; }
  .video__play { width: 54px; height: 54px; }

  /* --- mapa: los puntos son ilegibles al tamaño del viewBox --- */
  /* el mapa es un carril: se arrastra con el dedo hacia España */
  .mapa {
    margin-top: 46px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mapa::-webkit-scrollbar { display: none; }
  .mapa__svg { width: 200%; }   /* el doble de la pantalla: eso es el carril */


  /* el globo con cuerpo de dedo, no de cursor */
  .mapa__globo { padding: 12px 20px 13px; }
  .mapa__globo b { font-size: 1.35rem; }
  .mapa__globo span { font-size: .88rem; }
  /* Con la ventana recortada a las Americas la escala visual se
     duplica: los radios bajan a la mitad para que el cluster
     argentino respire (medido: r7 con el recorte daba 10,5px). */
  .marca__punto { r: 4.5; }
  .marca--proxima .marca__punto { r: 6; }
  .marca__halo { r: 11; }
  /* la tierra sube un punto para que los grises no se confundan */
  .mapa__tierra { fill: rgba(255, 252, 244, .11); stroke-width: 1.5; }
  .eje__cifras { gap: 20px 30px; margin-top: 26px; }
  .eje__cifra strong { font-size: 2.2rem; }
  .eje__cifra span { font-size: .74rem; }
  .mapa__leyenda { font-size: .92rem; margin-top: 20px; padding-inline: 20px; }

  /* --- pie --- */
  .pie { padding-block: 48px 34px; }
  .pie .contenedor { gap: 30px; }
  .pie { padding-block: 40px 34px; }
  .pie__alto, .pie__bajo { gap: 22px; }
  .pie__bajo { margin-top: 30px; padding-top: 26px; }
  .pie__marca img { width: 236px; }

  /* Siete circulos de 44 en 308px de ancho util se TOCAN (medido:
     0px entre uno y otro). El circulo dibujado baja a 38 y deja 6px
     de aire, y el area tactil sigue en 44 con un anillo invisible. */
  /* el grid vive en un flex centrado y se encoge al contenido, asi
     que el aire tiene que ser gap explicito: 7x38 + 6x7 = 308 justo */
  .redes {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: 0 7px;
    justify-items: center;
  }
  .redes a { position: relative; width: 38px; height: 38px; }
  .redes a::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: var(--r-pildora);
  }
  .red { width: 16px; height: 16px; }

  .sellos { gap: 31px; }   /* el mismo 20% que en escritorio */
  /* Antes solo el DT tenia override movil, asi que heredaba el +15%
     de escritorio (22/17) mientras el DT se inflaba aparte a 37: en
     una pantalla angosta esa mezcla se veia grande y despareja.
     Los tres bajan juntos, y el DT se acerca al alto de Sony en vez
     de duplicarlo. */
  /* +15% a los sellos y -15% al credito: el nombre del pie competia
     con los logos del tour, y manda el tour */
  .sellos img:nth-child(1) { height: 20px; }
  .sellos img:nth-child(2) { height: 24px; }
  .sellos img:nth-child(3) { height: 15px; }
  .pie__nota { font-size: .76rem; }
  .pie__nota a { display: inline-block; padding-block: 8px; }

  /* el mapa cierra la pagina y ya trae su colchon: 84 + 52 sobraban */
  #recorrido { padding-bottom: 40px; }
}

/* pantallas muy angostas */
@media (max-width: 380px) {
  .contenedor { padding-inline: 16px; }
  .fecha { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 0 10px; }
  .fecha__dia { font-size: 1.6rem; }
  .fecha__accion .boton { padding: 0 10px; font-size: .68rem; }
  .fecha__accion .boton--lleno { padding-left: 21px; }
  .videos .video { flex-basis: 88%; }
}