/* Fuente Archivo alojada en el propio sitio (SIL OFL 1.1), sin depender de Google Fonts */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/archivo-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/archivo-latin-900-normal.woff2') format('woff2')}

*{box-sizing:border-box}
html,body{margin:0}
/* Concepto: una única infografía 16:9 (1920×1080) escalada a la pantalla.
   Banda superior con el título, tres columnas (estudio · resultados · clínica)
   y banda inferior con la referencia. Los bloques aparecen en su sitio. Tema único. */
:root{
  --stage:#0A1B28;
  --navy:#0F2A3D;
  --ground:#F3F6F5;
  --card:#FFFFFF;
  --ink:#0F2A3D;
  --ink-2:#2B3F50;
  --muted:#44596B;
  --accent:#C2410C;
  --accent-soft:#FDEEE6;
  --accent-ink:#9A3412;
  --low:#3D6A99;
  --ctrl:#5F6B77;
  --ctrl-bar:#7A8794;
  --mist:#E2EAEF;
  --fem:#2E6F6B;
  --mas:#B7D3D0;
  --font:'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--stage);color:var(--ink);font-family:var(--font);overflow:hidden;
  padding-left:max(0px, env(safe-area-inset-left, 0px));padding-right:max(0px, env(safe-area-inset-right, 0px))}

#stage{position:fixed;left:0;right:0;top:0;bottom:0;overflow:hidden;cursor:pointer}
#poster{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--ground);
  display:grid;grid-template-rows:auto 1fr auto;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}

