/* =========================================================
   Clarity board — cards pretos (layout original) + anim live
   ========================================================= */
.clarity{
  overflow:visible!important;
}

.clarity-board{
  --cb-dark:#101010;
  --cb-orange:#ff6a00;
  --cb-green:#12a34a;
  --cb-gap:16px;
  --cb-ease:cubic-bezier(.22,1,.36,1);
  width:min(100%,1120px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  overflow:visible;
  padding-top:4px;
}

.js .clarity-board.reveal,
.js .clarity-board.is-visible{
  opacity:1!important;
  transform:none!important;
  visibility:visible!important;
}

/* Head */
.cboard-head{
  text-align:center;
  margin:0 auto 6px;
  position:relative;
  z-index:3;
  padding:0 1rem;
}
.cboard-head__title{
  margin:0;
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#15110e;
}
.cboard-head__meta{
  margin:.28rem 0 0;
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a8278;
}

/* Pins — haste no centro de cada coluna + H gap-aware */
.cboard-pins{
  --pin-size:42px;
  --pin-stem:20px;
  --g:var(--cb-gap);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--g);
  position:relative;
  z-index:6;
  margin-bottom:calc(var(--pin-size) / -2);
  pointer-events:none;
}
/*
  H horizontal nos CENTROS reais das colunas (com gap):
  centro col1 = (100% - 2g) / 6   a partir da esquerda
  centro col3 = idem a partir da direita
*/
.cboard-pins::before{
  content:"";
  position:absolute;
  top:0;
  left:calc((100% - 2 * var(--g)) / 6);
  right:calc((100% - 2 * var(--g)) / 6);
  height:2px;
  background:var(--cb-orange);
  z-index:0;
  pointer-events:none;
}
.cboard-pin{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:1;
}
/* haste: do H até o badge, sempre no centro do pin */
.cboard-pin::before{
  content:"";
  width:2px;
  height:var(--pin-stem);
  flex:0 0 var(--pin-stem);
  background:var(--cb-orange);
  /* cobre o H (2px) sem “cruz” pra cima */
  margin-top:0;
}
.cboard-pin__badge{
  width:var(--pin-size);
  height:var(--pin-size);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#141414;
  border:2px solid var(--cb-orange);
  color:var(--cb-orange);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  box-sizing:border-box;
  line-height:0;
  flex:0 0 auto;
  position:relative;
  z-index:2;
  /* haste encosta no topo do círculo */
  margin-top:-1px;
}
.cboard-pin__badge svg{
  width:17px;
  height:17px;
  display:block;
}
.clarity-board.is-live .cboard-pin__badge{
  animation:cbPinPulse 2.8s ease-in-out infinite;
}
.clarity-board.is-live .cboard-pin:nth-child(2) .cboard-pin__badge{animation-delay:.35s}
.clarity-board.is-live .cboard-pin:nth-child(3) .cboard-pin__badge{animation-delay:.7s}

/* Grid cards pretos */
.cboard-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--cb-gap);
  width:100%;
  align-items:stretch;
  overflow:visible;
}
.cboard-card{
  --i:0;
  position:relative;
  background:var(--cb-dark);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.055);
  box-shadow:
    0 18px 40px rgba(17,17,17,.16),
    inset 0 1px 0 rgba(255,255,255,.04);
  padding:36px 16px 20px;
  min-height:0;
  overflow:visible;
  width:100%;
}
.cboard-card.is-focus{
  border-color:rgba(255,106,0,.22);
  box-shadow:
    0 18px 40px rgba(17,17,17,.18),
    0 0 0 1px rgba(255,106,0,.12);
}

/* Inner: arte | texto (layout original) */
.cboard-card__inner{
  display:grid;
  grid-template-columns:minmax(100px,.95fr) minmax(0,1.2fr);
  column-gap:8px;
  row-gap:8px;
  align-items:center;
  min-height:0;
}
.cboard-card__art{
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  width:100%;
  min-height:132px;
  padding:4px;
  overflow:visible;
}
.cboard-card__art svg,
.cboard-card__art .cboard-prio{
  width:100%;
  max-width:140px;
  height:auto;
  display:block;
  margin:0 auto;
}
.cboard-card__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:2px 0 0 2px;
  text-align:left;
}
.cboard-card__title{
  margin:0 0 .35rem;
  font-size:clamp(.86rem,1.05vw,1rem);
  font-weight:750;
  letter-spacing:-.025em;
  line-height:1.15;
  color:#fff;
  text-transform:uppercase;
}
.cboard-card__lead{
  margin:0;
  font-size:.82rem;
  font-weight:600;
  line-height:1.32;
  letter-spacing:-.015em;
  color:rgba(255,255,255,.9);
}
.cboard-card__rule{
  display:block;
  width:100%;
  height:2px;
  margin:.6rem 0 .65rem;
  border-radius:2px;
  background:var(--cb-orange);
  transform-origin:left center;
}
.cboard-card__copy{
  margin:0;
  font-size:.74rem;
  line-height:1.48;
  color:rgba(255,255,255,.44);
  letter-spacing:-.01em;
}

