/* tripode.css — la sección del MODO TRÍPODE de /app/ (01/10/2026).

   En fichero aparte, como el JavaScript: la página no lleva nada en
   línea que haya que vigilar, y esto no se descarga si no se usa.

   LA ESCENA. Una figura de palos que hace ocho sentadillas delante del
   móvil, el contador que sube, la velocidad de cada repetición en barras
   y, al acabar, lo que diría la app: «Te frenas un 18 %», apuntada,
   descanso y el peso de la siguiente. Todo CSS sobre un SVG, sin vídeo,
   sin fotos y sin JavaScript.
     · La figura son tres grupos anidados que giran sobre su articulación
       (tobillo, rodilla, cadera): la tibia lleva el muslo y el muslo el
       tronco, así que cada uno gira sobre el sitio donde lo deja el
       anterior. transform-box: view-box con origen 0 0 es girar sobre el
       origen local de cada grupo, que es la articulación.
     · Las repeticiones no duran lo mismo: la última sube un 18 % más
       despacio que la más rápida, que es lo que mide la app (se compara
       con la más rápida, no con la primera: utils/perdidaVelocidad).
     · Una vuelta dura 16 s y todo va en la misma vuelta, así que nada
       se desacompasa. Los fotogramas de abajo los genera un script (no
       se escriben a mano): si cambia el ritmo, se regeneran juntos.
     · Sin movimiento (prefers-reduced-motion) o sin JavaScript (la
       sección no recibe .en-vista), se ve quieta en el último fotograma:
       la serie hecha, las ocho barras y lo que dice la app.
   El visor es «de cámara» en los dos temas: el azul noche de la marca,
   que no cambia con el tema (--noche), con las articulaciones en oro. */

.tripode .tri-sub{font-size:var(--f-7); color:var(--txt2); line-height:1.55; max-width:56ch}

/* ── LA ESCENA: el visor y los datos, lado a lado; en móvil, uno encima del otro ── */
.tri-escena{margin:var(--e-7) 0 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
  border:1px solid var(--linea); border-radius:var(--r-1); overflow:hidden; background:var(--sup)}
.tri-visor{position:relative; background:var(--noche); color:var(--sobre-noche); aspect-ratio:4/3; width:100%; min-height:0; align-self:start}
.tri-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.tri-suelo{stroke:var(--noche-linea); stroke-width:2}
.tri-hueso{stroke:var(--sobre-noche); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; fill:none}
.tri-brazo{stroke-width:4}
.tri-cabeza{fill:var(--sobre-noche)}
.tri-disco{fill:var(--noche-2); stroke:var(--sobre-noche-2); stroke-width:3}
.tri-buje{fill:var(--sobre-noche-2)}
/* Los puntos que sigue la cámara: el oro de lo que la app mira. */
.tri-art{fill:var(--oro); stroke:var(--noche); stroke-width:1.5}
.tri-tibia,.tri-muslo,.tri-tronco{transform-box:view-box; transform-origin:0 0}

/* Lo que pinta la app encima de la cámara. */
.tri-rec{position:absolute; left:var(--e-3); top:var(--e-3); display:inline-flex; align-items:center; gap:var(--e-2);
  font-size:var(--f-2); font-weight:600; letter-spacing:.04em; color:var(--sobre-noche-2)}
