/* ==========================================================================
   TRIBUNA 87 - Sistema de diseño
   Dirección: Manual de Marca Tribuna 87, 2026
   Base: Negro Profundo + Turquesa oficial (#00E5F0) + Blanco Suave
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Paleta oficial del Manual de Marca 2026 */
  --t87-turquesa:        #00E5F0;
  --t87-turquesa-claro:  #00E5F0;
  --t87-turquesa-oscuro: #00E5F0;
  --t87-alerta:          #00E5F0;

  /* Base oficial */
  --t87-tinta:      #0D160B;
  --t87-tinta-2:    #0D160B;
  --t87-tinta-3:    #0D160B;
  --t87-humo:       #F9F9F9;
  --t87-blanco:     #F9F9F9;

  /* Texto */
  --t87-txt:        #F9F9F9;
  --t87-txt-2:      rgba(249,249,249,.62);
  --t87-txt-3:      rgba(249,249,249,.34);
  --t87-txt-inv:    #0D160B;

  /* Líneas */
  --t87-linea:      rgba(249,249,249,.10);
  --t87-linea-2:    rgba(249,249,249,.18);

  /* Tipografía */
  /* Excepción solicitada: se mantiene la tipografía anterior del sitio. */
  --t87-display: 'Saira', 'Archivo', system-ui, sans-serif;
  --t87-texto: 'Inter', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica fluida */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-xl:   clamp(1.35rem, 1.15rem + 0.9vw, 2rem);
  --fs-2xl:  clamp(1.9rem,  1.5rem  + 1.9vw, 3.2rem);
  --fs-3xl:  clamp(2.6rem,  1.8rem  + 3.6vw, 5.5rem);
  --fs-hero: clamp(2.4rem,  1.55rem + 4.1vw, 6rem);

  /* Ritmo espacial (base 8) */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 48px;  --sp-6: 64px;  --sp-7: 96px;  --sp-8: 128px;
  --sp-seccion: clamp(72px, 9vw, 160px);

  /* Layout */
  --t87-ancho:   1320px;
  --t87-gutter:  clamp(20px, 5vw, 64px);
  --t87-radio:   4px;
  --t87-radio-l: 10px;

  /* Movimiento */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);
  --dur-1: 180ms;
  --dur-2: 280ms;
  --dur-3: 480ms;

  --z-nav: 100;  --z-flotante: 200;  --z-modal: 400;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis toma el control del scroll: desactivamos el nativo */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--t87-tinta);
  color: var(--t87-txt);
  font-family: var(--t87-texto);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, [type="button"], [type="submit"] {
  font: inherit; color: inherit;
  background: none; border: 0; border-radius: 0;
  padding: 0;
  cursor: pointer;
}
h1,h2,h3,h4 { margin: 0; font-family: var(--t87-display); font-weight: 700; line-height: .95; letter-spacing: -.02em; }
p { margin: 0; }
::selection { background: var(--t87-turquesa); color: var(--t87-tinta); }

/* Foco visible - accesibilidad */
:focus-visible {
  outline: 2px solid var(--t87-turquesa);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. UTILIDADES ---------- */
.t87-wrap {
  width: 100%;
  max-width: var(--t87-ancho);
  margin-inline: auto;
  padding-inline: var(--t87-gutter);
}
.t87-seccion { padding-block: var(--sp-seccion); position: relative; }
.t87-solo-lector {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Etiqueta de sección */
.t87-etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--t87-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t87-turquesa);
  margin-bottom: var(--sp-3);
}
.t87-etiqueta::before {
  content: ''; width: 28px; height: 1px;
  background: var(--t87-turquesa); opacity: .7;
}

/* Títulos display */
.t87-h-hero {
  font-size: var(--fs-hero);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .88;
}
.t87-h-seccion {
  font-size: var(--fs-3xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .92;
}
.t87-acento { color: var(--t87-turquesa); }
.t87-italica { font-style: italic; }

.t87-bajada {
  font-size: var(--fs-lg);
  color: var(--t87-txt-2);
  max-width: 54ch;
  line-height: 1.65;
}

/* Grano sutil - textura premium */
.t87-grano::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- 4. BOTONES ---------- */
.t87-btn {
  --btn-bg: var(--t87-turquesa);
  --btn-fg: var(--t87-tinta);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 52px;            /* táctil ≥44px */
  padding: 0 var(--sp-4);
  font-family: var(--t87-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.t87-btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--t87-blanco);
  transform: translateY(101%);
  transition: transform var(--dur-3) var(--ease-io);
}
.t87-btn:hover::before { transform: translateY(0); }
.t87-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,229,240,.22); }
.t87-btn:active { transform: translateY(0); }

.t87-btn--fantasma {
  --btn-bg: transparent;
  --btn-fg: var(--t87-txt);
  border: 1px solid var(--t87-linea-2);
}
.t87-btn--fantasma::before { background: var(--t87-turquesa); }
.t87-btn--fantasma:hover { color: var(--t87-tinta); border-color: var(--t87-turquesa); box-shadow: none; }

.t87-btn .t87-flecha { transition: transform var(--dur-2) var(--ease-out); }
.t87-btn:hover .t87-flecha { transform: translateX(4px); }

/* Enlace con subrayado animado */
.t87-link-u {
  position: relative;
  display: inline-block;
  font-family: var(--t87-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Padding vertical para alcanzar el mínimo táctil de 44px sin mover el subrayado */
  padding-block: 14px;
}
.t87-link-u::after {
  content: ''; position: absolute; left: 0; bottom: 14px;
  width: 100%; height: 1px; background: var(--t87-turquesa);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out);
}
.t87-link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 5. NAVEGACIÓN ---------- */
.t87-nav {
  position: fixed; inset-inline: 0; top: 0;
  z-index: var(--z-nav);
  padding-block: var(--sp-3);
  transition: background var(--dur-3) var(--ease-out),
              padding var(--dur-3) var(--ease-out),
              border-color var(--dur-3);
  border-bottom: 1px solid transparent;
}
.t87-nav.esta-fijo {
  background: rgba(13,22,11,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--t87-linea);
  padding-block: var(--sp-2);
}
.t87-nav.esta-oculto { transform: translateY(-100%); }
.t87-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}
.t87-nav__logo {
  display: inline-flex; align-items: center;
  min-height: 44px;   /* área táctil mínima */
}
.t87-nav__logo img { height: 30px; width: auto; }
.t87-nav__menu {
  display: none;
  /* El espacio entre ítems se ajusta al ancho: con «Próximas salidas» y «Sueños
     cumplidos» el menú partía en dos líneas en laptops */
  align-items: center; gap: clamp(16px, 1.9vw, 32px);
  list-style: none; margin: 0; padding: 0;
}
.t87-nav__menu a {
  font-family: var(--t87-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--t87-txt-2);
  transition: color var(--dur-1);
  position: relative;
}
.t87-nav__menu a:hover, .t87-nav__menu a[aria-current="page"] { color: var(--t87-txt); }
.t87-nav__menu a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--t87-turquesa);
}
/* En la cabecera el botón es de apoyo, no protagonista: va más pequeño que el
   del hero, que sí manda. */
.t87-nav__cta {
  display: none;
  min-height: 40px;
  gap: 8px;
  padding-inline: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
}
.t87-nav__cta .t87-flecha { width: 12px; height: 12px; }

/* Botón hamburguesa */
.t87-burger {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin-right: -12px;
}
.t87-burger span {
  display: block; width: 24px; height: 2px;
  background: var(--t87-txt);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1);
}
.t87-burger span + span { margin-top: 6px; }
.t87-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.t87-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.t87-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1023px) {
  .t87-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 2;
    opacity: 1 !important;
    transform: none !important;
  }
  .t87-burger span + span { margin-top: 0; }
}

/* Panel móvil */
.t87-panel {
  position: fixed; inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--t87-tinta);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: var(--sp-7) var(--t87-gutter) var(--sp-5);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-3) var(--ease-io);
  visibility: hidden;
}
.t87-panel.esta-abierto { clip-path: inset(0 0 0 0); visibility: visible; }
.t87-panel ul { list-style: none; margin: 0; padding: 0; }
.t87-panel li { overflow: hidden; }
.t87-panel a {
  display: block;
  padding-block: 10px;
  font-family: var(--t87-display);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.1;
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease-out);
}
.t87-panel.esta-abierto a { transform: translateY(0); }
.t87-panel.esta-abierto li:nth-child(1) a { transition-delay: 60ms; }
.t87-panel.esta-abierto li:nth-child(2) a { transition-delay: 110ms; }
.t87-panel.esta-abierto li:nth-child(3) a { transition-delay: 160ms; }
.t87-panel.esta-abierto li:nth-child(4) a { transition-delay: 210ms; }
.t87-panel.esta-abierto li:nth-child(5) a { transition-delay: 260ms; }
.t87-panel.esta-abierto li:nth-child(6) a { transition-delay: 310ms; }
/* Botón «Próximos viajes» del panel: no lleva el estilo grande de los enlaces del menú */
.t87-panel .t87-panel__cta {
  display: inline-flex; align-self: flex-start;
  margin-top: var(--sp-5);
  padding-block: 0;
  font-size: var(--fs-sm); font-style: normal;
  letter-spacing: .12em; line-height: 1;
  transform: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out) 330ms;
}
.t87-panel.esta-abierto .t87-panel__cta { opacity: 1; transform: none; }
.t87-panel__pie {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--t87-linea);
  color: var(--t87-txt-3);
  font-size: var(--fs-sm);
}

/* Desde 1024px (con cinco ítems y el margen normal del sitio, alineado con el contenido) */
@media (min-width: 1024px) {
  .t87-nav__menu, .t87-nav__cta { display: flex; }
  .t87-burger { display: none; }
}
/* Laptops chicos: separación y espaciado de letras más justos */
@media (min-width: 1024px) and (max-width: 1279px) {
  .t87-nav__inner { gap: 18px; }
  .t87-nav__menu { gap: 14px; }
  .t87-nav__menu a { letter-spacing: .06em; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .t87-nav__menu a { letter-spacing: .1em; }
}

/* ---------- 6. HERO ---------- */
.t87-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: var(--sp-7) var(--sp-5);
  overflow: hidden;
}
.t87-hero__media {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Fallback premium mientras no haya video real */
  background:
    radial-gradient(120% 80% at 70% 15%, rgba(0,229,240,.16) 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 90%, rgba(0,229,240,.12) 0%, transparent 60%),
    linear-gradient(180deg, #0D160B 0%, #0D160B 100%);
}
.t87-hero__media img,
.t87-hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;   /* parallax */
}
/*
 * Dos capas: una vertical que asienta cabecera y pie, y otra lateral que sostiene
 * la lectura del texto. Van deliberadamente suaves para que el video se vea; la
 * legibilidad la termina de asegurar la sombra del propio texto, que no depende
 * de lo claro u oscuro que sea el video que pongan mañana.
 */
.t87-hero__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(13,22,11,.58) 0%, rgba(13,22,11,.08) 28%,
      rgba(13,22,11,.34) 68%, rgba(13,22,11,.82) 100%),
    linear-gradient(90deg,
      rgba(13,22,11,.48) 0%, rgba(13,22,11,.12) 44%, rgba(13,22,11,0) 70%);
}
/* Slides apilados en la misma celda: la altura la marca el más alto y no salta */
.t87-hero__slides { display: grid; }
.t87-hero__slide {
  grid-area: 1 / 1;
  display: flex; align-items: flex-end;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.t87-hero__slide.esta-activo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.t87-hero__inner { position: relative; z-index: 2; width: 100%; }
.t87-hero__titulo {
  max-width: 16ch;
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 28px rgba(13,22,11,.72), 0 1px 4px rgba(13,22,11,.5);
}
.t87-hero__respaldo { margin-top: var(--sp-4); }

/* Base fija del hero: puntos de navegación + indicador de scroll */
.t87-hero__base {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--t87-linea);
}
.t87-hero__puntos { display: flex; gap: var(--sp-1); }
.t87-punto {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
}
.t87-punto i {
  display: block;
  width: 34px; height: 2px;
  background: var(--t87-linea-2);
  transition: background var(--dur-2), width var(--dur-2) var(--ease-out);
}
.t87-punto:hover i { background: var(--t87-txt-2); }
.t87-punto.esta-activo i { width: 56px; background: var(--t87-turquesa); }
.t87-hero__claim {
  font-family: var(--t87-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t87-turquesa);
  margin-bottom: var(--sp-4);
  text-shadow: 0 1px 18px rgba(13,22,11,.85);
}
.t87-hero__acciones {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.t87-hero__respaldo {
  font-size: var(--fs-sm); color: var(--t87-txt-2);
  text-shadow: 0 1px 14px rgba(13,22,11,.9);
}
.t87-hero__respaldo strong { color: var(--t87-txt); font-weight: 600; }

/* Indicador de scroll */
.t87-scroll-cue {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--t87-display);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t87-txt-3);
}
.t87-scroll-cue i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--t87-turquesa), transparent);
  animation: t87-baja 2s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes t87-baja {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(34px); opacity: 0; }
}

/* ---------- 7. MARQUESINA ---------- */
.t87-marquesina {
  position: relative;
  display: flex; overflow: hidden;
  padding-block: var(--sp-3);
  border-block: 1px solid var(--t87-linea);
  background: var(--t87-tinta-2);
  user-select: none;
}
.t87-marquesina__pista {
  display: flex; flex-shrink: 0; align-items: center; gap: var(--sp-4);
  padding-right: var(--sp-4);
  animation: t87-desliza 32s linear infinite;
  will-change: transform;
}
.t87-marquesina:hover .t87-marquesina__pista { animation-play-state: paused; }
.t87-marquesina span {
  font-family: var(--t87-display);
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--t87-txt-3);
}
.t87-marquesina span:nth-child(even) { color: var(--t87-turquesa); }
@keyframes t87-desliza { to { transform: translateX(-100%); } }

/* ---------- 8. TEXTO CON RELLENO POR SCROLL ---------- */
/*
 * Declaración de la marca: centrada, grande y en los dos colores. Cada palabra
 * parte apagada y se enciende al hacer scroll; el tramo marcado con `t87-acento`
 * se enciende en turquesa en lugar de blanco.
 */
