/* Escena de /touring/ y /es/giras/: la tarima y los faroles son más claros que
   la costura del piloto, así que el velo oscurece más el lado donde va el texto
   (izquierda en escritorio, mitad de abajo en móvil). Solo se enlaza en esas dos páginas. */
.touring-page .scene-veil {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.52) 34%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.3) 100%);
}
@media (max-width: 700px) {
  .touring-page .scene-veil {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.18) 78%, rgba(0, 0, 0, 0.3) 100%);
  }
}

/* Cierre: banner textil de gira (woven-cloth.js) como protagonista. La sección es el
   escenario: el canvas la cubre entera y la tela se encuadra en la caja de .tour-banner, que
   ocupa la mitad derecha a sangre (arriba en móvil). Texto y CTA van por encima del canvas,
   así que el enlace siempre recibe el clic; el script escucha el puntero en la sección.
   Es decorativo (aria-hidden). Si no hay WebGL, el script quita .has-banner y el cierre
   vuelve a su maquetación de siempre.
   El cierre es un section.quote-strip: un div con eyebrow+h2+p, el botón .action-link y,
   aparte, el .tour-banner. */
.quote-strip.has-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  grid-template-areas: "text banner" "cta banner";
  grid-template-rows: 1fr auto;
  column-gap: 3%;
  align-items: end;
  justify-content: initial;
  min-height: clamp(620px, 88vh, 900px);
  padding-top: 90px;
  padding-bottom: 90px;
  touch-action: pan-y;
  /* Viñeta de estudio: foco cálido detrás de la tela y bordes que caen a negro. */
  background:
    radial-gradient(ellipse 46% 62% at 66% 44%, rgba(255, 224, 188, 0.13), rgba(255, 224, 188, 0) 70%),
    radial-gradient(ellipse 120% 95% at 60% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%),
    var(--ink-2);
}
.quote-strip.has-banner > div:not(.tour-banner) {
  grid-area: text;
  position: relative;
  z-index: 1;
}
.quote-strip.has-banner h2 { font-size: clamp(44px, 5.6vw, 88px); line-height: 0.95; }
.quote-strip.has-banner > a.action-link {
  grid-area: cta;
  align-self: start;
  justify-self: start;
  position: relative;
  z-index: 1;
  margin-top: 28px;
}
.quote-strip.has-banner > .tour-banner {
  grid-area: banner;
  display: block;
  align-self: stretch;
  margin: -90px -6.4% -90px 0;
  min-height: 420px;
}
.tour-banner canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.tour-banner.is-ready canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tour-banner canvas { transition: none; }
}
@media (max-width: 800px) {
  .quote-strip.has-banner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "banner" "text" "cta";
    grid-template-rows: none;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 56px;
    background:
      radial-gradient(ellipse 80% 34% at 50% 24%, rgba(255, 224, 188, 0.13), rgba(255, 224, 188, 0) 72%),
      radial-gradient(ellipse 140% 80% at 50% 35%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%),
      var(--ink-2);
  }
  .quote-strip.has-banner > .tour-banner {
    aspect-ratio: 1.22;
    min-height: 0;
    margin: 28px -6.4% 0;
  }
  .quote-strip.has-banner h2 { font-size: clamp(40px, 12vw, 56px); }
}