.tri-rec i{width:8px; height:8px; border-radius:var(--r-full); background:#E5484D}
.tri-cuenta{position:absolute; right:var(--e-3); top:var(--e-3); display:grid; justify-items:end; gap:2px; text-align:right}
.tri-cuenta-rot{font-size:var(--f-2); color:var(--sobre-noche-2)}
.tri-num{display:block; height:1em; overflow:hidden; font-size:clamp(40px,7vw,64px); line-height:1; font-weight:600; color:#fff}
.tri-rueda{display:block; transform:translateY(-8em)}
.tri-rueda i{display:block; height:1em; font-style:normal}
.tri-dist{position:absolute; left:var(--e-3); right:var(--e-3); bottom:var(--e-2); display:flex; align-items:center; gap:var(--e-2);
  font-size:var(--f-2); color:var(--sobre-noche-2)}
.tri-dist::before,.tri-dist::after{content:""; flex:1; border-top:1px dashed var(--noche-linea)}

/* ── LOS DATOS: la velocidad de cada repetición y lo que decide ── */
.tri-datos{padding:var(--e-6); display:flex; flex-direction:column; justify-content:center; gap:var(--e-4); min-width:0}
.tri-rot{margin:0; font-size:var(--f-3); color:var(--txt3)}
.tri-barras{position:relative; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:var(--e-2); align-items:end;
  height:150px; padding-bottom:var(--e-1); border-bottom:1px solid var(--linea)}
/* La raya de la más rápida: contra ella se mide cuánto se frena. */
.tri-barras::before{content:""; position:absolute; left:0; right:0; top:0; height:0;
  border-top:1px dashed var(--borde-btn); opacity:.6; pointer-events:none}
.tri-barras i{display:block; border-radius:2px 2px 0 0; background:var(--atleta); transform-origin:bottom}
/* Las alturas son la velocidad de cada una contra la más rápida (1 / su duración). */
.tri-barras i:nth-child(1){height:96%} .tri-barras i:nth-child(2){height:100%} .tri-barras i:nth-child(3){height:99%}
.tri-barras i:nth-child(4){height:97%} .tri-barras i:nth-child(5){height:94%} .tri-barras i:nth-child(6){height:92%}
.tri-barras i:nth-child(7){height:88%} .tri-barras i:nth-child(8){height:85%; background:var(--pro)}
.tri-frena{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e-1) var(--e-3)}
.tri-frena b{font-size:var(--f-9); font-weight:600; color:var(--pro); letter-spacing:-.01em}
.tri-frena span{font-size:var(--f-5); color:var(--txt2)}
.tri-pasos{list-style:none; margin:0; padding:0; display:grid; gap:var(--e-2)}
.tri-pasos li{display:flex; align-items:center; gap:var(--e-3); padding:var(--e-2) var(--e-3); border-left:2px solid var(--pro);
  background:var(--pro-suave); font-size:var(--f-5); color:var(--txt); font-variant-numeric:tabular-nums}
.tri-pasos li > span{flex:1; min-width:0}
.tri-pasos b{color:var(--pro); font-weight:700}
.tri-reloj{flex:none; width:56px; height:4px; border-radius:var(--r-full); background:var(--pro); transform-origin:left; transform:scaleX(.6)}

/* ── DEBAJO: las tres cosas que hace, la voz y el resto de lo nuevo ── */
.tri-tres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-6); margin-top:var(--e-7)}
.tri-tres > div{border-top:1px solid var(--linea); padding-top:var(--e-4)}
.tri-tres h3{font-size:var(--f-7); font-weight:600; margin:0}
.tri-tres p{margin:var(--e-2) 0 0; color:var(--txt2); font-size:var(--f-5); line-height:1.6}
.tri-voz{margin-top:var(--e-7)}
.tri-voz-tit{margin:0 0 var(--e-3); font-size:var(--f-6); font-weight:600}
.tri-frases{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--e-3)}
.tri-frases li{display:grid; gap:2px; padding:var(--e-3) var(--e-4); border:1px solid var(--linea); border-radius:var(--r-1); background:var(--sup); min-width:0}
.tri-frases b{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:var(--f-6); color:var(--txt)}
.tri-frases span{font-size:var(--f-3); color:var(--txt3)}
.tri-mas{margin-top:var(--e-8); padding-top:var(--e-5); border-top:1px solid var(--linea)}
.tri-mas .voz{display:block; margin:0 0 var(--e-3)}
.tri-mas ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-4) var(--e-7)}
.tri-mas li{display:grid; gap:2px; font-size:var(--f-4); line-height:1.55; color:var(--txt2)}
.tri-mas li b{font-size:var(--f-5); font-weight:600; color:var(--txt)}
.tri-mas a{color:var(--acc); text-underline-offset:3px}

@media (max-width:760px){
  .tri-escena{grid-template-columns:1fr}
  .tri-visor{aspect-ratio:1/1}
  .tri-datos{padding:var(--e-5)}
  .tri-tres{grid-template-columns:1fr; gap:var(--e-4)}
  .tri-mas ul{grid-template-columns:1fr}
}
@media (max-width:420px){ .tri-barras{height:96px; gap:var(--e-1)} }

/* ── EL MOVIMIENTO: solo a la vista y con movimiento permitido. Una
   vuelta de 16 s para todo, que arranca a la vez al entrar la sección. ── */
