/* ============================================================
   SPORTS TRAVEL COLOMBIA — estilos del homepage
   ============================================================ */

/* El hero vive ahora en shared/hero-carrusel.css (carrusel de
   programas reales). El .sr-only del <h1> visualmente oculto sigue
   haciendo falta en cualquier página que tenga un h1 fuera de flujo. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ================= DESTINOS (lista hover) ================= */
.destinos {
  padding-top: clamp(70px, 9vw, 130px);
  padding-left: 0;
  padding-right: 0;
}
.destinos .section-head { padding: 0 var(--pad); }
/* `container-type: inline-size` está aquí para que el nombre de cada fila pueda
   medirse contra el ancho REAL de la lista (ver la nota del `.name` en la media
   query de 860). Se pone en la <ul> y no en la fila para crear un solo contexto
   de contención en vez de seis. No cambia nada visible: la lista es un bloque,
   su ancho ya venía del padre, y no cuelga de ella nada posicionado en absoluto
   (el ::before del hover vive dentro de .dest-row, que es su propio relative). */
.dest-list {
  list-style: none; border-top: 1px solid var(--line); position: relative;
  container-type: inline-size;
}
.dest-row {
  display: block;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.dest-row .row-inner {
  display: grid;
  grid-template-columns: 70px 1fr auto auto;
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(20px, 3.2vw, 42px) var(--pad);
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease-out);
}
.dest-row .num {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-3);
  letter-spacing: 0.1em;
}
.dest-row .name {
  font-family: var(--font-display);
  font-size: clamp(46px, 7.5vw, 124px);
  line-height: 0.95;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(33,27,18,0.55);
  transition: color 0.35s, -webkit-text-stroke-color 0.35s;
  white-space: nowrap;
}
.dest-row .meta {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: right;
  transition: color 0.3s;
}
.dest-row .go {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: background 0.3s, transform 0.4s var(--ease-back), border-color 0.3s, color 0.3s;
}
.dest-row::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--row-accent, var(--red));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease-out);
  z-index: 1;
}
.dest-row:hover::before { transform: scaleY(1); transform-origin: top; }
.dest-row:hover .row-inner { transform: translateX(18px); }
/* Al rellenarse con el color de acento, el texto pasa a tinta para máximo contraste */
.dest-row:hover .name { color: #1a160e; -webkit-text-stroke-color: transparent; }
.dest-row:hover .num, .dest-row:hover .meta { color: rgba(26,22,14,0.78); }
.dest-row:hover .go {
  background: #1a160e; color: #f6efdd;
  border-color: #1a160e;
  transform: rotate(-45deg) scale(1.1);
}
@media (max-width: 860px) {
  .dest-row .row-inner { grid-template-columns: 40px 1fr auto; }
  .dest-row .meta { display: none; }
  /* ⚠️ El suelo de 46px del clamp NO puede quedarse fijo aquí abajo. El nombre
     lleva `white-space: nowrap`, así que el min-content de la pista `1fr` es la
     palabra entera y la rejilla no puede encogerla: por debajo de 389px de
     ancho, «EXPEDICIONES» a 46px (233px) empuja la flecha fuera de la pantalla
     —64px medidos a 320px— y el `overflow-x: hidden` del body la recorta en
     silencio, que es justo el fallo que no se ve.

     Así que el cuerpo pasa a repartirse lo que queda: 156px es todo lo demás de
     la fila a estos anchos (padding 20+20, número 40, los dos huecos 12+12 y la
     flecha 52). 0,192 es el inverso de la proporción de «EXPEDICIONES» en Anton
     —233px de ancho por cada 46px de cuerpo— con un pelo de holgura; el nombre
     más largo cabe justo y con él caben los otros cinco.

     Va en `cqi` y no en `vw` a propósito: `vw` incluye la barra de scroll y en
     una ventana estrecha de escritorio se pasaría ~15px, que es exactamente el
     margen que no hay. `cqi` mide el ancho real de la .dest-list.

     Desde 396px de ancho manda otra vez el 46 de siempre, así que en la inmensa
     mayoría de teléfonos no cambia nada. Medido de 320 a 430px el 2026-08-23. */
  .dest-row .name { font-size: min(46px, calc((100cqi - 156px) * 0.192)); }
}

/* ================= MUNDIAL 2026 ================= */
/* Este bloque hoy no lo usa ninguna página (no hay ningún .mundial en el HTML),
   pero le quito el radial azul igual que al .sp-cta para que, si la sección
   vuelve algún día, no reaparezca el brillo de color. */
.mundial {
  --accent: var(--c-futbol);
  --accent-t: var(--c-futbol-t);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.mundial .balls-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.mundial .mundial-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 980px) { .mundial .mundial-grid { grid-template-columns: 1fr; } }
.mundial .hint-kick {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.mundial .hint-kick::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-futbol);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,143,255,0.6); }
  60% { box-shadow: 0 0 0 12px rgba(30,143,255,0); }
}
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 28px 0;
  max-width: 560px;
}
.countdown .cd-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 8px 14px;
  text-align: center;
}
.countdown .cd-num {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.countdown .cd-lab {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 8px;
}
.facts {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  flex-wrap: wrap;
  margin-top: 30px;
}
.facts .fact .f-num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  color: var(--c-futbol);
  line-height: 1;
}
.facts .fact .f-lab {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 6px;
  font-weight: 700;
}
.mundial .photo-stack { position: relative; height: clamp(380px, 46vw, 600px); }
.mundial .photo-stack .ph {
  position: absolute;
  box-shadow: 0 26px 70px rgba(40,30,12,0.24);
}
.mundial .photo-stack .ph-a {
  width: 72%; height: 78%;
  top: 0; right: 0;
  rotate: 2deg;
}
.mundial .photo-stack .ph-b {
  width: 52%; height: 56%;
  bottom: 0; left: 0;
  rotate: -3deg;
  border: 4px solid var(--bg-2);
}
.mundial .photo-stack .badge-26 {
  position: absolute;
  top: -26px; left: 8%;
  z-index: 3;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 28px;
  padding: 12px 20px 10px;
  border-radius: 14px;
  rotate: -6deg;
  box-shadow: 0 14px 40px rgba(232,32,46,0.35);
  animation: bob 3.8s ease-in-out infinite;
}

