/* ============================================================================
   FORMATOS · /formatos/ (15 oct 2026)
   ============================================================================
   La escalera que se sube, los tres peldaños (copiados de «LA ESCALERA» de
   esports/index.html), el formato de cada nivel y la temporada (el recorrido del año). Lo común de
   Esports y los efectos de campeón, en esports-secciones.css.
   ========================================================================== */

/* ============================================================================
   1 · LA ESCALERA QUE SE SUBE
   ============================================================================
   Tres escalones en pendiente: cada uno más alto que el anterior
   (`--i`). El que se elige y los de debajo llevan `.subido`: su raya de
   arriba se pinta de amarillo, una detrás de otra (la «línea que une pasos»
   de /muestra), y el isotipo salta al elegido. */
.fm-subir{display:grid;gap:var(--esp-rejilla)}
.fm-subir[hidden]{display:none}
.fm-escalones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;align-items:end;
  min-height:13rem;padding-top:3rem}
.fm-escalon{
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:.15rem;
  height:calc(4.5rem + var(--i,0) * 3.5rem);padding:.9rem .9rem 0;
  border:0;cursor:pointer;text-align:left;font:inherit;color:var(--texto-3);
  background:var(--surface);
  transition:background .2s ease, color .2s ease, translate .35s var(--mov-rebote);
}
/* La raya de arriba: gris en reposo; amarilla, de izquierda a derecha, al
   subir. Cada escalón arranca cuando va acabando el anterior. */
.fm-escalon::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.fm-escalon::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s cubic-bezier(.65,0,.35,1) calc(var(--i,0) * .12s);
}
.fm-escalon.subido::after{transform:none}
.fm-escalon.subido{color:var(--texto-1)}
.fm-escalon[aria-selected="true"]{background:var(--surface-2);translate:0 -.35rem}
.fm-escalon:hover{color:var(--texto-1)}
.fm-escalon:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.fm-escalon-n{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);line-height:1;
  color:var(--yellow)}
.fm-escalon:not(.subido) .fm-escalon-n{color:var(--texto-3)}
.fm-escalon-t{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
/* EL ISOTIPO: se posa sobre el escalón elegido. */
.fm-token{position:absolute;left:50%;top:0;width:2.5rem;height:auto;margin-left:-1.25rem;
  translate:0 -110%;opacity:0;scale:.6;pointer-events:none;
  transition:opacity .2s ease, scale .35s var(--mov-rebote)}
.fm-escalon[aria-selected="true"] .fm-token{opacity:1;scale:1}
@media (prefers-reduced-motion: no-preference){
  .fm-escalon.salta .fm-token{animation:fm-salto .5s var(--mov-rebote)}
}
@keyframes fm-salto{0%{translate:0 -110%} 45%{translate:0 -160%} 100%{translate:0 -110%}}

/* LA FICHA del escalón elegido. La Copa lleva su nebulosa y el filete
   amarillo: es el peldaño que se gana. */
.fm-ficha{min-height:11rem}
.fm-ficha.fm-ficha-copa{--filo-color:var(--yellow);--caja-fondo:var(--surface-2)}
.fm-ficha-in{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:var(--esp-rejilla) var(--esp-caja);
  min-height:inherit;clip-path:var(--bevel)}
.fm-ficha-frec{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--texto-3)}
.fm-ficha h3{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);letter-spacing:.01em;line-height:.9}
.fm-ficha-pitch{font-size:var(--tipo-descripcion);color:var(--texto-2)}
.fm-ficha-cifra{display:flex;align-items:baseline;gap:.5rem;margin-top:.2rem}
.fm-ficha-cifra b{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-numeral);line-height:.85;color:var(--yellow)}
.fm-ficha-cifra span{font-size:var(--tipo-etiqueta);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.fm-ficha-ir{margin-top:auto;padding-top:.4rem;font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow);align-self:flex-start}
.fm-ficha-ir:hover{color:var(--yellow-alto)}
@media (prefers-reduced-motion: reduce){
  .fm-escalon,.fm-escalon::after,.fm-token{transition:none}
  .fm-escalon[aria-selected="true"]{translate:none}
}

/* ============================================================================
   2 · LOS TRES PELDAÑOS — copiados de esports/index.html («LA ESCALERA»)
   ============================================================================ */
