:host{all:initial;display:block}
.capa-corpo{
  --bg:#F2F5F8; --panel:#FFFFFF; --line:#DCE3EA; --track:#E4EAF0;
  --ink:#101A2B; --mute:#5A6675; --grid:#C8D2DC; --spoke:#D7DFE7;
  --ins:#D9480F; --emo:#2563EB; --men:#0D9488;
  --ins-soft:#EBAB8C; --emo-soft:#A8C0F0; --men-soft:#99CFC9;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* tema claro em qualquer configuração do visualizador */
@media (prefers-color-scheme: dark){ .capa-corpo:not([data-theme="light"]){ --bg:#F2F5F8; --panel:#FFFFFF; --ink:#101A2B; } }
.capa-corpo[data-theme="dark"]{ --bg:#F2F5F8; --panel:#FFFFFF; --ink:#101A2B; }
.capa-corpo{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
.capa-corpo{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}

.viewport{width:100%;overflow:hidden;margin:0 auto}
.stage{width:1440px;height:1430px;transform-origin:top left;box-sizing:border-box;padding:24px 56px 56px}
.page{width:100%;height:100%}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:14px}
.logo{font-size:22px;font-weight:700;letter-spacing:-.01em}
.logo b{color:var(--emo);font-weight:700}
.meta{font-size:14px;color:var(--mute)}
.replay{margin-left:14px;background:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--mute);cursor:pointer}
.replay:hover{color:var(--ink);border-color:var(--mute)}
.replay{display:none}

.grid{display:grid;grid-template-columns:360px 640px 264px;grid-template-rows:540px;grid-template-areas:"who map side";gap:32px;align-items:stretch}
.row2,.row3{display:flex;gap:32px;margin-top:32px;align-items:stretch}
.who{grid-area:who;display:flex;flex-direction:column;gap:24px}
.map{grid-area:map;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.side{grid-area:side;display:flex;flex-direction:column;gap:32px}
.rank{width:640px}
.regua{width:320px}
.vuln{width:304px}
.vuln{transition-delay:1.7s}

h1{margin:0;font-size:64px;line-height:1;font-weight:600;letter-spacing:-.03em}
.sub{margin:10px 0 0;font-size:15px;color:var(--mute)}
.lead{margin:0;font-family:var(--serif);font-size:21px;line-height:1.5}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.card.grow{flex-grow:1}
.cap{font-size:14px;color:var(--mute);line-height:1.4}
.cap.row{display:flex;justify-content:space-between;gap:12px}
.cap.cap-centro{font-size:12px;line-height:1.3}

/* co-dominância */
.pair{display:flex;flex-direction:column;gap:8px}
.pair .v{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;text-align:left;cursor:pointer;border-radius:8px}
.pair .v:focus-visible{outline:2px solid var(--emo);outline-offset:4px}
.pip{width:12px;height:12px;border-radius:6px;background:var(--ins);flex-shrink:0}
.pair .name{font-size:17px;font-weight:600;flex-grow:1}
.pair .val{font-size:26px;font-weight:700;letter-spacing:-.02em}

/* ranking */
.rows{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:2px 0;text-align:left;cursor:pointer;border-radius:8px}
.row:focus-visible{outline:2px solid var(--emo);outline-offset:4px}
.row .name{width:176px;font-size:15px;flex-shrink:0}
.row.top .name{font-weight:600}
.row.low .name,.row.low .val{color:var(--mute)}
.track{flex-grow:1;position:relative;height:16px;border-radius:8px;background:var(--track)}
.bar{display:block;height:16px;border-radius:8px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.mark{position:absolute;left:50%;top:-5px;height:26px;border-left:1px dashed rgba(16,26,43,.45)}
.row .val{width:40px;text-align:right;font-size:17px;font-weight:600;flex-shrink:0}
.row.top .val{font-weight:700}

/* régua */
.big{display:flex;align-items:flex-end;gap:10px}
.big .n{font-size:56px;line-height:1;font-weight:700;letter-spacing:-.03em}
.big .t{font-size:18px;font-weight:500;color:var(--mute);padding-bottom:8px}

/* legenda da rosca */
.leg{display:flex;flex-direction:column;gap:10px;font-size:14px}
.leg div{display:flex;align-items:center;gap:8px}
.leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.leg span{color:var(--mute)}
.leg b{font-weight:600}

/* legenda viva do mapa */
.live{min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;color:var(--mute);padding:0 24px;line-height:1.4}
.live strong{color:var(--ink);font-weight:600}
.live q{font-family:var(--serif);font-style:italic;quotes:"“" "”"}

svg text{font-family:var(--sans)}
.hit{cursor:pointer}

/* ---------- entrada orquestrada (uma vez) ---------- */
.sec{opacity:0;transition:opacity .6s ease .1s}
.ring{opacity:0;transition:opacity .5s ease .25s}
.spoke{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s ease .4s}
.poly{transform:scale(.001);transform-origin:330px 330px;transform-box:view-box;transition:transform .95s cubic-bezier(.2,.9,.3,1.12) .85s}
.dot{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .4s cubic-bezier(.2,.9,.3,1.3);transition-delay:calc(.7s + var(--i) * .06s)}
.lbl{opacity:0;transition:opacity .45s ease;transition-delay:calc(1.15s + var(--i) * .05s)}
.halo{opacity:0;transition:opacity .5s ease 1.7s}
.card,.who > *{opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s ease}
.who > *{transition-delay:.15s}
.side .card:nth-child(1){transition-delay:1.35s}
.side .card:nth-child(2){transition-delay:1.5s}
.rank{transition-delay:1.45s}
.regua{transition-delay:1.6s}
.seg{opacity:0;transition:opacity .45s ease}
.seg:nth-of-type(1){transition-delay:1.5s}.seg:nth-of-type(2){transition-delay:1.62s}.seg:nth-of-type(3){transition-delay:1.74s}
.rd{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.2,.9,.3,1.3);transition-delay:calc(1.75s + var(--i) * .05s)}
.gm{transform:translateX(-104px);transition:transform .8s cubic-bezier(.2,.8,.2,1) 1.5s}
.gn{opacity:0;transition:opacity .3s ease 2.1s}
.dbl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease 1.7s}
.dbn{opacity:0;transition:opacity .3s ease 2.15s}

.capa-corpo.on .sec,.capa-corpo.on .ring,.capa-corpo.on .lbl,.capa-corpo.on .halo,.capa-corpo.on .seg,.capa-corpo.on .gn,.capa-corpo.on .dbn{opacity:1}
.capa-corpo.on .spoke,.capa-corpo.on .dbl{stroke-dashoffset:0}
.capa-corpo.on .poly,.capa-corpo.on .dot,.capa-corpo.on .rd,.capa-corpo.on .gm{transform:none}
.capa-corpo.on .card,.capa-corpo.on .who > *{opacity:1;transform:none}
.capa-corpo.on .bar{width:var(--w)}
.capa-corpo.on .sec{opacity:1}
.capa-corpo.instant *{transition-duration:0s !important;transition-delay:0s !important}
.capa-corpo.on .ray{transition:opacity .25s}

/* ---------- terceira linha: decisão, colapso, pressão ---------- */
.row3 .card{transition-delay:1.7s}
.row3 .card:nth-child(2){transition-delay:1.82s}
.row3 .card:nth-child(3){transition-delay:1.94s}
.steps{display:flex;align-items:flex-start;gap:0;margin-top:4px}
.step{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center}
.step .n{width:30px;height:30px;border-radius:15px;background:var(--c,#101A2B);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 0 0 4px #fff}
.step .t{font-size:12.5px;line-height:1.3;color:var(--ink);padding:0 4px}
.step::before{content:"";position:absolute;top:14px;left:50%;right:-50%;height:3px;background:var(--line);transform-origin:left center}
.step:last-child::before{display:none}
.steps.run .step .n{animation:stepIn .5s cubic-bezier(.2,.9,.3,1.35) both;animation-delay:calc(var(--k) * .24s)}
.steps.run .step::before{animation:lineIn .3s ease both;animation-delay:calc(var(--k) * .24s + .22s);background:var(--c)}
@keyframes stepIn{from{transform:scale(.45);opacity:.25}to{transform:scale(1);opacity:1}}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fork{display:flex;gap:10px;margin-top:2px}
.out{flex:1 1 0;border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.35}
.out b{display:block;font-size:11px;letter-spacing:.01em;margin-bottom:2px}
.out.ok{background:#DCFCE7;color:#14532D}
.out.ok b{color:#166534}
.out.bad{background:#FEE2E2;color:#7F1D1D}
.out.bad b{color:#991B1B}
.steps.run ~ .fork .out{animation:fadeUp .4s ease both}
.steps.run ~ .fork .out.ok{animation-delay:calc(var(--n) * .24s + .3s)}
.steps.run ~ .fork .out.bad{animation-delay:calc(var(--n) * .24s + .45s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.colapso{display:flex;gap:16px;align-items:center}
.fases{display:flex;flex-direction:column;gap:0;flex-grow:1}
.fase{display:flex;align-items:center;gap:12px;padding:4px 0;position:relative}
.fase .n{width:22px;height:22px;border-radius:11px;font-size:11px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.fase .t{font-size:13px;line-height:1.35;color:var(--mute)}
.fase .t b{color:var(--ink);font-weight:600}
.fase::before{content:"";position:absolute;left:10px;top:-8px;bottom:-8px;width:2px;background:var(--line)}
.fase:first-child::before{top:50%}.fase:last-child::before{bottom:50%}
.queda circle,.queda path,.queda line{transition:fill .3s,stroke .3s}
.gauge .z{transition:opacity .4s}

.capa-corpo[data-spi] .v{opacity:.22;transition:opacity .25s}
.capa-corpo[data-spi] .c{opacity:.22;transition:opacity .25s}
.capa-corpo[data-spi="1"] .v[data-spi="1"],.capa-corpo[data-spi="2"] .v[data-spi="2"],.capa-corpo[data-spi="3"] .v[data-spi="3"],
.capa-corpo[data-spi="4"] .v[data-spi="4"],.capa-corpo[data-spi="5"] .v[data-spi="5"],.capa-corpo[data-spi="6"] .v[data-spi="6"],
.capa-corpo[data-spi="7"] .v[data-spi="7"],.capa-corpo[data-spi="8"] .v[data-spi="8"],.capa-corpo[data-spi="9"] .v[data-spi="9"]{opacity:1}
.capa-corpo[data-spi="1"] .c[data-c="I"],.capa-corpo[data-spi="8"] .c[data-c="I"],.capa-corpo[data-spi="9"] .c[data-c="I"],
.capa-corpo[data-spi="2"] .c[data-c="E"],.capa-corpo[data-spi="3"] .c[data-c="E"],.capa-corpo[data-spi="4"] .c[data-c="E"],
.capa-corpo[data-spi="5"] .c[data-c="M"],.capa-corpo[data-spi="6"] .c[data-c="M"],.capa-corpo[data-spi="7"] .c[data-c="M"]{opacity:1}
.capa-corpo[data-spi] .poly{fill-opacity:.06}
.ray{opacity:0;transition:opacity .25s}
.capa-corpo[data-spi="1"] .ray[data-spi="1"],.capa-corpo[data-spi="2"] .ray[data-spi="2"],.capa-corpo[data-spi="3"] .ray[data-spi="3"],
.capa-corpo[data-spi="4"] .ray[data-spi="4"],.capa-corpo[data-spi="5"] .ray[data-spi="5"],.capa-corpo[data-spi="6"] .ray[data-spi="6"],
.capa-corpo[data-spi="7"] .ray[data-spi="7"],.capa-corpo[data-spi="8"] .ray[data-spi="8"],.capa-corpo[data-spi="9"] .ray[data-spi="9"]{opacity:1}

/* PO, 30/09/2026: capa legível no celular — os cartões em uma coluna, sem escala do palco */
@media screen and (max-width:900px){
  .viewport{width:100% !important;height:auto !important;overflow:visible}
  .stage{width:auto !important;height:auto !important;transform:none !important;padding:16px 14px 20px !important}
  .page{height:auto}
  .head{flex-wrap:wrap;margin-bottom:16px}
  .grid{display:flex;flex-direction:column;gap:16px}
  .row2,.row3{flex-direction:column;gap:16px;margin-top:16px}
  .rank,.regua,.vuln,.who,.side,.map{width:auto;max-width:100%}
  .side{gap:16px}
  .who{gap:16px}
  h1{font-size:38px !important;line-height:1.05}
  .lead{font-size:18px}
  .map svg{width:100%;height:auto}
  .card svg{max-width:100%;height:auto}
  .card{padding:16px}
  .row .name{width:128px;font-size:14px}
  .row .val{width:auto;min-width:40px}
  .row2 > *,.row3 > *,.grid > *{width:auto !important;max-width:100% !important;flex:none !important}
  .card{min-width:0}
  .steps{flex-direction:column;align-items:stretch;gap:10px}
  .step{flex-direction:row;align-items:center;text-align:left;gap:12px}
  .step .t{padding:0}
  .step::before{display:none}
  .fork{flex-direction:column}
  .colapso{flex-direction:column;align-items:stretch}
  .live{padding:0 4px}
}


  
  .capa-corpo{background:#fff}
  .viewport{height:auto !important}
  .stage{transform:scale(.72) !important}
  .card{break-inside:avoid;box-shadow:none}
  .live{display:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:0s !important;transition-delay:0s !important;animation:none !important}}

  /* PO, 30/09/2026 («precisa ser tudo na vertical»): a capa impressa sai em A4 em pé, como o resto do relatório.
     O palco é refeito para 880 px e reduzido para a largura útil da folha (190 mm), em duas folhas: a primeira com o
     nome, as forças, os centros, a concentração e o mapa; a segunda com o ranking, a régua, a resistência à pressão,
     o algoritmo e a queda. Nenhum texto nem número muda. */
  
  .capa-corpo { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .viewport, .stage, .page { background: #fff !important; }
  .viewport { width: 880px !important; height: auto !important; overflow: visible !important; zoom: 0.815; margin: 0 auto; }
  .stage { width: 880px !important; height: auto !important; transform: none !important; padding: 0 !important; }
  .page { width: 880px !important; height: auto !important; }
  .grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; grid-template-areas: "who side" "map map" !important; gap: 24px !important; }
  .who, .side { width: auto !important; }
  .map { width: 640px !important; margin: 0 auto; }
  .row2 { break-before: page; margin-top: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px !important; }
  .row2 > .rank { grid-column: 1 / -1; width: auto !important; }
  .row2 > .regua, .row2 > .vuln { width: auto !important; }
  .row3 { flex-direction: column !important; gap: 24px !important; margin-top: 24px !important; }
  .row3 > * { width: auto !important; }
  .card, .map, .head, .who, .grid, .row2 > *, .row3 > * { break-inside: avoid; page-break-inside: avoid; }
  .live { display: none; }

[data-era-botao]{line-height:normal}