/* ================= F1 ================= */
/* Dos variables, no una: --accent pinta superficies (el filete del eyebrow, el
   contorno de .d-outline-accent, la estrella del marquee) y --accent-t es la
   misma familia en versión tinta, para cuando el acento tiene que LEERSE sobre
   el crema. Ver la nota del .eyebrow en stc.css. */
.f1 {
  --accent: var(--c-f1);
  --accent-t: var(--c-f1-t);
  overflow: hidden;
  background: var(--bg);
}
.f1 .f1-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 980px) { .f1 .f1-grid { grid-template-columns: 1fr; } }
.f1 .tire {
  position: absolute;
  right: -180px;
  top: 50%;
  margin-top: -260px;
  width: 520px; height: 520px;
  z-index: 1;
  opacity: 0.5;
  will-change: transform;
  pointer-events: none;
}
@media (max-width: 980px) { .f1 .tire { width: 380px; height: 380px; right: -150px; margin-top: -190px; opacity: 0.28; } }
.f1 .speedlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 120px,
    rgba(232,32,46,0.06) 120px 124px
  );
  z-index: 0;
  animation: lines-slide 1.4s linear infinite;
}
@keyframes lines-slide {
  from { background-position: 0 0; }
  to { background-position: 248px 0; }
}
.f1 .ph-f1 { height: clamp(340px, 42vw, 560px); box-shadow: 0 26px 70px rgba(40,30,12,0.24); }

/* ================= PROGRAMAS — "Filtros por pasión" ================= */
.programas {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: clamp(90px, 12vw, 180px);
  padding-bottom: clamp(90px, 12vw, 180px);
}
.pg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* ---------- Chips de filtro ---------- */
.pg-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-chips button {
  appearance: none;
  background: transparent;
  border: 1.5px solid var(--line-2);
  color: var(--text-2);
  font-family: inherit;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.pg-chips button:hover { color: var(--cream); border-color: var(--cream); }
.pg-chips button.on { background: var(--cream); border-color: var(--cream); color: var(--bg); }

/* ---------- Cuadrícula ---------- */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1020px) { .pg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pg-grid { grid-template-columns: 1fr; } }

.pg-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.35s var(--ease-out), border-color 0.3s;
}
.pg-card:hover { border-color: var(--pc, var(--yellow)); transform: translateY(-8px); }
.pg-card.hide { display: none; }
.pg-card.pop { animation: pg-pop 0.45s var(--ease-out) both; }
@keyframes pg-pop {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.pg-img { height: clamp(150px, 16vw, 200px); overflow: hidden; position: relative; }
.pg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.5s var(--ease-out), filter 0.4s;
}
.pg-card:hover .pg-img img { transform: scale(1.08); filter: saturate(1.1); }
.pg-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: var(--pc, var(--red));
  color: #07070b;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.pg-body { padding: 16px 20px 20px; }
.pg-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}
.pg-card p { color: var(--text-2); font-size: 15.5px; margin: 6px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .pg-card.pop { animation: none; }
}

/* ================= QUIÉNES SOMOS ================= */
.somos { text-align: center; }
.somos .quote {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 54px);
  line-height: 1.25;
  max-width: 24ch;
  margin: 30px auto 0;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.somos .quote .w { opacity: 0.16; transition: opacity 0.5s; }
.somos .quote .w.lit { opacity: 1; }
.somos .quote .hl { color: var(--red); }
.timeline {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.timeline .tl-chip {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--text-2);
  transition: all 0.3s var(--ease-out);
}
.timeline .tl-chip:hover {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
  transform: translateY(-4px) rotate(-2deg);
}
.timeline .tl-chip.now {
  background: var(--c-futbol);
  border-color: var(--c-futbol);
  color: #fff;
}

/* ================= GALERÍA — "Pasajeros y grupos" (álbumes vintage) ================= */
.galeria { background: var(--bg); border-top: 1px solid var(--line); }
.galeria-pol { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.galeria-pol .section-head { margin-bottom: clamp(30px, 4vw, 52px); }

/* rejilla de portadas — 3 columnas */
.covers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
}
@media (max-width: 760px) { .covers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .covers { grid-template-columns: 1fr; } }