/* ---------- Revelado ---------- */
.step{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.step.on{opacity:1;transform:none}
.it{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease), transform .6s var(--ease);transition-delay:calc(var(--i,0) * 140ms + 250ms)}
.step.on .it{opacity:1;transform:none}
.bar{transform:scaleX(0);transition:transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.bar.r{transform-origin:left center}
.bar.l{transform-origin:right center}
.step.on .bar{transform:scaleX(1)}
.word{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .55s var(--ease), transform .55s var(--ease);transition-delay:calc(var(--i) * 110ms + 200ms)}
.step.on .word{opacity:1;transform:none}

/* ---------- Cabecera ---------- */
.band{background:var(--navy);color:#FFFFFF;padding:30px 64px 28px;display:flex;flex-direction:column;gap:10px}
.band .l{display:flex;flex-direction:column;gap:16px}
.tags{display:flex;gap:12px}
.tag{font-size:17px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.tag.a{background:var(--accent);color:#FFFFFF}
.tag.b{border:2px solid #5E7C93;color:#D5E1EA;padding:5px 14px;font-weight:600}
h1{margin:0;font-size:66px;line-height:1;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.sub{margin:0;font-size:24px;line-height:1.35;color:#C9D7E2;font-weight:500}

/* ---------- Cuerpo ---------- */
.body{display:grid;grid-template-columns:600px 1fr 540px;gap:32px;padding:28px 64px 26px;min-height:0}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
.label{margin:0;font-size:17px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.blk{display:flex;flex-direction:column;gap:11px}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stat{background:var(--card);border-radius:18px;padding:16px 20px;display:flex;align-items:baseline;gap:12px}
.stat b{font-size:44px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:17px;font-weight:500;color:var(--muted);line-height:1.25}

.grid3s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid3s .stat{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 16px}
.grid3s .stat b{font-size:38px}
.grid3s .stat span{font-size:15px}
.pax{background:var(--card);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.pax .h{font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sex{display:flex;height:44px;border-radius:9px;overflow:hidden}
.sex div{display:flex;align-items:center;padding:0 14px;font-size:19px;font-weight:800;color:#FFFFFF;white-space:nowrap}
.sex .f{background:var(--fem)}
.sex .m{background:var(--mas);color:var(--ink);justify-content:flex-end}
.pax ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-size:15px;line-height:1.3;color:var(--ink-2)}
.pax .ex{margin:0;font-size:13.5px;line-height:1.3;color:var(--muted)}
.crit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cv{background:var(--mist);border-radius:12px;padding:14px 14px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.cv b{white-space:nowrap;font-size:29px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.cv span{font-size:15px;line-height:1.25;color:var(--muted);font-weight:500}
.proto3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pt{background:var(--card);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pt b{font-size:20px;font-weight:900;line-height:1.1}
.pt b.num{font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.pt span{font-size:14px;line-height:1.3;color:var(--muted);font-weight:500}
.groups3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gc{background:var(--card);border-radius:18px;padding:20px 18px 22px;border-top:10px solid var(--c);display:flex;flex-direction:column;gap:10px}
.gh{display:flex;align-items:center;justify-content:space-between}
.gn{font-size:20px;font-weight:800;color:var(--c);font-variant-numeric:tabular-nums}
.gname{font-size:30px;font-weight:900;line-height:1.05;min-height:63px}
.gk{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.meter{display:flex;gap:4px}
.meter i{flex:1;height:20px;border-radius:5px}
.gbig{font-size:26px;font-weight:900;line-height:20px;height:20px;color:var(--ctrl)}
.gv{font-size:16px;font-weight:700;line-height:1.25;color:var(--ink-2)}
.meter i{transform:scaleY(.15);opacity:.25;transform-origin:bottom;transition:transform .35s var(--ease), opacity .35s var(--ease);transition-delay:calc(var(--i,0) * 140ms + 700ms + var(--k) * 160ms)}
.step.on .meter i{transform:none;opacity:1}
.sex{clip-path:inset(0 50% 0 50%);transition:clip-path 1.3s var(--ease) .9s}
.step.on .sex{clip-path:inset(0 0 0 0)}
.cv b{display:inline-block;transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1), opacity .4s;transition-delay:calc(var(--i,0) * 140ms + .7s + var(--c2,0) * 150ms)}
.step.on .cv b{transform:none;opacity:1}
.fill{flex:1;min-height:0}
.fill .pax{flex:1;justify-content:space-evenly}
.fill .crit{flex:1;max-height:150px}
.fill .chart{flex:1;justify-content:space-between}
.pt{justify-content:center}
.fig{flex:none;overflow:visible}
.fig g,.fig line{transform-box:view-box}
.fig .lean{transform-origin:32px 36px}
.fig .thigh{transform-origin:32px 36px}
.fig .shin{transform-origin:32px 48px}
.fig .uarm{transform-origin:32px 21px}
.fig .farm{transform-origin:32px 30px;transform:rotate(-80deg)}
.fig.fast .lean{transform:rotate(14deg)}
.fig.fast .bob{animation:bob .25s ease-in-out infinite alternate}
.fig.fast .thigh.a{animation:thighF .5s linear infinite}
.fig.fast .thigh.b{animation:thighF .5s linear infinite -.25s}
.fig.fast .shin.a{animation:shinF .5s linear infinite}
.fig.fast .shin.b{animation:shinF .5s linear infinite -.25s}
.fig.fast .uarm.a{animation:armF .5s linear infinite -.25s}
.fig.fast .uarm.b{animation:armF .5s linear infinite}
.fig.fast .speed line{animation:speed .5s linear infinite;opacity:.55}
.fig.fast .speed line:nth-child(2){animation-delay:-.17s}
.fig.fast .speed line:nth-child(3){animation-delay:-.33s}
.fig.slow .lean{transform:rotate(4deg)}
.fig.slow .bob{animation:bobS .6s ease-in-out infinite alternate}
.fig.slow .thigh.a{animation:thighS 1.2s ease-in-out infinite}
.fig.slow .thigh.b{animation:thighS 1.2s ease-in-out infinite -.6s}
.fig.slow .shin.a{animation:shinS 1.2s ease-in-out infinite}
.fig.slow .shin.b{animation:shinS 1.2s ease-in-out infinite -.6s}
.fig.slow .uarm.a{animation:armS 1.2s ease-in-out infinite -.6s}
.fig.slow .uarm.b{animation:armS 1.2s ease-in-out infinite}
.fig.sit .breathe{animation:breathe 3s ease-in-out infinite}
.fig.sit .nod{transform-origin:23px 17px;animation:nod 4s ease-in-out infinite}
.fig.sit .tap{transform-origin:40px 38px;animation:tap .9s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes bobS{from{transform:translateY(0)}to{transform:translateY(-1px)}}
@keyframes thighF{0%{transform:rotate(-42deg)}50%{transform:rotate(42deg)}100%{transform:rotate(-42deg)}}
@keyframes shinF{0%{transform:rotate(18deg)}25%{transform:rotate(12deg)}50%{transform:rotate(95deg)}75%{transform:rotate(55deg)}100%{transform:rotate(18deg)}}
@keyframes armF{0%{transform:rotate(-50deg)}50%{transform:rotate(50deg)}100%{transform:rotate(-50deg)}}
@keyframes thighS{0%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}100%{transform:rotate(-20deg)}}
@keyframes shinS{0%{transform:rotate(8deg)}50%{transform:rotate(45deg)}75%{transform:rotate(25deg)}100%{transform:rotate(8deg)}}
@keyframes armS{0%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}100%{transform:rotate(-24deg)}}
@keyframes speed{0%{transform:translateX(8px);opacity:0}30%{opacity:.6}100%{transform:translateX(-8px);opacity:0}}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes nod{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-8deg)}90%{transform:rotate(4deg)}}
@keyframes tap{from{transform:rotate(0)}to{transform:rotate(-12deg)}}
@media (prefers-reduced-motion: reduce){.fig *{animation:none !important}}
.pti{display:flex;align-items:flex-end;gap:12px}
.coachfig{overflow:visible}
.coachfig .mega{transform-box:view-box;transform-origin:29px 33px;animation:mega 2.6s ease-in-out infinite}
.coachfig .waves path{opacity:0;transform-box:view-box;transform-origin:44px 15px;animation:wave 2.6s ease-out infinite}
.coachfig .waves .w2{animation-name:wave2}
.coachfig .waves .w3{animation-name:wave3}
@keyframes mega{0%{transform:rotate(42deg)}14%{transform:rotate(0)}62%{transform:rotate(0)}76%{transform:rotate(42deg)}100%{transform:rotate(42deg)}}
@keyframes wave{0%,16%{opacity:0;transform:translateX(-3px)}22%{opacity:1;transform:none}32%{opacity:.25}40%{opacity:1}50%{opacity:.25}58%{opacity:1}64%,100%{opacity:0}}
@keyframes wave2{0%,19%{opacity:0;transform:translateX(-3px)}25%{opacity:1;transform:none}35%{opacity:.25}43%{opacity:1}53%{opacity:.25}60%{opacity:1}65%,100%{opacity:0}}
@keyframes wave3{0%,22%{opacity:0;transform:translateX(-3px)}28%{opacity:1;transform:none}38%{opacity:.25}46%{opacity:1}56%{opacity:.25}61%{opacity:.9}66%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.coachfig *{animation:none !important}.coachfig .waves path{opacity:1}}
.track{position:relative;flex:1;min-height:60px;overflow:hidden;margin:4px -6px 0}
.ground{position:absolute;left:0;right:0;bottom:6px;height:2px;background:rgba(255,255,255,.35);border-radius:1px}
.mover{position:absolute;left:0;bottom:7px;will-change:transform}
.mover svg{display:block;overflow:visible}
.mover .tired{display:none}
.mover.rest .trun{display:none}
.mover.rest .tired{display:block}
.tired .heave{transform-box:view-box;transform-origin:30px 38px;animation:heave .55s ease-in-out infinite alternate}
.tired .neck{transform-box:view-box;transform-origin:42px 24px;animation:neck 1.1s ease-in-out infinite alternate}
.tired .sweat path{animation:drop 1.2s ease-in infinite}
.tired .sweat .d2{animation-delay:-.6s}
@keyframes heave{from{transform:rotate(0)}to{transform:rotate(5deg)}}
@keyframes neck{from{transform:rotate(0)}to{transform:rotate(10deg)}}
@keyframes drop{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(4px,14px);opacity:0}}
@media (prefers-reduced-motion: reduce){.tired *{animation:none !important}}
.limg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.limg div{display:flex;flex-direction:column;gap:2px}
.limg b{white-space:nowrap;font-size:24px;font-weight:900;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.limg span{font-size:14px;line-height:1.25;color:var(--ink-2)}
.proto svg{flex:none}
.proto{display:flex;align-items:center;gap:14px;background:var(--mist);border-radius:16px;padding:10px 18px}
.proto p{margin:0;font-size:18px;line-height:1.35;font-weight:500}
.group{background:var(--card);border-radius:16px;padding:8px 18px;display:grid;grid-template-columns:44px 1fr auto;column-gap:14px;align-items:center;border-left:8px solid var(--c)}
.group .name{font-size:22px;font-weight:900;line-height:1.1}
.group .d{grid-column:2 / 4;font-size:16px;line-height:1.3;color:var(--ink-2)}
.group .n{font-size:18px;font-weight:700;color:var(--c);font-variant-numeric:tabular-nums}

.chart{background:var(--card);border-radius:22px;padding:22px 30px 20px;display:flex;flex-direction:column;gap:14px}
.chart .t{margin:0;font-size:22px;font-weight:700}
.row{display:grid;grid-template-columns:85px 178px minmax(0,1fr);align-items:center}
.row .lab{font-size:20px;font-weight:700}
.neg{height:48px;border-right:3px solid var(--ink);display:flex;justify-content:flex-end;align-items:center;gap:12px}
.zero{height:48px;border-right:3px solid var(--ink)}
.pos{display:flex;align-items:center;gap:12px}
.val{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.note{margin:0;font-size:16px;color:var(--muted)}

.cmp{border-radius:18px;padding:14px 22px;display:flex;flex-direction:column;gap:4px}
.cmp b{font-size:42px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.05}
.cmp span{font-size:18px;line-height:1.35}
.cmp.hi{background:var(--accent-soft);color:#4A2412}
.cmp.hi b{color:var(--accent-ink)}
.cmp.lo{background:#E9EEF2;color:var(--ink-2)}
.cmp strong{font-weight:800}

.mini{background:var(--card);border-radius:18px;padding:14px 20px;display:flex;flex-direction:column;gap:6px}
.mini .h{font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vs{display:flex;align-items:baseline;gap:12px}
.vs b{font-size:32px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.vs i{font-style:normal;font-size:17px;font-weight:700;color:var(--ctrl-bar)}
.mini p{margin:0;font-size:16px;line-height:1.35;color:var(--ink-2)}

.clin{background:var(--accent);color:#FFFFFF;border-radius:22px;padding:18px 24px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.clin .h{font-size:16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FFE7DA}
.clin .big{margin:0;font-size:28px;line-height:1.15;font-weight:900;text-wrap:balance}
.clin .lim{margin:auto 0 0;font-size:17px;line-height:1.35;color:#FFF1EA}

/* ---------- Pie ---------- */
footer.foot{background:var(--navy);color:#D5E1EA;padding:16px 64px;display:flex;align-items:center;gap:32px}
footer .who{margin:0;font-size:20px;font-weight:700;color:#FFFFFF;white-space:nowrap}
footer .ref{margin:0;font-size:16px;line-height:1.35;flex:1;min-width:0}
footer a{font-size:19px;font-weight:700;color:#FFB38A;white-space:nowrap}
footer a:hover,footer a:focus-visible{color:#FFFFFF}
footer .links{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
footer a.pdf{font-size:16px;font-weight:700;color:#FFFFFF;display:inline-flex;align-items:center;gap:6px}
footer a.pdf::before{content:"\2193";color:#FFB38A}
footer a.pdf:hover,footer a.pdf:focus-visible{color:#FFB38A}

/* ---------- Controles ---------- */
#fs{position:fixed;top:calc(14px + env(safe-area-inset-top, 0px));right:calc(14px + env(safe-area-inset-right, 0px));z-index:20;
  width:46px;height:46px;border-radius:12px;border:1.5px solid rgba(255,255,255,.28);background:rgba(7,20,30,.72);color:#E6EEF4;
  display:grid;place-items:center;cursor:pointer;transition:opacity .4s, background .2s}
#fs:hover{background:#13293A}
#fs:focus-visible{outline:3px solid #FFB38A;outline-offset:2px}
#fs .on-exit{display:none}
.is-fs #fs .on-enter{display:none}
.is-fs #fs .on-exit{display:block}
.idle #fs{opacity:0;pointer-events:none}
.idle #stage{cursor:none}
@media (prefers-reduced-motion: reduce){ .step,.it,.bar,.word,.dot,.meter i,.sex,.cv b{transition:none !important} }