/* Priority bars — asset 2 (vivo com is-live + ciclo JS) */
.cboard-prio{
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  max-width:118px;
}
.cboard-prio li{
  display:flex;
  align-items:center;
  gap:8px;
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.cboard-prio b{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.62rem;
  font-weight:700;
  font-style:normal;
  color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.07);
  border:1.2px solid rgba(255,255,255,.14);
  flex:0 0 auto;
  transition:background .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease;
}
.cboard-prio i{
  flex:0 1 auto;
  width:var(--w,70%);
  max-width:100%;
  height:12px;
  border-radius:4px;
  background:rgba(255,255,255,.1);
  position:relative;
  overflow:hidden;
  transition:background .35s ease,box-shadow .35s ease,width .45s cubic-bezier(.22,1,.36,1);
}
.cboard-prio__fill{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0;
  border-radius:inherit;
  background:rgba(255,255,255,.14);
  pointer-events:none;
}
.cboard-prio li.is-active{
  transform:translateX(2px);
}
.cboard-prio li.is-active b{
  background:var(--cb-green);
  border-color:var(--cb-green);
  color:#fff;
  box-shadow:0 0 0 3px rgba(18,163,74,.22),0 0 12px rgba(18,163,74,.35);
  transform:scale(1.08);
}
.cboard-prio li.is-active i{
  background:rgba(15,191,82,.18);
  box-shadow:0 0 14px rgba(15,191,82,.28);
}
.cboard-prio li.is-active .cboard-prio__fill{
  width:100%;
  background:linear-gradient(90deg,#0fbf52,#1ad463 55%,#5dff9a);
  box-shadow:0 0 10px rgba(15,191,82,.4);
  animation:cbPrioFill .7s cubic-bezier(.22,1,.36,1) both;
}
/* shimmer + pulse no ativo */
.clarity-board.is-live .cboard-prio li.is-active i::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:cbPrioShimmer 1.6s ease-in-out infinite!important;
  animation-duration:1.6s!important;
  animation-iteration-count:infinite!important;
}
.clarity-board.is-live .cboard-prio li.is-active b{
  animation:cbPrioBadge 1.8s ease-in-out infinite!important;
  animation-duration:1.8s!important;
  animation-iteration-count:infinite!important;
}
.cboard-prio li.is-next b{
  border-color:rgba(255,106,0,.9);
  color:#ff9a4a;
  background:transparent;
  animation:cbPrioNextPulse 1.5s ease-in-out infinite!important;
  animation-duration:1.5s!important;
  animation-iteration-count:infinite!important;
}
.cboard-prio li.is-next i{
  background:rgba(255,106,0,.22);
}
.cboard-prio li.is-next .cboard-prio__fill{
  width:55%;
  background:linear-gradient(90deg,rgba(255,106,0,.55),rgba(255,140,60,.35));
  animation:cbPrioFillSoft 1.2s ease-in-out infinite alternate!important;
  animation-duration:1.2s!important;
  animation-iteration-count:infinite!important;
}
.cboard-prio li:not(.is-active):not(.is-next){
  opacity:.62;
}
.cboard-prio li:not(.is-active):not(.is-next) .cboard-prio__fill{
  width:22%;
  background:rgba(255,255,255,.16);
}