.pf-niveles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-rejilla);align-items:end;
  --alto-base:31.1rem;--alto-paso:7.75rem;
}
.pf-n-slot{position:relative;display:flex;flex-direction:column;
  min-height:calc(var(--alto-base) + var(--paso,0) * var(--alto-paso));scroll-margin-top:var(--esp-bloque)}
.pf-n{flex:1;display:flex;flex-direction:column;background:var(--line);padding:1px;clip-path:var(--bevel);
  transition:background .2s ease}
/* El peldaño elegido en la escalera de arriba enciende su filete. */
.pf-n-slot.es-actual .pf-n:not([data-realce="caja"]){background:var(--yellow-bajo)}
.pf-n-tag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:2;
  background:var(--yellow);color:var(--sobre-amarillo);clip-path:var(--bevel-xs);
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.32rem .7rem;white-space:nowrap;
}
.pf-n[data-realce="caja"]{background:var(--yellow)}
.pf-n[data-realce="caja"] .pf-n-in{background:var(--surface-2)}
.pf-n-in{flex:1;background:var(--surface);clip-path:var(--bevel);padding:1.9rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
/* El halo que sigue al cursor (data-foco), en el fondo de la tarjeta. */
.pf-n[data-foco] .pf-n-in{background-image:radial-gradient(16rem 16rem at var(--fx,50%) var(--fy,-20%), rgba(255,198,33,.08), transparent 70%)}
.pf-n-paso{position:absolute;top:1.05rem;right:1.4rem;pointer-events:none;
  font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-numeral);line-height:.78;color:var(--yellow)}
.pf-n-num{display:block;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:.55rem;padding-right:3.4rem}
.pf-n h3{font-weight:700;font-family:var(--fuente-display-e);
  font-size:calc(var(--tipo-subtitulo) * (1 + var(--paso,0) * .18));line-height:.85;margin:0;
  width:max-content;max-width:calc(100% - 2.6rem)}