.t87-revela {
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--t87-display);
  font-size: clamp(2.1rem, 1.05rem + 3.9vw, 4.8rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.t87-revela .palabra {
  color: rgba(249,249,249,.14);
  transition: color .28s var(--ease-out);
}
.t87-revela .palabra.encendida { color: var(--t87-txt); }
/* Más específico que `.t87-revela .palabra`, si no el turquesa no llega. */
.t87-revela .palabra.t87-acento { color: rgba(0,229,240,.16); }
.t87-revela .palabra.t87-acento.encendida { color: var(--t87-turquesa); }

/* Esta sección no necesita el aire completo de una sección: es un respiro, no un bloque. */
.t87-seccion--apretada { padding-block: clamp(52px, 6vw, 104px); }

/* ---------- 9. PROGRAMAS ---------- */
.t87-prog-cab {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
/* Tres columnas como máximo, con aire entre tarjetas: en cuatro se apelotonaban. */
.t87-prog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 700px)  { .t87-prog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .t87-prog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
}

/* ---- Tarjeta: foto a sangre, píldora arriba, titular y enlace sobre la foto ---- */
.t87-prog {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 3 / 4;
  min-height: 420px;
  padding: var(--sp-3);
  /* El borde se reserva desde el principio para que al encenderse no salte nada. */
  border: 1px solid transparent;
  border-radius: var(--t87-radio-l);
  overflow: hidden;
  isolation: isolate;
  background: var(--t87-tinta-2);
  transition:
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2),
    box-shadow var(--dur-2);
}
/* Al pasar el cursor, la tarjeta completa crece y se enciende en turquesa. */
.t87-prog:hover,
.t87-prog:focus-within {
  transform: scale(1.045);
  border-color: var(--t87-turquesa);
  box-shadow: 0 24px 60px rgba(13,22,11,.55), 0 0 0 1px rgba(0,229,240,.28);
  z-index: 2;
}
.t87-prog__media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
.t87-prog__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Marcador de posición mientras no hay foto real */
.t87-prog__media--vacio {
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(0,229,240,.14), transparent 60%),
    linear-gradient(160deg, #0D160B 0%, #0D160B 100%);
}
/* Velo: la foto respira arriba y el texto se lee abajo */
.t87-prog::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(13,22,11,.42) 0%, rgba(13,22,11,.10) 26%,
    rgba(13,22,11,.62) 66%, rgba(13,22,11,.94) 100%);
}
.t87-prog__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.t87-prog__cat {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(249,249,249,.28);
  border-radius: 100px;
  font-family: var(--t87-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--t87-txt);
  background: rgba(13,22,11,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.t87-prog__fecha {
  font-family: var(--t87-display);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--t87-turquesa);
  text-align: right;
  text-shadow: 0 1px 12px rgba(13,22,11,.8);
}
.t87-prog__cuerpo { margin-top: auto; }
.t87-prog__destino {
  font-size: var(--fs-sm);
  color: var(--t87-txt-2);
  margin-bottom: 8px;
}
.t87-prog__nombre {
  font-size: var(--fs-xl);
  font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: -.02em;
  text-wrap: balance;
}
@media (max-width: 699px) {
  .t87-prog__cuerpo,
  .t87-prog__nombre,
  .t87-ficha__cabecera .t87-h-seccion {
    width: 100%;
    max-width: none;
  }
  .t87-prog__nombre,
  .t87-ficha__cabecera .t87-h-seccion { text-wrap: wrap; }
}
/* El precio es el dato comercial: manda después del titular, no se susurra. */
.t87-prog__precio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(249,249,249,.16);
  font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--t87-display);
  color: var(--t87-txt-2);
}
.t87-prog__precio b {
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -.01em; text-transform: none;
  color: var(--t87-turquesa);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 14px rgba(13,22,11,.9);
}
.t87-prog__persona {
  flex-basis: 100%;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--t87-txt-3);
}
/* Sin precio publicado no hay cifra que destacar: la línea se queda sobria. */
.t87-prog__precio--consulta {
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  color: var(--t87-txt);
}
/* Enlace de la tarjeta, en la línea del ejemplo: versal, subrayado corto */
.t87-prog__cta {
  display: inline-block;
  margin-top: var(--sp-3);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--t87-blanco);
  font-family: var(--t87-display);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.t87-prog:hover .t87-prog__cta,
.t87-prog:focus-within .t87-prog__cta {
  color: var(--t87-turquesa);
  border-bottom-color: var(--t87-turquesa);
}
/* Enlace que cubre toda la tarjeta, accesible */
.t87-prog__link { position: absolute; inset: 0; z-index: 3; }
/* Con teclado, un anillo aparte del borde de hover, que solo es decorativo. */
.t87-prog:has(:focus-visible) { outline: 2px solid var(--t87-turquesa); outline-offset: 4px; }
.t87-prog__link:focus-visible { outline: none; }

/* ---- Carrusel a sangre (portada) ---- */
.t87-carrusel { position: relative; }
.t87-carrusel__pista {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  /* Sin scroll-snap: el deslizamiento es continuo y el ajuste lo frenaría en seco.
     Y sin scroll-behavior nativo, que Lenis cancela de todas formas. */
  overscroll-behavior-x: contain;
  /* Alinea la primera tarjeta con el contenedor y deja que las últimas se salgan a la derecha */
  padding-inline: max(var(--t87-gutter), calc((100% - var(--t87-ancho)) / 2 + var(--t87-gutter)));
  /* Aire arriba y abajo para que la tarjeta ampliada no la recorte el scroll. */
  padding-block: 22px;
  margin-block: -22px;
  scrollbar-width: none;
}
.t87-carrusel__pista::-webkit-scrollbar { display: none; }
.t87-carrusel__pista:focus-visible { outline-offset: -2px; }
/* Tarjeta = hijo directo de la pista, sea programa o testimonio. */
.t87-carrusel__pista > * {
  flex: 0 0 clamp(268px, 27vw, 340px);
}
.t87-carrusel--historias .t87-carrusel__pista > * {
  flex: 0 0 clamp(280px, 30vw, 400px);
}
.t87-carrusel--historias .t87-carrusel__pista { padding-block: 4px; margin-block: 0; }
/* Aire entre el titular de la sección y las tarjetas. */
.t87-carrusel--historias { margin-top: var(--sp-6); }
.t87-trustindex {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-6);
  width: 100%;
  max-width: none;
  padding-inline: var(--t87-gutter);
}
.t87-trustindex .ti-widget,
.t87-trustindex .ti-widget-container {
  width: 100% !important;
  max-width: none !important;
}
.t87-trustindex .ti-footer,
.t87-trustindex .ti-footer .ti-rating-text,
.t87-trustindex .ti-footer .ti-rating-text * {
  color: var(--t87-blanco) !important;
}
.t87-trustindex pre {
  margin: 0;
  font-family: inherit;
  white-space: normal;
}
.t87-carrusel__base {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.t87-carrusel__flechas { display: flex; gap: var(--sp-1); flex: none; }
.t87-flecha-btn {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--t87-linea-2);
  border-radius: 50%;
  color: var(--t87-txt);
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2), opacity var(--dur-2);
}
.t87-flecha-btn:hover:not(:disabled) {
  background: var(--t87-turquesa); border-color: var(--t87-turquesa); color: var(--t87-tinta);
}
.t87-flecha-btn:disabled { opacity: .3; cursor: default; }
.t87-carrusel__barra {
  position: relative; flex: 1 1 auto;
  height: 2px;
  background: var(--t87-linea);
  overflow: hidden;
}
.t87-carrusel__barra i {
  position: absolute; inset-block: 0; left: 0;
  display: block; width: 30%;
  background: var(--t87-turquesa);
  transition: transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out);
}

/* ---------- 10. POR QUÉ (razones) ---------- */
.t87-razones {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: var(--sp-5);
  border-top: 1px solid var(--t87-linea);
}
.t87-razon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--t87-linea);
  transition: background var(--dur-2);
}
.t87-razon:hover { background: rgba(249,249,249,.02); }
.t87-razon__num {
  font-family: var(--t87-display);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .1em;
  color: var(--t87-turquesa);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.t87-razon__t {
  font-size: var(--fs-xl);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.t87-razon__d { color: var(--t87-txt-2); max-width: 60ch; }

@media (min-width: 900px) {
  .t87-razon { grid-template-columns: 80px 1fr 1fr; gap: var(--sp-4); align-items: start; }
  .t87-razon__d { padding-top: 4px; }
}

/* ---------- 11. HISTORIAS ---------- */
.t87-historias { background: var(--t87-tinta-2); }

/* Con foto de fondo, la sección se convierte en un plano con parallax. */
.t87-historias--foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--t87-tinta);
}
.t87-historias__fondo {
  position: absolute; inset: -12% 0;   /* margen para que el parallax no descubra bordes */
  z-index: -2;
}
.t87-historias__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* Las tarjetas llevan su propio fondo esmerilado, así que el velo puede ser
   ligero: lo justo para fundir los bordes y sostener el titular. */
.t87-historias__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(13,22,11,.88) 0%, rgba(13,22,11,.40) 34%,
    rgba(13,22,11,.46) 62%, rgba(13,22,11,.90) 100%);
}
/* Sobre foto, las tarjetas de testimonio necesitan cuerpo propio. */
.t87-historias--foto .t87-hist {
  background: rgba(13,22,11,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.t87-hist-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.t87-hist {
  display: flex; flex-direction: column;
  padding: var(--sp-4);
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio-l);
  background: var(--t87-tinta);
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.t87-hist:hover { border-color: var(--t87-turquesa); transform: translateY(-4px); }
.t87-hist__comilla {
  font-family: var(--t87-display);
  font-size: 3.5rem; line-height: .6;
  color: var(--t87-turquesa);
  margin-bottom: var(--sp-2);
}
.t87-hist__texto {
  font-size: var(--fs-lg);
  line-height: 1.55;
  margin-bottom: var(--sp-3);
  flex-grow: 1;
}
.t87-hist__quien {
  display: flex; align-items: center; gap: 12px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--t87-linea);
}
.t87-hist__avatar {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--t87-turquesa), var(--t87-turquesa-oscuro));
  color: var(--t87-tinta);
  font-family: var(--t87-display);
  font-weight: 700; font-size: var(--fs-sm);
}
/* Con foto real del pasajero, el avatar la muestra en vez de las iniciales.
   Va algo mayor que la versión con iniciales: una cara necesita más tamaño
   que dos letras para leerse. */
.t87-hist__avatar--foto {
  padding: 0;
  overflow: hidden;
  width: 56px; height: 56px;
  border: 1px solid var(--t87-linea-2);
  background: var(--t87-tinta-2);
}
.t87-hist__avatar--foto img { width: 100%; height: 100%; object-fit: cover; }
.t87-hist__nombre { font-weight: 600; font-size: var(--fs-sm); }
.t87-hist__viaje { font-size: var(--fs-xs); color: var(--t87-txt-3); }

@media (min-width: 760px)  { .t87-hist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .t87-hist-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 12. COMUNIDAD ---------- */
.t87-comunidad { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 1000px) {
  .t87-comunidad { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-6); }
}
.t87-comunidad__texto .t87-bajada { margin-top: var(--sp-3); max-width: 44ch; }
.t87-comunidad__acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
}
.t87-comunidad__muro { min-width: 0; }

/*
 * Muro de fotos: dos columnas que se desplazan despacio en sentidos opuestos.
 * Cada columna lleva su contenido duplicado, y la animación termina justo en el
 * inicio de la segunda copia; como son idénticas, el bucle no se ve.
 * El desplazamiento es del 50% menos medio hueco: si no, el salto arrastra la
 * mitad del `gap` en cada vuelta y se nota el tirón.
 */
.t87-muro {
  --muro-hueco: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--muro-hueco);
  height: clamp(420px, 62vh, 660px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.t87-muro__col {
  display: flex; flex-direction: column;
  gap: var(--muro-hueco);
  animation: t87-muro-sube 46s linear infinite;
  will-change: transform;
}
.t87-muro__col--baja { animation-name: t87-muro-baja; animation-duration: 54s; }
.t87-muro:hover .t87-muro__col { animation-play-state: paused; }

.t87-muro__foto {
  margin: 0;
  border-radius: var(--t87-radio-l);
  overflow: hidden;
  background: var(--t87-tinta-2);
  border: 1px solid var(--t87-linea);
}
/*
 * El ritmo de alturas lo pone el CSS, no el recorte del archivo: así el muro se
 * ve variado con cualquier juego de fotos que carguen.
 */
.t87-muro__foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.t87-muro__foto:nth-child(3n + 2) img { aspect-ratio: 1 / 1; }
.t87-muro__foto:nth-child(4n + 3) img { aspect-ratio: 3 / 4; }

@keyframes t87-muro-sube {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - var(--muro-hueco) / 2)); }
}
@keyframes t87-muro-baja {
  from { transform: translateY(calc(-50% - var(--muro-hueco) / 2)); }
  to   { transform: translateY(0); }
}

.t87-com-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: var(--sp-5);
}
.t87-com-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--t87-radio);
  background:
    radial-gradient(100% 100% at 30% 0%, rgba(0,229,240,.12), transparent 65%),
    linear-gradient(155deg, #0D160B, #0D160B);
  border: 1px solid var(--t87-linea);
}
.t87-com-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.t87-com-item:hover img { transform: scale(1.06); }
.t87-com-item__meta {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--sp-2);
  display: flex; justify-content: space-between;
  font-family: var(--t87-display);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t87-txt-2);
  background: linear-gradient(180deg, transparent, rgba(13,22,11,.85));
}
@media (min-width: 760px)  { .t87-com-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .t87-com-grid { grid-template-columns: repeat(5, 1fr); } }

/* Fondo con parallax reutilizable (historias, llamada final…) */
.t87-fondo {
  position: absolute; inset: -12% 0;   /* margen para que el parallax no descubra bordes */
  z-index: -2;
}
.t87-fondo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.t87-fondo__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(13,22,11,.90) 0%, rgba(13,22,11,.56) 34%,
    rgba(13,22,11,.62) 64%, rgba(13,22,11,.92) 100%);
}

/* ---------- 13. CTA FINAL ---------- */
.t87-cta {
  position: relative;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 120% at 50% 110%, rgba(0,229,240,.20) 0%, transparent 62%),
    var(--t87-tinta);
}
/* Con foto de fondo el degradado turquesa estorba: manda la imagen. */
.t87-cta--foto { background: var(--t87-tinta); }
/* Con el anillo en blanco sólido encima, la foto necesita asentarse un poco más
   para que titular y anillo se lean sin pelearse con ella. */
.t87-cta--foto .t87-fondo__velo {
  background:
    linear-gradient(180deg, rgba(13,22,11,.94) 0%, rgba(13,22,11,.74) 40%, rgba(13,22,11,.96) 100%),
    radial-gradient(70% 110% at 50% 110%, rgba(0,229,240,.14) 0%, transparent 62%);
}
/* Más contenido que en la portada: el titular cede tamaño para caber dentro del anillo. */
.t87-cta__titulo {
  font-size: clamp(2.1rem, 1.4rem + 2.9vw, 4rem);
  font-style: italic; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

/*
 * Anillo de texto giratorio detrás de la llamada final. Decorativo: el mensaje
 * va en el centro, en texto normal. Sobre foto de fondo se atenúa para no
 * pelearse con el titular.
 */
/*
 * El anillo es más ancho que la sección a propósito: se sale por los lados y por
 * abajo, como en la referencia, y el recorte lo hace el `overflow` de la sección.
 * Va por encima del velo pero nunca tapa la foto de fondo, que sigue con su
 * parallax en la capa de más atrás.
 */
.t87-cta {
  display: grid; place-items: center;
  /* El aire lo pone el anillo, así que la sección no necesita el relleno completo.
     Y tiene que quedar más baja que el radio del círculo: si no, el anillo se
     cierra dentro y deja de verse cortado por el pie. */
  padding-block: clamp(64px, 6vw, 104px);
  min-height: clamp(460px, 54vh, 600px);
}
/* Solo el contenido va en la celda de la rejilla. Si el anillo también entrara,
   su bloque contenedor sería el área de rejilla -ya con el padding descontado- y
   el arco acabaría sobre el titular. */
/* Bajado respecto al centro geométrico: arriba pasa el arco del anillo y el
   titular se le montaba encima. */
.t87-cta__centro {
  grid-area: 1 / 1;
  position: relative; z-index: 2;
  transform: translateY(44px);
}
@media (max-width: 700px) { .t87-cta__centro { transform: none; } }

/*
 * Fuera del flujo: si el anillo fuera un elemento normal, la sección crecería
 * hasta contenerlo entero y se vería el círculo completo. Absoluto y bajado, solo
 * asoma el arco de arriba; la mitad de abajo se hunde bajo el pie.
 */
/*
 * Anclado arriba, no al centro: así el arco asoma siempre a la misma altura sea
 * cual sea el alto de la sección, y el centro del círculo cae por debajo del
 * borde inferior. Es más ancho que la ventana a propósito; los costados se
 * cortan igual que en la referencia.
 */
.t87-anillo {
  position: absolute;
  left: 50%; top: 0;
  z-index: 1;
  width: min(1180px, 94vw);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -6%);
}
.t87-anillo svg {
  width: 100%; height: 100%;
  animation: t87-gira 34s linear infinite;
}
/* Los dos colores de la marca, igual que en el resto de la web. */
.t87-anillo text {
  font-family: var(--t87-display);
  font-size: 38px;
  font-weight: 700;
  fill: var(--t87-blanco);
}
.t87-anillo__acento,
.t87-anillo__punto { fill: var(--t87-turquesa); }
@keyframes t87-gira { to { transform: rotate(360deg); } }

