/* Cartel del Fest — compartido por index.html (ficha de ciclismo) y running.html.
   Las rutas de imágenes son relativas a static/, como las de las páginas. */
/* ════════════════════════════════════════════════════════════
   CARTEL DEL FEST · el encabezado de la ficha es el afiche de la tarjeta
   "Cartel del Fest" (tarjetas/festival.js). Es un impreso: sus colores
   son fijos, iguales en tema claro y oscuro.
   Contenedores: .cartel decide el layout (2 columnas desde 700 px) y
   .fx-texto ajusta cada línea a su ancho con cqi / --w (ancho del texto
   en em de League Gothic). Así la captura de html2canvas (a 640 px) sale
   igual que en vivo, sin medir el DOM. Nada de filter/mask/clip-path en
   lo que se captura: html2canvas 1.4.1 no los pinta.
   ════════════════════════════════════════════════════════════ */
body.cert-active .cert-header.cartel {
  container: cartel / inline-size;
  display: block; padding: 0; gap: 0; text-align: center; border-bottom: 0; color: #1E0808;
  background: radial-gradient(120% 90% at 30% 40%, transparent 55%, rgba(150,60,0,.28)), #F0D000;
}
body.cert-active .cert-header.cartel::after { content: none; }
.fx { position: relative; display: grid; grid-template-columns: 5fr 6fr; grid-template-areas: "arte texto" "franja franja"; }
.fx-grano { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .7;
            background: url(granfondonairo/tarjetas/festival-grano.png) 0 0 / 256px 256px; }
.fx-arte { grid-area: arte; position: relative; z-index: 2; min-height: 330px; }
/* El sol y la catedral comparten caja: la del arte (1080×700) pegada abajo */
.fx-solbox, .fx-cat { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1080 / 700; }
/* En 2 columnas el arte se amplía al 128 % desde la izquierda: el edificio
   de la derecha queda fuera (si no, se corta en seco a mitad del afiche).
   El sol sigue a la cúpula: 53 %·1,28 de ancho, 68 % de alto con la
   imagen recortada arriba. El sol es un <img> (festival-sol.webp): como SVG,
   html2canvas lo rasteriza a 3x y congela la página; como fondo arma un
   lienzo intermedio enorme. Centrado con calc, sin transform. */
.fx-sol { position: absolute; left: calc(68% - 950px); top: calc(59% - 950px); width: 1900px; height: 1900px;
          max-width: none; pointer-events: none; }
.fx-cat { background: url(granfondonairo/tarjetas/festival-cartel.png) left bottom / 128% auto no-repeat; }
/* La medalla va con el resultado (tiempo y line-up), como su premio */
.fx-res { display: flex; align-items: center; justify-content: center; gap: 1.1rem; width: 100%; margin-top: .4rem; }
.fx-med { flex: none; position: relative; }
.fx-datos { container: datos / inline-size; flex: 0 1 var(--dw); min-width: 0; text-align: left;
            display: flex; flex-direction: column; gap: .45rem; }
/* Sombras: la medalla proyecta su silueta sobre el papel (una dura e impresa, como la
   del nombre y el botón, y otra suave) y deja de flotar. En vivo es un filtro sobre el
   canvas transparente, así que sigue el giro. html2canvas no pinta filtros: en la
   captura la sombra es un disco detrás de la foto frontal (donde cae el disco: 29 %
   desde arriba, 92 % de ancho). */
.cartel .cert-medal { height: 185px; margin: 0; -webkit-mask-image: none; mask-image: none; position: relative; z-index: 1;
                      filter: drop-shadow(5px 7px 0 rgba(30,8,8,.22)) drop-shadow(0 12px 14px rgba(70,25,0,.35)); }
.cartel .cert-medal-3d { margin: 0; height: auto; filter: drop-shadow(5px 7px 0 rgba(30,8,8,.22)) drop-shadow(0 12px 14px rgba(70,25,0,.35)); }
.fx-med::before { content: none; position: absolute; z-index: 0; left: calc(4% + 5px); top: calc(29% + 7px); width: 92%;
                  aspect-ratio: 1; border-radius: 50%; background: rgba(30,8,8,.2); box-shadow: 0 8px 14px rgba(70,25,0,.3); }
.cert-capturing .fx-med::before { content: ''; }
/* Compartir: arriba a la derecha, con etiqueta y en el estilo del afiche (el ícono
   solo, abajo en el arte, pasaba desapercibido). No sale en la captura. */