.pf-n-pitch{margin:.7rem 0 0;font-size:var(--tipo-descripcion);line-height:1.45;color:var(--texto-3)}
.pf-n-cifra{display:flex;align-items:baseline;gap:.5rem;margin-top:auto;padding-top:1.15rem}
.pf-n-cifra-v{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-numeral);line-height:.85;color:var(--texto-1)}
.pf-n-cifra-l{font-size:var(--tipo-etiqueta);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.pf-n-apoyo{margin:.4rem 0 0;font-size:var(--tipo-leyenda);line-height:1.4;color:var(--texto-3)}
.pf-n-lista{list-style:none;margin:0;margin-top:auto;padding:1.5rem 0 0}
.pf-n-lista li{position:relative;padding:.4rem 0 .4rem 1.45rem;font-size:var(--tipo-descripcion);line-height:1.45;color:var(--texto-1)}
.pf-n-lista li::before{content:'✓';position:absolute;left:0;top:.4rem;color:var(--yellow);font-size:.94em}
.pf-n-lista li.pf-n-don{margin-top:.55rem;padding:.95rem 0 .4rem 1.95rem;border-top:1px solid var(--line);
  color:var(--yellow);font-weight:500}
/* El corazón dibujado a mano de esports/index.html (no el «♥» de la fuente,
   que a 13 px se leía como un punto). Late al tocar la tarjeta. */
:root{--corazon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFC621' d='M12.5 7.3L12.5 7.2L12.5 7.0L12.5 6.8L12.4 6.6L12.4 6.3L12.3 6.0L12.2 5.6L12.0 5.3L11.8 4.9L11.6 4.6L11.3 4.2L11.0 3.8L10.7 3.5L10.3 3.2L9.8 2.9L9.3 2.7L8.8 2.5L8.3 2.3L7.7 2.2L7.1 2.2L6.5 2.2L6.0 2.3L5.4 2.5L4.8 2.7L4.2 2.9L3.7 3.3L3.2 3.6L2.8 4.0L2.3 4.5L1.9 5.0L1.6 5.5L1.3 6.1L1.1 6.7L1.0 7.3L0.9 7.9L0.9 8.5L0.9 9.2L1.0 9.8L1.2 10.4L1.4 11.0L1.7 11.6L2.1 12.2L2.4 12.7L2.8 13.1L3.3 13.6L3.7 14.0L4.2 14.4L4.7 14.8L5.2 15.1L5.7 15.5L6.2 15.8L6.7 16.2L7.1 16.5L7.6 16.8L8.1 17.1L8.5 17.4L8.9 17.7L9.3 18.0L9.7 18.2L10.0 18.5L10.3 18.7L10.6 19.0L10.8 19.2L11.0 19.4L11.2 19.6L11.4 19.8L11.5 19.9L11.6 20.1L11.7 20.2L11.8 20.3L11.8 20.4L11.9 20.5L11.9 20.6L11.9 20.6L12.0 20.5L12.1 20.5L12.2 20.6L12.3 20.6L12.3 20.6L12.4 20.5L12.4 20.4L12.5 20.3L12.6 20.2L12.8 20.1L12.9 19.9L13.1 19.7L13.4 19.5L13.6 19.3L13.9 19.1L14.2 18.9L14.5 18.6L14.9 18.3L15.3 18.1L15.7 17.8L16.1 17.5L16.6 17.2L17.0 16.9L17.5 16.6L18.0 16.2L18.5 15.9L19.0 15.5L19.5 15.1L19.9 14.8L20.4 14.4L20.8 13.9L21.2 13.5L21.6 13.0L22.0 12.6L22.3 12.1L22.6 11.6L22.8 11.1L23.0 10.5L23.1 10.0L23.1 9.4L23.1 8.8L23.0 8.3L22.9 7.7L22.6 7.2L22.4 6.7L22.0 6.3L21.7 5.8L21.3 5.4L20.8 5.1L20.4 4.7L19.9 4.5L19.4 4.2L18.8 4.0L18.3 3.9L17.7 3.7L17.2 3.7L16.7 3.7L16.1 3.7L15.6 3.8L15.1 3.9L14.7 4.0L14.2 4.2L13.8 4.4L13.4 4.7L13.1 5.0L12.8 5.3L12.6 5.6L12.3 5.9L12.2 6.2L12.1 6.4L12.0 6.6L11.9 6.8L11.9 7.0L11.8 7.2L11.7 7.4L11.6 7.6L11.6 7.8L11.5 8.0L11.4 8.2L11.3 8.3L11.2 8.5L11.1 8.7L11.0 8.8L10.9 9.0L10.8 9.1L10.7 9.3L10.8 9.3L10.9 9.2L11.1 9.1L11.2 9.0L11.3 8.9L11.5 8.7L11.6 8.6L11.8 8.5L11.9 8.3L12.1 8.2L12.2 8.0L12.4 7.9L12.5 7.7L12.7 7.6L12.9 7.4L13.0 7.3L13.2 7.1L13.3 6.9L13.5 6.8L13.7 6.6L13.9 6.4L14.1 6.3L14.4 6.2L14.6 6.1L14.9 6.0L15.2 5.9L15.5 5.9L15.9 5.8L16.2 5.8L16.6 5.9L16.9 5.9L17.3 6.0L17.6 6.1L18.0 6.3L18.3 6.5L18.6 6.7L18.9 6.9L19.2 7.1L19.5 7.3L19.7 7.6L19.9 7.9L20.0 8.1L20.2 8.4L20.3 8.6L20.3 8.9L20.4 9.1L20.4 9.4L20.4 9.6L20.3 9.9L20.2 10.1L20.1 10.4L20.0 10.7L19.8 11.1L19.5 11.5L19.3 11.8L19.0 12.2L18.6 12.6L18.3 12.9L17.9 13.3L17.5 13.7L17.0 14.1L16.6 14.4L16.2 14.8L15.7 15.2L15.3 15.5L14.9 15.9L14.5 16.3L14.1 16.6L13.7 17.0L13.4 17.3L13.1 17.7L12.8 18.0L12.6 18.3L12.3 18.7L12.2 19.0L12.0 19.3L11.9 19.5L11.8 19.8L11.8 20.0L11.7 20.2L11.7 20.4L11.7 20.5L11.8 20.6L11.8 20.8L12.0 20.9L12.2 20.9L12.3 20.8L12.4 20.7L12.4 20.6L12.4 20.4L12.5 20.2L12.5 20.0L12.5 19.8L12.4 19.5L12.3 19.3L12.2 19.0L12.1 18.7L11.9 18.3L11.7 18.0L11.5 17.6L11.2 17.3L10.9 16.9L10.5 16.6L10.1 16.2L9.7 15.8L9.3 15.5L8.9 15.1L8.5 14.7L8.0 14.4L7.6 14.0L7.1 13.6L6.7 13.2L6.3 12.9L5.9 12.5L5.5 12.1L5.1 11.8L4.8 11.4L4.5 11.0L4.3 10.7L4.1 10.4L3.9 10.0L3.8 9.6L3.7 9.2L3.6 8.8L3.6 8.5L3.6 8.1L3.7 7.8L3.8 7.4L3.9 7.1L4.0 6.8L4.2 6.5L4.4 6.1L4.6 5.9L4.9 5.6L5.2 5.3L5.5 5.1L5.8 4.9L6.2 4.7L6.5 4.6L6.9 4.5L7.3 4.4L7.7 4.3L8.0 4.3L8.4 4.3L8.8 4.4L9.2 4.5L9.5 4.6L9.9 4.7L10.2 4.9L10.6 5.0L10.9 5.2L11.1 5.5L11.4 5.7L11.6 6.0L11.8 6.2L12.0 6.4L12.1 6.7L12.2 6.9L12.3 7.1L12.4 7.2L12.4 7.4Z'/></svg>")}
.pf-n-lista li.pf-n-don::before{content:'';top:.78rem;left:0;width:1.35rem;height:1.35rem;
  background:var(--corazon) center/contain no-repeat;transform:rotate(-8deg);transform-origin:50% 60%}
@media (prefers-reduced-motion: no-preference){
  .pf-n:hover li.pf-n-don::before,.pf-n:focus-within li.pf-n-don::before,.pf-n:active li.pf-n-don::before{animation:fm-latido 1s ease-in-out}
}
@keyframes fm-latido{
  0%,100%{transform:rotate(-8deg) scale(1)} 16%{transform:rotate(-11deg) scale(1.2)}
  32%{transform:rotate(-7deg) scale(.96)} 48%{transform:rotate(-10deg) scale(1.12)} 66%{transform:rotate(-8deg) scale(1)}
}

/* EL BRILLO de los peldaños de arriba (destello.js pone `.destella`). */
.pf-n[data-realce="titulo"]{--brillo:#FFF6DF;--halo:rgba(255,198,33,.55)}
.pf-n[data-realce="caja"]{--brillo:#FFF6DF;--halo:rgba(255,198,33,.75)}
@media (prefers-reduced-motion: no-preference){
 @supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pf-n[data-realce].destella h3{
    background-image:linear-gradient(100deg, var(--texto-1) 0 45%, var(--brillo) 50%, var(--texto-1) 55% 100%);
    background-size:280% 100%;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:pf-n-brillo-txt 8s ease-in-out infinite, pf-n-halo 8s ease-in-out infinite;
  }
 }
}
.pf-n[data-realce="caja"] .pf-n-in::after{
  content:'';position:absolute;inset:-40% -70%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 42%, rgba(242,232,220,.13) 50%, transparent 58%);
  transform:translateX(-70%);
}
@media (prefers-reduced-motion: no-preference){
  .pf-n[data-realce="caja"].destella .pf-n-in::after{animation:pf-n-brillo-caja 8s ease-in-out infinite}
}

/* ============================================================================
   3 · EL FORMATO DE CADA NIVEL
   ============================================================================ */
.fm-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.fm-tabs::-webkit-scrollbar{display:none}
.fm-tab{display:inline-flex;align-items:baseline;gap:.5rem;flex:none;padding:.9rem 1.3rem;margin-bottom:-1px;
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;font:inherit;
  font-size:var(--tipo-control);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  transition:color .15s ease}
.fm-tab:hover{color:var(--texto-1)}
.fm-tab[aria-selected="true"]{color:var(--yellow);border-bottom-color:var(--yellow)}
.fm-tab:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.fm-tab-n{font-family:var(--fuente-display-e);font-weight:800;letter-spacing:.02em}

.fm-formato{padding-top:var(--esp-bloque);display:grid;gap:var(--esp-bloque)}
.fm-formato-cab{display:grid;gap:.9rem;justify-items:start;max-width:60ch}
.fm-formato-cab p{font-size:var(--tipo-cuerpo);color:var(--texto-2);line-height:1.6}
/* LAS CIFRAS, en rejilla abierta: solo filetes. */
.fm-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fm-cifras > div{padding:1.1rem 1.2rem;display:flex;flex-direction:column-reverse;gap:.35rem;min-width:0}
.fm-cifras > div + div{border-left:1px solid var(--line)}
.fm-cifras dd{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-numeral);line-height:.9;color:var(--texto-1)}
.fm-cifras dt{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
/* LAS FASES, como los pasos de base.css: la línea se vuelve a dibujar en
   cada pestaña (`.listo` la pone formatos.js). */
.fm-pasos{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.fm-pasos .step h3{font-size:var(--tipo-entradilla)}
@media (prefers-reduced-motion: no-preference){
  .colocar .fm-pasos .step::after,.fm-pasos .step::after{transform:scaleX(0);
    transition:transform .55s cubic-bezier(.65,0,.35,1) calc(.15s + var(--i,0) * .4s)}
  .colocar .fm-pasos .step::before,.fm-pasos .step::before{transform:scale(.6);opacity:.35;transform-origin:0 100%;
    transition:transform .5s var(--mov-rebote) calc(.15s + var(--i,0) * .4s), opacity .3s ease calc(.15s + var(--i,0) * .4s)}
  .colocar .fm-pasos.listo .step::after,.fm-pasos.listo .step::after{transform:none}
  .colocar .fm-pasos.listo .step::before,.fm-pasos.listo .step::before{transform:none;opacity:1}
}
.fm-lista{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem var(--esp-bloque)}
.fm-lista li{position:relative;padding:.45rem 0 .45rem 1.45rem;font-size:var(--tipo-descripcion);color:var(--texto-2);
  border-bottom:1px solid var(--line)}
.fm-lista li::before{content:'✓';position:absolute;left:0;top:.45rem;color:var(--yellow)}
.fm-lista strong{color:var(--texto-1);font-weight:500}

/* ============================================================================
   4 · LA TEMPORADA — el año como un recorrido (15 oct 2026)
   ============================================================================
   Pase de temporada / mapa de niveles (ver la cabecera de formatos.js):
   cada tramo es una barra que sube tanto como su nivel y es tan ancha como
   lo que dura; una línea amarilla recorre su perfil al verse y enciende el
   nodo de cada tramo al pasar. Los tres niveles suben en PESO del mismo
   amarillo (como la rampa ordinal); cupos y vacaciones no son niveles.

   `--carril` es el hueco de la línea en móvil, donde el recorrido se pone
   de pie. Todas las alturas son múltiplos de --esp-rejilla (`--alto`). */
.fm-t{--carril:calc(var(--esp-rejilla) * 1.75);--paso-t:calc(var(--esp-rejilla) / 4);
  display:grid;gap:var(--esp-rejilla)}
.fm-t-ruta{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--esp-rejilla);
  padding-top:calc(var(--esp-rejilla) * 2)}
.fm-t-tri{display:flex;flex-direction:column;min-width:0}
.fm-t-tramos{display:flex;align-items:flex-end;gap:var(--paso-t);height:calc(var(--esp-rejilla) * 9)}

/* EL TRAMO: el botón ocupa la columna entera (más fácil de alcanzar con el
   cursor) y la barra se levanta desde el suelo. */
.fm-t-tramo{position:relative;flex:var(--w,1) 1 0;min-width:0;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;text-align:left}
.fm-t-tramo:focus-visible{outline:none}
.fm-t-barra{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--paso-t);
  height:calc(var(--esp-rejilla) * var(--alto,4));padding:calc(var(--esp-rejilla) / 2);overflow:hidden;
  container-type:inline-size;color:var(--texto-1);
  background:var(--surface);transition:background .25s ease, outline-color .2s ease;
  outline:1px solid transparent;outline-offset:-1px}
.fm-t-tramo[data-n="semilleros"] .fm-t-barra{background:color-mix(in srgb, var(--yellow) 10%, var(--surface))}
.fm-t-tramo[data-n="circuitos"] .fm-t-barra{background:color-mix(in srgb, var(--yellow) 20%, var(--surface))}
.fm-t-tramo[data-n="copa"] .fm-t-barra{background:color-mix(in srgb, var(--yellow) 28%, var(--surface))}
.fm-t-tramo[data-n="ventana"] .fm-t-barra{background:var(--surface-2)}
.fm-t-tramo[data-n="pausa"] .fm-t-barra{background:repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 6px)}
/* El elegido (al pasar, enfocar o tocar): sube un punto el amarillo y se
   enmarca. Es un rectángulo sin recorte: el contorno va entero. */