/* En pantallas pequeñas el anillo no cabe alrededor del texto: se retira. */
@media (max-width: 700px) {
  .t87-anillo { display: none; }
}
.t87-cta .t87-bajada { margin-inline: auto; }
.t87-cta__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); }

/* ---------- 14. PIE ---------- */
.t87-pie { border-top: 1px solid var(--t87-linea); padding-block: var(--sp-5) var(--sp-3); }
.t87-pie__top {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--t87-linea);
}
.t87-pie__logo img { height: 34px; margin-bottom: var(--sp-2); }
.t87-pie__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.t87-pie h4 {
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--t87-txt-3); margin-bottom: var(--sp-2); font-weight: 600;
}
.t87-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.t87-pie ul a {
  display: inline-flex; align-items: center;
  min-height: 44px;   /* área táctil mínima */
  color: var(--t87-txt-2); font-size: var(--fs-sm);
  transition: color var(--dur-1);
}
.t87-pie ul a:hover { color: var(--t87-turquesa); }
.t87-pie__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
  padding-top: var(--sp-3);
  font-size: var(--fs-xs); color: var(--t87-txt-3);
}
.t87-pie__credit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  white-space: nowrap;
}
.t87-pie__credit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  transition: color var(--dur-1);
}
.t87-pie__credit-link:hover { color: var(--t87-blanco); }
.t87-pie__credit-link img {
  display: block;
  width: 22px;
  height: 21px;
  object-fit: contain;
}
@media (min-width: 900px) {
  .t87-pie__top { grid-template-columns: 1.4fr 2fr; gap: var(--sp-6); }
  .t87-pie__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 699px) {
  .t87-pie__credit {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* ---------- 15. WHATSAPP FLOTANTE ---------- */
.t87-wa {
  position: fixed; right: 18px; bottom: 18px;
  z-index: var(--z-flotante);
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding-inline: 16px;
  border-radius: 100px;
  background: #25D366; color: #0D160B;
  font-family: var(--t87-display);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(13,22,11,.4);
  /* 100% de su alto + el offset inferior, para que quede totalmente fuera de pantalla */
  transform: translateY(calc(100% + 28px));
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-2);
}
.t87-wa.esta-visible { transform: translateY(0); }
.t87-wa:hover { box-shadow: 0 14px 38px rgba(37,211,102,.35); }
.t87-wa span { display: none; }
@media (min-width: 560px) { .t87-wa span { display: inline; } }

/* ---------- 15b. PÁGINAS INTERIORES (archivo y ficha de programa) ---------- */
/* La cabecera es fija: las páginas sin hero necesitan aire arriba, pero solo el
   suficiente para librarla. Con `--sp-seccion` completo quedaba un hueco enorme. */
.t87-seccion--cabecera { padding-top: clamp(104px, 6vw + 68px, 148px); }
.t87-seccion--sin-tope { padding-top: 0; }

/* Filtros por deporte */
.t87-filtros {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin-top: var(--sp-4);
}
.t87-filtro {
  display: inline-flex; align-items: center; min-height: 40px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--t87-linea);
  border-radius: 999px;
  font-family: var(--t87-display);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .04em;
  color: var(--t87-txt-2);
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}
.t87-filtro:hover { color: var(--t87-txt); border-color: var(--t87-linea-2); }
.t87-filtro.esta-activo {
  background: var(--t87-turquesa); border-color: var(--t87-turquesa);
  color: var(--t87-txt-inv);
}
/* El filtro en vivo no navega: el cursor no debe prometer un enlace. */
[data-t87-filtros] .t87-filtro { cursor: pointer; }
.t87-prog[hidden] { display: none; }
.t87-filtro-vacio[hidden] { display: none; }
.t87-filtro-vacio { margin-top: var(--sp-5); }

/* Paginación */
.t87-paginacion { margin-top: var(--sp-6); }
.t87-paginacion .nav-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center;
}
.t87-paginacion .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: var(--sp-1);
  border: 1px solid var(--t87-linea); border-radius: var(--t87-radio);
  font-family: var(--t87-display); font-weight: 600;
  color: var(--t87-txt-2);
  transition: color var(--dur-1), border-color var(--dur-1);
}
.t87-paginacion .page-numbers:hover { color: var(--t87-txt); border-color: var(--t87-linea-2); }
.t87-paginacion .page-numbers.current {
  background: var(--t87-turquesa); border-color: var(--t87-turquesa); color: var(--t87-txt-inv);
}

/* ---------- FICHA DE PROGRAMA ---------- */
.t87-ficha__cabecera { padding-top: clamp(96px, 4vw + 68px, 124px); padding-bottom: var(--sp-4); }
/* El titular de una ficha no compite con el de la portada: informa, no impacta.
   Sin tope de ancho: cabe en una línea y solo parte cuando de verdad no entra. */
.t87-ficha__cabecera .t87-h-seccion {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
  text-wrap: balance;
}
@media (max-width: 699px) {
  .t87-ficha__cabecera .t87-h-seccion {
    width: 100%;
    max-width: none;
    text-wrap: wrap;
  }
}
.t87-ficha__sumario {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-lg);
  color: var(--t87-txt-2);
}
.t87-ficha__sumario span { display: inline-flex; align-items: center; }
.t87-ficha__sumario span + span::before {
  content: '\00B7'; margin-right: var(--sp-3); color: var(--t87-txt-3);
}

.t87-ficha__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-seccion);
  align-items: start;
}
@media (min-width: 1000px) {
  .t87-ficha__cuerpo { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); }
}
.t87-ficha__principal { min-width: 0; }

/*
 * Galería en mosaico cuadrado: la primera ocupa cuatro casillas y el resto una
 * cada una. Todas las casillas son cuadradas, así que el bloque no cambia de
 * proporción según cuántas fotos haya.
 */
.t87-galeria {
  position: relative;
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  border-radius: var(--t87-radio-l);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.t87-galeria__foto {
  margin: 0; padding: 0;
  overflow: hidden;
  background: var(--t87-tinta-2);
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  border-radius: 0;
}
.t87-galeria__foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--dur-3) var(--ease-out);
}
.t87-galeria__foto:hover img,
.t87-galeria__foto:focus-visible img { transform: scale(1.05); }
.t87-galeria__foto:first-child { grid-column: span 2; grid-row: span 2; }
/* A partir de la quinta no caben en el mosaico; siguen ahí para el visor. */
.t87-galeria__foto:nth-of-type(n+4) { display: none; }

@media (min-width: 760px) {
  .t87-galeria { grid-template-columns: repeat(4, 1fr); }
  .t87-galeria__foto:nth-of-type(n+4) { display: block; }
  .t87-galeria__foto:nth-of-type(n+6) { display: none; }
}
/* Con una sola foto no hay mosaico que armar. */
.t87-galeria__foto:only-of-type { grid-column: 1 / -1; grid-row: auto; }

.t87-galeria__mas {
  position: absolute; left: var(--sp-2); bottom: var(--sp-2);
  z-index: 2;
  padding: 10px 16px;
  border-radius: 100px;
  background: rgba(13,22,11,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(249,249,249,.28);
  font-family: var(--t87-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t87-txt);
  transition: background var(--dur-2), border-color var(--dur-2);
}
.t87-galeria__mas:hover { background: var(--t87-turquesa); color: var(--t87-txt-inv); border-color: var(--t87-turquesa); }

/* Visor a pantalla completa */
.t87-visor {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--sp-5) var(--sp-3);
  background: rgba(13,22,11,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.t87-visor.esta-abierto { opacity: 1; }
.t87-visor img {
  max-width: min(1200px, 100%);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--t87-radio);
}
.t87-visor__cerrar,
.t87-visor__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--t87-linea-2);
  border-radius: 50%;
  color: var(--t87-txt);
  background: rgba(13,22,11,.6);
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.t87-visor__cerrar:hover,
.t87-visor__nav:hover { background: var(--t87-turquesa); color: var(--t87-txt-inv); border-color: var(--t87-turquesa); }
.t87-visor__cerrar { top: var(--sp-3); right: var(--sp-3); font-size: 22px; line-height: 1; }
.t87-visor__nav--prev { left: var(--sp-3); top: 50%; transform: translateY(-50%); }
.t87-visor__nav--next { right: var(--sp-3); top: 50%; transform: translateY(-50%); }
.t87-visor__cuenta {
  position: absolute; bottom: var(--sp-3); left: 50%; transform: translateX(-50%);
  font-family: var(--t87-display);
  font-size: var(--fs-sm); letter-spacing: .16em;
  color: var(--t87-txt-3);
  font-variant-numeric: tabular-nums;
}
body.t87-sin-scroll { overflow: hidden; }

.t87-ficha__intro { max-width: 68ch; margin-bottom: var(--sp-6); }

.t87-bloque { padding-top: var(--sp-5); border-top: 1px solid var(--t87-linea); }
.t87-bloque + .t87-bloque { margin-top: var(--sp-5); }
.t87-bloque__t {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  margin-bottom: var(--sp-3);
}
.t87-bloque__st {
  font-family: var(--t87-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t87-turquesa);
  margin: var(--sp-4) 0 var(--sp-2);
}
.t87-bloque--dos { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .t87-bloque--dos { grid-template-columns: 1fr 1fr; } }

/* Información general */
.t87-general { display: grid; gap: var(--sp-3); margin: 0; }
.t87-general div { display: grid; gap: 4px; }
.t87-general dt {
  font-family: var(--t87-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t87-txt-3);
}
.t87-general dd { margin: 0; color: var(--t87-txt); }

/* Qué esperar: etapas numeradas */
.t87-etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.t87-etapa {
  position: relative;
  counter-increment: etapa;
  padding: 0 0 var(--sp-4) var(--sp-5);
  border-left: 1px solid var(--t87-linea);
}
.t87-etapa:last-child { border-left-color: transparent; padding-bottom: 0; }
.t87-etapa::before {
  content: counter(etapa);
  position: absolute; left: -13px; top: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--t87-turquesa);
  color: var(--t87-txt-inv);
  font-family: var(--t87-display);
  font-size: var(--fs-xs); font-weight: 700;
}
.t87-etapa__t { font-size: var(--fs-lg); margin-bottom: 6px; line-height: 1.2; }
.t87-etapa__d { color: var(--t87-txt-2); max-width: 62ch; }

/* Categorías */
.t87-categorias { display: grid; gap: var(--sp-2); }
@media (min-width: 760px) { .t87-categorias { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.t87-categoria {
  padding: var(--sp-3);
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio-l);
  background: var(--t87-tinta-2);
}
.t87-categoria__t { font-size: var(--fs-lg); margin-bottom: 8px; }
.t87-categoria__d { font-size: var(--fs-sm); color: var(--t87-txt-2); }
.t87-categoria__p { margin-top: var(--sp-2); }
.t87-categoria__p b {
  display: block;
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--t87-turquesa);
  font-variant-numeric: tabular-nums;
}
.t87-categoria__p span { font-size: var(--fs-xs); color: var(--t87-txt-3); }

/* Disponibilidad y valores de F1 */
.t87-disponibilidad { display: grid; gap: var(--sp-4); }
.t87-disponibilidad__intro p { max-width: 65ch; color: var(--t87-txt-2); }
.t87-sectores { padding: var(--sp-3); border: 1px solid var(--t87-linea); border-radius: var(--t87-radio-l); background: var(--t87-tinta-2); }
.t87-sectores h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.t87-sectores__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.t87-sector { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 8px 10px; border: 1px solid var(--t87-linea); border-radius: var(--t87-radio); }
.t87-sector__nombre { font-family: var(--t87-display); font-size: var(--fs-lg); font-weight: 700; color: var(--t87-txt); }
.t87-sector__estado { font-size: var(--fs-xs); font-weight: 700; color: var(--t87-txt-2); text-align: right; }
.t87-sector--disponible { border-color: rgba(0,229,240,.45); }
.t87-sector--disponible .t87-sector__estado { color: var(--t87-turquesa); }
.t87-sector--agotado { opacity: .62; }
.t87-sector__dot { display: inline-block; width: 8px; height: 8px; margin: 0 5px 0 14px; border-radius: 50%; background: var(--t87-turquesa); }
.t87-sector__dot--no { background: var(--t87-txt-3); }
.t87-sectores__leyenda { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--t87-txt-3); }
.t87-programas-valores__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 980px) { .t87-programas-valores__grid { grid-template-columns: 1fr; } }
.t87-programa-valores { min-width: 0; padding: var(--sp-3); border: 1px solid var(--t87-linea); border-radius: var(--t87-radio-l); background: var(--t87-tinta-2); }
.t87-programa-valores--aereo { border-color: rgba(0,229,240,.35); }
.t87-programa-valores__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: 6px; }
.t87-programa-valores__cabecera h3 { font-size: var(--fs-lg); }
.t87-programa-valores__cabecera strong { flex: none; padding: 5px 8px; border-radius: 100px; background: var(--t87-turquesa); color: var(--t87-tinta); font-family: var(--t87-display); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.t87-programa-valores__nota { margin-bottom: var(--sp-2); font-size: var(--fs-xs); color: var(--t87-txt-3); }
/*
 * Tabla de valores (programa F1). Los selectores van con .t87-programa-valores
 * delante porque el reset de Hello Elementor pinta bordes verticales y rayas
 * (table tbody > tr:nth-child(odd) > td) con más especificidad que una clase sola.
 */
.t87-tabla-scroll { width: 100%; }
.t87-programa-valores .t87-tabla-scroll table {
  width: 100%; margin: 0;
  border-collapse: collapse; table-layout: auto;
  font-size: var(--fs-sm);
}
.t87-programa-valores .t87-tabla-scroll th,
.t87-programa-valores .t87-tabla-scroll td {
  padding: 14px 12px;
  border: 0; border-bottom: 1px solid var(--t87-linea);
  background: none;
  text-align: left; vertical-align: middle;
  line-height: 1.35;
}
.t87-programa-valores .t87-tabla-scroll thead th {
  padding-top: 0;
  font-family: var(--t87-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--t87-txt-3);
}
.t87-programa-valores .t87-tabla-scroll tbody th {
  white-space: nowrap;
  font-family: var(--t87-display);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--t87-turquesa);
}
.t87-programa-valores .t87-tabla-scroll tbody td { color: var(--t87-txt); }
.t87-programa-valores .t87-tabla-scroll th:nth-child(n+3),
.t87-programa-valores .t87-tabla-scroll td:nth-child(n+3) {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.t87-programa-valores .t87-tabla-scroll tbody td:nth-child(n+3) { font-weight: 600; }
.t87-programa-valores .t87-tabla-scroll tbody tr:last-child > * { border-bottom: 0; }

/* Teléfono: cada fila es una ficha (sector · hotel arriba, Single y Doble abajo) */
@media (max-width: 699px) {
  .t87-programa-valores .t87-tabla-scroll thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .t87-programa-valores .t87-tabla-scroll tbody tr {
    display: grid;
    /* Columna del sector fija: «Orange» no empuja al resto y todas las filas se alinean */
    grid-template-columns: 76px 1fr 1fr;
    grid-template-areas: "sector hotel hotel" "sector sgl dbl";
    gap: 8px 14px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--t87-linea);
  }
  .t87-programa-valores .t87-tabla-scroll tbody tr:last-child { border-bottom: 0; }
  .t87-programa-valores .t87-tabla-scroll tbody th,
  .t87-programa-valores .t87-tabla-scroll tbody td { display: block; padding: 0; border: 0; text-align: left; }
  .t87-programa-valores .t87-tabla-scroll tbody th {
    grid-area: sector; align-self: center;
    width: 100%;
    padding: 6px 4px;
    border: 1px solid rgba(0,229,240,.5); border-radius: 100px;
    font-size: 12px; text-align: center;
  }
  .t87-programa-valores .t87-tabla-scroll tbody td:nth-child(2) { grid-area: hotel; font-weight: 600; }
  .t87-programa-valores .t87-tabla-scroll tbody td:nth-child(3) { grid-area: sgl; }
  .t87-programa-valores .t87-tabla-scroll tbody td:nth-child(4) { grid-area: dbl; }
  .t87-programa-valores .t87-tabla-scroll tbody td:nth-child(n+3) { text-align: left; }
  .t87-programa-valores .t87-tabla-scroll tbody td:nth-child(3)::before,
  .t87-programa-valores .t87-tabla-scroll tbody td:nth-child(4)::before {
    display: block; margin-bottom: 2px;
    font-family: var(--t87-display);
    font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--t87-txt-3);
  }
  .t87-programa-valores .t87-tabla-scroll tbody td:nth-child(3)::before { content: 'Single'; }
  .t87-programa-valores .t87-tabla-scroll tbody td:nth-child(4)::before { content: 'Doble'; }
}
.t87-tabla-scroll tbody tr:last-child th, .t87-tabla-scroll tbody tr:last-child td { border-bottom: 0; }
/*
 * Tabla de valores de la ficha (campo «Tabla de valores»): columnas libres.
 * La segunda columna es el texto (hotel) y desde la tercera van los datos,
 * con su nombre de columna encima en el teléfono (data-label).
 */
