/* ==========================================================================
   home-hoje.css  |  RCEM Hub, tela inicial: Hoje, Em breve, Primeiros passos, rodapé e responsivo

   O que é: a seção "02 Hoje" (cartão Atenção hoje e mapa de integrações), os cartões "Em breve", o cartão de
   Primeiros passos, o rodapé com a marca grande, os estados vazio e bom, os pontos de quebra (1180 e 760 px) e o
   bloco de movimento reduzido de toda a tela inicial.
   Define: .hh-att .hh-at .hh-empty-ok .hh-mapc .hh-map .hh-nd .hh-lk .hh-lkt .hh-soon .hh-steps .hh-step .hh-rodape .hh-foot-*.
   Consome: tokens.css (--hx-ice, --hx-foot, --hx-ghost, --hx-on-*, --pos, --warn, --neg), home.css (.hh-card, .hh-chip, .hh-btn, .hh-bento).
   Regras: gravidade nunca só pela cor (cada item traz ícone de forma própria mais palavra); no celular o mapa vira fluxo vertical só
     com CSS; prefers-reduced-motion desliga animação e transição e mostra o estado final.
   ========================================================================== */

#hoje{scroll-margin-top:calc(var(--top-h) + 16px)}

/* Atenção hoje */
.hh-att{padding-top:clamp(28px,3vw,40px);overflow:hidden;display:flex;flex-direction:column}
.hh-att::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--text)}
.hh-att-list{display:flex;flex-direction:column;flex:1 1 auto}
.hh-at{border-top:1px solid var(--line);display:grid;flex:1 1 auto}
.hh-at:first-child{border-top:0}
@media (min-width:1181px){.hh-at{max-height:150px}}
@media (min-width:761px){.hh-lkt li{max-height:112px}}
.hh-at a{display:grid;grid-template-columns:44px minmax(0,1fr) auto 36px;align-items:center;gap:14px;padding:clamp(12px,1.3vw,16px) 8px;margin:0 -8px;border-radius:var(--hx-r-item);transition:background-color var(--hx-d-fast),padding var(--hx-d-base) var(--ease-out)}
.hh-at a:hover{background:var(--line-soft);padding-left:14px}
.hh-at-n{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.hh-at-s{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hh-at-s .hh-ic{width:14px;height:14px}
.hh-at.crit .hh-at-s,.hh-now-i.crit .hh-at-s{color:var(--neg)}
.hh-at.aten .hh-at-s,.hh-now-i.aten .hh-at-s{color:var(--warn)}
.hh-at.plan .hh-at-s{color:var(--pos)}
.hh-at-b strong{display:block;font-size:clamp(15px,1.3vw,17px);font-weight:800;letter-spacing:-.025em;line-height:1.25;margin-top:2px}
.hh-at-b small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.hh-at-v{font-size:clamp(15px,1.3vw,18px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.hh-at-go{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;transition:background-color var(--hx-d-fast),color var(--hx-d-fast),border-color var(--hx-d-fast),transform var(--hx-d-base) var(--ease-out)}
.hh-at a:hover .hh-at-go{background:var(--text);color:var(--paper);border-color:var(--text);transform:translateX(3px)}
.hh-att-f{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600}
.hh-att-list+.hh-att-f{margin-top:12px}
.hh-att-f a{font-weight:800;color:var(--text);display:inline-flex;gap:8px;align-items:center;min-height:28px;border-bottom:2px solid var(--lime)}
.hh-att-f .hh-ic{width:16px;height:16px}
.hh-att-sk{display:grid;gap:18px}
.hh-att-sk .r{display:grid;grid-template-columns:44px 1fr 90px;gap:14px;align-items:center}
.hh-att-sk .c{display:grid;gap:8px}
.hh-empty-ok{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:clamp(8px,2vw,24px) 0;flex:1 1 auto}
.hh-empty-ok .mark{width:64px;height:64px;border-radius:22px;background:var(--lime);color:var(--ink);display:grid;place-items:center}
.hh-empty-ok .mark .hh-ic{width:32px;height:32px}
.hh-empty-ok b{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.hh-empty-ok p{color:var(--muted);max-width:44ch}

/* mapa de integrações */
.hh-mapc{background:var(--hx-ice);border-color:var(--hx-ice-ln);box-shadow:none;overflow:hidden;display:flex;flex-direction:column}
.hh-map{display:grid;grid-template-columns:1fr 1.15fr 1fr 1.15fr 1fr;grid-template-rows:auto auto;margin:auto 0}
.hh-arc{grid-column:1/-1;grid-row:1;position:relative;height:96px;margin-bottom:6px}
.hh-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hh-arc-p{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 9;animation:hh-flowd 1.1s linear 4}
.hh-arc-head{position:absolute;right:9.4%;bottom:-2px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--c);transform:translateX(50%)}
.hh-chip-l{position:absolute;left:50%;top:6px;transform:translateX(-50%);background:var(--surface);border:1.5px solid var(--c);color:var(--text);padding:6px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;white-space:nowrap;display:inline-flex;gap:8px;align-items:center;max-width:100%}
.hh-chip-l .hh-ic{width:14px;height:14px;color:var(--c)}
.hh-arc-m{display:none}
.hh-nd{grid-row:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.hh-nd-ic{width:76px;height:76px;border-radius:26px;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--text);color:var(--text)}
.hh-nd-ic .hh-ic{width:34px;height:34px}
.hh-nd.hub .hh-nd-ic{width:92px;height:92px;border-radius:50%;background:var(--hx-g-bg);border-color:var(--hx-g-bg);color:var(--lime);margin-top:-8px;box-shadow:0 0 0 8px color-mix(in srgb,var(--lime) 35%,transparent),0 0 0 9px var(--lime),var(--hx-g-sh)}
.hh-nd.hub .hh-nd-ic svg{width:52px;height:auto}
.hh-nd b{font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.hh-nd-a{font-size:12.5px;font-weight:800;border-bottom:2px solid var(--lime);min-height:28px;display:inline-flex;gap:6px;align-items:center}
.hh-nd-a .hh-ic{width:14px;height:14px}
a.hh-nd-a:hover{border-color:var(--text)}
.hh-nd.hub .hh-nd-a{border-color:transparent;color:var(--muted);font-weight:700}
.hh-lk{grid-row:2;align-self:start;margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 6px;min-width:0}
.hh-lk-line{position:relative;width:100%;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 12px);background-size:12px 3px;animation:hh-flowx 1s linear 4}
.hh-lk-line::after{content:"";position:absolute;right:-3px;top:50%;margin-top:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--c)}
.hh-lk.rev .hh-lk-line{animation-direction:reverse}
.hh-lk.rev .hh-lk-line::after{right:auto;left:-3px;border-left:0;border-right:11px solid var(--c)}
.hh-lk-t{font-size:12px;line-height:1.35;font-weight:700;text-align:center;color:var(--text-2)}
.hh-lk-t b{display:block;font-weight:800;color:var(--text);letter-spacing:-.01em}
.hh-lk-t em{font-style:normal;display:inline-flex;gap:5px;align-items:center;margin-top:3px;font-weight:800;color:var(--c)}
.hh-lk-t em .hh-ic{width:13px;height:13px}
.st-ok{--c:var(--pos)}.st-late{--c:var(--warn)}.st-none{--c:var(--muted)}
.st-late .hh-lk-line,.st-late .hh-arc-p{animation-duration:3s}
.st-none .hh-lk-line{animation:none;background:repeating-linear-gradient(90deg,var(--c) 0 2px,transparent 2px 9px)}
.st-none .hh-arc-p{animation:none;stroke-dasharray:1 9}
.hh-nd.n1{grid-column:1}.hh-lk.l1{grid-column:2}.hh-nd.n2{grid-column:3}.hh-lk.l2{grid-column:4}.hh-nd.n3{grid-column:5}
.hh-lkt{margin-top:26px;border-top:1px solid var(--line-strong);margin-bottom:20px;display:flex;flex-direction:column;flex:1 1 auto}
.hh-lkt li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-strong);flex:1 1 auto}
.hh-lkt-n{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:-.02em}
.hh-lkt-n b{font-weight:800}
.hh-lkt-n .hh-ic{width:16px;height:16px;color:var(--c)}
.hh-lkt-d{font-size:12.5px;font-weight:600;color:var(--muted)}
.hh-map-f{display:flex;margin-top:auto;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line-strong);font-size:12.5px;color:var(--muted);font-weight:600}
@keyframes hh-flowx{to{background-position:12px 0}}
@keyframes hh-flowy{to{background-position:0 12px}}
@keyframes hh-flowd{to{stroke-dashoffset:-24}}