/* ── LOCK no load (classe no HTML + .js): nada anima até .clareza-go ── */
#clareza.clareza-locked .clarity__title-ink,
#clareza.clareza-locked .clarity__title-accent,
#clareza.clareza-locked .clarity__title-wrong,
#clareza.clareza-locked .clarity__title-clarity,
#clareza.clareza-locked .clarity__lead,
.js #clareza.clareza-locked .clarity__title-ink,
.js #clareza.clareza-locked .clarity__title-accent,
.js #clareza.clareza-locked .clarity__title-wrong,
.js #clareza.clareza-locked .clarity__title-clarity,
.js #clareza.clareza-locked .clarity__lead{
  opacity:0!important;
  visibility:hidden!important;
}
/* Board inteiro some no lock (evita “ESTRATÉGIA CLARA” sozinho no F5) */
#clareza.clareza-locked .clarity-board,
.js #clareza.clareza-locked .clarity-board,
.js #clareza.clareza-locked .clarity-board.reveal{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#clareza.clareza-locked .cboard-enter,
.js #clareza.clareza-locked .cboard-enter{
  opacity:0!important;
  transform:translate3d(0,28px,0)!important;
  transition:none!important;
  pointer-events:none!important;
}
/* Com go: board volta (filhos ainda usam .cboard-enter / .is-in) */
.js #clareza.clareza-go .clarity-board,
.js #clareza.clareza-go .clarity-board.reveal{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto;
}

/* ── Entrada: só depois do unlock + .is-in no scroll ── */
.js #clareza .cboard-enter:not(.is-in){
  opacity:0!important;
  transform:translate3d(0,28px,0)!important;
  transition:none!important;
  pointer-events:none;
}
.js #clareza.clareza-go .cboard-enter.is-in{
  opacity:1!important;
  transform:none!important;
  pointer-events:auto;
  transition-property:opacity,transform!important;
  transition-duration:.95s,.95s!important;
  transition-timing-function:var(--cb-ease),var(--cb-ease)!important;
  transition-delay:0s,0s!important;
}
.js #clareza .cboard-card.is-in .cboard-card__rule{
  animation:cbRuleDraw .65s var(--cb-ease) .2s both;
}
.js #clareza .cboard-card.is-in .cboard-card__art{
  animation:cbArtIn .9s var(--cb-ease) .08s both;
}
@keyframes cbRuleDraw{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes cbArtIn{
  0%{opacity:0;transform:scale(.9)}
  100%{opacity:1;transform:none}
}
@keyframes cbPinPulse{
  0%,100%{box-shadow:0 8px 18px rgba(0,0,0,.28)}
  50%{box-shadow:0 8px 18px rgba(0,0,0,.28),0 0 0 4px rgba(255,106,0,.15)}
}

/* ── Arts IDLE (só com is-live) — FORÇA motion (vence * reduce-motion .01ms) ── */
#clareza .cboard-radar__sweep,
#clareza .cboard-radar__spin,
#clareza .cboard-radar__pulse,
#clareza .cboard-radar__glow,
#clareza .cboard-radar__blip,
#clareza .cboard-radar__core,
#clareza .cboard-radar__ring--mid,
#clareza .cboard-route__flow,
#clareza .cboard-route__end-ring,
#clareza .cboard-route__end-core,
#clareza .cboard-route__flag,
#clareza .cboard-route__dot--mid{
  animation:none;
}

/* Asset 1 — radar: mais lento / legível (não frenético) */
#clareza .clarity-board.is-live .cboard-radar__sweep{
  transform-origin:80px 60px;
  animation:cbSpin 5.2s linear infinite!important;
  animation-duration:5.2s!important;
  animation-iteration-count:infinite!important;
  animation-timing-function:linear!important;
}
#clareza .clarity-board.is-live .cboard-radar__spin{
  transform-origin:80px 60px;
  animation:cbSpinRev 18s linear infinite!important;
  animation-duration:18s!important;
  animation-iteration-count:infinite!important;
}
#clareza .clarity-board.is-live .cboard-radar__pulse{
  transform-origin:80px 60px;
  animation:cbPulseRing 3.2s ease-out infinite!important;
  animation-duration:3.2s!important;
  animation-iteration-count:infinite!important;
}
#clareza .clarity-board.is-live .cboard-radar__glow{
  transform-origin:80px 60px;
  animation:cbBreath 4s ease-in-out infinite!important;
  animation-duration:4s!important;
  animation-iteration-count:infinite!important;
}
#clareza .clarity-board.is-live .cboard-radar__core{
  transform-origin:80px 60px;
  animation:cbCorePulse 2.8s ease-in-out infinite!important;
  animation-duration:2.8s!important;
  animation-iteration-count:infinite!important;
}
#clareza .clarity-board.is-live .cboard-radar__ring--mid{
  transform-origin:80px 60px;
  animation:cbRingBreathe 3.6s ease-in-out infinite!important;
  animation-duration:3.6s!important;
  animation-iteration-count:infinite!important;
}
#clareza .clarity-board.is-live .cboard-radar__blip{
  transform-origin:center;
  transform-box:fill-box;
  animation:cbBlip 3s ease-in-out infinite!important;
  animation-duration:3s!important;
  animation-iteration-count:infinite!important;
  animation-delay:var(--d,0s)!important;
}