.cartel .cert-share-mini { top: 14px; right: 14px; width: auto; height: auto; gap: .45rem; padding: .55rem 1rem .55rem .85rem;
  background: #AF3130; color: #FFF4D6; border: 2px solid #1E0808; border-radius: 999px; box-shadow: 3px 3px 0 #1E0808;
  -webkit-backdrop-filter: none; backdrop-filter: none; font: 900 .78rem/1 'Roboto', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.cartel .cert-share-mini:hover { background: #C23A38; border-color: #1E0808; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1E0808; }
.fx-sello { container: sello / inline-size; position: absolute; left: 6%; top: 24px; z-index: 3;
            width: 150px; aspect-ratio: 1; transform: rotate(-8deg); }
.fx-sello svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-sello-t { position: absolute; inset: 0 3% 3% 0; display: flex; flex-direction: column;
              align-items: center; justify-content: center; color: #FFF4D6; }
.fx-sello-t small { font: 900 8.5cqi/1 'Roboto', sans-serif; letter-spacing: .05em; white-space: nowrap; }
.fx-sello-t b { font: 400 min(30cqi, calc(64cqi / var(--w))) / .92 var(--font-display); color: #F0D000;
                margin: 3% 0 4%; white-space: nowrap; }
/* Dorsal prendido al afiche: placa blanca, franja roja con el primer nombre del
   corredor (como los dorsales personalizados) y los 4 ganchos */
.fx-dorsal { position: absolute; left: 5%; bottom: 18px; z-index: 3; min-width: 132px; padding: 0 1rem .3rem;
             background: #FFFDF6; color: #1E0808; border-radius: 6px; text-align: center;
             transform: rotate(-4deg); transform-origin: bottom left; box-shadow: 0 6px 14px rgba(70,25,0,.28); }
.fx-dorsal span { display: block; margin: 0 -1rem .15rem; padding: .34rem .6rem .3rem .76rem; border-radius: 6px 6px 0 0;
                  background: #AF3130; color: #FFF4D6; font: 900 .74rem/1 'Roboto', sans-serif; letter-spacing: .16em; white-space: nowrap; }
.fx-dorsal b { display: block; font: 400 3.4rem/1 var(--font-display); letter-spacing: .02em; }
.fx-dorsal i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #D3C9B4; }
.fx-dorsal i:nth-of-type(1) { left: 7px; top: 29px; } .fx-dorsal i:nth-of-type(2) { right: 7px; top: 29px; }   /* bajo la franja */
.fx-dorsal i:nth-of-type(3) { left: 7px; bottom: 7px; } .fx-dorsal i:nth-of-type(4) { right: 7px; bottom: 7px; }
.fx-texto { container: texto / inline-size; grid-area: texto; position: relative; z-index: 2;
            display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 4rem 1.8rem 1.6rem; }   /* arriba: aire para Compartir */
.fx-cinta { position: relative; z-index: 0; background: #AF3130; color: #FFF4D6; margin-bottom: .3rem; white-space: nowrap;
            padding: .45rem 1.3rem .4rem; font: 900 clamp(.6rem, 3.2cqi, .78rem)/1 'Roboto', sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.fx-cinta::before, .fx-cinta::after { content: ''; position: absolute; z-index: -1; top: .3rem; bottom: -.3rem;
            width: 1.4rem; background: #7A1F1E; }
.fx-cinta::before { left: -.9rem; } .fx-cinta::after { right: -.9rem; }
body.cert-active .cert-header.cartel h2.fx-nombre { margin: 0; font-size: 1rem; line-height: 1; text-shadow: none; width: 100%; }
.fx-l { display: block; width: 100%; white-space: nowrap; text-transform: uppercase;
        font-family: var(--font-display); font-weight: 400; line-height: .95; letter-spacing: 0;
        font-size: min(var(--max), calc(var(--k, .94) * 100cqi / var(--w))); }
.fx-l b { color: #AF3130; font-weight: 400; }
.fx-n { color: #AF3130; text-shadow: .035em .035em 0 #1E0808; }
.fx-n2 { margin-top: .15em; }
.fx-tiempo { --k: .92; color: #1E0808; margin-bottom: .15rem; font-variant-numeric: tabular-nums; }
.fx-acto { color: #1E0808; --k: .98; }   /* llenan el bloque: la holgura queda en 2 % */
.fx-franja { grid-area: franja; position: relative; z-index: 2; background: #1E0808; color: #F0D000;
             font: 400 clamp(1.25rem, 3.4cqi, 2rem)/1 var(--font-display); letter-spacing: .06em; padding: .6rem 1rem .5rem; }
.fx-franja i { color: #AF3130; font-style: normal; margin: 0 .55em; }
/* Angosto (móvil y la captura a 640 px): afiche vertical, arte arriba */
@container cartel (max-width: 699px) {
  .fx { grid-template-columns: 1fr; grid-template-areas: "arte" "texto" "franja"; }
  .fx-arte { min-height: 0; height: 62cqi; }
  .fx-cat { background-position: center bottom; background-size: 100% auto; }
  .fx-sol { left: calc(53% - 950px); top: calc(68% - 950px); }
  /* Medalla más chica junto al tiempo: el canvas del visor se escala por CSS
     (pinta a 127×185 y se reduce, sigue nítido) y la foto de la captura igual */
  .fx-res { gap: .7rem; }
  .fx-med .cert-medal-3d { width: auto !important; height: auto; }
  .fx-med .cert-medal-3d canvas { width: auto !important; height: 139px !important; }   /* solo el alto: conserva la proporción */
  .cartel .cert-medal { height: 139px; }
  .fx-sello { width: 27cqi; left: 3%; top: 12px; }
  .fx-dorsal { left: 3%; bottom: 8px; transform: rotate(-4deg) scale(.8); }
  .fx-texto { padding: 1.3rem 1rem 1.2rem; }
}

/* ── Fotos del corredor en 24 Cuadros (fotos24.js) — no salen en la imagen para redes ── */
.f24:empty { display: none; }
.f24 { margin: 1.4rem 0 1.8rem; }
.f24-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.f24-head b { font: 400 1.5rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: #1E0808; }
.f24-head span { font-size: .75rem; color: #6E4B3B; }
/* Visor: la foto principal con foco (completa, sobre tinta) y la tira de miniaturas debajo */
.f24-visor { position: relative; height: min(460px, 78vw); border: 2px solid #1E0808; border-radius: 12px; overflow: hidden;
  background: #1E0808; box-shadow: 4px 4px 0 #1E0808; outline: none; touch-action: pan-y; }
.f24-visor:focus-visible { box-shadow: 4px 4px 0 #1E0808, 0 0 0 3px #F0D000; }
.f24-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.f24-img { transition: opacity .2s; }
.f24-visor.cargando .f24-img { opacity: .35; }
.f24-visor.cargando::after { content: ''; position: absolute; inset: 0; margin: auto; width: 38px; height: 38px;
  border: 4px solid rgba(255,244,214,.3); border-top-color: #F0D000; border-radius: 50%; animation: f24gira .8s linear infinite; }
@keyframes f24gira { to { transform: rotate(360deg); } }
.f24-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0 0 3px;
  border: 2px solid #1E0808; border-radius: 50%; background: #FFF6DA; color: #1E0808; box-shadow: 2px 2px 0 #1E0808;
  font: 400 30px/1 var(--font-display); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.f24-nav:hover { background: #F0D000; }
.f24-prev { left: 10px; } .f24-next { right: 10px; }
.f24-cont { position: absolute; right: 10px; bottom: 10px; padding: .3rem .6rem .25rem; border-radius: 999px;
  background: rgba(30,8,8,.75); color: #FFF4D6; font: 700 .72rem/1 'Roboto', sans-serif; letter-spacing: .04em; }
.f24-tira { display: flex; gap: .45rem; margin-top: .7rem; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.f24-tira button { flex: none; width: 64px; height: 64px; padding: 0; overflow: hidden; border: 2px solid transparent;
  border-radius: 8px; background: #F6E7B4; cursor: pointer; opacity: .65; transition: opacity .15s, border-color .15s; }
.f24-tira button:hover { opacity: 1; }
.f24-tira button.on { opacity: 1; border-color: #AF3130; box-shadow: 2px 2px 0 #1E0808; }
.f24-tira img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f24-vacio { font-size: .85rem; color: #6E4B3B; margin: 0; }
.f24-btn { display: inline-flex; margin-top: .8rem; padding: .6rem 1.1rem .55rem; border: 2px solid #1E0808; border-radius: 999px;
  background: #AF3130; color: #FFF4D6; box-shadow: 3px 3px 0 #1E0808; font: 800 .8rem/1 var(--font-ui); letter-spacing: .03em; text-decoration: none; }
.f24-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1E0808; }

/* ── ↻ Repetir la animación de los gráficos Líder · Tú · Promedio ── */
.sl-stage .sl-replay { position: absolute; right: 0; top: 0; z-index: 3; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 2px solid #1E0808; border-radius: 50%;
  background: #FFF6DA; color: #1E0808; font: 700 17px/1 'Roboto', sans-serif; cursor: pointer; box-shadow: 2px 2px 0 #1E0808; }
.sl-stage .sl-replay:hover { background: #F0D000; transform: rotate(-30deg); }