/* portada estilo print vintage (polaroid) */
.cover {
  background: var(--surface);
  padding: 9px 9px 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  border: 1px solid rgba(33, 27, 18, 0.08);
  box-shadow: 0 8px 22px rgba(40, 30, 12, 0.18);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
  will-change: transform;
}
.cover:nth-child(3n) { transform: rotate(-1deg); }
.cover:nth-child(3n+2) { transform: rotate(0.8deg); }
.cover:hover { transform: translateY(-7px) rotate(0deg) scale(1.025); box-shadow: 0 20px 44px rgba(40, 30, 12, 0.3); z-index: 3; }
.cover .pic {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, #d9cca8, #d9cca8 11px, #cfc09a 11px, #cfc09a 22px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover .pic > .lbl { font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.05em; color: #8a7c5c; text-align: center; padding: 0 12px; line-height: 1.6; }
.cover .pic .ph-ico { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; opacity: 0.4; border: 1.5px solid #8a7c5c; border-radius: 3px; z-index: 2; }
/* cinta superior tipo washi */
.cover .tape { position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-1.5deg); width: 78px; height: 20px; background: var(--tape, rgba(180, 69, 46, 0.5)); opacity: 0.8; z-index: 4; }
.cover .tape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.25)); }
/* badge año sobre la foto */
.cover .yr { position: absolute; right: 9px; bottom: 9px; z-index: 3; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 0.8; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.cover .meta { padding: 11px 5px 13px; }
.cover .nm { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 0.96; color: var(--cream); text-transform: uppercase; }
.cover .loc { font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.cover .open { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--acc, var(--red)); }
.cover .open .arr { transition: transform 0.25s var(--ease-out); }
.cover:hover .open .arr { transform: translateX(4px); }

/* ====================== OVERLAY · álbum completo ======================
   ⚠️ z-index estaba en 200, o sea POR DEBAJO del nav (900), del botón flotante
   de WhatsApp (800) y de la franja de progreso (950): los tres se pintaban
   encima de un modal a pantalla completa. Va a 960, el mismo que .prog-ov, que
   es el que ya tenía bien resuelta la capa de "modal". */
.album-ov { position: fixed; inset: 0; z-index: 960; display: none; }
.album-ov.open { display: block; }
.album-ov .scrim { position: absolute; inset: 0; background: rgba(20, 15, 8, 0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.35s; }
.album-ov.open .scrim { opacity: 1; }
.album-sheet { position: absolute; inset: clamp(12px, 3vw, 40px); background: var(--bg); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); transform: translateY(24px) scale(0.985); opacity: 0; transition: transform 0.4s var(--ease-out), opacity 0.4s; }
.album-ov.open .album-sheet { transform: none; opacity: 1; }
.ov-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: clamp(20px, 3vw, 34px) clamp(20px, 4vw, 44px) 18px; position: relative; z-index: 6; border-bottom: 1px solid var(--line); }
.ov-head .title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ov-head .yr { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6vw, 76px); line-height: 0.78; color: var(--acc, var(--red)); }
.ov-head .nm { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 46px); line-height: 0.9; color: var(--cream); text-transform: uppercase; }
.ov-head .loc { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-top: 7px; }
.ov-head .count { font-size: 11.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ov-head .count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc, var(--red)); }
.ov-close { position: absolute; top: 14px; right: 14px; z-index: 8; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--cream); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, transform 0.2s; }
.ov-close:hover { background: var(--cream); color: var(--bg); transform: rotate(90deg); }
.ov-body { flex: 1; overflow-y: auto; padding: clamp(20px, 3vw, 34px) clamp(20px, 4vw, 44px) clamp(28px, 4vw, 48px); position: relative; z-index: 6; }
/* La rejilla de fotos es una parada de tabulación (tabindex="0" en index.html).
   El anillo general de stc.css sale con `outline-offset: 3px` y lo recortaría el
   borde de la hoja; con offset negativo se dibuja por dentro. Va en el acento del
   álbum, que la hoja ya declara como --acc. */
.ov-body:focus-visible { outline: 3px solid var(--acc, var(--cream)); outline-offset: -3px; border-radius: 0; }
.ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 900px) { .ov-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .ov-grid { grid-template-columns: repeat(2, 1fr); } }
.print { background: var(--surface); padding: 8px 8px 0; border-radius: 3px; box-shadow: 0 10px 24px rgba(40, 30, 12, 0.2); transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.print:nth-child(4n) { transform: rotate(-1deg); }
.print:nth-child(4n+2) { transform: rotate(0.9deg); }
.print:hover { transform: translateY(-5px) rotate(0deg) scale(1.03); box-shadow: 0 18px 38px rgba(40, 30, 12, 0.32); z-index: 2; }
.print .pic { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: repeating-linear-gradient(45deg, #d9cca8, #d9cca8 10px, #cfc09a 10px, #cfc09a 20px); display: flex; align-items: center; justify-content: center; }
.print.wide .pic { aspect-ratio: 4 / 3; }
.print .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.print .pic .lbl { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.04em; color: #8a7c5c; text-align: center; padding: 0 8px; line-height: 1.5; }
.print .pic .ph-ico { position: absolute; top: 8px; left: 8px; width: 15px; height: 15px; opacity: 0.4; border: 1.4px solid #8a7c5c; border-radius: 3px; z-index: 2; }
.print .cap { font-style: italic; font-size: 11.5px; color: var(--text-2); padding: 8px 3px 10px; text-align: center; }
.print.span2 { grid-column: span 2; }
body.ov-lock { overflow: hidden; }

/* ================= TICKET CTA ================= */
/* ================= TICKET — "El boleto de tu vida" (boleto de tren vintage) ================= */
.boleto-tren {
  --carton: #e9dcb6;             /* cartón del boleto */
  --bt-ink: #211b12;
  --bt-ink-2: #6a5f48;
  --bt-red: var(--red);          /* rojo de la página */
  --bt-red-d: #c01824;
  --disp: var(--font-display);   /* nuestra letra: Anton */
  --type: var(--font-body);      /* nuestra letra: Saira */
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: clamp(70px, 9vw, 130px) 0;
  position: relative;
  overflow: hidden;
}
/* grano de papel sutil del fondo */
.boleto-tren::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
}
.boleto-tren .wrap { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 var(--pad); }

/* encabezado (usa .eyebrow / .d-big globales del sitio) */
.boleto-tren .bt-head { text-align: center; margin-bottom: clamp(34px, 4vw, 56px); }

/* el boleto */
.boleto-tren .bt-ticket {
  position: relative; max-width: 760px; margin: 0 auto; background: var(--carton); border-radius: 4px;
  overflow: hidden; border: 1px solid rgba(33, 27, 18, .25); box-shadow: 0 26px 60px rgba(40, 30, 12, .32);
  transform: rotate(-1deg); transition: transform .4s var(--ease-back);
}
.boleto-tren .bt-ticket:hover { transform: rotate(0) translateY(-5px); }
/* textura de fibra del cartón */
.boleto-tren .bt-ticket::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23q)' opacity='0.5'/%3E%3C/svg%3E");
}
.boleto-tren .bt-num {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  background: var(--bt-ink); color: var(--carton); font-family: var(--mono); font-size: 16px; letter-spacing: .12em; padding: 10px 22px;
}
.boleto-tren .bt-body { position: relative; z-index: 2; padding: clamp(24px, 3.4vw, 36px); }
.boleto-tren .bt-rail { font-family: var(--type); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--bt-red); }
.boleto-tren .bt-route { font-family: var(--disp); font-size: clamp(54px, 7vw, 82px); line-height: .82; text-transform: uppercase; color: var(--bt-ink); margin: 8px 0 2px; }
.boleto-tren .bt-route em { font-style: normal; color: var(--bt-red); }
.boleto-tren .bt-sub { font-family: var(--type); font-size: 16px; color: var(--bt-ink-2); letter-spacing: .04em; }
.boleto-tren .bt-line { height: 2px; background: var(--bt-ink); margin: 20px 0; }
.boleto-tren .bt-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.boleto-tren .bt-cls { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--bt-ink-2); line-height: 1.7; text-transform: uppercase; }
.boleto-tren .bt-cls b { color: var(--bt-ink); }