/* Asset 3 — rota: SMIL finca a bandeira; CSS só fluxo/waypoints leves */
#clareza .clarity-board.is-live .cboard-route__flow{
  animation:cbDash 1.8s linear infinite!important;
  animation-duration:1.8s!important;
  animation-iteration-count:infinite!important;
}
#clareza .clarity-board.is-live .cboard-route__line{
  animation:cbRouteGlow 3.2s ease-in-out infinite!important;
  animation-duration:3.2s!important;
  animation-iteration-count:infinite!important;
}
/* NÃO animar flag via CSS — briga com o plant SMIL */
#clareza .clarity-board.is-live .cboard-route__flag{
  animation:none!important;
}
#clareza .clarity-board.is-live .cboard-route__dot--mid{
  transform-origin:center;
  transform-box:fill-box;
  animation:cbWaypoint 2.6s ease-in-out infinite!important;
  animation-duration:2.6s!important;
  animation-iteration-count:infinite!important;
  animation-delay:var(--d,0s)!important;
}
#clareza .clarity-board.is-live .cboard-route__traveler{
  filter:drop-shadow(0 0 6px rgba(255,106,0,.85));
  visibility:visible!important;
}
#clareza .clarity-board.is-live .cboard-route__burst,
#clareza .clarity-board.is-live .cboard-route__flag-plant{
  pointer-events:none;
}
#clareza .clarity-board:not(.is-live) .cboard-route__traveler,
#clareza .clarity-board:not(.is-live) .cboard-route__burst,
#clareza .clarity-board:not(.is-live) .cboard-route__flag-plant{
  visibility:hidden;
}
#clareza .clarity-board:not(.is-live) .cboard-route__traveler animateMotion,
#clareza .clarity-board:not(.is-live) .cboard-route__burst animate,
#clareza .clarity-board:not(.is-live) .cboard-route__end-ring animate,
#clareza .clarity-board:not(.is-live) .cboard-route__end-core animate,
#clareza .clarity-board:not(.is-live) .cboard-route__flag-plant animate,
#clareza .clarity-board:not(.is-live) .cboard-route__flag-plant animateTransform{
  display:none;
}

@keyframes cbSpin{to{transform:rotate(360deg)}}
@keyframes cbSpinRev{to{transform:rotate(-360deg)}}
@keyframes cbPulseRing{
  0%{transform:scale(.65);opacity:.8}
  70%{transform:scale(1.65);opacity:0}
  100%{transform:scale(1.65);opacity:0}
}
@keyframes cbBreath{
  0%,100%{opacity:.4;transform:scale(.88)}
  50%{opacity:1;transform:scale(1.12)}
}
@keyframes cbCorePulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.14);opacity:.92}
}
@keyframes cbRingBreathe{
  0%,100%{opacity:.45;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
@keyframes cbBlip{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
@keyframes cbDash{to{stroke-dashoffset:-32}}
@keyframes cbRouteGlow{
  0%,100%{opacity:.75;filter:drop-shadow(0 0 0 transparent)}
  50%{opacity:1;filter:drop-shadow(0 0 4px rgba(255,106,0,.45))}
}
@keyframes cbFlag{
  0%,100%{transform:rotate(-6deg) skewX(-2deg)}
  50%{transform:rotate(8deg) skewX(2deg)}
}
@keyframes cbWaypoint{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.18)}
}
@keyframes cbPrioShimmer{
  0%{transform:translateX(-130%)}
  50%{transform:translateX(130%)}
  100%{transform:translateX(130%)}
}
@keyframes cbPrioFill{
  from{width:0;opacity:.5}
  to{width:100%;opacity:1}
}
@keyframes cbPrioFillSoft{
  from{width:40%;opacity:.7}
  to{width:70%;opacity:1}
}
@keyframes cbPrioBadge{
  0%,100%{box-shadow:0 0 0 3px rgba(18,163,74,.2),0 0 10px rgba(18,163,74,.3)}
  50%{box-shadow:0 0 0 5px rgba(18,163,74,.28),0 0 16px rgba(18,163,74,.5)}
}
@keyframes cbPrioNextPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,106,0,0)}
  50%{box-shadow:0 0 0 4px rgba(255,106,0,.2)}
}