@media (max-width: 699px) {
  .t87-programa-valores.t87-programa-valores--ficha .t87-tabla-scroll tbody tr {
    grid-template-columns: 76px 1fr 1fr;
    grid-template-areas: none;
  }
  .t87-programa-valores.t87-programa-valores--ficha .t87-tabla-scroll tbody th { grid-column: 1; grid-row: 1 / span 2; }
  .t87-programa-valores.t87-programa-valores--ficha .t87-tabla-scroll tbody td { grid-area: auto; grid-row: 2; }
  .t87-programa-valores.t87-programa-valores--ficha .t87-tabla-scroll tbody td:nth-child(2) { grid-column: 2 / -1; grid-row: 1; }
  .t87-programa-valores.t87-programa-valores--ficha .t87-tabla-scroll tbody td[data-label]:not(:nth-child(2))::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-family: var(--t87-display);
    font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--t87-txt-3);
  }
}

/* Listas de incluye / no incluye */
.t87-lista { list-style: none; margin: 0; padding: 0; }
.t87-lista li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--t87-txt-2);
}
.t87-lista li::before {
  content: '\00B7';
  position: absolute; left: 6px; top: -2px;
  color: var(--t87-txt-3); font-size: 1.4em;
}
.t87-lista--si li::before { content: '\2713'; color: var(--t87-turquesa); font-size: 1em; top: 0; left: 0; }
.t87-lista--no li::before { content: '\2715'; color: var(--t87-txt-3); font-size: .9em; top: 0; left: 0; }

/* Preguntas frecuentes */
.t87-faq__item { border-bottom: 1px solid var(--t87-linea); }
.t87-faq__item summary {
  padding: var(--sp-3) 0;
  cursor: pointer;
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--t87-txt);
  list-style: none;
  display: flex; justify-content: space-between; gap: var(--sp-2);
}
.t87-faq__item summary::-webkit-details-marker { display: none; }
.t87-faq__item summary::after {
  content: '+'; color: var(--t87-turquesa); font-size: 1.4em; line-height: 1;
  transition: transform var(--dur-2) var(--ease-out);
}
.t87-faq__item[open] summary::after { transform: rotate(45deg); }
.t87-faq__item p { padding-bottom: var(--sp-3); color: var(--t87-txt-2); max-width: 68ch; }

.t87-ubicacion { color: var(--t87-txt-2); margin-bottom: var(--sp-2); }
.t87-mapa {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  margin: var(--sp-3) 0 var(--sp-2);
  overflow: hidden;
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio-l);
  background: var(--t87-tinta-2);
}
.t87-mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Columna derecha: datos y contacto, sin calendario */
.t87-ficha__lateral { position: relative; }
/* En móvil, la información de salida y reserva debe aparecer antes de la
   galería y del contenido largo del programa. */
@media (max-width: 999px) {
  .t87-ficha__lateral { grid-row: 1; }
  .t87-ficha__principal { grid-row: 2; }
}

@media (max-width: 600px) {
  .t87-mapa {
    aspect-ratio: 4 / 3;
    min-height: 260px;
  }
}
@media (min-width: 1000px) {
  .t87-ficha__lateral { position: sticky; top: 108px; }
}
.t87-reserva {
  padding: var(--sp-4);
  border: 1px solid var(--t87-linea-2);
  border-radius: var(--t87-radio-l);
  background: var(--t87-tinta-2);
}
.t87-reserva__rotulo {
  font-family: var(--t87-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t87-txt-3);
}
.t87-reserva__usd {
  font-family: var(--t87-display);
  font-size: var(--fs-2xl); font-weight: 700;
  line-height: 1.05;
  color: var(--t87-turquesa);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.t87-reserva__clp {
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--t87-txt);
  font-variant-numeric: tabular-nums;
}
.t87-reserva__clp span {
  font-family: var(--t87-texto);
  font-size: var(--fs-xs); font-weight: 400;
  color: var(--t87-txt-3);
  letter-spacing: .08em;
}
.t87-reserva__nota {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--t87-txt-3);
  line-height: 1.5;
}
.t87-reserva__datos {
  display: grid; gap: var(--sp-2);
  margin: var(--sp-4) 0;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--t87-linea);
  border-bottom: 1px solid var(--t87-linea);
}
.t87-reserva__datos div {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  align-items: baseline;
}
.t87-reserva__datos dt {
  font-size: var(--fs-sm); color: var(--t87-txt-3);
  flex: none;
}
.t87-reserva__datos dd {
  margin: 0; text-align: right;
  font-size: var(--fs-sm); font-weight: 600; color: var(--t87-txt);
}
.t87-reserva__cta { width: 100%; }
.t87-reserva__pie {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--t87-txt-3);
  line-height: 1.5;
}

/* ---------- URGENCIA: cuenta regresiva y cupos ----------
   Todo sale de datos reales del programa (fecha de salida y cupos): nada de
   relojes que se reinician ni barras inventadas. */
.t87-urgencia {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px;
}
.t87-urgencia__faltan {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--t87-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t87-txt);
  text-shadow: 0 1px 12px rgba(13,22,11,.8);
}
.t87-urgencia__faltan::before {
  content: ''; flex: none;
  width: 8px; height: 8px;
  border: 1.5px solid var(--t87-turquesa);
  border-radius: 50%;
}
.t87-urgencia--cabecera { margin-top: var(--sp-3); }
.t87-urgencia--cabecera .t87-urgencia__faltan { font-size: var(--fs-sm); }
.t87-prog__urgencia { margin-bottom: 12px; }

.t87-chip-cupos {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--t87-linea-2);
  border-radius: 100px;
  font-family: var(--t87-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--t87-txt);
  background: rgba(13,22,11,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.t87-chip-cupos--pocos   { color: var(--t87-tinta); background: var(--t87-turquesa); border-color: var(--t87-turquesa); }
.t87-chip-cupos--ultimos { color: #F9F9F9; background: var(--t87-alerta); border-color: var(--t87-alerta); }
.t87-chip-cupos--agotado { color: var(--t87-txt-3); }
.t87-chip-cupos--ultimos::before {
  content: ''; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: t87-latido 1.4s ease-in-out infinite;
}

/* Reloj de la ficha */
.t87-cuenta {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--t87-linea);
}
.t87-cuenta__reloj {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 10px;
}
.t87-cuenta__u {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 4px 9px;
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio);
  background: var(--t87-tinta);
}
.t87-cuenta__u b {
  font-family: var(--t87-display);
  font-size: 1.75rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--t87-txt);
}
.t87-cuenta__u:first-child b { color: var(--t87-turquesa); }
.t87-cuenta__u i {
  margin-top: 6px;
  font-style: normal;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--t87-txt-3);
}

/* Cupos en la ficha */
.t87-cupos { margin-bottom: var(--sp-3); color: var(--t87-txt); }
.t87-cupos--pocos   { color: var(--t87-turquesa); }
.t87-cupos--ultimos { color: var(--t87-alerta); }
.t87-cupos--agotado { color: var(--t87-txt-2); }
.t87-cupos__texto {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.t87-cupos__punto {
  flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor;
}
.t87-cupos--ultimos .t87-cupos__punto { animation: t87-latido 1.4s ease-in-out infinite; }
.t87-cupos__barra {
  height: 6px; margin-top: 10px;
  border-radius: 100px;
  background: var(--t87-linea-2);
  overflow: hidden;
}
.t87-cupos__barra i { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.t87-cupos__nota { margin-top: 8px; font-size: var(--fs-xs); color: var(--t87-txt-3); }

@keyframes t87-latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .t87-chip-cupos--ultimos::before,
  .t87-cupos--ultimos .t87-cupos__punto { animation: none; }
}

/* Contenido largo del programa (lo que escribe el equipo en el editor) */
.t87-prosa { max-width: 68ch; color: var(--t87-txt-2); }
.t87-prosa > * + * { margin-top: var(--sp-3); }
.t87-prosa h2, .t87-prosa h3 { color: var(--t87-txt); line-height: 1.1; }
.t87-prosa h2 { font-size: var(--fs-xl); margin-top: var(--sp-5); }
.t87-prosa h3 { font-size: var(--fs-lg); margin-top: var(--sp-4); }
.t87-prosa a { color: var(--t87-turquesa); text-decoration: underline; text-underline-offset: 3px; }
.t87-prosa ul, .t87-prosa ol { padding-left: 1.2em; }
.t87-prosa li + li { margin-top: var(--sp-1); }
.t87-prosa strong { color: var(--t87-txt); }
.t87-prosa img { border-radius: var(--t87-radio-l); }

/* Miga de pan */
.t87-migas {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--t87-txt-3);
}
.t87-migas a { color: var(--t87-txt-2); text-decoration: none; }
.t87-migas a:hover { color: var(--t87-turquesa); }
.t87-migas .breadcrumb_last { color: var(--t87-txt-2); }

/* ---------- 15c. PÁGINAS SUELTAS ---------- */
/*
 * Rejilla de contenido: el texto se queda en la columna legible y los bloques
 * anchos (carrusel, grillas) se salen a sangre sin sacarlos del flujo.
 */
.t87-pagina {
  display: grid;
  grid-template-columns:
    [sangre-inicio] minmax(var(--t87-gutter), 1fr)
    [ancho-inicio]  minmax(0, calc(var(--t87-ancho) - var(--t87-gutter) * 2))
    [ancho-fin]     minmax(var(--t87-gutter), 1fr)
    [sangre-fin];
  padding-bottom: var(--sp-seccion);
  color: var(--t87-txt-2);
}
.t87-pagina > * { grid-column: ancho-inicio / ancho-fin; }
.t87-pagina > .t87-carrusel { grid-column: sangre-inicio / sangre-fin; }
.t87-pagina > * + * { margin-top: var(--sp-4); }

.t87-pagina > p,
.t87-pagina > ul,
.t87-pagina > ol,
.t87-pagina > blockquote { max-width: 68ch; }
.t87-pagina > h2,
.t87-pagina > h3 { color: var(--t87-txt); line-height: 1.05; max-width: 24ch; }
.t87-pagina > h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); }
.t87-pagina > h3 { font-size: var(--fs-xl); margin-top: var(--sp-5); }
/* Los bloques ocupan la columna entera: el tope de 68ch es solo para el texto
   corrido, y la agenda es un <ul>, así que hay que sacarla de esa regla. */
.t87-pagina > .t87-razones,
.t87-pagina > .t87-com-grid,
.t87-pagina > .t87-hist-grid,
.t87-pagina > .t87-prog-grid,
.t87-pagina > .t87-agenda,
.t87-pagina > .t87-contacto {
  max-width: none;
  padding-left: 0;
  margin-top: var(--sp-6);
}
.t87-pagina a { color: var(--t87-turquesa); text-decoration: underline; text-underline-offset: 3px; }
.t87-pagina strong { color: var(--t87-txt); }
.t87-pagina ul, .t87-pagina ol { padding-left: 1.2em; }
.t87-pagina li + li { margin-top: var(--sp-1); }
.t87-bajada--cabecera { max-width: 60ch; margin-top: var(--sp-3); }

/* Agenda: calendario de salidas, no catálogo */
.t87-agenda { list-style: none; margin: 0; padding: 0; }
.t87-agenda__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-block: var(--sp-3);
  border-top: 1px solid var(--t87-linea);
  align-items: baseline;
}
.t87-agenda__fila:last-child { border-bottom: 1px solid var(--t87-linea); }
.t87-agenda__fecha {
  font-family: var(--t87-display);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t87-turquesa);
}
.t87-agenda__evento a {
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 700;
  font-style: italic; text-transform: uppercase;
  color: var(--t87-txt); text-decoration: none;
}
.t87-agenda__evento a:hover { color: var(--t87-turquesa); }
.t87-agenda__destino { display: block; font-size: var(--fs-sm); color: var(--t87-txt-2); font-style: normal; }
.t87-agenda__cat,
.t87-agenda__cupos { font-size: var(--fs-sm); color: var(--t87-txt-3); }
.t87-agenda__precio b {
  display: block;
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--t87-txt);
  font-variant-numeric: tabular-nums;
}
.t87-agenda__precio span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--t87-txt-3); }

@media (min-width: 900px) {
  .t87-agenda__fila {
    grid-template-columns: 130px 1fr 140px 150px 160px;
    gap: var(--sp-3);
    align-items: center;
  }
}

/* Contacto */
.t87-contacto__vias {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: var(--sp-6);
}
.t87-via {
  display: block;
  padding: var(--sp-4);
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio-l);
  background: var(--t87-tinta-2);
  text-decoration: none;
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.t87-via:hover { border-color: var(--t87-turquesa); transform: translateY(-3px); }
.t87-via__rotulo {
  display: block;
  font-family: var(--t87-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t87-turquesa);
  margin-bottom: 10px;
}
.t87-via__valor {
  display: block;
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--t87-txt);
  text-decoration: none;
}
.t87-via__pie { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--t87-txt-3); }

.t87-form {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 860px;
}
.t87-campo { display: flex; flex-direction: column; gap: 8px; margin: 0; align-items: stretch; }
.t87-campo--ancho { grid-column: 1 / -1; }
/* El botón se ciñe a su texto, no al ancho del formulario. */
.t87-campo:has(> .t87-btn) { align-items: flex-start; }
.t87-campo label {
  font-family: var(--t87-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--t87-txt-2);
}
.t87-campo input,
.t87-campo select,
.t87-campo textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  color: var(--t87-txt);
  background: var(--t87-tinta-2);
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio);
  transition: border-color var(--dur-1);
}
.t87-campo input:focus,
.t87-campo select:focus,
.t87-campo textarea:focus { border-color: var(--t87-turquesa); outline: none; }
.t87-campo textarea { resize: vertical; }
.t87-campo option { background: var(--t87-tinta-2); color: var(--t87-txt); }
.t87-form .t87-btn { justify-self: start; }