.fm-t-tramo[aria-selected="true"] .fm-t-barra{outline-color:var(--yellow)}
.fm-t-tramo[data-n="semilleros"][aria-selected="true"] .fm-t-barra{background:color-mix(in srgb, var(--yellow) 18%, var(--surface))}
.fm-t-tramo[data-n="circuitos"][aria-selected="true"] .fm-t-barra{background:color-mix(in srgb, var(--yellow) 30%, var(--surface))}
.fm-t-tramo[data-n="copa"][aria-selected="true"] .fm-t-barra{background:color-mix(in srgb, var(--yellow) 38%, var(--surface))}
.fm-t-tramo[data-n="ventana"][aria-selected="true"] .fm-t-barra{background:color-mix(in srgb, var(--yellow) 8%, var(--surface-2))}
.fm-t-tramo:focus-visible .fm-t-barra{outline:2px solid var(--yellow);outline-offset:2px}

.fm-t-cab{display:flex;flex-direction:column;align-items:flex-start;gap:var(--paso-t);min-width:0}
.fm-t-num{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);letter-spacing:.01em;line-height:.85;
  color:var(--texto-3);transition:color .3s ease}
.fm-t-tramo[aria-selected="true"] .fm-t-num{color:var(--yellow)}
.fm-t-txt{display:flex;flex-direction:column;min-width:0}
.fm-t-nom{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.fm-t-cuando{display:none;font-size:var(--tipo-etiqueta);color:var(--texto-3);white-space:nowrap}
.fm-t-tramo[data-n="pausa"] .fm-t-txt{display:none}
.fm-t-trofeo{display:block;color:var(--yellow);line-height:0}
.fm-t-trofeo svg{width:var(--tipo-dato);height:auto}
/* Los pips: los 4 semilleros, las 4 semanas de juego del circuito. */
.fm-t-pips{display:flex;gap:var(--paso-t)}
.fm-t-pips i{width:.5em;height:.5em;font-size:var(--tipo-descripcion);rotate:45deg;
  background:color-mix(in srgb, var(--yellow) 55%, transparent)}
.fm-t-tramo[aria-selected="true"] .fm-t-pips i{background:var(--yellow)}
/* En la barra estrecha, solo lo que cabe: el nombre se va primero. */
@container (max-width: 5.5rem){ .fm-t-txt{display:none} }
@container (max-width: 2.5rem){ .fm-t-num,.fm-t-pips{display:none} }

/* EL NODO: un rombo en el borde de arriba de cada barra, por donde pasa la
   línea. Gris hasta que la línea llega; entonces se enciende con rebote. */
.fm-t-nodo{position:absolute;z-index:3;left:50%;bottom:calc(var(--esp-rejilla) * var(--alto,4));
  width:calc(var(--esp-rejilla) / 2);height:calc(var(--esp-rejilla) / 2);translate:-50% 50%;rotate:45deg;
  background:var(--ink);border:2px solid var(--line);
  transition:background .3s ease var(--retardo,0s), border-color .3s ease var(--retardo,0s), scale .5s var(--mov-rebote) var(--retardo,0s)}
.dibujada .fm-t-tramo:not(.futura) .fm-t-nodo{background:var(--yellow);border-color:var(--yellow)}
.fm-t-tramo[aria-selected="true"] .fm-t-nodo{scale:1.5}
.fm-t-tramo[data-n="pausa"] .fm-t-nodo{width:calc(var(--esp-rejilla) / 2.5);height:calc(var(--esp-rejilla) / 2.5)}
@media (prefers-reduced-motion: no-preference){
  .fm-t-anima .fm-t-nodo{scale:.6}
  .fm-t-anima.dibujada .fm-t-tramo:not(.futura) .fm-t-nodo{scale:1}
  .fm-t-anima.dibujada .fm-t-tramo[aria-selected="true"]:not(.futura) .fm-t-nodo{scale:1.5}
  .fm-t-tramo.salta .fm-t-nodo{animation:fm-t-salto .5s var(--mov-rebote)}
}
@keyframes fm-t-salto{0%{scale:1.5} 40%{scale:2.2} 100%{scale:1.5}}

/* LA LÍNEA: el perfil entero en --line, y encima la luz amarilla que lo
   recorre (formatos.js mide el trazado, la esconde y la anima; pone --dur
   y el --retardo de cada nodo). */
.fm-t-trazo{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible}
.fm-t-via,.fm-t-luz{fill:none;stroke-width:2;stroke-linejoin:miter}
.fm-t-via{stroke:var(--line)}
.fm-t-luz{stroke:var(--yellow)}

/* LA META: la Copa lleva la nebulosa (efectos de campeón) y su trofeo
   salta cuando la línea llega. */
.fm-t-tramo[data-n="copa"] .fm-t-barra.nebulosa{--neb-1:.22;--neb-2:.16}
@media (prefers-reduced-motion: no-preference){
  .fm-t-anima .fm-t-trofeo{scale:.6;opacity:.35;transform-origin:0 100%;
    transition:scale .6s var(--mov-rebote) var(--retardo,0s), opacity .3s ease var(--retardo,0s)}
  .fm-t-anima.dibujada .fm-t-trofeo{scale:1;opacity:1}
}

/* LOS MESES, bajo el suelo: un filete por mes y el trimestre debajo. */
.fm-t-meses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.fm-t-meses span{padding:calc(var(--esp-rejilla) / 2) 0 0 calc(var(--esp-rejilla) / 2.5);border-left:1px solid var(--line);
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.fm-t-tri-h{order:3;padding-top:var(--paso-t);font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.22em;color:var(--texto-3)}
.fm-t-tri-h b{color:var(--yellow);font-weight:600}
.fm-t-tri-h span{display:none}

/* HOY: la banderita amarilla donde llega la luz (solo desde 2027). */
.fm-t-hoy{position:absolute;z-index:4;translate:-50% calc(-100% - var(--esp-rejilla) / 2);
  padding:.3rem .55rem;clip-path:var(--bevel-xs);background:var(--yellow);color:var(--sobre-amarillo);
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  .fm-t-anima .fm-t-hoy{opacity:0;scale:.6;transition:opacity .3s ease var(--dur,2.6s), scale .5s var(--mov-rebote) var(--dur,2.6s)}
  .fm-t-anima.dibujada .fm-t-hoy{opacity:1;scale:1}
}

/* LA FICHA del tramo elegido: qué es, cuándo y, si lo tiene, por dentro. */
.fm-t-ficha[data-n="copa"]{--filo-color:var(--yellow);--caja-fondo:var(--surface-2)}
.fm-t-ficha-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:var(--esp-bloque);
  padding:var(--esp-caja);clip-path:var(--bevel)}
.fm-t-ficha-sola .fm-t-ficha-in{grid-template-columns:minmax(0,1fr)}
.fm-t-ficha-cab{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.fm-t-rotulo{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--texto-3)}
.fm-t-ficha h3{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);letter-spacing:.01em;line-height:.9}
.fm-t-ficha[data-n="copa"] h3{color:var(--yellow)}
.fm-t-que{font-size:var(--tipo-cuerpo);font-weight:500;color:var(--texto-1)}
.fm-t-nota{font-size:var(--tipo-descripcion);line-height:1.5;color:var(--texto-2);max-width:42ch}
.fm-t-ir{padding-top:.6rem;font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow)}
.fm-t-ir:hover{color:var(--yellow-alto)}
.fm-t-cuerpo{min-width:0}
/* EL TRIMESTRE POR DENTRO: trece semanas en fila, del mismo amarillo que
   sus barras. Las del tramo elegido, encendidas; las otras, apagadas (es un
   estado). Al pasar por una fila de la lista se marcan sus semanas. */