@media (prefers-reduced-motion: no-preference){
  .tripode.en-vista .tri-tibia{animation:tri-tibia 16s ease-in-out infinite}
  .tripode.en-vista .tri-muslo{animation:tri-muslo 16s ease-in-out infinite}
  .tripode.en-vista .tri-tronco{animation:tri-tronco 16s ease-in-out infinite}
  .tripode.en-vista .tri-rueda{animation:tri-cuenta 16s ease-out infinite}
  .tripode.en-vista .tri-rec i{animation:tri-rec 16s linear infinite}
  .tripode.en-vista .tri-barras i:nth-child(1){animation:tri-barra-1 16s ease-out infinite}
  .tripode.en-vista .tri-barras i:nth-child(2){animation:tri-barra-2 16s ease-out infinite}
  .tripode.en-vista .tri-barras i:nth-child(3){animation:tri-barra-3 16s ease-out infinite}
  .tripode.en-vista .tri-barras i:nth-child(4){animation:tri-barra-4 16s ease-out infinite}
  .tripode.en-vista .tri-barras i:nth-child(5){animation:tri-barra-5 16s ease-out infinite}
  .tripode.en-vista .tri-barras i:nth-child(6){animation:tri-barra-6 16s ease-out infinite}
  .tripode.en-vista .tri-barras i:nth-child(7){animation:tri-barra-7 16s ease-out infinite}
  .tripode.en-vista .tri-barras i:nth-child(8){animation:tri-barra-8 16s ease-out infinite}
  .tripode.en-vista .tri-frena{animation:tri-frena 16s ease-out infinite}
  .tripode.en-vista .tri-p1{animation:tri-paso-1 16s ease-out infinite}
  .tripode.en-vista .tri-p2{animation:tri-paso-2 16s ease-out infinite}
  .tripode.en-vista .tri-p3{animation:tri-paso-3 16s ease-out infinite}
  .tripode.en-vista .tri-reloj{animation:tri-reloj 16s linear infinite}
}