.t87-aviso {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--t87-radio);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--t87-linea-2);
}
.t87-aviso--ok    { border-color: var(--t87-turquesa); color: var(--t87-txt); }
.t87-aviso--error { border-color: #E4572E; color: var(--t87-txt); }

/* ---------- 15d. RELATO — página «Tribuna 87» ---------- */
/*
 * La historia de Rubén y Matías como reportaje: portada a sangre, capítulos
 * numerados y fotos con pie. El texto queda en una columna desplazada a la
 * derecha (alineada con el titular del capítulo) y las fotos rompen esa
 * columna para que la página respire en asimetría, no en bloques iguales.
 */
.t87-relato { --t87-sangria: 0px; }
@media (min-width: 900px) { .t87-relato { --t87-sangria: 142px; } }

/* Portada: el afiche «Nos cansamos de verlo por televisión» */
.t87-afiche {
  --alto: max(100svh, 680px);
  position: relative;
  height: var(--alto);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: var(--t87-tinta);
}
/*
 * Lienzo con la proporción del afiche (3:2) que se comporta como object-fit:
 * cover: tan ancho como la sección o tan alto como ella, lo que sea mayor, y
 * anclado al 30 % vertical como la foto. Las etiquetas de Matías y Rubén van
 * dentro con las coordenadas del afiche, así nunca se separan de ellos.
 */
.t87-afiche__lienzo {
  /* Sin z-index ni transform a propósito: así no crea su propio contexto de
     apilamiento y la foto puede ir bajo el velo y las etiquetas encima de él. */
  position: absolute;
  width: max(100cqw, calc(var(--alto) * 1.5));
  aspect-ratio: 3 / 2;
  left: calc((100cqw - max(100cqw, calc(var(--alto) * 1.5))) / 2);
  top: calc((var(--alto) - max(var(--alto), 100cqw / 1.5)) * .3);
}
.t87-afiche__foto {
  position: relative; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: t87-acerca 2.6s var(--ease-out) both;
}
@keyframes t87-acerca { from { transform: scale(1.07); } to { transform: none; } }
.t87-afiche__velo {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,22,11,.9) 0%, rgba(13,22,11,.62) 30%, rgba(13,22,11,0) 56%),
    linear-gradient(180deg, rgba(13,22,11,.78) 0%, rgba(13,22,11,0) 26%, rgba(13,22,11,0) 74%, rgba(13,22,11,.88) 100%);
}
.t87-afiche__inner {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* +40px: en laptops el bloque quedaba muy pegado al menú */
  padding-top: max(210px, calc(var(--alto) * .19 + 40px)); padding-bottom: 90px;
}
.t87-afiche__kicker {
  position: absolute; left: 50%; top: 144px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--t87-txt);
  animation: t87-aparece .9s var(--ease-out) .9s both;
}
.t87-afiche__kicker::before,
.t87-afiche__kicker::after { content: ''; width: 56px; height: 2px; background: var(--t87-turquesa); }
.t87-afiche__kicker i { font-style: normal; color: var(--t87-turquesa); }
.t87-afiche__kicker strong { color: var(--t87-turquesa); font-weight: 700; }

.t87-afiche__titulo {
  font-family: 'Poppins', var(--t87-display);
  font-weight: 800;
  /* El tope por altura evita que «Decidimos ir a vivirlo» baje hasta la etiqueta de Matías */
  font-size: min(clamp(2.6rem, 1rem + 4.6vw, 6.4rem), 8.6svh);
  line-height: .98; letter-spacing: -.035em;
  text-transform: none; font-style: normal;
  max-width: 10.5em;
}
.t87-afiche__linea { display: block; overflow: hidden; padding-bottom: .04em; }
.t87-afiche__linea > span {
  display: inline-block;
  animation: t87-sube 1s var(--ease-out) both;
  animation-delay: calc(.2s + var(--i) * .1s);
}
@keyframes t87-sube { from { transform: translateY(108%); } to { transform: none; } }

.t87-afiche__firma {
  position: relative;
  display: inline-block;
  /* Gira sobre su centro: girando desde la izquierda, en frases largas el extremo
     derecho subía hasta montarse en el titular. El margen deja aire arriba y abajo;
     el relleno de abajo es el sitio del trazo. */
  margin: .3em 0 .3em .1em;
  padding-bottom: .5em;
  transform: rotate(-6deg);
  transform-origin: center;
}
@media (max-width: 899px) {
  .t87-afiche__firma { margin-top: .12em; }
}
.t87-afiche__firma-texto {
  display: block;
  font-family: 'Yellowtail', cursive;
  font-weight: 400;
  font-size: .78em; line-height: .95;
  letter-spacing: 0;
  color: var(--t87-txt);
  animation: t87-escribe 1.2s var(--ease-io) .75s both;
}
@keyframes t87-escribe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
.t87-afiche__trazo {
  /* Fuera del flujo: sin ancho propio el SVG medía 300px por defecto y ensanchaba
     la firma aunque el texto fuera corto (y al girar, el texto bajaba de más). */
  position: absolute; left: 0; top: calc(100% - .55em);
  display: block;
  width: max(108%, 5em); height: auto;
  max-width: none;   /* el reset global (svg { max-width: 100% }) lo cortaba al ancho del texto */
  overflow: visible;
}
.t87-afiche__trazo path {
  fill: none;
  stroke: var(--t87-turquesa);
  stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 440; stroke-dashoffset: 440;
  animation: t87-traza .9s var(--ease-out) 1.6s forwards;
}
@keyframes t87-traza { to { stroke-dashoffset: 0; } }

.t87-afiche__personas { list-style: none; margin: 0; padding: 0; }
.t87-afiche__persona {
  position: absolute; z-index: 1;
  display: grid; gap: 2px;
  padding-left: 12px;
  border-left: 2px solid var(--t87-turquesa);
  animation: t87-aparece .9s var(--ease-out) 1.25s both;
}
.t87-afiche__persona strong {
  font-family: var(--t87-display);
  font-size: clamp(.9rem, .7rem + .55vw, 1.25rem); font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--t87-txt);
  white-space: nowrap;
}
.t87-afiche__persona span { font-size: clamp(.78rem, .65rem + .35vw, 1rem); color: var(--t87-txt-2); white-space: nowrap; }
/* Coordenadas del afiche (en % del lienzo) */
.t87-afiche__persona--matias { left: 18.3%; top: 74%; }   /* 74 %: en laptops (1280×800, 1366×768) la firma lo tocaba */
/*
 * Rubén se ancla por la derecha: con «· 63 años» la etiqueta ya no cabe partiendo
 * del 83 %. El cálculo la deja a 2,5 % del borde visible aunque el lienzo sea más
 * ancho que la pantalla.
 */
.t87-afiche__persona--ruben  { left: auto; right: calc((max(100cqw, var(--alto) * 1.5) - 100cqw) / 2 + 2.5cqw); top: 64%; }

.t87-afiche__lema {
  position: absolute; left: 50%; bottom: 34px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap;
  font-size: clamp(1rem, .8rem + .7vw, 1.5rem); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  animation: t87-aparece .9s var(--ease-out) 1.4s both;
}
.t87-afiche__lema::before,
.t87-afiche__lema::after { content: ''; width: 64px; height: 2px; background: var(--t87-turquesa); }
.t87-afiche__lema strong { color: var(--t87-turquesa); font-weight: 700; }
@keyframes t87-aparece { from { opacity: 0; transform: translate(var(--tx, 0), 14px); } to { opacity: 1; transform: translate(var(--tx, 0), 0); } }
.t87-afiche__kicker, .t87-afiche__lema { --tx: -50%; }

/*
 * Móvil y tablet vertical: como el afiche, el texto va sobre la foto. La foto
 * ocupa los tres cuartos de arriba y el titular empieza sobre su parte baja,
 * que un degradado funde con el fondo: las personas de la foto quedan a la
 * vista sobre el texto. En /tribuna-87/ las etiquetas de Matías y Rubén bajan
 * bajo el lema (sobre la foto tapaban a Rubén).
 */
.t87-afiche__personas--movil { display: none; }
@media (max-width: 899px) {
  .t87-afiche {
    height: auto; min-height: 100svh; container-type: normal;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .t87-afiche__lienzo {
    position: absolute; z-index: 0;
    left: 0; top: 0; right: 0;
    width: 100%; height: min(62svh, 600px);
    aspect-ratio: auto;
  }
  .t87-afiche__foto { object-position: 60% 22%; }
  .t87-afiche__lienzo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(13,22,11,.6) 0%, rgba(13,22,11,0) 16%, rgba(13,22,11,0) 26%,
      rgba(13,22,11,.78) 50%, rgba(13,22,11,.94) 74%, var(--t87-tinta) 100%);
  }
  .t87-afiche__velo { display: none; }
  .t87-afiche__lienzo .t87-afiche__personas { display: none; }
  .t87-afiche__personas--movil {
    display: flex; justify-content: space-between; gap: var(--sp-2);
    margin-top: var(--sp-4);
  }
  .t87-afiche__persona { position: static; max-width: 50%; }
  .t87-afiche__persona strong { white-space: normal; }
  .t87-afiche__inner {
    position: relative; z-index: 1;
    height: auto; padding-top: 28svh; padding-bottom: var(--sp-5);
  }
  /* Tribuna 87: algo más abajo para no tapar la cara de Matías */
  .t87-relato .t87-afiche__inner { padding-top: 40svh; }
  /* …y el degradado empieza más abajo, para que su cara no quede en sombra */
  .t87-relato .t87-afiche__lienzo::after {
    background: linear-gradient(180deg,
      rgba(13,22,11,.6) 0%, rgba(13,22,11,0) 16%, rgba(13,22,11,0) 52%,
      rgba(13,22,11,.8) 76%, var(--t87-tinta) 100%);
  }
  .t87-afiche__kicker, .t87-afiche__titulo, .t87-afiche__lede { text-shadow: 0 2px 18px rgba(13,22,11,.85); }
  .t87-afiche__kicker {
    position: static; transform: none; --tx: 0;
    flex-wrap: wrap; white-space: normal; gap: 6px 10px;
    font-size: 11px; letter-spacing: .2em;
    margin-bottom: var(--sp-3);
  }
  .t87-afiche__kicker::before, .t87-afiche__kicker::after { display: none; }
  /* En el teléfono el antetítulo partido en dos líneas dejaba un «·» colgando:
     se muestran solo las dos primeras partes, en una línea. */
  .t87-afiche__kicker { letter-spacing: .14em; }
  .t87-afiche__kicker > i:last-of-type,
  .t87-afiche__kicker > span:last-child { display: none; }
  .t87-afiche__titulo { font-size: clamp(2.4rem, 1.3rem + 5.6vw, 4rem); }
  .t87-afiche__lema {
    position: static; transform: none; --tx: 0;
    margin-top: var(--sp-5);
    font-size: .875rem; letter-spacing: .18em;
  }
  .t87-afiche__lema::before, .t87-afiche__lema::after { width: 28px; }
}
@media (max-width: 420px) {
  .t87-afiche__persona strong { font-size: .8rem; }
  .t87-afiche__persona span { font-size: .72rem; }
}

/* Comunidad: misma portada, con una bajada bajo la frase manuscrita */
.t87-afiche__lede {
  max-width: 44ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-lg); line-height: 1.55;
  color: var(--t87-txt-2);
  animation: t87-aparece .9s var(--ease-out) 1.5s both;
}
/* El grupo ocupa el centro de la foto: en móvil se encuadra al medio */
@media (max-width: 899px) {
  .t87-afiche--comunidad .t87-afiche__foto { object-position: 40% 50%; }
  /* El grupo está en la mitad baja de la foto: se sube para que quede sobre el titular */
  .t87-afiche--comunidad .t87-afiche__lienzo { top: -12svh; }
}
/* Próximos viajes: la cancha al centro; en escritorio, el texto va sobre la grada de la izquierda */
.t87-afiche--viajes .t87-afiche__foto { object-position: 50% 50%; }
/* Programas: la cancha queda a la derecha; en el teléfono se encuadra sobre ella */
@media (max-width: 899px) {
  .t87-afiche--programas .t87-afiche__foto { object-position: 72% 50%; }
}
/* Los filtros por deporte van ahora sobre la grilla, bajo la portada */
.t87-programas-lista .t87-filtros { margin-top: 0; margin-bottom: var(--sp-4); }
/* Contacto: las personas están a la derecha de la foto; en el teléfono se encuadra sobre ellas */
@media (max-width: 899px) {
  .t87-afiche--contacto .t87-afiche__foto { object-position: 70% 35%; }
}
/* Portadas con bajada: velo más denso a la izquierda para que la bajada se lea sobre fotos claras */
.t87-afiche--viajes .t87-afiche__velo,
.t87-afiche--comunidad .t87-afiche__velo,
.t87-afiche--programas .t87-afiche__velo,
.t87-afiche--contacto .t87-afiche__velo,
.t87-afiche--programa .t87-afiche__velo {
  background:
    linear-gradient(90deg, rgba(13,22,11,.94) 0%, rgba(13,22,11,.78) 34%, rgba(13,22,11,0) 64%),
    linear-gradient(180deg, rgba(13,22,11,.78) 0%, rgba(13,22,11,0) 26%, rgba(13,22,11,0) 70%, rgba(13,22,11,.9) 100%);
}
@media (max-width: 899px) {
  .t87-afiche--viajes .t87-afiche__foto { object-position: 50% 45%; }
}
/* El contenido empieza con aire tras la portada */
.t87-pagina--tras-afiche { padding-top: var(--sp-7); }

/* Presentación: la frase con la que abre el relato */
.t87-relato-intro__titulo {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem);
  font-style: italic; text-transform: uppercase;
  line-height: .92; letter-spacing: -.03em;
  max-width: 17ch;
  margin-bottom: var(--sp-6);
}
.t87-relato-intro__titulo em { color: var(--t87-turquesa); }

/* Ritmo de capítulos: uno sí y uno no sobre superficie elevada */
/* En el Manual 2026 tinta-2 = tinta: los capítulos se separan por la línea superior,
   y los «elevados» llevan un halo turquesa muy tenue para marcar el ritmo. */
.t87-relato-cap--elevada {
  background: radial-gradient(60% 40% at 100% 0%, rgba(0,229,240,.05), transparent 70%), var(--t87-tinta);
}
.t87-relato-cap { border-top: 1px solid var(--t87-linea); }

.t87-capitulo {
  display: grid; gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
@media (min-width: 900px) {
  .t87-capitulo { grid-template-columns: 110px 1fr; gap: var(--sp-4); align-items: start; }
}
.t87-capitulo__num {
  font-family: var(--t87-display);
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.8rem);
  font-weight: 800; font-style: italic;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,229,240,.6);
  font-variant-numeric: tabular-nums;
}
.t87-capitulo__t {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem);
  text-transform: uppercase;
  line-height: .92; letter-spacing: -.03em;
  max-width: 18ch;
}
.t87-capitulo__t em,
.t87-relato-destacado em { font-style: italic; color: var(--t87-turquesa); }

/* Texto */
.t87-relato-texto {
  font-size: 1.0625rem; line-height: 1.75;
  color: var(--t87-txt-2);
  max-width: 62ch;
}
.t87-relato-texto + .t87-relato-texto { margin-top: var(--sp-2); }
.t87-relato-texto strong { color: var(--t87-txt); font-weight: 600; }
.t87-relato-texto--grande {
  font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: rgba(249,249,249,.8);
}
.t87-relato-destacado {
  font-family: var(--t87-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  font-weight: 700; text-transform: uppercase;
  line-height: 1; letter-spacing: -.02em;
  color: var(--t87-txt);
  max-width: 22ch;
}
.t87-relato-destacado--chico { font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem); margin-top: var(--sp-4); }
.t87-relato-col { max-width: 64ch; margin-left: var(--t87-sangria); margin-top: var(--sp-5); }

/* Presentación */
.t87-relato-intro__lead { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); max-width: 30ch; }
.t87-relato-intro__cols {
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-6);
}
@media (min-width: 900px) {
  .t87-relato-intro__cols { grid-template-columns: 1.1fr 1fr; gap: var(--sp-7); align-items: end; }
}

/* Foto con pie */
.t87-relato-foto { margin: 0; min-width: 0; }
.t87-relato-foto__marco {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0; border: 0;
  overflow: hidden;
  border-radius: var(--t87-radio-l);
  background: var(--t87-tinta-3);
  cursor: zoom-in;
}
.t87-relato-foto__marco img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  transition: transform 900ms var(--ease-out);
}
.t87-relato-foto__marco:hover img { transform: scale(1.045); }
/* Indicador de «ampliar»: aparece al pasar el cursor o con foco de teclado */
.t87-relato-foto__marco::after {
  content: '';
  position: absolute; right: 14px; top: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background:
    linear-gradient(var(--t87-tinta), var(--t87-tinta)) center / 14px 2px no-repeat,
    linear-gradient(var(--t87-tinta), var(--t87-tinta)) center / 2px 14px no-repeat,
    var(--t87-turquesa);
  opacity: 0; transform: scale(.8);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.t87-relato-foto__marco:hover::after,
.t87-relato-foto__marco:focus-visible::after { opacity: 1; transform: scale(1); }
.t87-relato-foto__pie {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--t87-turquesa);
  font-size: .8125rem; line-height: 1.5;
  color: var(--t87-txt-3);
  max-width: 48ch;
}
.t87-relato-foto--alta .t87-relato-foto__marco { aspect-ratio: 4 / 5; }
.t87-relato-foto--principal .t87-relato-foto__marco { aspect-ratio: 16 / 9; }