.fm-t-semanas{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:var(--paso-t);margin:.6rem 0 .3rem}
.fm-t-sem{display:flex;align-items:center;justify-content:center;height:calc(var(--esp-rejilla) * 1.5);
  font-size:var(--tipo-etiqueta);font-weight:600;color:var(--texto-3);background:var(--surface-2);
  outline:1px solid transparent;outline-offset:-1px;opacity:.35;transition:opacity .2s ease, outline-color .15s ease}
.fm-t-sem[data-c="semilleros"]{background:color-mix(in srgb, var(--yellow) 18%, var(--surface));color:var(--texto-1)}
.fm-t-sem[data-c="circuitos"]{background:color-mix(in srgb, var(--yellow) 32%, var(--surface));color:var(--texto-1)}
.fm-t-sem[data-mio]{opacity:1}
.fm-t-sem.marca{opacity:1;outline-color:var(--yellow)}
.fm-t-cuerpo .fm-sem-l li{color:var(--texto-2)}
.fm-t-cuerpo .fm-sem-l strong{font-weight:500;color:var(--texto-1)}
/* LAS FASES DE LA COPA, hasta el trofeo. */
.fm-t-fases{list-style:none;display:grid;gap:0}
.fm-t-fases li{display:grid;grid-template-columns:calc(var(--tipo-dato) * 1.75) minmax(0,1fr);gap:var(--esp-rejilla);
  align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--line)}