/* sobreimpresión "2026" en rojo translúcido */
.boleto-tren .bt-overprint {
  position: absolute; z-index: 2; top: 96px; right: 30px; font-family: var(--disp); font-size: clamp(40px, 6vw, 56px);
  color: rgba(232, 32, 46, .24); transform: rotate(-12deg); letter-spacing: .04em; pointer-events: none;
}

/* botón */
.boleto-tren .bt-cta {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--type); font-weight: 700; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--bt-red); padding: 15px 26px; border-radius: 3px; text-decoration: none;
  transition: transform .25s var(--ease-out), background .25s;
}
.boleto-tren .bt-cta:hover { background: var(--bt-red-d); transform: translateX(3px); }
.boleto-tren .bt-cta .arr { font-family: sans-serif; }

@media (max-width: 560px) {
  .boleto-tren .bt-overprint { display: none; }
  .boleto-tren .bt-foot { gap: 18px; }
}

/* ================= CONTACTO — "Carta con membrete" vintage ================= */
.contacto-carta {
  --paper: #f6efda;              /* papel de la carta */
  --cc-ink: #211b12;
  --cc-ink-2: #6a5f48;
  /* Color del texto de ejemplo de los campos. Estaba en #8a7c5c = 3,57:1 sobre
     el papel de la carta: por debajo del 4.5:1 que también le aplica al
     placeholder. #756848 da 4,77:1 y sigue leyéndose como pista, no como dato
     ya escrito. */
  --cc-ink-3: #756848;
  --cc-red: var(--red);          /* rojo de la página, para SUPERFICIES */
  /* …y el mismo en versión TINTA. Sobre el papel de la carta (#f6efda) el rojo
     de marca da 3,91:1 y éste 5,27. Lo usa el "Colombia · Est. 2011" del
     membrete, que va a 12px. El subrayado rojo del campo enfocado se queda con
     --cc-red: es un indicio gráfico, le basta con 3:1 y da 3,91. */
  --cc-red-t: var(--red-t);
  --cc-red-d: #c01824;
  --cc-azul: #2f6b9e;
  --disp: var(--font-display);   /* nuestra letra: Anton */
  --type: var(--font-body);      /* nuestra letra: Saira */
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: var(--bg); color: var(--cc-ink);
  border-top: 1px solid var(--line);
  padding: clamp(70px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.contacto-carta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='cc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23cc)' opacity='0.5'/%3E%3C/svg%3E");
}
.contacto-carta > * { position: relative; z-index: 1; }

.contacto-carta .wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--pad); }
.contacto-carta .cc-grid { display: grid; grid-template-columns: 1fr 470px; gap: 34px; align-items: stretch; }
@media (max-width: 920px) { .contacto-carta .cc-grid { grid-template-columns: 1fr; } }

/* ---------- la carta ---------- */
.contacto-carta .cc-letter {
  position: relative; background: var(--paper); border-radius: 8px; padding: clamp(28px, 3.6vw, 48px);
  box-shadow: 0 30px 70px rgba(40, 30, 12, .3); border: 1px solid rgba(33, 27, 18, .18);
  background-image: repeating-linear-gradient(0deg, transparent 0 37px, rgba(47, 107, 158, .16) 37px 38px); background-position: 0 96px;
}
.contacto-carta .cc-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  border-bottom: 3px double var(--cc-ink); padding-bottom: 18px;
}
.contacto-carta .cc-head .lg { font-family: var(--disp); font-size: clamp(34px, 3.4vw, 42px); line-height: .92; color: var(--cc-ink); }
.contacto-carta .cc-head .lg small { display: block; margin-top: 18px; font-family: var(--type); font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--cc-red-t); }
.contacto-carta .cc-head .addr { font-family: var(--type); font-weight: 600; font-size: 12px; letter-spacing: .06em; color: var(--cc-ink-2); text-align: right; line-height: 1.7; text-transform: uppercase; }