/* Par asimétrico: una ancha y otra más baja, desfasada */
.t87-relato-par { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
  .t87-relato-par { grid-template-columns: 1.45fr 1fr; gap: var(--sp-4); align-items: start; }
  .t87-relato-foto--baja { margin-top: var(--sp-8); }
}
.t87-relato-foto--baja .t87-relato-foto__marco { aspect-ratio: 1; }
.t87-relato-par--final { margin-top: var(--sp-7); }

/* Trío: en móvil la primera va a lo ancho y las otras dos de a par */
.t87-relato-trio {
  display: grid; gap: var(--sp-2);
  grid-template-columns: 1fr 1fr;
  margin-top: var(--sp-5);
}
.t87-relato-trio > :first-child { grid-column: 1 / -1; }
.t87-relato-trio .t87-relato-foto__marco,
.t87-relato-trio .t87-relato-video__media { aspect-ratio: 4 / 5; }
.t87-relato-trio > :first-child .t87-relato-foto__marco,
.t87-relato-trio > :first-child .t87-relato-video__media { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .t87-relato-trio--parejo { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .t87-relato-trio--parejo > :first-child { grid-column: auto; }
  .t87-relato-trio--parejo > :first-child .t87-relato-foto__marco,
  .t87-relato-trio--parejo > :first-child .t87-relato-video__media { aspect-ratio: 4 / 5; }
  /* La del medio baja un poco: el trío se lee como secuencia, no como grilla */
  .t87-relato-trio--parejo > :nth-child(2) { margin-top: var(--sp-5); }
}
/* Trío dentro de un perfil: una alta a la izquierda y dos apiladas */
@media (min-width: 760px) {
  .t87-perfil__fotos .t87-relato-trio { grid-template-columns: 1.15fr 1fr; margin-top: 0; }
  .t87-perfil__fotos .t87-relato-trio > :first-child { grid-column: 1; grid-row: span 2; }
  .t87-perfil__fotos .t87-relato-trio > :first-child .t87-relato-foto__marco { aspect-ratio: auto; height: 100%; min-height: 520px; }
  .t87-perfil__fotos .t87-relato-trio > :first-child { display: flex; flex-direction: column; }
  .t87-perfil__fotos .t87-relato-trio > :first-child .t87-relato-foto__marco { flex: 1; }
  .t87-perfil__fotos .t87-relato-trio > :not(:first-child) .t87-relato-foto__marco,
  .t87-perfil__fotos .t87-relato-trio > :not(:first-child) .t87-relato-video__media { aspect-ratio: 4 / 3; }
}

/* Tira de cuatro (tour del Etihad) */
.t87-relato-tira {
  display: grid; gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 8px;
}
.t87-relato-tira .t87-relato-foto__marco { aspect-ratio: 3 / 4; border-radius: var(--t87-radio); }

/* Perfiles de Rubén y Matías */
.t87-perfil + .t87-perfil {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--t87-linea);
}
.t87-perfil__cab {
  display: flex; align-items: flex-end; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.t87-perfil__edad {
  font-family: var(--t87-display);
  font-size: clamp(3.6rem, 2.2rem + 5vw, 7rem);
  font-weight: 800; font-style: italic;
  line-height: .74; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--t87-turquesa);
}
.t87-perfil__nombre {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem);
  font-style: italic; text-transform: uppercase;
}
.t87-perfil__dato {
  margin-top: 10px;
  font-family: var(--t87-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--t87-txt-2);
}
.t87-perfil__cuerpo { display: grid; gap: var(--sp-5); }
.t87-perfil__fotos { min-width: 0; }
@media (min-width: 1000px) {
  .t87-perfil__cuerpo { grid-template-columns: 1fr 1.15fr; gap: var(--sp-7); align-items: start; }
  /* El texto se queda fijo mientras pasan las fotos */
  .t87-perfil__texto { position: sticky; top: 120px; }
  .t87-perfil--inverso .t87-perfil__cuerpo { grid-template-columns: 1.15fr 1fr; }
  .t87-perfil--inverso .t87-perfil__texto { order: 2; }
}
.t87-perfil__fotos > .t87-relato-video { margin-bottom: 8px; }
.t87-relato-arsenal { margin-top: var(--sp-2); }

/* Videos: tarjeta con portada; al pulsar se abre el reproductor en una ventana */
.t87-relato-video { margin: 0; min-width: 0; }
.t87-relato-video__media {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border-radius: var(--t87-radio-l);
  background: var(--t87-tinta-3);
  border: 1px solid var(--t87-linea);
  color: inherit;
  cursor: pointer;
}
.t87-relato-video__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.7) saturate(.95);
  transition: filter var(--dur-3), transform 900ms var(--ease-out);
}
.t87-relato-video__media:hover img,
.t87-relato-video__media:focus-visible img { filter: brightness(.88); transform: scale(1.04); }
.t87-relato-video__play {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--t87-turquesa);
  color: var(--t87-tinta);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 10px rgba(0,229,240,.16);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3);
}
.t87-relato-video__play svg { margin-left: 3px; }
.t87-relato-video__media:hover .t87-relato-video__play,
.t87-relato-video__media:focus-visible .t87-relato-video__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 16px rgba(0,229,240,.12);
}
.t87-relato-video__dur {
  position: absolute; right: 12px; bottom: 12px;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(13,22,11,.7);
  backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--t87-txt);
}
.t87-relato-video__pie { margin-top: 12px; display: grid; gap: 2px; }
.t87-relato-video__pie strong {
  font-family: var(--t87-display);
  font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
.t87-relato-video__pie span { font-size: var(--fs-xs); color: var(--t87-txt-3); }

/* Franja «Así lo vivimos»: videos verticales en fila, con desplazamiento lateral */
.t87-reel { border-top: 1px solid var(--t87-linea); }
.t87-reel__cab { margin-bottom: var(--sp-5); }
.t87-reel__t {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem);
  font-style: italic; text-transform: uppercase;
  line-height: .92; letter-spacing: -.03em;
}
.t87-reel__bajada { margin-top: var(--sp-2); color: var(--t87-txt-2); max-width: 52ch; }
.t87-reel__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 56vw, 260px);
  gap: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--t87-gutter);
  padding: 4px var(--t87-gutter) var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--t87-turquesa) transparent;
}
.t87-reel__item { scroll-snap-align: start; }
.t87-reel__item .t87-relato-video__media { aspect-ratio: 9 / 16; }
@media (min-width: 1100px) {
  /* En escritorio la fila arranca alineada con el contenido */
  .t87-reel__pista { padding-inline: max(var(--t87-gutter), calc((100vw - var(--t87-ancho)) / 2 + var(--t87-gutter))); }
}

/* Reproductor en ventana */
.t87-video-modal {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  padding: 56px 16px 24px;
  background: rgba(13,22,11,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.t87-video-modal.esta-abierta { display: grid; }
.t87-video-modal__caja {
  display: grid; gap: 14px;
  justify-items: center;
  width: 100%;
  animation: t87-cotiza-entra .4s var(--ease-out) both;
}
.t87-video-modal video {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 170px);
  aspect-ratio: 9 / 16;
  border-radius: var(--t87-radio-l);
  background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.t87-video-modal__pie { text-align: center; display: grid; gap: 2px; max-width: 520px; }
.t87-video-modal__pie strong {
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 700;
  text-transform: uppercase;
}
.t87-video-modal__pie span { font-size: var(--fs-sm); color: var(--t87-txt-2); }
.t87-video-modal__cerrar,
.t87-video-modal__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--t87-linea-2);
  border-radius: 50%;
  background: rgba(13,22,11,.6);
  color: var(--t87-txt);
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.t87-video-modal__cerrar:hover,
.t87-video-modal__nav:hover { background: var(--t87-turquesa); color: var(--t87-tinta); border-color: var(--t87-turquesa); }
.t87-video-modal__cerrar { top: 16px; right: 16px; }
.t87-video-modal__nav { top: 50%; transform: translateY(-50%); }
.t87-video-modal__nav--prev { left: 16px; }
.t87-video-modal__nav--next { right: 16px; }
@media (max-width: 600px) {
  /* En el teléfono las flechas van abajo, para no tapar el video */
  .t87-video-modal__nav { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; }
  .t87-video-modal { padding-bottom: 80px; }
  .t87-video-modal video { max-height: calc(100svh - 220px); }
}
@media (prefers-reduced-motion: reduce) { .t87-video-modal__caja { animation: none; } }

/* Chile: una panorámica a lo ancho y dos debajo */
.t87-relato-panoramas {
  display: grid; gap: var(--sp-2);
  grid-template-columns: 1fr 1fr;
  margin-top: var(--sp-6);
}
.t87-relato-panoramas > :first-child { grid-column: 1 / -1; }
.t87-relato-panoramas .t87-relato-foto__marco { aspect-ratio: 16 / 9; }
.t87-relato-panoramas > :first-child .t87-relato-foto__marco { aspect-ratio: 21 / 9; }
.t87-relato-cierre { margin-top: var(--sp-7); max-width: 30ch; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); }

/* Las dudas */
.t87-dudas {
  list-style: none; margin: var(--sp-7) 0 0; padding: 0;
  counter-reset: duda;
  border-bottom: 1px solid var(--t87-linea);
}
.t87-dudas li {
  counter-increment: duda;
  display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-2);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-top: 1px solid var(--t87-linea);
  font-family: var(--t87-display);
  font-size: clamp(1.15rem, .95rem + 1vw, 1.85rem);
  font-weight: 600; font-style: italic;
  line-height: 1.08; letter-spacing: -.015em;
  transition: color var(--dur-2), padding var(--dur-3) var(--ease-out);
}
.t87-dudas li::before {
  content: counter(duda, decimal-leading-zero);
  font-size: var(--fs-sm); font-style: normal; font-weight: 700;
  letter-spacing: .1em;
  color: var(--t87-turquesa);
}
@media (hover: hover) {
  .t87-dudas li:hover { color: var(--t87-turquesa); padding-left: 12px; }
}

/* «No es solamente un viaje» */
.t87-escenas { margin-top: var(--sp-8); }
.t87-escenas__t {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  text-transform: uppercase; font-style: italic;
  max-width: 20ch;
  margin-bottom: var(--sp-5);
}
.t87-escenas__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-2);
}
@media (min-width: 800px) { .t87-escenas__lista { grid-template-columns: 1fr 1fr; } }
.t87-escenas__lista li {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio-l);
  background: var(--t87-tinta);
  font-size: var(--fs-lg); line-height: 1.5;
  color: var(--t87-txt);
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.t87-escenas__lista li::before {
  content: '';
  position: absolute; left: var(--sp-4); top: var(--sp-3);
  width: 28px; height: 2px;
  background: var(--t87-turquesa);
}
.t87-escenas__lista li:hover { border-color: var(--t87-linea-2); transform: translateY(-3px); }

/* Mosaico de la mesa: tres fotos desfasadas en una fila */
.t87-relato-mosaico {
  display: grid; gap: var(--sp-2);
  grid-template-columns: 1fr 1fr;
}
.t87-relato-mosaico > :first-child { grid-column: 1 / -1; }
.t87-relato-mosaico .t87-relato-foto__marco { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .t87-relato-mosaico { grid-template-columns: 1fr 1.3fr 1fr; gap: var(--sp-3); align-items: start; }
  .t87-relato-mosaico > :first-child { grid-column: auto; }
  .t87-relato-mosaico > :nth-child(2) { margin-top: var(--sp-8); }
  .t87-relato-mosaico > :nth-child(2) .t87-relato-foto__marco { aspect-ratio: 4 / 3; }
  .t87-relato-mosaico > :nth-child(3) { margin-top: var(--sp-5); }
}

/* La pregunta */
.t87-pregunta { margin-block: var(--sp-8) var(--sp-7); text-align: center; }
.t87-pregunta__intro {
  max-width: 46ch; margin: 0 auto var(--sp-4);
  font-size: var(--fs-lg); color: var(--t87-txt-2);
}
.t87-pregunta__t.t87-revela {
  max-width: 19ch; margin-inline: auto;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3.2rem);
  font-weight: 800; font-style: italic;
  text-transform: uppercase;
  line-height: .96; letter-spacing: -.03em;
}
.t87-pregunta__t .palabra.encendida { color: var(--t87-turquesa); }

/* Viajar solo: la captura del chat dentro de un teléfono */
.t87-solo {
  display: grid; gap: var(--sp-6);
  margin-top: var(--sp-8);
  align-items: center;
}
@media (min-width: 900px) { .t87-solo { grid-template-columns: 360px 1fr; gap: var(--sp-7); } }
/* El brillo del teléfono se sale un 10 % por los lados: en móvil hacía que la página
   se pudiera arrastrar hacia el costado. «clip» lo recorta sin crear un contenedor
   de scroll (no rompe el sticky ni las animaciones). */
.t87-relato { overflow-x: clip; }
.t87-solo__movil { position: relative; }
.t87-solo__movil::before {
  content: '';
  position: absolute; inset: 10% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(0,229,240,.22), transparent);
  filter: blur(20px);
}
.t87-relato-foto--movil .t87-relato-foto__marco {
  max-width: 300px; margin-inline: auto;
  aspect-ratio: 9 / 19.5;
  border-radius: 40px;
  border: 9px solid #1C2A19;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px var(--t87-linea-2);
}
.t87-relato-foto--movil .t87-relato-foto__marco img { object-position: top; }
.t87-solo__t {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  font-style: italic; text-transform: uppercase;
  max-width: 18ch;
  margin-bottom: var(--sp-2);
}
.t87-solo__sub {
  font-family: var(--t87-display);
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--t87-turquesa);
  margin-bottom: var(--sp-3);
}

/* Cifras de Itatour */
.t87-cifras {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: var(--sp-7) 0 0;
  border-top: 1px solid var(--t87-linea);
}
.t87-cifra { padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; border-bottom: 1px solid var(--t87-linea); }
@media (min-width: 900px) {
  .t87-cifras { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--t87-linea); }
  .t87-cifra { border-bottom: 0; padding-left: var(--sp-3); border-left: 1px solid var(--t87-linea); }
  .t87-cifra:first-child { border-left: 0; padding-left: 0; }
}
.t87-cifra__n {
  font-family: var(--t87-display);
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  font-weight: 800; font-style: italic;
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.t87-cifra:first-child .t87-cifra__n { color: var(--t87-turquesa); }
.t87-cifra__l { margin: 10px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--t87-txt-2); max-width: 24ch; }

/* Equipo */
.t87-relato-equipo { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.t87-relato-equipo .t87-relato-foto__marco { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .t87-relato-equipo { grid-template-columns: 1.7fr 1fr; gap: var(--sp-3); align-items: end; }
  .t87-relato-equipo > :last-child .t87-relato-foto__marco { aspect-ratio: 4 / 5; }
}

/* El nombre: Tribuna + 87 */
.t87-nombre { margin-top: var(--sp-8); }
.t87-nombre__intro { max-width: 60ch; font-size: var(--fs-lg); color: var(--t87-txt-2); }
.t87-nombre__intro .t87-etiqueta { display: flex; }
.t87-nombre__partes {
  display: grid;
  margin-top: var(--sp-5);
  border-top: 1px solid var(--t87-linea);
}
@media (min-width: 800px) { .t87-nombre__partes { grid-template-columns: 1.6fr 1fr; } }
.t87-nombre__parte {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--t87-linea);
}
@media (min-width: 800px) {
  .t87-nombre__parte + .t87-nombre__parte { padding-left: var(--sp-5); border-left: 1px solid var(--t87-linea); }
}
.t87-nombre__palabra {
  display: block;
  font-family: var(--t87-display);
  font-size: clamp(3rem, 1.6rem + 5vw, 6.5rem);
  font-weight: 800; font-style: italic;
  text-transform: uppercase;
  line-height: .85; letter-spacing: -.045em;
}
.t87-nombre__parte--87 .t87-nombre__palabra { color: var(--t87-turquesa); }
.t87-nombre__parte p {
  margin-top: var(--sp-3);
  font-size: var(--fs-lg); line-height: 1.5;
  color: var(--t87-txt-2);
  max-width: 30ch;
}