.fm-t-fases li:last-child{border-bottom:0}
.fm-t-fases b{font-size:var(--tipo-cuerpo);font-weight:600}
.fm-t-fases p{margin-top:.25rem;font-size:var(--tipo-descripcion);color:var(--texto-3);line-height:1.5}
.fm-t-fase-n{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);letter-spacing:.01em;line-height:.85;color:var(--yellow)}
.fm-t-fase-n svg{width:var(--tipo-dato);height:auto}
.fm-t-fase-meta{align-items:center!important}
.fm-t-fase-meta b{color:var(--yellow)}

.fm-cal-pie{margin-top:1rem;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.fm-sem-l{list-style:none}
.fm-sem-l li{display:flex;gap:1.1rem;padding:.62rem 0;border-bottom:1px solid var(--line);font-size:var(--tipo-descripcion);color:var(--texto-3)}
.fm-sem-l li:last-child{border-bottom:none}
.fm-sem-w{flex:none;width:5.2rem;font-weight:600;font-size:var(--tipo-leyenda);letter-spacing:.08em;color:var(--yellow);padding-top:.1rem}

@media (prefers-reduced-motion: reduce){
  .fm-t-barra,.fm-t-nodo,.fm-t-num,.fm-t-sem{transition:none}
}

/* DE PIE, EN MÓVIL: la línea baja por el carril de la izquierda, las
   barras crecen hacia la derecha con el nivel (`--largo`) y la ficha se
   abre debajo del tramo elegido. */
@media (max-width:640px){
  .fm-t-ruta{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .fm-t-tri-h{order:0;padding:var(--esp-rejilla) 0 calc(var(--esp-rejilla) / 2) var(--carril)}
  .fm-t-tri:first-child .fm-t-tri-h{padding-top:0}
  .fm-t-tri-h span{display:inline}
  .fm-t-meses{display:none}
  .fm-t-tramos{flex-direction:column;align-items:stretch;height:auto}
  .fm-t-tramo{flex:none;height:auto;padding-left:var(--carril)}
  .fm-t-barra{flex-direction:row;align-items:center;width:var(--largo,100%);height:auto;
    min-height:calc(var(--esp-rejilla) * 2.75);padding:calc(var(--esp-rejilla) / 2) calc(var(--esp-rejilla) * .75)}
  .fm-t-tramo[data-n="copa"] .fm-t-barra{min-height:calc(var(--esp-rejilla) * 4)}
  .fm-t-tramo[data-n="pausa"] .fm-t-barra{min-height:calc(var(--esp-rejilla) * 2)}
  .fm-t-cab{flex-direction:row;align-items:center;gap:calc(var(--esp-rejilla) / 2)}
  .fm-t-cuando{display:block}
  .fm-t-tramo[data-n] .fm-t-txt{display:flex}
  .fm-t-tramo[data-n="pausa"] .fm-t-cuando{display:none}
  .fm-t-pips{margin-left:auto}
  .fm-t-nodo{left:calc(var(--carril) / 2);bottom:auto;top:50%;translate:-50% -50%}
  .fm-t-hoy{translate:-50% -50%}
  .fm-t-ficha{margin:calc(var(--esp-rejilla) / 2) 0 calc(var(--esp-rejilla) / 2) var(--carril)}
  .fm-t-ficha-in{grid-template-columns:minmax(0,1fr);gap:var(--esp-rejilla);padding:var(--esp-rejilla)}
  .fm-sem-l li{gap:.8rem}
  .fm-sem-w{width:4.2rem}
}

/* ---------- MÓVIL ---------- */
@media (max-width:900px){
  .pf-niveles{grid-template-columns:minmax(0,1fr)}
  .pf-n-slot{min-height:0}
  .fm-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-cifras > div:nth-child(3){border-left:0}
  .fm-cifras > div:nth-child(n+3){border-top:1px solid var(--line)}
  .fm-lista{grid-template-columns:minmax(0,1fr)}
  .fm-pasos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .fm-escalones{min-height:11rem}
  .fm-escalon{height:calc(3.6rem + var(--i,0) * 2.6rem);padding:.7rem .7rem 0}
}
.fm-error-hueco:has(> [hidden]){display:none}