/* texto del cuerpo (Saira, legible) */
.contacto-carta .cc-salud { font-family: var(--type); font-weight: 600; font-size: 18px; line-height: 1.45; color: var(--cc-ink); margin: 26px 0 22px; }

.contacto-carta .cc-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 520px) { .contacto-carta .cc-frow { grid-template-columns: 1fr; gap: 0; } }
.contacto-carta .cc-fld { margin-bottom: 22px; }
.contacto-carta .cc-fld .k { display: block; font-family: var(--type); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-ink-2); margin-bottom: 2px; }
.contacto-carta .cc-fld input,
.contacto-carta .cc-fld textarea { width: 100%; background: transparent; border: none; border-bottom: 1.5px solid var(--cc-ink); font-family: var(--mono); font-size: 18px; color: var(--cc-ink); padding: 6px 2px; transition: border-color .2s, box-shadow .2s; }
.contacto-carta .cc-fld input::placeholder,
.contacto-carta .cc-fld textarea::placeholder { color: var(--cc-ink-3); }
/* ⚠️ Aquí había un `outline: none` cuyo único reemplazo era pasar el filete de
   1.5px de tinta a rojo. Un cambio de color sin cambio de grosor es un
   indicador de foco demasiado débil, y para quien no distingue el rojo no
   existe. Ahora el filete engorda a 3px Y se enciende, que es un cambio que se
   ve sin depender del color. El anillo global de stc.css no se hereda aquí
   porque el campo no tiene caja propia: sería un rectángulo flotando. */
.contacto-carta .cc-fld input:focus-visible,
.contacto-carta .cc-fld textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--cc-red);
  box-shadow: 0 3px 0 -1.5px var(--cc-red);
}
.contacto-carta .cc-fld input:focus,
.contacto-carta .cc-fld textarea:focus { border-color: var(--cc-red); }
.contacto-carta .cc-fld textarea { resize: none; }

.contacto-carta .cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.contacto-carta .cc-firma { font-family: var(--type); font-weight: 600; font-size: 15px; color: var(--cc-ink-2); }
/* Fondo en --red-cta, no en --cc-red: el rojo de marca con texto blanco da
   4,48:1 y se queda a una centésima del mínimo. Ver el token en stc.css. */
.contacto-carta .cc-send { appearance: none; border: none; cursor: pointer; font-family: var(--type); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--red-cta); padding: 16px 30px; border-radius: 3px; display: inline-flex; align-items: center; gap: 12px; transition: transform .25s var(--ease-out), background .25s; }
.contacto-carta .cc-send:hover { background: var(--cc-red-d); transform: translateX(3px); }
.contacto-carta .cc-send:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.contacto-carta .cc-send:disabled:hover { background: var(--red-cta); transform: none; }
.contacto-carta .cc-send .arr { font-family: sans-serif; }

/* ---------- panel rojo (canales) ----------
   El fondo va en --red-cta y no en --cc-red por lo mismo que el botón de
   enviar dos reglas más arriba: es una superficie roja LLENA DE TEXTO BLANCO,
   y el rojo de marca da 4,48:1 con #fff — una centésima por debajo del
   mínimo. Con --red-cta sube a 4,90:1. Al lado del botón, que ya usaba este
   rojo, el panel además deja de cantar un tono distinto.

   Los blancos de dentro iban al .88 (párrafo), .94 (viñetas) y .72 (los
   rótulos WHATSAPP / EMAIL / INSTAGRAM). Sobre rojo eso daba 4,04, 4,46 y
   3,09: los tres fallaban, y el peor era justamente el más pequeño, a 11 px.
   Ahora los tres son blanco puro, a 4,90. La jerarquía no se pierde porque
   nunca la llevaba la opacidad: la llevan el cuerpo (15,5 vs 11 px), la letra
   (mono vs Saira) y las versalitas con tracking. Bajar la opacidad del texto
   sobre un fondo saturado es precisamente lo que lo hace ver deslavado. */