/* El sueño postergado: filas alternadas foto/texto */
.t87-filas { display: grid; gap: var(--sp-7); }
.t87-fila { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 900px) {
  .t87-fila { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .t87-fila--inversa .t87-fila__foto { order: 2; }
}
.t87-fila__foto .t87-relato-foto__marco { aspect-ratio: 4 / 5; }
/* Más alta que el marco para que el parallax no deje bordes al moverse */
.t87-fila__foto .t87-relato-foto__marco img { height: 114%; }
.t87-fila__foto .t87-relato-foto__marco:hover img { transform: none; }
.t87-fila__texto .t87-relato-texto { margin-top: var(--sp-3); }

/* «Algún día voy a estar ahí» */
.t87-ahora {
  text-align: center;
  border-top: 1px solid var(--t87-linea);
  background: radial-gradient(70% 60% at 50% 35%, rgba(0,229,240,.10), transparent 70%), var(--t87-tinta);
}
.t87-ahora__intro { max-width: 52ch; margin-inline: auto; font-size: var(--fs-lg); color: var(--t87-txt-2); }
.t87-ahora__cita { margin: var(--sp-5) 0 var(--sp-4); }
.t87-ahora__cita .t87-revela {
  max-width: 14ch; margin-inline: auto;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.8rem);
  font-weight: 800; font-style: italic;
  text-transform: uppercase;
  line-height: .9; letter-spacing: -.035em;
}
.t87-ahora__remate {
  font-family: var(--t87-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); font-weight: 700; font-style: italic;
  text-transform: uppercase;
  color: var(--t87-turquesa);
}
.t87-ahora .t87-relato-par { text-align: left; }

/* Firma de la llamada final */
.t87-relato-firma { width: min(300px, 70vw); height: auto; margin: 0 auto var(--sp-3); }
.t87-relato-firma__claim { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }

/* Tipografía frente a la sección 19 (que pone Inter con !important en todo p y li) */
body .t87-relato-destacado,
body .t87-relato .t87-revela,
body .t87-ahora__remate,
body .t87-relato-firma__claim,
body .t87-perfil__dato,
body .t87-solo__sub,
body .t87-dudas li,
body .t87-afiche__kicker,
body .t87-afiche__lema { font-family: var(--t87-display) !important; }
body .t87-afiche__titulo { font-family: 'Poppins', var(--t87-display) !important; }
body .t87-hero__claim--afiche { font-family: var(--t87-display) !important; }
body .t87-hero__titulo--afiche { font-family: 'Poppins', var(--t87-display) !important; }

/* Pie de foto dentro del visor */
.t87-visor__pie {
  position: absolute; left: 50%; bottom: calc(var(--sp-3) + 30px);
  width: min(720px, calc(100% - 48px));
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--t87-txt-2);
}
/* Deja sitio abajo para pie y contador */
.t87-visor { padding-bottom: 120px; }
/*
 * La foto cabe siempre entera en la pantalla. «max-height: 100%» no servía: la
 * celda del grid no tiene alto fijo y las fotos verticales se salían por abajo,
 * con el pie encima. El tope va en unidades de pantalla: alto menos el margen de
 * arriba y la franja del pie; ancho menos el sitio de las flechas.
 */
.t87-visor img {
  width: auto; height: auto;
  max-width: min(1200px, calc(100vw - 200px));
  max-height: calc(100svh - 64px - 120px);
}
@media (max-width: 699px) {
  .t87-visor { padding-top: 84px; }
  .t87-visor img {
    max-width: calc(100vw - 32px);
    max-height: calc(100svh - 84px - 120px);
  }
  /* En el teléfono las flechas van abajo, a los lados del contador: no tapan la foto */
  .t87-visor__nav--prev,
  .t87-visor__nav--next { top: auto; bottom: 14px; transform: none; width: 46px; height: 46px; }
  .t87-visor__cuenta { bottom: 28px; }
  .t87-visor__pie { bottom: 74px; }
}

/* ---------- 15e. FICHA: ENTRADAS, EXPERIENCIAS INCLUIDAS Y COTIZACIÓN ---------- */

/* Tipos de entrada: foto + mapa de ubicación, nombre y puntos */
.t87-entradas { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .t87-entradas { grid-template-columns: 1fr 1fr; } }
.t87-entrada {
  display: flex; flex-direction: column;
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio-l);
  overflow: hidden;
  background: rgba(249,249,249,.02);
  transition: border-color var(--dur-2);
}
.t87-entrada:hover { border-color: var(--t87-turquesa); }
.t87-entrada__medios { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2px; }
.t87-entrada__cuerpo { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.t87-entrada__t {
  font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
  font-style: italic; text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.t87-entrada__d { color: var(--t87-txt-2); margin-bottom: var(--sp-2); }

.t87-ficha-foto {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0; border: 0;
  overflow: hidden;
  background: var(--t87-tinta);
  cursor: zoom-in;
}
.t87-ficha-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.t87-ficha-foto:hover img { transform: scale(1.05); }
/* El mapa de ubicación se ve entero, sobre el gris claro en que viene dibujado */
.t87-entrada__medios .t87-ficha-foto--chica { aspect-ratio: auto; background: #C9CCCF; }
.t87-entrada__medios .t87-ficha-foto--chica img { object-fit: contain; padding: 6px; }
.t87-entrada__medios .t87-ficha-foto--chica:hover img { transform: scale(1.03); }
/*
 * Una sola entrada (p. ej. la popular del Superclásico): la tarjeta ocupa todo el
 * ancho y el mapa con la ubicación marcada se ve grande, al lado de la foto; en el
 * teléfono, debajo y a todo el ancho.
 */
.t87-entrada:only-child { grid-column: 1 / -1; }
.t87-entrada:only-child .t87-entrada__medios { grid-template-columns: 1fr 1fr; }
.t87-entrada:only-child .t87-entrada__medios .t87-ficha-foto:first-child { aspect-ratio: auto; height: 100%; }
/* La foto (vertical) no define el alto de la fila: lo marca el mapa */
.t87-entrada:only-child .t87-entrada__medios .t87-ficha-foto:first-child img { position: absolute; inset: 0; }
.t87-entrada:only-child .t87-ficha-foto--chica { background: var(--t87-tinta); }
.t87-entrada:only-child .t87-ficha-foto--chica img { padding: 0; }
@media (max-width: 699px) {
  .t87-entrada:only-child .t87-entrada__medios { grid-template-columns: 1fr; }
  .t87-entrada:only-child .t87-entrada__medios .t87-ficha-foto:first-child { aspect-ratio: 4 / 3; height: auto; }
}

/* Experiencia incluida (p. ej. el hospitality común a las dos entradas) */
.t87-extra {
  display: grid;
  margin-top: var(--sp-3);
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio-l);
  overflow: hidden;
}
@media (min-width: 900px) { .t87-extra { grid-template-columns: 1.15fr 1fr; } }
.t87-extra__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.t87-extra__fotos .t87-ficha-foto { aspect-ratio: auto; min-height: 220px; height: 100%; }
.t87-extra__fotos .t87-ficha-foto:only-child { grid-column: 1 / -1; }
.t87-extra__cuerpo { padding: var(--sp-4); align-self: center; }
.t87-extra__cuerpo .t87-etiqueta { margin-bottom: var(--sp-1); }
.t87-extra__t {
  font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
  font-style: italic; text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.t87-extra__d { color: var(--t87-txt-2); margin-bottom: var(--sp-2); }

/* Tarjeta lateral: precio en pesos y enlace secundario a WhatsApp */
.t87-reserva__moneda {
  font-family: var(--t87-texto);
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: .08em;
  color: var(--t87-txt-2);
}
.t87-reserva__wa { display: table; margin: 14px auto 0; }

/* Ventana de cotización */
.t87-cotiza {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  padding: 16px;
}
.t87-cotiza.esta-abierta,
.t87-cotiza:target { display: grid; }
.t87-cotiza__fondo {
  position: absolute; inset: 0;
  background: rgba(13,22,11,.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
}
.t87-cotiza__caja {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  width: min(1180px, 100%);
  height: min(860px, calc(100svh - 32px));
  overflow: hidden;
  border-radius: var(--t87-radio-l);
  background: var(--t87-humo);
  color: var(--t87-tinta);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  animation: t87-cotiza-entra .45s var(--ease-out) both;
}
@keyframes t87-cotiza-entra { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

.t87-cotiza__evento { position: relative; background: var(--t87-tinta); overflow: hidden; }
.t87-cotiza__evento img { width: 100%; height: 100%; object-fit: cover; }
.t87-cotiza__evento::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,22,11,0) 45%, rgba(13,22,11,.88) 100%);
}
.t87-cotiza__evento-texto {
  position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 32px;
  color: var(--t87-blanco);
}
.t87-cotiza__evento-texto span {
  display: block; margin-bottom: 8px;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--t87-turquesa);
}
.t87-cotiza__evento-texto p {
  font-family: var(--t87-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem);
  font-weight: 700; line-height: 1.05;
}

.t87-cotiza__panel {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 44px clamp(24px, 4vw, 56px) 36px;
}
.t87-cotiza__cerrar {
  position: absolute; top: 16px; right: 16px;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--t87-blanco);
  color: var(--t87-tinta);
  box-shadow: 0 4px 18px rgba(13,22,11,.12);
  transition: background var(--dur-1), color var(--dur-1);
}
.t87-cotiza__cerrar:hover { background: var(--t87-tinta); color: var(--t87-turquesa); }
.t87-cotiza__t {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);
  font-style: italic; text-transform: uppercase;
  color: var(--t87-tinta);
  padding-right: 52px;
}
.t87-cotiza__bajada { margin: 6px 0 var(--sp-4); color: rgba(13,22,11,.62); }

.t87-cotiza__form { display: grid; gap: 20px; }
.t87-cotiza__campo { min-width: 0; margin: 0; padding: 0; border: 0; }
.t87-cotiza__fila { display: grid; gap: 14px; }
@media (min-width: 600px) {
  .t87-cotiza__fila { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .t87-cotiza__fila--dos { grid-template-columns: 1fr 1fr; }
}
.t87-cotiza__rotulo {
  display: block; margin-bottom: 8px; padding: 0;
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(13,22,11,.7);
}
.t87-cotiza__rotulo span { letter-spacing: .04em; text-transform: none; font-weight: 400; }
.t87-cotiza__fijo {
  display: flex; align-items: center;
  min-height: 56px; padding: 12px 16px;
  border: 1px solid rgba(13,22,11,.12);
  border-radius: 4px;
  background: rgba(13,22,11,.04);
  font-weight: 500;
}
.t87-cotiza input[type="text"],
.t87-cotiza input[type="tel"],
.t87-cotiza input[type="email"],
.t87-cotiza select,
.t87-cotiza textarea {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid rgba(13,22,11,.16);
  border-radius: 4px;
  background: var(--t87-blanco);
  color: var(--t87-tinta);
  font-size: 1rem;    /* 16 px: iOS no hace zoom al enfocar */
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.t87-cotiza textarea { min-height: 96px; resize: vertical; }
.t87-cotiza select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230D160B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.t87-cotiza input::placeholder,
.t87-cotiza textarea::placeholder { color: rgba(13,22,11,.4); }
.t87-cotiza input:focus,
.t87-cotiza select:focus,
.t87-cotiza textarea:focus {
  outline: none;
  border-color: var(--t87-tinta);
  box-shadow: 0 0 0 3px rgba(0,229,240,.45);
}

/* Opciones como tarjetas (vuelo y vía de contacto) */
.t87-cotiza__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t87-opcion {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px;
  border: 1px solid rgba(13,22,11,.16);
  border-radius: 4px;
  background: var(--t87-blanco);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.t87-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.t87-opcion__marca {
  flex: none;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(13,22,11,.3);
  border-radius: 50%;
  transition: background var(--dur-1), border-color var(--dur-1);
}
.t87-opcion:hover { border-color: rgba(13,22,11,.4); }
.t87-opcion:has(input:checked) {
  border-color: var(--t87-tinta);
  box-shadow: 0 6px 18px rgba(13,22,11,.12);
}
.t87-opcion:has(input:checked) .t87-opcion__marca {
  border-color: var(--t87-tinta);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%230D160B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat,
    var(--t87-turquesa);
}
.t87-opcion:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(0,229,240,.45); }
.t87-opcion--icono {
  justify-content: center;
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.t87-opcion--icono:has(input:checked) { background: var(--t87-tinta); color: var(--t87-turquesa); }

.t87-cotiza__estado {
  margin: 0; padding: 12px 16px;
  border-left: 3px solid #D9480F;
  background: rgba(217,72,15,.08);
  color: #8A2C06;
  font-size: var(--fs-sm);
}
.t87-cotiza__enviar { width: 100%; min-height: 60px; justify-content: center; }
.t87-cotiza__legal { margin: -8px 0 0; text-align: center; font-size: var(--fs-xs); color: rgba(13,22,11,.5); }

.t87-cotiza__ok { padding: var(--sp-6) 0; text-align: center; }
.t87-cotiza__ok:focus { outline: none; }
.t87-cotiza__check {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--t87-turquesa); color: var(--t87-tinta);
}
.t87-cotiza__ok-t {
  font-family: var(--t87-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700; font-style: italic; text-transform: uppercase;
  margin-bottom: 8px;
}
.t87-cotiza__ok p + p { color: rgba(13,22,11,.65); margin-bottom: var(--sp-4); }

/* La sección 19 fuerza Inter en p y label; estos son titulares */
body .t87-cotiza__ok-t,
body .t87-cotiza__evento-texto p { font-family: var(--t87-display) !important; }

/* Móvil: pantalla completa, con el evento como cabecera corta */
@media (max-width: 899px) {
  .t87-cotiza { padding: 0; }
  .t87-cotiza__caja {
    grid-template-columns: 1fr;
    grid-template-rows: 150px 1fr;
    width: 100%; height: 100svh;
    border-radius: 0;
  }
  .t87-cotiza__evento-texto { left: 20px; right: 72px; bottom: 16px; }
  .t87-cotiza__evento-texto p { font-size: 1.35rem; }
  .t87-cotiza__panel { padding: 28px 20px 32px; }
  .t87-cotiza__cerrar { position: fixed; top: 12px; right: 12px; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .t87-cotiza__caja { animation: none; }
}

/* ---------- 15f. HISTORIAS DE PASAJEROS (Comunidad) ---------- */
.t87-hpax-lista { display: grid; gap: var(--sp-8); margin-block: var(--sp-6); }
.t87-hpax { padding-top: var(--sp-6); border-top: 1px solid var(--t87-linea); }
.t87-hpax__cab { max-width: 46rem; margin-bottom: var(--sp-5); }
.t87-hpax__t {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem);
  font-style: italic; text-transform: uppercase;
  line-height: .92; letter-spacing: -.03em;
  color: var(--t87-txt);
  max-width: 18ch;
}
.t87-hpax__sub {
  margin-top: var(--sp-2);
  font-family: var(--t87-display);
  font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); font-weight: 600;
  color: var(--t87-turquesa);
}
.t87-hpax__evento {
  margin-top: 10px;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t87-txt-2);
}

/* Portada: foto grande y, si hay, el reel incrustado al lado */
.t87-hpax__portada { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.t87-hpax__cover .t87-relato-foto__marco { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .t87-hpax__portada--dos { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .t87-hpax__portada:not(.t87-hpax__portada--dos) .t87-hpax__cover { max-width: 720px; }
}
.t87-hpax__reel {
  display: grid; gap: 10px; justify-items: center;
  padding: var(--sp-2);
  border: 1px solid var(--t87-linea);
  border-radius: var(--t87-radio-l);
  background: rgba(249,249,249,.03);
}
.t87-hpax__reel-rotulo {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t87-turquesa);
}
.t87-hpax__reel iframe {
  width: 100%; max-width: 400px;
  height: 720px;
  border: 0;
  border-radius: var(--t87-radio);
  background: var(--t87-blanco);
}

/*
 * Cuerpo en escenas: cada bloque de dos columnas del editor es una fila con el
 * texto a un lado y sus fotos o videos al otro, alternando lados. Así cualquier
 * historia nueva escrita con «Columnas» sale ordenada sin tocar código.
 */
.t87-hpax__cuerpo > p { max-width: 62ch; }
.t87-hpax__cuerpo p {
  font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem);
  line-height: 1.7;
  color: rgba(249,249,249,.8);
}
.t87-hpax__cuerpo p + p { margin-top: var(--sp-2); }
.t87-hpax__cuerpo h3 {
  margin-bottom: var(--sp-2);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
  font-style: italic; text-transform: uppercase;
  line-height: 1; letter-spacing: -.02em;
  color: var(--t87-txt);
}
.t87-hpax__cuerpo > .wp-block-columns {
  display: grid; grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center !important;   /* el núcleo de WP fuerza «normal» con !important */
  margin: 0;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--t87-linea);
}
.t87-hpax__cuerpo > .wp-block-columns:first-child { border-top: 0; padding-top: 0; }
.t87-hpax__cuerpo .wp-block-column { min-width: 0; margin: 0; }
@media (min-width: 900px) {
  .t87-hpax__cuerpo > .wp-block-columns { grid-template-columns: 5fr 6fr; gap: var(--sp-7); }
  /* Una escena sí y una no, el texto pasa a la derecha */
  .t87-hpax__cuerpo > .wp-block-columns:nth-child(even) { grid-template-columns: 6fr 5fr; }
  .t87-hpax__cuerpo > .wp-block-columns:nth-child(even) > .wp-block-column:first-child { order: 2; }
}