/* GENERADO (no a mano): una vuelta de 16 s. Ocho repeticiones, bajada de 0.75 s y subida de 0.62 s por 1.04, 1, 1.01, 1.03, 1.06, 1.09, 1.13, 1.18: la última sube un 18 % más despacio que la más rápida (la 2.ª), que es lo que mide la app (utils/perdidaVelocidad). La serie acaba a los 11.99 s. */
@keyframes tri-tibia{0%{transform:rotate(0deg)} 4.38%{transform:rotate(0deg)} 9.06%{transform:rotate(35deg)} 13.09%{transform:rotate(0deg)} 17.78%{transform:rotate(35deg)} 21.66%{transform:rotate(0deg)} 26.34%{transform:rotate(35deg)} 30.26%{transform:rotate(0deg)} 34.94%{transform:rotate(35deg)} 38.94%{transform:rotate(0deg)} 43.62%{transform:rotate(35deg)} 47.73%{transform:rotate(0deg)} 52.42%{transform:rotate(35deg)} 56.64%{transform:rotate(0deg)} 61.33%{transform:rotate(35deg)} 65.71%{transform:rotate(0deg)} 70.4%{transform:rotate(35deg)} 74.97%{transform:rotate(0deg)} 100%{transform:rotate(0deg)}}
@keyframes tri-muslo{0%{transform:rotate(0deg)} 4.38%{transform:rotate(0deg)} 9.06%{transform:rotate(-115deg)} 13.09%{transform:rotate(0deg)} 17.78%{transform:rotate(-115deg)} 21.66%{transform:rotate(0deg)} 26.34%{transform:rotate(-115deg)} 30.26%{transform:rotate(0deg)} 34.94%{transform:rotate(-115deg)} 38.94%{transform:rotate(0deg)} 43.62%{transform:rotate(-115deg)} 47.73%{transform:rotate(0deg)} 52.42%{transform:rotate(-115deg)} 56.64%{transform:rotate(0deg)} 61.33%{transform:rotate(-115deg)} 65.71%{transform:rotate(0deg)} 70.4%{transform:rotate(-115deg)} 74.97%{transform:rotate(0deg)} 100%{transform:rotate(0deg)}}
@keyframes tri-tronco{0%{transform:rotate(0deg)} 4.38%{transform:rotate(0deg)} 9.06%{transform:rotate(120deg)} 13.09%{transform:rotate(0deg)} 17.78%{transform:rotate(120deg)} 21.66%{transform:rotate(0deg)} 26.34%{transform:rotate(120deg)} 30.26%{transform:rotate(0deg)} 34.94%{transform:rotate(120deg)} 38.94%{transform:rotate(0deg)} 43.62%{transform:rotate(120deg)} 47.73%{transform:rotate(0deg)} 52.42%{transform:rotate(120deg)} 56.64%{transform:rotate(0deg)} 61.33%{transform:rotate(120deg)} 65.71%{transform:rotate(0deg)} 70.4%{transform:rotate(120deg)} 74.97%{transform:rotate(0deg)} 100%{transform:rotate(0deg)}}
@keyframes tri-cuenta{0%{transform:translateY(0)} 12.34%{transform:translateY(-0em)} 13.09%{transform:translateY(-1em)} 20.91%{transform:translateY(-1em)} 21.66%{transform:translateY(-2em)} 29.51%{transform:translateY(-2em)} 30.26%{transform:translateY(-3em)} 38.19%{transform:translateY(-3em)} 38.94%{transform:translateY(-4em)} 46.98%{transform:translateY(-4em)} 47.73%{transform:translateY(-5em)} 55.89%{transform:translateY(-5em)} 56.64%{transform:translateY(-6em)} 64.96%{transform:translateY(-6em)} 65.71%{transform:translateY(-7em)} 74.22%{transform:translateY(-7em)} 74.97%{transform:translateY(-8em)} 97.5%{transform:translateY(-8em)} 98%{transform:translateY(0)} 100%{transform:translateY(0)}}
@keyframes tri-barra-1{0%,13.09%{transform:scaleY(0)} 14.66%,96%{transform:scaleY(1)} 99%,100%{transform:scaleY(0)}}
@keyframes tri-barra-2{0%,21.66%{transform:scaleY(0)} 23.22%,96%{transform:scaleY(1)} 99%,100%{transform:scaleY(0)}}
@keyframes tri-barra-3{0%,30.26%{transform:scaleY(0)} 31.82%,96%{transform:scaleY(1)} 99%,100%{transform:scaleY(0)}}
@keyframes tri-barra-4{0%,38.94%{transform:scaleY(0)} 40.5%,96%{transform:scaleY(1)} 99%,100%{transform:scaleY(0)}}
@keyframes tri-barra-5{0%,47.73%{transform:scaleY(0)} 49.29%,96%{transform:scaleY(1)} 99%,100%{transform:scaleY(0)}}
@keyframes tri-barra-6{0%,56.64%{transform:scaleY(0)} 58.2%,96%{transform:scaleY(1)} 99%,100%{transform:scaleY(0)}}
@keyframes tri-barra-7{0%,65.71%{transform:scaleY(0)} 67.27%,96%{transform:scaleY(1)} 99%,100%{transform:scaleY(0)}}
@keyframes tri-barra-8{0%,74.97%{transform:scaleY(0)} 76.53%,96%{transform:scaleY(1)} 99%,100%{transform:scaleY(0)}}
@keyframes tri-frena{0%,76.84%{opacity:0; transform:translateY(6px)} 79.03%,96%{opacity:1; transform:none} 99%,100%{opacity:0; transform:none}}
@keyframes tri-paso-1{0%,81.22%{opacity:0; transform:translateY(6px)} 83.41%,96%{opacity:1; transform:none} 99%,100%{opacity:0; transform:none}}
@keyframes tri-paso-2{0%,84.97%{opacity:0; transform:translateY(6px)} 87.16%,96%{opacity:1; transform:none} 99%,100%{opacity:0; transform:none}}
@keyframes tri-paso-3{0%,89.34%{opacity:0; transform:translateY(6px)} 91.53%,96%{opacity:1; transform:none} 99%,100%{opacity:0; transform:none}}
@keyframes tri-reloj{0%,86.84%{transform:scaleX(1)} 98%,100%{transform:scaleX(.6)}}
@keyframes tri-rec{0%,4.38%{opacity:.3} 5.62%,74.97%{opacity:1} 76.84%,100%{opacity:.3}}