.contacto-carta .cc-aside { background: var(--red-cta); color: #fff; border-radius: 8px; padding: clamp(30px, 3vw, 42px) clamp(26px, 2.6vw, 38px); box-shadow: 0 30px 70px rgba(40, 30, 12, .26); display: flex; flex-direction: column; }
.contacto-carta .cc-aside .eyebrow { font-weight: 800; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 13px; }
.contacto-carta .cc-aside .eyebrow::before { content: ""; width: 30px; height: 3px; background: #fff; }
.contacto-carta .cc-aside .d-big { font-family: var(--disp); font-weight: 400; font-size: clamp(44px, 4vw, 56px); line-height: 1; text-transform: uppercase; margin: 10px 0 16px; color: #fff; }
.contacto-carta .cc-aside p { font-size: 16px; line-height: 1.5; color: #fff; }
.contacto-carta .cc-points { list-style: none; margin: 24px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contacto-carta .cc-points li { position: relative; padding-left: 30px; font-family: var(--type); font-weight: 600; font-size: 15.5px; line-height: 1.35; color: #fff; }
.contacto-carta .cc-points li::before { content: "★"; position: absolute; left: 2px; top: 1px; font-size: 14px; color: #fff; opacity: .82; }
/* empuja los canales al fondo del panel rojo para llenar el alto */
.contacto-carta .cc-aside .cc-chan:first-of-type { margin-top: auto; }
.contacto-carta .cc-chan { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .28); color: #fff; text-decoration: none; transition: transform .2s var(--ease-out); }
.contacto-carta .cc-chan:last-child { border-bottom: 1px solid rgba(255, 255, 255, .28); }
.contacto-carta .cc-chan:hover { transform: translateX(4px); }
.contacto-carta .cc-chan .ic { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contacto-carta .cc-chan .ic svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contacto-carta .cc-chan .tx { font-family: var(--mono); font-weight: 500; font-size: 15.5px; }
.contacto-carta .cc-chan .tx small { display: block; font-family: var(--type); font-weight: 600; font-size: 11px; letter-spacing: .06em; color: #fff; text-transform: uppercase; }

.form-grid { display: grid; gap: 16px; }
.form-grid .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid .frow { grid-template-columns: 1fr; } }
.field { position: relative; }
.field input, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 18px 20px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(232,32,46,0.16);
  transform: translateY(-2px);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.form-note { color: var(--text-3); font-size: 13px; }
.toast-ok {
  position: fixed;
  bottom: 96px; right: 22px;
  /* #16a34a con texto blanco daba 3,30:1. #15803d da 5,01:1 y sigue siendo el
     verde de "salió bien". */
  background: #15803d;
  color: #fff;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 14px;
  z-index: 999;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s var(--ease-back), transform 0.35s var(--ease-back);
  pointer-events: none;
}
.toast-ok.on { opacity: 1; transform: none; }
.toast-ok.err { background: #dc2626; }

/* ============================================================
   SECCIÓN PROGRAMAS — "Hoja de estampillas" (filatelia)
   Usa la tipografía del sitio: Anton (--font-display) en títulos
   y Saira (--font-body) en leyendas/matasellos.
   ============================================================ */
.programas-estampillas {
  --paper: #f2e8cf;
  --paper-3: #e0d2ad;
  --st-ink: #211b12;
  --st-ink-2: #6a5f48;
  /* Estaba en #8a7c5c = 3,7:1 sobre el papel de la estampilla. Lo usa el pie
     de cada estampilla ("Nueva York · Septiembre 2026") a 10,5 px, que es
     dato real, no adorno: la ciudad y la fecha del programa. #7a6d4e da
     4,7:1 y es el mismo marrón, sólo dos escalones más hondo. */
  --st-ink-3: #7a6d4e;
  --st-red: #b4452e;
  /* El mismo terracota en versión TINTA. Ojo con el papel: esta sección NO va
     sobre el crema de la página (#f3e8cf) sino sobre el suyo, #f2e8cf, un punto
     más oscuro, y ahí el --st-red da 4,494:1 — falla el 4,5 por seis
     milésimas. Es tan justo que medido contra el papel equivocado parecía
     pasar (4,504); no es margen, es ruido de redondeo.
     #ab3f28 es el mismo color con la luz un escalón abajo y despeja los cuatro
     papeles del sitio: 4,96 aquí, 4,97 sobre el de página, 4,58 sobre --bg-2 y
     5,61 sobre el de las estampillas.
     ⚠️ Sólo para tinta. El filete de 34×3px del eyebrow se queda con --st-red:
     es superficie y ahí el brillo es lo que vale. */
  --st-red-t: #ab3f28;
  --type: var(--font-body);   /* "nuestra letra": Saira, no la máquina de escribir */
  background: var(--paper);
  color: var(--st-ink);
}

/* cabecera: título + chips */
.programas-estampillas .est-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px);
}
.programas-estampillas .eyebrow { color: var(--st-red-t); }
.programas-estampillas .eyebrow::before { background: var(--st-red); }
.programas-estampillas .d-big { color: var(--st-ink); }

/* chips de filtro */
.programas-estampillas .est-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.programas-estampillas .est-chips button {
  appearance: none; background: transparent; border: 1.5px solid rgba(33,27,18,.34);
  color: var(--st-ink-2); font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; padding: 11px 20px; border-radius: 999px;
  cursor: pointer; transition: background .22s, border-color .22s, color .22s;
}
.programas-estampillas .est-chips button:hover { color: var(--st-ink); border-color: var(--st-ink); }
.programas-estampillas .est-chips button.on { background: var(--st-ink); border-color: var(--st-ink); color: var(--paper); }
/* el JS esconde los chips sin programas; explícito para que ninguna regla de
   display futura le gane al atributo `hidden` */
.programas-estampillas .est-chips button[hidden] { display: none; }

/* la "hoja" de estampillas */
.programas-estampillas .est-sheet {
  background: var(--paper-3); border-radius: 6px; padding: clamp(24px, 3vw, 40px);
  box-shadow: inset 0 0 0 1px rgba(33,27,18,.12), inset 0 0 40px rgba(33,27,18,.08);
}
/* Flex y no grid, aunque se llame `est-grid` y se vea como una rejilla. El nombre
   es de cuando esto era `repeat(3, 1fr)` fijo y todas las estampillas estaban
   siempre puestas; se deja para no romper el JS ni el HTML de siete sitios.

   El motivo del cambio: desde que el filtro saca las estampillas con `display:none`
   (ver más abajo), el número de visibles ya no es siempre 6. Hoy salen 6, 4, 3 y 1
   según el chip, y con CSS Grid la fila incompleta se pega SIEMPRE a la izquierda:
   "Fútbol" dejaba una estampilla sola con dos huecos al lado, y "Moto GP" o "Tenis"
   —que traen una— dejaban una estampilla en la esquina de una hoja de 1129px. Se
   leía como un fallo de carga, no como un filtro.

   Grid no puede centrar la última fila (no hay selector para "los que quedaron
   sueltos"). Flex sí: `justify-content:center` no toca las filas llenas —tres
   bases + dos huecos suman exactamente el 100%— y sólo recoloca la que sobra.

   La base es la cuenta de la rejilla escrita a mano: ancho útil menos los huecos,
   partido entre las columnas. `--est-cols` es lo único que cambian las media
   queries, así que la cuenta vive en un solo sitio. */
.programas-estampillas .est-grid {
  --est-gap: clamp(24px, 3vw, 36px);
  --est-cols: 3;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--est-gap);
}
.programas-estampillas .est-grid > .stamp {
  flex: 0 1 calc((100% - (var(--est-cols) - 1) * var(--est-gap)) / var(--est-cols));
  min-width: 0; /* sin esto una estampilla no puede bajar de su ancho de contenido */
}
@media (max-width: 1020px) { .programas-estampillas .est-grid { --est-cols: 2; } }
@media (max-width: 620px)  { .programas-estampillas .est-grid { --est-cols: 1; } }

/* una estampilla */
.programas-estampillas .stamp {
  position: relative; display: block; color: var(--st-ink); background: #fbf6ea; padding: 9px;
  border: 2px dotted rgba(33,27,18,.35); border-radius: 3px;
  filter: drop-shadow(0 6px 14px rgba(40,30,12,.22));
  transition: transform .35s var(--ease-out, cubic-bezier(.22,1,.36,1)), filter .35s, opacity .35s;
}
.programas-estampillas .stamp:hover { transform: translateY(-6px) rotate(-1deg); filter: drop-shadow(0 16px 30px rgba(40,30,12,.3)); }

.programas-estampillas .stamp .st-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--type); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--st-ink-2); padding: 2px 4px 7px;
}
.programas-estampillas .stamp .st-top b { color: var(--pc, var(--st-red)); }

.programas-estampillas .stamp .pic { position: relative; aspect-ratio: 1 / .82; overflow: hidden; border: 1px solid rgba(33,27,18,.18); }
.programas-estampillas .stamp .pic img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.42) saturate(.78) contrast(.95);
  transition: filter .5s, transform .6s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.programas-estampillas .stamp:hover .pic img { filter: sepia(.1) saturate(.95); transform: scale(1.04); }

.programas-estampillas .stamp .st-foot { text-align: center; padding: 8px 4px 3px; }
.programas-estampillas .stamp .st-foot h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: .9; text-transform: uppercase;
}
.programas-estampillas .stamp .st-foot .val { font-family: var(--type); font-size: 10.5px; letter-spacing: .08em; color: var(--st-ink-3); margin-top: 4px; }

/* Estado filtrado: la estampilla SALE de la rejilla y las demás se recomponen.
   Antes se quedaba en su celda con opacity .09 y un sello "CANCELADO" encima;
   era bonito con seis estampillas y la mitad encendidas, pero desde que la
   rejilla lleva el catálogo entero (nueve) el chip "Fórmula 1" dejaba tres
   programas reales sueltos entre seis fantasmas y había que buscarlos. Y el
   estado inicial —"Destacados"— habría abierto la página con tres CANCELADO
   puestos, que es justo lo contrario de lo que dice el chip. */
.programas-estampillas .stamp.hide { display: none; }
/* Mientras el JS no haya corrido, la rejilla se comporta como la vitrina de
   seis: sin esto se vería medio segundo el catálogo entero y luego el salto.
   Ver el bloque final de shared/programas-section.js. */
.programas-estampillas .est-grid:not([data-listo]) .stamp:not([data-dest]) { display: none; }

/* animación de entrada al filtrar */
@keyframes est-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.programas-estampillas .stamp.pop { animation: est-pop .4s var(--ease-out, cubic-bezier(.22,1,.36,1)) both; }
@media (prefers-reduced-motion: reduce) { .programas-estampillas .stamp.pop { animation: none; } }


/* ============================================================
   CONFÍAN EN NOSOTROS — banda de logos de clientes
   Marquesina en CSS puro: corre fuera del hilo principal y no la
   toca motion.js (a propósito NO usa las clases .marquee/.marquee-track,
   porque el skew por scroll de ese motor deforma los logos).
   ============================================================ */
.clientes {
  --cl-h: clamp(30px, 3.7vw, 48px);    /* alto base — cada logo lo escala con --s */
  --cl-w: clamp(104px, 12.7vw, 163px); /* ancho base — cada logo lo escala con --w */
  --cl-gap: clamp(32px, 4.8vw, 70px);  /* aire entre logos */
  position: relative;
  /* Arriba y abajo NO miden lo mismo, a propósito. Juan, 2026-08-22: *"haz más
     pequeño el espacio entre el hero y clientes"* — el tope pasó de
     clamp(50px, 6vw, 86px) a esto, algo menos de la mitad en escritorio (86 →
     40px a 1440). Arriba es una COSTURA: la banda de logos tiene que quedar
     colgando del canto de la foto, no flotando debajo. Abajo sigue siendo un
     CORTE de sección, y además la bufanda que viene después se traga parte de
     su propio margen al rotar, así que ahí el aire hace falta.
     ⚠️ Si vuelves a igualar los dos valores, se deshace el pedido. */
  padding: clamp(24px, 2.8vw, 40px) 0 clamp(54px, 6.5vw, 94px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(249, 242, 223, 0.66), rgba(249, 242, 223, 0) 72%);
}

/* encabezado: alineado a la izquierda con el .eyebrow del sitio
   (barra roja de 34×3 + mayúsculas), igual que "Nuestros programas"
   o "Elige tu pasión". Toda la tipografía la hereda de .eyebrow. */
.clientes .cl-head {
  padding: 0 var(--pad);
  margin-bottom: clamp(30px, 4vw, 50px);
}
.clientes .cl-title { line-height: 1; }

/* La cifra de clientes va DEBAJO de la banda y centrada con ella (Juan,
   2026-08-21). Al lado del eyebrow competía con el encabezado; aquí cierra
   la banda y se lee como su pie: un renglón, en la misma tinta plana de los
   logos y a un tamaño que no le quita el protagonismo a las marcas. */
.clientes .cl-count {
  margin: clamp(22px, 2.6vw, 32px) var(--pad) 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  text-wrap: balance;
}
.clientes .cl-num {
  font-family: var(--font-display);
  font-weight: 400;
  /* solo un escalón por encima del renglón, no un titular */
  font-size: 20px;
  letter-spacing: 0.01em;
  /* la misma tinta de los logos: aquí el rojo metía un segundo acento en una
     banda que a propósito es monocroma.
     ⚠️ Es `--text`, no `--ink`: `--ink` está declarado dentro del pie (hoy
     `.stc-footer`; antes `.footer-pasaporte`), no en `:root`. Fuera del pie
     `var(--ink)` no resuelve, la declaración queda inválida y el color acaba
     heredando el `--text-2` del renglón — falla en silencio. */
  color: var(--text);
  /* cifras de ancho fijo: si no, el número baila mientras el contador sube */
  font-variant-numeric: tabular-nums;
  margin-right: 3px;
}

@media (max-width: 560px) {
  .clientes .cl-count { font-size: 10.5px; letter-spacing: 0.12em; }
  .clientes .cl-num { font-size: 18px; }
}

/* la banda: recorta y difumina los bordes para que nada se corte en seco */
.clientes .cl-band {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.clientes .cl-track {
  display: flex; align-items: center; flex-shrink: 0;
  will-change: transform;
  animation: cl-scroll 46s linear infinite;   /* constante = linear, sin easing */
}
/* el track lleva 4 juegos iguales: desplazar 1/4 es un bucle perfecto
   (y quedan 3 juegos cubriendo el ancho, así ni en pantallas enormes hay hueco) */
@keyframes cl-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

/* Cada celda tiene el mismo alto para que la banda no salte;
   dentro, el logo se equilibra por PESO ÓPTICO, no por altura común:
   un wordmark alargado va bajito y una marca cuadrada va más alta. */
.clientes .cl-logo {
  flex: 0 0 auto;
  height: calc(var(--cl-h) * 1.6);
  display: grid; place-items: center;
  padding: 0 calc(var(--cl-gap) / 2);
}
.clientes .cl-logo img {
  display: block; width: auto; height: auto;
  max-height: calc(var(--cl-h) * var(--s, 1));
  max-width: calc(var(--cl-w) * var(--w, 1));
  opacity: 0.86;
  transition: opacity 0.3s ease;
}

/* Logo con el nombre debajo — hoy solo Futbolete, que es una "F" suelta sin
   wordmark y es el único de la banda que no se identifica solo.
   ⚠️ `align-content: center` NO es decorativo. La celda tiene alto FIJO
   (`--cl-h * 1.6`) y en cuanto entra un segundo hijo el grid pasa a dos filas
   automáticas que, con el `align-content: normal` de serie, se estiran hasta
   llenar ese alto: la F se iría arriba del todo y el nombre abajo del todo,
   separados por medio hueco. Con `center` las dos filas se agrupan y el
   `row-gap` manda de verdad. */
.clientes .cl-logo--tag {
  align-content: center;
  row-gap: 5px;
}
/* Segundo techo para el logo rotulado. La celda tiene alto FIJO y el rótulo
   mide siempre lo mismo (9,5 px + 5 de hueco = 22,5 con el aire mínimo), pero
   el logo escala con `--cl-h`, que va de 48 px a 30 px. Medido en el navegador:
   a 48 la pareja suma 67,3 en una celda de 76,8 y sobran 9,5 px; a 30 suma 47,5
   en una celda de 48 y sobra MEDIO píxel — la F pegada al borde de arriba y el
   nombre al de abajo, desalineados de los logos vecinos. Este `min()` le pone
   al logo un tope alternativo —lo que queda de la celda tras descontar el
   rótulo— así que en escritorio no cambia nada (52,8 px, idéntico) y en móvil
   la F cede lo justo (33 → 25,5) para dejar los mismos 8 px de aire. Se hace
   con `min()` y no con una media query porque `--cl-h` es un clamp() fluido:
   un punto de corte fijo dejaría el problema vivo en los anchos intermedios. */
.clientes .cl-logo--tag img {
  max-height: min(calc(var(--cl-h) * var(--s, 1)), calc(var(--cl-h) * 1.6 - 22.5px));
}
.clientes .cl-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  /* la misma tinta plana y la misma opacidad que los logos, para que el rótulo
     se lea como parte de la marca y no como una etiqueta pegada encima */
  color: var(--text-2);
  opacity: 0.86;
  transition: opacity 0.3s ease;
}

/* al pasar el mouse: la banda se detiene y el logo apuntado se afirma */
@media (hover: hover) and (pointer: fine) {
  .clientes .cl-band:hover .cl-track { animation-play-state: paused; }
  .clientes .cl-logo:hover img { opacity: 1; }
  .clientes .cl-logo--tag:hover .cl-tag { opacity: 1; }
}

/* sin movimiento: se puede recorrer con el dedo o la rueda */
@media (prefers-reduced-motion: reduce) {
  .clientes .cl-track { animation: none; }
  .clientes .cl-band { overflow-x: auto; scrollbar-width: none; }
  .clientes .cl-band::-webkit-scrollbar { display: none; }
}

@media (max-width: 600px) {
  .clientes .cl-track { animation-duration: 34s; }
}