/* Columna de medios: mosaico de dos; una sola pieza ocupa todo el ancho */
.t87-hpax__cuerpo .wp-block-column:has(> figure) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.t87-hpax__cuerpo .wp-block-column > figure { margin: 0; }
.t87-hpax__cuerpo .wp-block-column > figure:only-child { grid-column: 1 / -1; }
.t87-hpax__cuerpo .t87-hpax__foto .t87-relato-foto__marco,
.t87-hpax__cuerpo .t87-hpax__video .t87-relato-video__media { aspect-ratio: 4 / 5; }
.t87-hpax__cuerpo .wp-block-column > figure:only-child .t87-relato-foto__marco { aspect-ratio: 4 / 3; }
/* Cuatro piezas: cuadradas, para que el mosaico no se dispare en altura */
.t87-hpax__cuerpo .wp-block-column:has(> figure:nth-child(4)) .t87-relato-foto__marco,
.t87-hpax__cuerpo .wp-block-column:has(> figure:nth-child(4)) .t87-relato-video__media { aspect-ratio: 1; }
/* En los mosaicos el título del video va sobre la tarjeta: así las cuatro piezas miden lo mismo */
.t87-hpax__cuerpo .wp-block-column > .t87-relato-video { position: relative; }
.t87-hpax__cuerpo .wp-block-column .t87-relato-video__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 32px 64px 12px 12px;
  background: linear-gradient(180deg, rgba(13,22,11,0), rgba(13,22,11,.85));
  border-radius: 0 0 var(--t87-radio-l) var(--t87-radio-l);
  pointer-events: none;
}
.t87-hpax__cuerpo .wp-block-column .t87-relato-video__pie strong { font-size: var(--fs-xs); line-height: 1.25; }
.t87-hpax__cuerpo .wp-block-column .t87-relato-video__pie span { display: none; }

.t87-hpax__cuerpo blockquote {
  margin: 0;
  padding: 0 0 0 var(--sp-3);
  border-left: 3px solid var(--t87-turquesa);
}
.t87-hpax__cuerpo blockquote p {
  max-width: 24ch;
  font-family: var(--t87-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 700; font-style: italic; text-transform: uppercase;
  line-height: 1.02; letter-spacing: -.02em;
  color: var(--t87-txt);
}
.t87-hpax__cuerpo blockquote cite {
  display: block; margin-top: var(--sp-2);
  font-style: normal;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t87-turquesa);
}
/* La sección 19 fuerza Inter en todo <p>: estos dos son titulares */
body .t87-hpax__sub,
body .t87-hpax__cuerpo blockquote p { font-family: var(--t87-display) !important; }

/* ---------- 19. ALINEACIÓN GLOBAL CON EL MANUAL DE MARCA ---------- */
body,
.elementor-kit-8 {
  background-color: var(--t87-tinta);
  color: var(--t87-txt);
  font-family: var(--t87-texto) !important;
}

.elementor-kit-8 :where(p, li, input, textarea, select, label) {
  font-family: var(--t87-texto) !important;
}

.elementor-kit-8 :where(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
  font-family: var(--t87-display) !important;
}

.elementor-kit-8 :where(a.elementor-button, button, [type="button"], [type="submit"]) {
  font-family: var(--t87-texto) !important;
}

/* Variables de WooCommerce ajustadas a la paleta oficial. */
:root {
  --woocommerce: var(--t87-turquesa);
  --wc-primary: var(--t87-turquesa);
  --wc-primary-text: var(--t87-tinta);
  --wc-content-bg: var(--t87-humo);
  --wc-secondary: var(--t87-humo);
  --wc-secondary-text: var(--t87-tinta);
}

/* ---------- 16. ANIMACIÓN DE ENTRADA (base, sin JS) ---------- */
/* Sin JS el contenido queda visible: progressive enhancement */
.js .t87-anim { opacity: 0; transform: translateY(28px); }

/* ---------- 17. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .t87-anim { opacity: 1 !important; transform: none !important; }
  .t87-marquesina__pista { animation: none; }
  .t87-muro__col { animation: none; }
  .t87-anillo svg { animation: none; }
  .t87-muro { height: auto; -webkit-mask-image: none; mask-image: none; }
  .t87-revela .palabra { color: var(--t87-txt); }
  .t87-revela .palabra.t87-acento { color: var(--t87-turquesa); }
  .t87-wa { transform: translateY(0); }
  /* La tarjeta no crece; el borde turquesa basta para marcar el foco. */
  .t87-prog:hover, .t87-prog:focus-within { transform: none; }
}

/* Listas diferenciadas para cada modalidad del programa F1. */
.t87-f1-info-programas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.t87-f1-info-programas article { min-width: 0; padding: var(--sp-3); border: 1px solid var(--t87-linea); border-radius: var(--t87-radio-l); background: var(--t87-tinta-2); }
.t87-f1-info-programas h3 { margin: 0 0 var(--sp-3); color: var(--t87-turquesa); font-size: var(--fs-lg); }
.t87-f1-info-programas h4 { margin: var(--sp-3) 0 var(--sp-2); color: var(--t87-txt); font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 760px) { .t87-f1-info-programas { grid-template-columns: 1fr; } }

/* El bloque comparativo de F1 ocupa todo el ancho del contenido. */
.t87-bloque--f1-info { display: block !important; }
.t87-bloque--f1-info > .t87-bloque__t { margin-bottom: var(--sp-4); }

/* Disponibilidad F1: mismo contraste que las tarjetas de programas. */
.t87-chip-cupos--ultimos { color: var(--t87-tinta) !important; background: var(--t87-turquesa) !important; border-color: var(--t87-turquesa) !important; }

/* Reseñas Google a ancho completo, como el bloque de Home. */
.t87-testimonios-google { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 0 var(--sp-4); box-sizing: border-box; }
.t87-testimonios-google .ti-widget { display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; }
.t87-testimonios-google .ti-widget-container { width: 100% !important; max-width: none !important; }
.t87-programa-valores__desde { margin: 6px 0 2px; color: var(--t87-turquesa); font-family: var(--t87-display); font-size: var(--fs-sm); font-weight: 700; }

/*
 * Hero de la portada con los textos del afiche de /tribuna-87/: antetítulo
 * espaciado con línea turquesa, titular en Poppins con la parte clave en
 * turquesa y frase manuscrita (Yellowtail) con su trazo.
 */
.t87-hero__claim--afiche {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--fs-sm); font-weight: 500; font-style: normal;
  letter-spacing: .26em;
  color: var(--t87-txt);
}
.t87-hero__claim--afiche::before { content: ''; flex: none; width: 56px; height: 2px; background: var(--t87-turquesa); }
.t87-hero__titulo--afiche {
  max-width: 11em;
  font-weight: 800; font-style: normal; text-transform: none;
  font-size: min(clamp(2.6rem, 1rem + 4.6vw, 6rem), 9svh);
  line-height: .98; letter-spacing: -.035em;
}
.t87-hero__frase { display: block; text-wrap: balance; }
.t87-hero__titulo--afiche .t87-afiche__firma-texto { text-shadow: 0 2px 22px rgba(13,22,11,.8); }
/* Sin sombra: cada palabra va en una máscara (overflow: hidden) que la recorta
   y dibujaba rectángulos oscuros detrás del titular. La lectura la da el velo. */
.t87-hero__titulo.t87-hero__titulo--afiche { text-shadow: none; }
.t87-hero:has(.t87-hero__titulo--afiche) .t87-hero__velo {
  background:
    linear-gradient(180deg,
      rgba(13,22,11,.58) 0%, rgba(13,22,11,.08) 28%,
      rgba(13,22,11,.38) 66%, rgba(13,22,11,.86) 100%),
    linear-gradient(90deg,
      rgba(13,22,11,.66) 0%, rgba(13,22,11,.34) 44%, rgba(13,22,11,0) 72%);
}
@media (max-width: 899px) {
  .t87-hero__claim--afiche { gap: 10px; font-size: 11px; letter-spacing: .2em; }
  .t87-hero__claim--afiche::before { width: 28px; }
  .t87-hero__titulo--afiche { font-size: clamp(2.4rem, 1.3rem + 5.6vw, 4rem); }
  /*
   * Teléfono: igual que las portadas de las demás páginas. El video queda limpio
   * arriba y el texto se apoya abajo sobre un degradado; antetítulo sin línea y
   * botones y respaldo más compactos para que el bloque no suba hasta el centro.
   */
  .t87-hero { padding-block: var(--sp-7) var(--sp-4); }
  .t87-hero:has(.t87-hero__titulo--afiche) .t87-hero__velo {
    background: linear-gradient(180deg,
      rgba(13,22,11,.6) 0%, rgba(13,22,11,0) 16%, rgba(13,22,11,0) 30%,
      rgba(13,22,11,.72) 48%, rgba(13,22,11,.92) 66%, var(--t87-tinta) 100%);
  }
  .t87-hero__claim--afiche { letter-spacing: .14em; margin-bottom: var(--sp-3); text-shadow: none; }
  .t87-hero__claim--afiche::before { display: none; }
  .t87-hero__acciones { margin-top: var(--sp-4); gap: 10px; }
  .t87-hero__acciones .t87-btn { min-height: 48px; padding-inline: var(--sp-3); font-size: 12px; }
  .t87-hero__respaldo { margin-top: var(--sp-3); font-size: var(--fs-xs); }
  .t87-hero__base { margin-top: var(--sp-4); }
}

/*
 * Ficha de programa: misma portada, con titulares más largos que los del afiche
 * (nombres de partidos y carreras), así que el titular baja un punto y deja
 * sitio a la bajada, los datos del viaje y la urgencia.
 */
/* Las fotos de los programas son de estadio y muy cargadas: el velo cubre más ancho */
.t87-afiche.t87-afiche--programa .t87-afiche__velo {
  background:
    linear-gradient(90deg, rgba(13,22,11,.95) 0%, rgba(13,22,11,.86) 40%, rgba(13,22,11,.35) 62%, rgba(13,22,11,0) 78%),
    linear-gradient(180deg, rgba(13,22,11,.78) 0%, rgba(13,22,11,0) 26%, rgba(13,22,11,0) 70%, rgba(13,22,11,.9) 100%);
}
.t87-afiche--programa .t87-afiche__lede,
.t87-afiche--programa .t87-afiche__datos { text-shadow: 0 1px 14px rgba(13,22,11,.9); }
.t87-afiche--programa .t87-afiche__titulo {
  max-width: 12em;
  font-size: min(clamp(2.4rem, 1rem + 3.6vw, 4.8rem), 7svh);
}
.t87-afiche--programa .t87-afiche__linea > span { max-width: 100%; }
.t87-afiche__datos { animation: t87-aparece .9s var(--ease-out) 1.6s both; }
.t87-afiche__datos .t87-ficha__sumario { margin-top: var(--sp-3); color: var(--t87-txt); }
@media (max-width: 899px) {
  .t87-afiche--programa .t87-afiche__titulo { font-size: clamp(2.1rem, 1.2rem + 4.6vw, 3.2rem); }
  .t87-afiche--programa .t87-afiche__foto { object-position: 50% 45%; }
  /* En el teléfono los datos van en lista: partidos en línea dejaban un «·» al inicio */
  .t87-afiche__datos .t87-ficha__sumario { display: grid; gap: 4px; font-size: var(--fs-base); }
  /* Las dos reglas: «span + span::before» (el «·» de escritorio) gana a una sola */
  .t87-afiche__datos .t87-ficha__sumario span::before,
  .t87-afiche__datos .t87-ficha__sumario span + span::before {
    content: ''; flex: none; width: 14px; height: 2px; margin-right: 10px;
    background: var(--t87-turquesa);
  }
}

/*
 * Foco de la portada (campo de la ficha): a qué altura de la foto está lo
 * importante. En computador encuadra la foto ahí; en el teléfono, si está en la
 * mitad baja, sube la foto para que no quede bajo el titular.
 */
.t87-afiche--programa[style*="--foco"] .t87-afiche__foto { object-position: 50% calc(var(--foco) * 1%); }
@media (max-width: 899px) {
  .t87-afiche--programa[style*="--foco"] .t87-afiche__foto { object-position: 50% calc(var(--foco) * 1%); }
  .t87-afiche--programa[style*="--foco"] .t87-afiche__lienzo { top: calc(min(0, 35 - var(--foco)) * .62svh); }
}

/* Laptops de poca altura: con el bloque 40px más abajo, la bajada y el lema se compactan para no rozarse */
@media (min-width: 900px) and (max-height: 820px) {
  .t87-afiche__lede { margin-top: var(--sp-3); font-size: var(--fs-base); }
  .t87-afiche__lema { bottom: 22px; }
}

/* Ubicación en el estadio: plano grande y, al lado, qué es cada sector */
.t87-sectores-bloque { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 900px) {
  .t87-sectores-bloque { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .t87-sectores-bloque--solo { grid-template-columns: minmax(0, 640px); }
}
.t87-sectores-mapa .t87-ficha-foto {
  aspect-ratio: auto;
  border-radius: var(--t87-radio-l);
  background: #fff;
}
.t87-sectores-mapa .t87-ficha-foto img { height: auto; object-fit: contain; }
.t87-sectores-mapa .t87-ficha-foto:hover img { transform: scale(1.02); }
.t87-sectores-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.t87-sectores-lista li {
  display: grid; gap: 4px;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--t87-turquesa);
}
.t87-sectores-lista strong { font-family: var(--t87-display); font-size: var(--fs-lg); font-weight: 700; }
.t87-sectores-lista span { color: var(--t87-txt-2); font-size: var(--fs-sm); line-height: 1.5; }
body .t87-sectores-lista strong { font-family: var(--t87-display) !important; }