/* Bottom bar (branca, como antes) */
.cboard-bar{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px 28px;
  flex-wrap:nowrap;
  padding:18px 22px 18px 16px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:16px;
  box-shadow:
    0 2px 4px rgba(17,17,17,.04),
    0 12px 28px rgba(40,28,18,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.cboard-bar__main{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 1 320px;
  min-width:0;
  max-width:360px;
  padding-right:clamp(12px,2vw,22px);
  border-right:1px solid rgba(17,17,17,.1);
}
.cboard-bar__badge{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0b3523;
  color:#3dcc7a;
  flex:0 0 auto;
  box-shadow:0 0 0 5px rgba(45,204,111,.12);
}
.cboard-bar__badge svg{width:20px;height:20px}
.cboard-bar__copy strong{
  display:block;
  margin:0 0 .2rem;
  font-size:.86rem;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#127a42;
}
.cboard-bar__copy p{
  margin:0;
  font-size:.84rem;
  line-height:1.42;
  color:#6f675e;
  max-width:36ch;
}
.cboard-bar__points{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  flex:1 1 auto;
  min-width:0;
}
.cboard-bar__points li{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 1 auto;
  min-width:0;
  color:#1a1510;
  padding:0 clamp(.75rem,1.6vw,1.25rem);
}
.cboard-bar__points li + li{
  border-left:1px solid rgba(17,17,17,.12);
}
.cboard-bar__label{
  font-size:.78rem;
  font-weight:650;
  letter-spacing:-.015em;
  line-height:1.28;
  color:#1f1b17;
}
.cboard-bar__ico{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  color:#1a6b3c;
  flex:0 0 auto;
}
.cboard-bar__ico svg{
  width:20px;
  height:20px;
  display:block;
}

/* Mobile base — carrossel e barra tratados em mobile-fix.css */
@media (max-width:900px){
  .cboard-pins{
    --pin-size:36px;
    --pin-stem:16px;
  }
  .cboard-pin__badge svg{width:15px;height:15px}
  .cboard-bar{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    min-height:0;
    height:auto;
    padding:14px;
    gap:0;
  }
  .cboard-bar__main{
    max-width:none;
    flex:0 0 auto;
    border-right:0;
    padding-right:0;
    padding-bottom:12px;
    border-bottom:1px solid rgba(17,17,17,.1);
  }
  .cboard-bar__points{
    flex:0 0 auto;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    width:100%;
    padding-top:4px;
  }
  .cboard-bar__points li{
    flex:0 0 auto;
    width:100%;
    padding:10px 0;
    border-left:0;
  }
  .cboard-bar__points li + li{border-left:0}
}

@media (max-width:560px){
  .cboard-card__inner{
    grid-template-columns:1fr;
  }
  .cboard-card__art{
    min-height:100px;
    max-width:160px;
    margin:0 auto 8px;
  }
  .cboard-pins::before,
  .cboard-pin::before{display:none}
}

/* Product-critical: assets dos cards CONTINUAM vivos (marketing).
   Só encurta um pouco a entrada dos cards. */
@media (prefers-reduced-motion:reduce){
  .js #clareza.clareza-go .cboard-enter.is-in{
    transition-duration:.45s,.45s!important;
  }
  .js #clareza .cboard-enter:not(.is-in){
    opacity:0!important;
    transform:translate3d(0,18px,0)!important;
  }
  /* garante loops mesmo com * { animation-duration:.01ms } */
  #clareza .clarity-board.is-live .cboard-radar__sweep{
    animation:cbSpin 5.2s linear infinite!important;
    animation-duration:5.2s!important;
    animation-iteration-count:infinite!important;
  }
  #clareza .clarity-board.is-live .cboard-prio li.is-active i::after{
    animation:cbPrioShimmer 1.6s ease-in-out infinite!important;
    animation-duration:1.6s!important;
    animation-iteration-count:infinite!important;
  }
  #clareza .clarity-board.is-live .cboard-route__flow{
    animation:cbDash 1.15s linear infinite!important;
    animation-duration:1.15s!important;
    animation-iteration-count:infinite!important;
  }
  #clareza .clarity-board.is-live .cboard-route__traveler{
    visibility:visible!important;
  }
}