/* em breve */
.hh-soon{border:1.5px dashed var(--line-strong);border-radius:var(--hx-r-soon);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:10px;min-height:210px;min-width:0;transition:border-color var(--hx-d-base),background-color var(--hx-d-base),transform var(--hx-d-base) var(--ease-out)}
.hh-soon:hover{border-style:solid;border-color:var(--text);background:var(--surface);transform:translateY(-3px)}
.hh-soon-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hh-soon-ic{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;border:1.5px dashed var(--line-strong);color:var(--text-2);transition:border-color var(--hx-d-base),color var(--hx-d-base)}
.hh-soon:hover .hh-soon-ic{border-style:solid;border-color:var(--text);color:var(--text)}
.hh-soon .hh-ic{width:26px;height:26px}
.hh-soon h3{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-top:auto}
.hh-soon p{font-size:13px;color:var(--muted);line-height:1.45}

/* primeiros passos */
.hh-steps{background:var(--hx-ice);border-color:var(--hx-ice-ln);box-shadow:none}
.hh-steps-h{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.hh-steps-h h3{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1}
.hh-meter{display:flex;gap:5px;flex:none}
.hh-meter i{width:34px;height:8px;border-radius:5px;background:var(--line-strong)}
.hh-meter i.on{background:var(--text)}
.hh-steps-h .cnt{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hh-steps-h .hh-btn{margin-left:auto}
.hh-step-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(18px,2vw,28px)}
.hh-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--hx-r-step);padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.hh-step.done{background:transparent;border-style:dashed}
.hh-step-n{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.hh-step.done .hh-step-n{color:var(--muted)}
.hh-step b{font-size:15.5px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.hh-step p{font-size:12.5px;color:var(--muted);line-height:1.4}
.hh-step .st{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--pos)}
.hh-step .st .hh-ic{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--lime);color:var(--ink)}
.hh-steps.fold .hh-step-list{display:none}

