/* ============================================================
   POPUP DE PROGRAMA — el pliego tal cual, en imagen
   ------------------------------------------------------------
   Adaptado del visor de Sports Travel (17 sep 2026) porque Juan
   pidió literalmente «tal cual como en la página de Sports».
   La mecánica es la misma; lo que cambia son los tokens: aquí el
   papel es la cal y la tinta es --tinta, no el crema de STC.

   La regla de negocio que hay detrás: **un programa se publica tal
   cual, sin transcribir una línea**. Estos pliegos ya vienen
   maquetados con la marca de Santorini —el wordmark, el azul
   --cupula, la Josefin— así que calcarlos en HTML sería reescribir
   un diseño que ya está resuelto. Lo único que se le añade a la
   imagen es una zona clicable encima del botón de WhatsApp que ya
   está dibujado en el pliego.

   z-index 960: por encima de la cabecera fija.
   ============================================================ */
.prog-ov{ position:fixed; inset:0; z-index:960; display:none; }
.prog-ov.open{ display:block; }
.prog-ov .scrim{ position:absolute; inset:0; background:rgba(23,18,70,.62);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .35s; }
.prog-ov.open .scrim{ opacity:1; }

.prog-sheet{
  position:absolute; inset:clamp(10px,2.4vw,34px);
  background:var(--cal-2); border-radius:var(--radio); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 40px 90px rgba(23,18,70,.45);
  transform:translateY(24px) scale(.985); opacity:0;
  transition:transform .4s cubic-bezier(.16,.84,.26,1), opacity .4s;
}
.prog-ov.open .prog-sheet{ transform:none; opacity:1; }

.prog-sheet .ov-close{
  position:absolute; top:14px; right:14px; z-index:20; width:42px; height:42px;
  border-radius:50%; border:1.5px solid var(--linea); background:var(--cal);
  color:var(--tinta); font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t-rapido), color var(--t-rapido), transform var(--t-medio); }
.prog-sheet .ov-close:hover{ background:var(--tinta); color:#fff; transform:rotate(90deg); }
.prog-sheet .ov-close:focus-visible{ outline:3px solid var(--cupula); outline-offset:3px; }

.prog-body{ flex:1; overflow-y:auto;
  padding:clamp(40px,6vw,70px) clamp(16px,4vw,40px) clamp(40px,6vw,64px); }
/* El cuerpo con scroll es una parada de tabulación. El anillo general va con
   offset positivo y aquí lo dibujaría FUERA de la hoja, donde lo recorta el
   overflow:hidden: se tabula y no se ve nada. Con offset negativo va por dentro. */
.prog-body:focus-visible{ outline:3px solid var(--cupula); outline-offset:-3px; }

.prog-doc{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:26px; }

/* «Página 2 de 4» entre hojas. Sólo se ve apilado; en pliego sobra. */
.prog-divider{ display:flex; align-items:center; gap:12px; color:var(--tinta-3);
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; padding:0 8px; }
.prog-divider::before,.prog-divider::after{ content:''; flex:1; border-top:1.5px dashed var(--linea); }

body.ov-lock{ overflow:hidden; }

/* Con movimiento reducido el popup aparece sin más: la información es la misma. */
@media (prefers-reduced-motion: reduce){
  .prog-ov .scrim{ transition:none; }
  .prog-sheet{ transform:none; transition:opacity .01s; }
  .prog-sheet .ov-close{ transition:background .01s, color .01s; }
  .prog-sheet .ov-close:hover{ transform:none; }
}

/* ============================================================
   PLIEGO — las hojas de dos en dos, como el programa abierto
   Sólo cuando de verdad caben sin apretar. Por debajo se apilan.
   ============================================================ */
@media (min-width:1180px){
  .prog-doc{ max-width:1560px; display:grid; grid-template-columns:1fr 1fr;
    align-items:stretch; gap:24px; }
  .prog-divider{ display:none; }
}

/* ============================================================
   LA HOJA — y su zoom, que no es un adorno
   ------------------------------------------------------------
   Una A4 a 390px de ancho deja la letra del itinerario en ~4px:
   sin zoom el programa no se puede leer en un teléfono. Lo cablea
   programa-popup.js sobre .flyer-page.

   ⚠️ El zoom va por `transform`, NO por `width`: con width cada
   fotograma recalcula la maqueta de una imagen de 2000px y da
   tirones en el móvil. El transform lo compone la GPU.
   ============================================================ */
.flyer-page{
  position:relative; margin:0; border-radius:var(--radio); overflow:hidden;
  background:var(--cal); border:1px solid var(--linea);
  box-shadow:0 14px 34px rgba(23,18,70,.16);
  cursor:zoom-in;
  /* A 1x el dedo es del scroll del popup (pan-y); el navegador nos cede el eje
     horizontal y el multitáctil, que es lo que necesita el pellizco. */
  touch-action:pan-y;
}
.flyer-canvas{ position:relative; width:100%; transform-origin:center center; will-change:transform; }
.flyer-canvas img{ display:block; width:100%; height:auto; }

/* Ampliada: el dedo pasa a ser del arrastre y la hoja se estira para
   aprovechar la pantalla. */
.flyer-page.is-zoom{ cursor:grab; touch-action:none; height:min(82vh,940px); }
.flyer-page.is-zoom:active{ cursor:grabbing; }

@media (prefers-reduced-motion: reduce){ .flyer-canvas{ transition:none !important; } }

/* Zona clicable encima del botón de WhatsApp que el pliego ya trae dibujado.
   Invisible a propósito —la hoja tiene que verse idéntica al PDF— pero con
   anillo de foco, que si no sería un enlace que nadie puede ver ni encontrar.
   Las coordenadas salen del rectángulo REAL del PDF (PyMuPDF), no de mirar
   la imagen: por eso van en %, y así siguen cuadrando con el zoom puesto. */
.flyer-hot{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border-radius:999px; display:block;
  overflow:hidden; text-indent:-9999px; white-space:nowrap;   /* el texto es para lectores */
}
.flyer-hot:focus-visible{ outline:3px solid var(--cupula); outline-offset:3px; }

/* Barra de herramientas: lo único que NO es el pliego. */
.flyer-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding-top:4px; }
.flyer-tools .flyer-note{ flex:1; min-width:200px; font-size:.82rem; line-height:1.5; color:var(--tinta-2); margin:0; }
@media (min-width:1180px){ .flyer-tools{ grid-column:1 / -1; } }