/* rodapé */
.hh-rodape{margin-top:clamp(56px,7vw,104px);background:var(--hx-foot);color:var(--hx-on-1);position:relative;overflow:hidden;isolation:isolate}
[data-theme="dark"] .hh-rodape{border-top:1px solid var(--line)}
.hh-wrap{max-width:var(--hx-wrap);margin:0 auto;padding:0 var(--hx-gutter)}
.hh-foot-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);padding-top:clamp(36px,4.6vw,64px);padding-bottom:clamp(20px,3vw,32px)}
.hh-foot-in .f1,.hh-foot-in .f2,.hh-foot-in .f3{grid-column:span 4;min-width:0}
.hh-foot-in h4{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.hh-foot-in p,.hh-foot-in li{font-size:13.5px;color:var(--hx-on-2);line-height:1.55}
.hh-ver{font-size:clamp(32px,3.4vw,48px);font-weight:800;letter-spacing:-.045em;color:var(--hx-on-1);line-height:1;margin-bottom:10px}
.hh-ver span{color:var(--lime)}
.hh-sk-l{display:flex;flex-direction:column;gap:10px}
.hh-sk-l li{display:flex;align-items:center;gap:12px}
.hh-sk-l kbd{color:var(--hx-on-1);min-width:64px;text-align:center}
.hh-warn{margin-top:12px;display:flex;gap:10px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--hx-amber) 45%,transparent);color:var(--hx-amber)!important;font-size:12.5px;line-height:1.45}
.hh-warn .hh-ic{width:18px;height:18px;margin-top:1px}
.hh-foot-wm{display:block;width:min(1100px,100%);margin:clamp(16px,3vw,40px) auto -6%;color:var(--lime);opacity:.16}
.hh-foot-wm svg{width:100%;height:auto;display:block}

/* tablet */
@media (max-width:1180px){
  .hh-hero-grid{grid-template-columns:minmax(0,1fr)}
  .hh-score{padding:20px}
  .hh-score-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .hh-bento>.s7,.hh-bento>.s5,.hh-bento>.s6{grid-column:1/-1}
  .hh-bento>.s3{grid-column:span 6}
  .hh-now{grid-template-columns:minmax(0,1fr)}
  .hh-step-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hh-foot-in .f1{grid-column:1/-1}.hh-foot-in .f2,.hh-foot-in .f3{grid-column:span 6}
}

/* celular */
@media (max-width:760px){
  :root{--hx-r-hero:30px;--hx-r-slab:28px;--hx-r-card:26px;--hx-r-panel:24px;--hx-r-soon:24px;--hx-r-step:20px;--hx-r-item:18px}
  .hh-mast{gap:4px 14px;font-size:10.5px;letter-spacing:.12em}
  .hh-mast .hh-rule,.hh-sec-m{display:none}
  .hh-agenda{display:none}
  .hh-hsearch kbd{display:none}
  .hh-sc-l{white-space:nowrap}
  .hh-sc-t{line-height:1.3}
  .hh-hsearch{height:58px;font-size:15px}
  .hh-qa .hh-btn{flex:1 1 calc(50% - 10px);padding:0 12px;font-size:13px}
  .hh-qa .hh-btn.hm{display:none}
  .hh-qa .hh-btn.gh .hh-ic{display:none}
  .hh-qa .hh-btn.pri{flex-basis:100%}
  .hh-score-rows{display:block}
  .hh-now-l{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--hx-gutter)*-1);padding:2px var(--hx-gutter) 10px;scroll-padding:0 var(--hx-gutter);scrollbar-width:none}
  .hh-now-l::-webkit-scrollbar{display:none}
  .hh-now-i{flex:0 0 min(84%,320px);scroll-snap-align:start}
  .hh-now-n{font-size:48px}
  .hh-mod-top{grid-template-columns:1fr}
  .hh-stack-lg{gap:8px}
  .hh-lg-v{font-size:13.5px}
  .hh-lg-l{letter-spacing:.06em}
  .hh-kp{gap:14px}
  .hh-kp dt{font-size:10px;letter-spacing:.06em}
  .hh-kp dd{font-size:26px}
  .hh-bento>.s3{grid-column:1/-1}
  .hh-soon{min-height:0}
  .hh-soon h3{margin-top:6px}
  .hh-step-list{grid-template-columns:1fr}
  .hh-foot-in .f2,.hh-foot-in .f3{grid-column:1/-1}
  .hh-at a{grid-template-columns:30px minmax(0,1fr) 32px;gap:10px}
  .hh-at-v{grid-column:2;grid-row:2;text-align:left;font-size:15px}
  .hh-at-n{font-size:18px}
  .hh-at-go{grid-column:3;grid-row:1/span 2}
  .hh-map{grid-template-columns:1fr;grid-template-rows:none}
  .hh-arc{display:none}
  .hh-arc-m{display:flex;grid-column:1;grid-row:7;margin-top:20px;gap:10px;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:700;padding:12px 14px;border:1.5px dashed var(--c);border-radius:18px;color:var(--text)}
  .hh-arc-m .hh-ic{width:16px;height:16px;color:var(--c);flex:none}
  .hh-nd,.hh-lk{grid-column:1!important;grid-row:auto!important}
  .hh-nd.hub .hh-nd-ic{margin-top:0}
  .hh-lk{margin-top:0;flex-direction:row;justify-content:center;gap:16px;padding:14px 0}
  .hh-lk-line{width:3px;height:56px;background:repeating-linear-gradient(180deg,var(--c) 0 6px,transparent 6px 12px);background-size:3px 12px;animation:hh-flowy 1s linear 4;flex:none}
  .hh-lk-line::after{right:auto;left:50%;top:auto;bottom:-3px;margin:0 0 0 -7px;border:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--c)}
  .hh-lk.rev .hh-lk-line{animation-direction:reverse}
  .hh-lk.rev .hh-lk-line::after{left:50%;bottom:auto;top:-3px;border-top:0;border-bottom:11px solid var(--c);border-right:7px solid transparent}
  .hh-lk-t{text-align:left;flex:0 1 auto}
  .st-none .hh-lk-line{animation:none;background:repeating-linear-gradient(180deg,var(--c) 0 2px,transparent 2px 9px)}
  .hh-lkt li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .hh-lkt-d{grid-column:1;grid-row:2}
  .hh-lkt .hh-nd-a{grid-column:2;grid-row:2;justify-self:end}
}

/* movimento reduzido: estado final de uma vez */
@media (prefers-reduced-motion:reduce){
  .hh-conteudo *,.hh-conteudo *::before,.hh-conteudo *::after,.hh-rodape *{animation:none!important;transition:none!important}
  .hh-spark .dr{stroke-dashoffset:0}.hh-spark .pt{opacity:1}
}