/* ==========================================================================
   SMART PARANÁ — landing page
   Identidade: Grupo Griffin (grupogriffin.com / Elementor kit 12)
   Base clara: branco dominante, laranja da marca, cantos bem arredondados,
   sombras difusas. Blocos escuros usados só como pausa de ritmo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS LOCAIS (estendem tokens.css)
   -------------------------------------------------------------------------- */
:root{
  --ember:      #FF8015;
  --ember-hot:  #FF6700;
  --ember-lit:  #FF9D41;
  --ember-soft: #FFF3E8;
  --ember-line: rgba(255,128,21,.28);

  --ink:        #282828;
  --ink-2:      #5D5D5D;
  --ink-3:      #8A8A8A;

  --bg:         #FFFFFF;
  --bg-alt:     #F5F5F5;
  --hair:       #E7E7E7;

  --dark:       #1E1E1E;
  --dark-2:     #262626;
  --dark-line:  rgba(255,255,255,.12);
  --on-dark:    #FFFFFF;
  --on-dark-2:  #C8D5DC;

  --f-display: "Gilroy", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:    "Gilroy", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --hdr-h: 84px;

  --sh-sm: 0 3px 20px -15px rgba(0,0,0,.5);
  --sh-md: 0 0 25px -10px rgba(0,0,0,.16);
  --sh-lg: 0 0 30px -10px rgba(0,0,0,.16);
  --sh-glow: 0 0 20px -5px #FF8022;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  color-scheme:light;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  overflow-x:clip;   /* clip não corta position:sticky; hidden fica de reserva */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;   /* clip não corta position:sticky; hidden fica de reserva */
}

[id]{ scroll-margin-top:calc(var(--hdr-h) + 20px); }

a{ color:inherit; text-decoration:none; }
a,button{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(255,128,21,.18); }
img{ max-width:100%; height:auto; display:block; }
/* O <picture> só existe para o navegador escolher entre AVIF e WebP; quem tem
   classe e regra de layout é o <img> dentro dele. Sem `display:contents` seria
   o <picture> a virar o item do flex/grid e a filha do .hero__media, e o
   posicionamento das fotos mudaria de dono. */
picture{ display:contents; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,table{ margin:0; }
b,strong{ font-weight:700; color:var(--ink); }

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:8px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:16px; top:-100px; z-index:120;
  background:var(--ember); color:#fff; padding:12px 20px;
  border-radius:var(--radius-pill,100px); font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{ top:16px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:1140px;
  margin-inline:auto;
  padding-inline:24px;
}
.wrap--narrow{ max-width:860px; }
.wrap--wide{ max-width:1320px; }

.sec{ padding:104px 0; position:relative; }
.sec--alt{ background:var(--bg-alt); }

.sec--totem{
  /* a faixa não tem título: o respiro é só o que a coluna e os textos pedem
     para não encostar nas seções vizinhas */
  padding:64px 0;
  background:var(--bg-alt);
}

.sec--dark{
  background:var(--dark);
  color:var(--on-dark-2);
  background-image:
    radial-gradient(900px 420px at 15% 0%, rgba(255,128,21,.12), transparent 65%),
    radial-gradient(700px 380px at 90% 100%, rgba(255,128,21,.08), transparent 60%);
}

.grid{ display:grid; gap:20px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--split{ grid-template-columns:1fr .85fr; gap:56px; }
.grid--middle{ align-items:center; }

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA DE SEÇÃO
   -------------------------------------------------------------------------- */
.h1{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--ink);
}
.h1 em{
  font-style:normal;
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
}
.h2 em{
  font-style:normal;
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.h2--onDark{ color:var(--on-dark); }

.kicker{
  font-family:var(--f-mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ember);
  margin-bottom:14px;
}
.kicker--onDark{ color:var(--ember-lit); }

.lede{
  font-size:1.08rem;
  line-height:1.6;
  color:var(--ink-2);
  max-width:58ch;
}
.lede--center{ margin-inline:auto; text-align:center; }
.lede--onDark{ color:var(--on-dark-2); }

.sechd{ margin-bottom:44px; }
.sechd .h2 + .lede{ margin-top:18px; }
.sechd--center{ text-align:center; }
.sechd--center .kicker{ display:block; }

.closing{
  margin-top:36px;
  text-align:center;
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.3rem;
  color:var(--ink);
}

.quote{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.3;
  color:var(--ink-2);
  margin:8px 0 32px;
}
.quote b{ color:var(--ink); font-weight:800; }

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.btn{
  --btn-py:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--btn-py) 26px;
  border-radius:100px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:.98rem;
  line-height:1;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background-color .22s var(--ease), color .22s var(--ease);
}
.btn--sm{ --btn-py:11px; padding-inline:20px; font-size:.9rem; }
.btn--lg{ --btn-py:18px; padding-inline:32px; font-size:1.04rem; }
.btn--block{ display:flex; width:100%; }

.btn--primary{
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  color:#fff;
  box-shadow:0 10px 24px -14px rgba(255,103,0,.9);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(255,103,0,.85), var(--sh-glow);
}

.btn--ghost{
  background:#fff;
  color:var(--ink);
  border-color:var(--hair);
  box-shadow:var(--sh-md);
}
.btn--ghost:hover{
  transform:translateY(-2px);
  border-color:var(--ember-line);
  color:var(--ember-hot);
}
.sec--dark .btn--ghost{
  background:transparent; color:var(--on-dark);
  border-color:var(--dark-line); box-shadow:none;
}

.btn__ico{ width:19px; height:19px; flex:none; transition:transform .22s var(--ease); }
.btn:hover .btn__ico{ transform:translateX(3px); }

/* --------------------------------------------------------------------------
   6. HEADER — transparente sobre o banner, sólido depois dele
   -------------------------------------------------------------------------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.hdr.is-stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);
  box-shadow:var(--sh-md);
}

.hdr__in{
  height:var(--hdr-h);
  display:flex; align-items:center; gap:32px;
}

/* recorte branco do logo, encostado no canto superior esquerdo da tela ---- */
.hdr__logo{
  --bleed:max(24px, calc((100vw - 1140px) / 2 + 24px));
  align-self:stretch;
  display:flex; align-items:center;
  margin-left:calc(-1 * var(--bleed));
  padding-left:var(--bleed);
  padding-right:34px;
  background:#fff;
  border-bottom-right-radius:30px;
  transition:background-color .3s var(--ease), border-radius .3s var(--ease);
}
.hdr.is-stuck .hdr__logo{
  background:transparent;
  border-bottom-right-radius:0;
}
.hdr__logo img{ width:150px; height:auto; }

.hdr__nav{ display:flex; gap:28px; margin-left:8px; }
.hdr__nav a{
  font-size:.94rem; font-weight:500; color:var(--ink-2);
  position:relative; padding-block:6px;
  transition:color .2s var(--ease);
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--ember); border-radius:2px;
  transition:right .25s var(--ease);
}
.hdr__nav a:hover{ color:var(--ink); }
.hdr__nav a:hover::after{ right:0; }

.hdr__right{ margin-left:auto; display:flex; align-items:center; gap:20px; }

.hdr__tel{ display:flex; flex-direction:column; line-height:1.15; text-align:right; }
.hdr__tel-lbl{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.hdr__tel-num{ font-weight:700; color:var(--ink); font-size:.95rem; }

/* variantes claras enquanto o header está sobre a imagem ------------------ */
.hdr:not(.is-stuck) .hdr__nav a,
.hdr:not(.is-stuck) .hdr__tel-num{
  color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.hdr:not(.is-stuck) .hdr__nav a:hover{ color:#fff; }
.hdr:not(.is-stuck) .hdr__tel-lbl{
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   7. HERO / BANNER
   -------------------------------------------------------------------------- */
.hero{
  --media-h:clamp(480px, 50vw, 660px);
  --card-w:380px;
  --card-lift:225px;          /* quanto o card sobe sobre a imagem */
  position:relative;
  isolation:isolate;
  background:var(--bg);
}

/* imagem ------------------------------------------------------------------ */
.hero__media{
  position:relative;
  height:var(--media-h);
  overflow:hidden;
  background:#0A1B2C;
}
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 58%;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(720px 460px at 24% 54%, rgba(6,18,30,.42), rgba(6,18,30,0) 72%),
    linear-gradient(90deg, rgba(6,18,30,.82) 0%, rgba(6,18,30,.52) 34%, rgba(6,18,30,.06) 66%, rgba(6,18,30,0) 100%),
    linear-gradient(180deg, rgba(6,18,30,.55) 0%, rgba(6,18,30,0) 26%);
}

/* texto sobre a imagem ---------------------------------------------------- */
.hero__copywrap{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding-top:calc(var(--hdr-h) * .5);
}
.hero__copy{ max-width:min(58%, 640px); }

.hero__over{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(.95rem, 1.5vw, 1.35rem);
  line-height:1.26;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}

.hero__ttl{
  /* O padding amplia a caixa pintada pelo background-clip:text — sem ele o
     line-height < 1 corta o til do "Ã" e a cedilha do "Ç". As margens
     negativas devolvem o bloco à posição original. */
  margin:-.1em -.04em -.14em;
  padding:.2em .04em .14em;
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(3.1rem, 7vw, 6.2rem);
  line-height:.9;
  letter-spacing:-.035em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#FFA340 0%,#FF6700 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.5));
}

/* card flutuante de orçamento --------------------------------------------- */
.qc{
  position:absolute; z-index:6;
  top:calc(var(--media-h) - var(--card-lift));
  right:max(24px, calc((100% - 1140px) / 2 + 24px));
  width:var(--card-w);
  padding:26px 24px 24px;
  border-radius:26px;
  background:#fff;
  box-shadow:0 34px 70px -34px rgba(10,27,44,.55), 0 0 0 1px rgba(40,40,40,.05);
  text-align:center;
}

.qc__ttl{
  font-family:var(--f-display);
  font-weight:800; font-size:1.7rem; line-height:1;
  letter-spacing:-.01em; text-transform:uppercase;
  color:var(--ink);
}
.qc__sub{
  margin-top:6px;
  font-size:.92rem; line-height:1.35; color:var(--ink-2);
}

.qc__cta{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:18px;
  padding:17px 24px;
  border-radius:100px;
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  color:#fff;
  font-family:var(--f-display);
  font-weight:800; font-size:1.16rem; line-height:1;
  text-transform:uppercase;
  box-shadow:0 14px 28px -14px rgba(255,103,0,.95);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.qc__cta svg{ width:20px; height:20px; flex:none; transition:transform .22s var(--ease); }
.qc__cta:hover{ transform:translateY(-2px); box-shadow:0 20px 34px -14px rgba(255,103,0,.9), var(--sh-glow); }
.qc__cta:hover svg{ transform:translateX(3px); }

.qc__or{
  margin-top:16px;
  font-size:.88rem; color:var(--ink-2);
}
.qc__or b{ color:var(--ink); }

.qc__form{
  display:flex; align-items:center; gap:8px;
  margin-top:10px;
  padding:5px;
  border-radius:100px;
  background:var(--bg-alt);
  border:1px solid var(--hair);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.qc__form:focus-within{ border-color:var(--ember-line); box-shadow:0 0 0 3px rgba(255,128,21,.14); }

.qc__inp{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent;
  padding:10px 4px 10px 14px;
  font-family:var(--f-body); font-size:.94rem; color:var(--ink);
}
.qc__inp::placeholder{ color:var(--ink-3); }
.qc__inp:focus{ outline:none; }

.qc__go{
  flex:none;
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 18px;
  border:0; border-radius:100px; cursor:pointer;
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  color:#fff;
  font-family:var(--f-display); font-weight:700; font-size:.9rem; line-height:1;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.qc__go svg{ width:15px; height:15px; transition:transform .2s var(--ease); }
.qc__go:hover{ transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(255,103,0,.9); }
.qc__go:hover svg{ transform:translateX(2px); }

.qc__err{
  margin-top:8px;
  font-size:.78rem; font-weight:600; color:var(--ember-hot);
}

.qc__fine{
  margin-top:12px;
  font-size:.7rem; line-height:1.45; color:var(--ink-3);
}
.qc__fine u{ text-decoration-color:var(--ember-line); text-underline-offset:2px; }
.qc__fine a{
  color:var(--ember-hot); font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--ember-line);
  text-underline-offset:2px;
}
.qc__fine a:hover{ text-decoration-color:var(--ember-hot); }

.qc__call{
  margin-top:16px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.qc__tel{
  display:block; margin-top:2px;
  font-family:var(--f-display); font-weight:800;
  font-size:1.6rem; letter-spacing:-.01em; color:var(--ink);
  transition:color .2s var(--ease);
}
.qc__tel:hover{ color:var(--ember-hot); }

/* faixas sob a imagem ------------------------------------------------------ */
.hero__below{ min-height:calc(var(--card-lift) + 44px); }

.hero__strip{ background:var(--bg-alt); }
.hero__offer{ background:var(--bg); }

.hero__strip-in{
  text-align:center;
  padding-block:26px;
  padding-right:calc(var(--card-w) + 48px);
}

.hero__claim{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.25rem, 2.05vw, 1.7rem);
  line-height:1.26;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:46ch;
  margin-inline:auto;
}

.hero__offer-ttl{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.45rem, 2.45vw, 2rem);
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--ember-hot);
}
.hero__offer-ttl span{ font-size:.7em; vertical-align:super; }
.hero__offer-sub{
  margin-top:4px;
  font-size:clamp(1rem, 1.15vw, 1.1rem); color:var(--ink-3);
  max-width:52ch; margin-inline:auto;
}

/* --------------------------------------------------------------------------
   8. SLOT DE ANIMAÇÃO — placeholder para o motion designer
   -------------------------------------------------------------------------- */
.anim{
  position:relative;
  border-radius:25px;
  border:2px dashed var(--ember-line);
  background:
    repeating-linear-gradient(0deg, rgba(40,40,40,.045) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(40,40,40,.045) 0 1px, transparent 1px 28px),
    radial-gradient(520px 300px at 50% 0%, rgba(255,128,21,.07), transparent 70%),
    #FCFCFC;
  min-height:300px;
  display:flex; align-items:center; justify-content:center;
  padding:44px 34px;
  overflow:hidden;
}
.anim::before,
.anim::after{
  content:"";
  position:absolute; width:16px; height:16px;
  border:2px solid var(--ember);
  opacity:.55;
}
.anim::before{ top:16px; left:16px; border-right:0; border-bottom:0; border-radius:5px 0 0 0; }
.anim::after{ bottom:16px; right:16px; border-left:0; border-top:0; border-radius:0 0 5px 0; }

.anim--tall{ min-height:480px; }
.anim--wide{ min-height:420px; }
.anim--short{ min-height:230px; margin-top:36px; }

.anim__badge{
  position:absolute; top:16px; right:16px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase;
  padding:6px 13px; border-radius:100px;
  background:var(--ember-soft); color:var(--ember-hot);
  border:1px solid var(--ember-line);
}

.anim__inner{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center; max-width:52ch;
}

.anim__icon{
  width:62px; height:62px; flex:none;
  display:grid; place-items:center;
  border-radius:20px;
  background:linear-gradient(160deg,#FF9D41 0%,#FF690E 100%);
  color:#fff;
  box-shadow:0 14px 28px -18px rgba(255,103,0,1);
}
.anim__icon svg{ width:30px; height:30px; }

.anim__title{
  font-family:var(--f-display); font-weight:800; font-size:1.18rem;
  line-height:1.25; color:var(--ink); letter-spacing:-.01em;
}
.anim__desc{ font-size:.94rem; color:var(--ink-2); }

.anim__beats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:4px;
}
.anim__beats li{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase;
  padding:7px 13px; border-radius:100px;
  background:#fff; color:var(--ink-2);
  border:1px solid var(--hair);
}

/* --- slot preenchido: vídeo no lugar do placeholder --------------------- */
.anim.is-live{
  display:block;
  min-height:0;
  padding:0;
  border:1px solid var(--hair);
  border-radius:25px;
  background:#FAFAFA;                 /* mesma cor do fundo do vídeo */
  box-shadow:var(--sh-lg);
}
.anim.is-live::before,
.anim.is-live::after{ display:none; }

.anim__video{
  display:block;
  width:100%;
  aspect-ratio:864 / 496;
  object-fit:cover;
  background:#FAFAFA;
  border-radius:24px 24px 0 0;
}

.anim__cap{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding:14px 22px;
  border-top:1px solid var(--hair);
}
.anim__cap-txt{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.anim__cap-txt i{ color:var(--ember); font-style:normal; }

.vbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:100px;
  background:#fff; border:1px solid var(--hair);
  color:var(--ink-2);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.vbtn:hover{ border-color:var(--ember-line); color:var(--ember-hot); }
.vbtn svg{ width:12px; height:12px; flex:none; }
.vbtn__play{ display:none; }
.vbtn[data-playing="false"] .vbtn__play{ display:block; }
.vbtn[data-playing="false"] .vbtn__pause{ display:none; }

/* variante escura */
.anim--dark{
  border-color:rgba(255,128,21,.35);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
    radial-gradient(520px 300px at 50% 0%, rgba(255,128,21,.12), transparent 70%),
    #232323;
}
.anim--dark .anim__badge{
  background:rgba(255,128,21,.14); color:var(--ember-lit);
  border-color:rgba(255,128,21,.32);
}
.anim--dark .anim__title{ color:var(--on-dark); }
.anim--dark .anim__desc{ color:var(--on-dark-2); }
.anim--dark .anim__beats li{
  background:rgba(255,255,255,.06); color:var(--on-dark-2);
  border-color:var(--dark-line);
}

/* --------------------------------------------------------------------------
   8a. VÍDEO INSTITUCIONAL — texto à esquerda, player à direita
   O player não baixa nada até o clique (preload="none"): o que aparece antes
   é só o poster, e o overlay some assim que o vídeo começa.
   -------------------------------------------------------------------------- */
.vfeat{
  display:grid; grid-template-columns:1fr 1.12fr;
  gap:64px; align-items:center;
}

/* título e lede um degrau acima da escala padrão nesta seção */
.vfeat .h2{ font-size:clamp(2.15rem, 3.9vw, 3rem); }
.vfeat__lede{
  margin-top:20px;
  font-size:clamp(1.18rem, 1.35vw, 1.3rem);
  line-height:1.55;
}
.vfeat__lede-short{ display:none; }
.apptit__short{ display:none; }

.vfeat__player{
  position:relative;
  /* mesmo recorte diagonal das fotos dos pilares */
  border-radius:26px 6px 58px 6px;
  overflow:hidden;
  background:#0E0E10;
  box-shadow:var(--sh-lg);
}

.vfeat__video{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
}
/* esconde o botão de tela cheia dos controles nativos (Chrome/Edge/Safari) */
.vfeat__video::-webkit-media-controls-fullscreen-button{ display:none; }

.vfeat__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  border:0; padding:0;
  background:rgba(10,10,12,.3);
  color:#fff; cursor:pointer;
  transition:background .25s var(--ease);
}
.vfeat__play:hover{ background:rgba(10,10,12,.44); }
.vfeat__play[hidden]{ display:none; }

/* botão no formato do YouTube, mas no laranja da marca — o triângulo já vem
   centrado no viewBox, sem acerto óptico na mão */
.vfeat__play-ico{
  width:86px; height:auto; display:block;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));
  transition:transform .25s var(--ease);
}
.vfeat__play-bg{ fill:var(--ember-hot); transition:fill .25s var(--ease); }
.vfeat__play:hover .vfeat__play-ico{ transform:scale(1.07); }
.vfeat__play:hover .vfeat__play-bg{ fill:var(--ember); }

.vfeat__play-lbl{
  font-family:var(--f-display); font-weight:700; font-size:1.02rem;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}

/* --------------------------------------------------------------------------
   8b. PILARES — ENCONTRAR / PREVENIR / PROTEGER
   Cards sem caixa: imagem arredondada e texto direto sobre o fundo branco.
   Fica logo acima da seção 02 e divide o mesmo fundo; a hairline no pé é o
   que separa os dois blocos sem trocar a cor de fundo.
   -------------------------------------------------------------------------- */
.sec--pilares{ border-bottom:1px solid var(--hair); padding-block:72px; }

.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.pillars__dots{ display:none; }

.pillar{ display:flex; flex-direction:column; }

.pillar__img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:0;
  background:var(--bg-alt);
}
/* o recorte do anexo: só as pontas externas da fileira são arredondadas —
   a primeira foto em cima à esquerda, a última embaixo à direita, e a do
   meio fica reta nos quatro cantos */
.pillar:first-child .pillar__img{ border-radius:56px 0 0 0; }
.pillar:last-child  .pillar__img{ border-radius:0 0 56px 0; }

.pillar__body{ padding-top:16px; }

.pillar__t{
  font-family:var(--f-display); font-weight:800; font-size:2rem;
  line-height:1.2; letter-spacing:-.01em; color:var(--ink);
}
.pillar__s{
  margin-top:2px; font-size:1.15rem; line-height:1.45; color:var(--ink-2);
  min-height:2.9em;
}

.pillar__list{ display:grid; gap:10px; margin-top:8px; }

.pillar__i{ position:relative; padding-left:40px; }
.pillar__i::before{
  content:"";
  position:absolute; left:5px; top:.42em;
  width:14px; height:14px;
  border-top:3.4px solid var(--ember);
  border-right:3.4px solid var(--ember);
  transform:rotate(45deg);
}
.pillar__k{
  display:block;
  font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ember); margin-bottom:7px;
}
.pillar__v{ display:block; font-size:1.1rem; line-height:1.55; color:var(--ink-2); }
/* --------------------------------------------------------------------------
   8c. TOTEM ANOTADO — a coluna e os três pontos, tudo à mostra
   Uma peça só e parada: o recorte do totem no centro, os textos abrindo dos
   dois lados e a linha de chamada ligando cada frase ao seu ponto. Sem
   rolagem presa, sem JS — o que se vê é o que está no HTML.

   Cada pino traz --x/--y em percentual do RECORTE (img/totem/totem-*.webp,
   383×2136), nunca da arte original — o Photoroom deixava ~740px transparentes
   de cada lado, e o recorte é o que faz o percentual bater com a peça.
   Os textos abrem todos na mesma vertical de cada lado, então é a linha de
   chamada que tem comprimento variável, não o bloco de texto.
   Até 767px não há largura para os dois lados: a coluna fica no alto e os
   pontos viram uma lista numerada — bloco 24.
   -------------------------------------------------------------------------- */
.tot{
  --pole-h: min(80vh, 900px);
  --bub-w: 268px;
  --bub-gap: 30px;

  display:flex;
  justify-content:center;
}

.tot__fig{
  margin:0;
  display:flex; justify-content:center;
  /* os textos saem para fora da coluna: a figura reserva o espaço dos dois
     lados para que nada encoste na borda do .wrap */
  padding-inline:calc(var(--bub-w) + var(--bub-gap));
}

.tot__stage{
  position:relative;
  flex:none;
  height:var(--pole-h);
  aspect-ratio:383 / 2136;   /* o mesmo do recorte: os % dos pinos dependem disso */
}
.tot__stage::before{        /* brilho quente atrás da coluna, preso a ela */
  content:"";
  position:absolute; left:50%; top:3%;
  width:min(260%, 340px); height:92%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,128,21,.10), transparent 72%);
  z-index:0;
}
.tot__img{
  position:relative; z-index:1;
  width:100%; height:100%;
  /* o recorte não traz sombra: ela vem daqui e acompanha o contorno */
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.20)) drop-shadow(0 3px 7px rgba(0,0,0,.08));
}

.tot__pins{ position:absolute; inset:0; z-index:2; margin:0; padding:0; list-style:none; }

/* o pino atravessa a coluna para que os % internos caiam sobre a imagem */
.tpin{
  /* --bico diz em que altura do bloco de texto a linha de chamada encosta:
     22% cai na altura do título, que é onde a leitura começa. No ponto da base
     o HTML sobe esse valor para o texto ficar acima da linha */
  --bico:22%;
  position:absolute; top:var(--y); left:0; right:0; height:0;
}

/* bolinha: marca o ponto sobre a peça, laranja com anel branco em volta */
.tpin__dot{
  position:absolute; left:var(--x); top:0;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%;
  background:var(--ember);
  border:2px solid #fff;
  box-shadow:0 0 0 4px rgba(255,128,21,.16), 0 1px 5px rgba(0,0,0,.18);
}

/* linha de chamada: do pino até a vertical dos textos daquele lado */
.tpin__line{
  position:absolute; top:0;
  height:2px; margin-top:-1px;
}
.tpin--r .tpin__line{
  left:var(--x);
  width:calc(100% - var(--x) + var(--bub-gap));
  background:linear-gradient(90deg, var(--ember), var(--ember-line));
}
.tpin--l .tpin__line{
  right:calc(100% - var(--x));
  width:calc(var(--x) + var(--bub-gap));
  background:linear-gradient(270deg, var(--ember), var(--ember-line));
}

/* o texto vive direto no fundo da faixa: sem cartão, sem sombra. O que amarra
   cada frase ao ponto é a linha de chamada, que encosta na altura do título
   (--bico), e o espaço vazio em volta. */
.tpin__bubble{
  position:absolute; top:0;
  width:var(--bub-w);
  /* título e frase centrados um sobre o outro: sem cartão, é o eixo do
     bloco que segura a leitura */
  text-align:center;
  transform:translateY(calc(-1 * var(--bico)));
}
.tpin--r .tpin__bubble{ left:calc(100% + var(--bub-gap)); }
.tpin--l .tpin__bubble{ right:calc(100% + var(--bub-gap)); }

.tpin__t{
  display:block;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.45rem, 1.9vw, 1.85rem);
  line-height:1.1; letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
.tpin__d{
  display:block; margin-top:12px;
  font-size:1.06rem; line-height:1.6; color:var(--ink-2);
  /* sem cartão para segurar a mancha, o texto se equilibra sozinho:
     evita a última linha órfã em quem suporta */
  text-wrap:balance;
}

/* ---- TESTE: faixa do totem em laranja -------------------------------------
   Bloco isolado de propósito — apagar daqui até o comentário de fim devolve a
   faixa ao cinza, sem sobras.

   Fundo em quatro camadas, de baixo para cima: o degradê laranja vivo da
   marca, um clarão quente atrás da coluna, uma vinheta discreta nas bordas
   (é onde os textos ficam) e listras diagonais em branco a 6%.

   A anotação é branca sobre laranja vivo por decisão de projeto: dá ~2,6:1,
   abaixo do mínimo de acessibilidade. A vinheta e a sombra do texto são o que
   sustentam a leitura — sem elas o branco esfarela no sol do celular. Se um
   dia a legibilidade pesar mais que o tom, fechar o degradê para
   #CB4A0B → #9E3208 devolve o AA sem mexer em mais nada. */
.sec--totem{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.06) 0 2px, transparent 2px 15px),
    radial-gradient(1200px 640px at 50% 50%,
      transparent 52%, rgba(122,42,2,.13) 100%),
    radial-gradient(560px 480px at 50% 44%,
      rgba(255,190,120,.18), transparent 68%),
    linear-gradient(180deg, #FF9D41 0%, #FF7A0D 46%, #F26A0C 100%);
}

.sec--totem .tpin__t,
.sec--totem .tpin__d{
  color:#fff;
  /* a sombra é o que segura o branco sobre o laranja: quente e curta, para
     marcar o contorno da letra sem virar borrão cinza */
  text-shadow:0 1px 2px rgba(110,36,0,.45), 0 2px 16px rgba(110,36,0,.3);
}

/* o halo preso à coluna some: quem faz a luz agora é o clarão do fundo, e dois
   brilhos sobrepostos deixavam um borrão claro no meio da faixa */
.sec--totem .tot__stage::before{ background:none; }

.sec--totem .tpin__dot{
  background:#fff;
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 4px rgba(255,255,255,.2), 0 1px 5px rgba(110,36,0,.5);
}
.sec--totem .tpin__dot::after{ border-color:rgba(255,255,255,.9); }
.sec--totem .tpin--r .tpin__line{ background:linear-gradient(90deg, #fff, rgba(255,255,255,.24)); }
.sec--totem .tpin--l .tpin__line{ background:linear-gradient(270deg, #fff, rgba(255,255,255,.24)); }
/* ---- fim do teste --------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. PEÇAS DA CÂMERA (seção 02)
   -------------------------------------------------------------------------- */
.parts{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
  margin-top:28px;
}
.part{
  background:#fff;
  border:1px solid var(--hair);
  border-radius:20px;
  padding:22px 20px;
  box-shadow:var(--sh-md);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.part:hover{ transform:translateY(-4px); border-color:var(--ember-line); box-shadow:var(--sh-lg); }
.part__key{
  display:block;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ember); margin-bottom:8px;
}
.part__val{ font-size:.95rem; color:var(--ink); font-weight:600; line-height:1.35; }

/* --------------------------------------------------------------------------
   10. PASSOS (seção 03)
   -------------------------------------------------------------------------- */
.steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
  position:relative;
}
.steps::before{
  content:""; position:absolute; top:34px; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg,var(--ember-line),var(--ember),var(--ember-line));
  opacity:.5;
}
.step{
  background:#fff;
  border:1px solid var(--hair);
  border-radius:25px;
  padding:26px 22px 28px;
  box-shadow:var(--sh-md);
  position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.step__n{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:14px;
  background:linear-gradient(160deg,#FF9D41 0%,#FF690E 100%);
  color:#fff; font-family:var(--f-mono); font-weight:600; font-size:.9rem;
  box-shadow:0 12px 22px -16px rgba(255,103,0,1);
  margin-bottom:16px;
}
.step__t{
  font-family:var(--f-display); font-weight:800; font-size:1.1rem;
  color:var(--ink); margin-bottom:8px;
}
.step__d{ font-size:.9rem; color:var(--ink-2); line-height:1.5; }

.flow{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  margin-top:40px;
}
.flow__i{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase;
  padding:11px 20px; border-radius:100px;
  background:#fff; border:1px solid var(--hair); color:var(--ink-2);
  box-shadow:var(--sh-sm);
}
.flow__i--hot{
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  color:#fff; border-color:transparent;
  box-shadow:var(--sh-glow);
}
.flow__a{ color:var(--ember); font-weight:700; }
.flow--onDark .flow__i{
  background:rgba(255,255,255,.06); border-color:var(--dark-line);
  color:var(--on-dark-2); box-shadow:none;
}
.flow--onDark .flow__i--hot{
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  color:#fff; border-color:transparent;
}

/* --------------------------------------------------------------------------
   11. ESCADA DA REDE (seção 05)
   -------------------------------------------------------------------------- */
.ladder{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
  margin-top:28px;
}
.ladder li{
  display:flex; flex-direction:column; gap:2px;
  padding:20px 18px;
  border-radius:20px;
  background:var(--bg-alt);
  border:1px solid var(--hair);
}
.ladder b{
  font-family:var(--f-display); font-weight:800; font-size:1.5rem; color:var(--ink);
  line-height:1;
}
.ladder span{ font-size:.8rem; color:var(--ink-3); }
.ladder .is-end{
  background:linear-gradient(160deg,#FF9D41 0%,#FF690E 100%);
  border-color:transparent;
  box-shadow:0 16px 32px -22px rgba(255,103,0,1);
}
.ladder .is-end b,
.ladder .is-end span{ color:#fff; }

/* --------------------------------------------------------------------------
   12. TECNOLOGIA (seção 06)
   -------------------------------------------------------------------------- */
.tcard{
  background:#fff;
  border:1px solid var(--hair);
  border-radius:25px;
  padding:30px 26px;
  box-shadow:var(--sh-md);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.tcard:hover{ transform:translateY(-6px); border-color:var(--ember-line); box-shadow:var(--sh-lg); }
.tcard__ico{
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:18px;
  background:var(--ember-soft); color:var(--ember-hot);
  border:1px solid var(--ember-line);
  margin-bottom:18px;
}
.tcard__ico svg{ width:26px; height:26px; }
.tcard__t{
  font-family:var(--f-display); font-weight:800; font-size:1.18rem;
  color:var(--ink); margin-bottom:10px;
}
.tcard__d{ font-size:.93rem; color:var(--ink-2); }
.tcard__more{
  font-size:.85rem; color:var(--ink-3);
  margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--hair);
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .25s var(--ease), max-height .3s var(--ease), margin-top .25s var(--ease), padding-top .25s var(--ease);
}
.tcard:hover .tcard__more,
.tcard:focus-within .tcard__more{ opacity:1; max-height:120px; }

.mods{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
  margin-top:20px;
}
.mod{
  display:flex; flex-direction:column; gap:4px;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--hair);
}
.mod__k{
  font-family:var(--f-display); font-weight:800; color:var(--ink); font-size:1rem;
}
.mod__v{ font-size:.82rem; color:var(--ink-3); line-height:1.35; }

/* --------------------------------------------------------------------------
   13. APLICATIVO (seção 02)
   Duas colunas: o par de aparelhos · a lista de benefícios.
   Os aparelhos são recortes em WebP (img/app/celular-*.webp); o slot de
   animação continua marcado na <figure> para quem for evoluir a entrada.
   -------------------------------------------------------------------------- */
.appgrid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:56px;
  align-items:center;
}

/* coluna 1 — os dois aparelhos ---------------------------------------------
   Larguras e espaço entre eles em % de `.appphone`: o par inteiro escala
   mudando só o max-width do conjunto.
   -------------------------------------------------------------------------- */
.appphone{
  position:relative;
  margin:0 auto;
  width:100%; max-width:560px;
  display:flex; align-items:flex-end; justify-content:center; gap:5%;
}
.appphone::before{        /* brilho quente atrás do aparelho, preso a ele */
  content:"";
  position:absolute; top:8%; left:50%;
  width:min(112%, 560px); height:86%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,128,21,.16), transparent 72%);
  z-index:0;
}
.appphone__img{
  position:relative; z-index:2;
  display:block; width:45.5%; height:auto;
  /* o recorte não traz sombra: ela vem daqui e acompanha o contorno */
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.22)) drop-shadow(0 5px 10px rgba(0,0,0,.09));
}
.appphone__img--flat{
  z-index:1;
  width:48.5%;
  margin:0 0 3%;   /* assenta um pouco mais alto que o angulado */
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.18)) drop-shadow(0 4px 9px rgba(0,0,0,.08));
}

/* coluna 2 — benefícios ---------------------------------------------------- */
.appben__t{
  font-family:var(--f-display); font-weight:800;
  font-size:1.42rem; line-height:1.25; color:var(--ink);
  margin:0 0 26px;
}
.appben__list{ list-style:none; margin:0; padding:0; display:grid; gap:26px; }
.abn{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.abn__ico{
  display:grid; place-items:center;
  width:70px; height:70px; border-radius:50%;
  border:2.5px solid var(--ink-2);
  background:#fff;
  color:var(--ink-2);
}
.abn__ico svg{ width:34px; height:34px; }
.abn__ico--txt{
  font-family:var(--f-display); font-weight:800;
  font-size:1.32rem; letter-spacing:-.01em;
}
.abn__d{ margin:0; max-width:46ch; font-size:1.09rem; line-height:1.55; color:var(--ink-2); }

/* --------------------------------------------------------------------------
   14. INCLUSOS (seção 08)
   -------------------------------------------------------------------------- */
.icard{
  display:flex; flex-direction:column; gap:8px;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:25px;
  padding:28px 26px;
  box-shadow:var(--sh-md);
  position:relative;
  padding-left:64px;
}
.icard::before{
  content:""; position:absolute; left:26px; top:32px;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(160deg,#FF9D41,#FF690E);
}
.icard::after{
  content:""; position:absolute; left:33px; top:39px;
  width:9px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.icard b{ font-family:var(--f-display); font-size:1.14rem; font-weight:800; }
.icard span{ font-size:.92rem; color:var(--ink-2); }

/* --------------------------------------------------------------------------
   15. CALCULADORA (seção 09)
   -------------------------------------------------------------------------- */
.calc{
  display:grid; grid-template-columns:1fr .8fr; gap:0;
  border-radius:25px; overflow:hidden;
  border:1px solid var(--hair);
  box-shadow:var(--sh-lg);
  background:#fff;
}
.calc__controls{ padding:40px; display:grid; gap:34px; align-content:start; }

.field__lbl{
  display:block;
  font-family:var(--f-display); font-weight:700; font-size:1.02rem;
  color:var(--ink); margin-bottom:14px;
}
.field__hint{ font-size:.85rem; color:var(--ink-3); margin-top:12px; }

.stepper{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px; border-radius:100px;
  background:var(--bg-alt); border:1px solid var(--hair);
}
.stepper__b{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--hair); background:#fff;
  color:var(--ember-hot); font-size:1.4rem; font-weight:700; line-height:1;
  cursor:pointer;
  transition:background-color .2s var(--ease), transform .15s var(--ease), color .2s var(--ease);
}
.stepper__b:hover{ background:var(--ember); color:#fff; border-color:transparent; }
.stepper__b:active{ transform:scale(.94); }
.stepper__in{
  width:96px; height:44px; border:0; background:transparent;
  text-align:center;
  font-family:var(--f-display); font-weight:800; font-size:1.4rem; color:var(--ink);
  -moz-appearance:textfield;
}
.stepper__in::-webkit-outer-spin-button,
.stepper__in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; border-radius:100px;
  background:linear-gradient(90deg,var(--ember) 0%,var(--ember) var(--fill,28%),#E4E4E4 var(--fill,28%),#E4E4E4 100%);
  cursor:pointer;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:3px solid var(--ember);
  box-shadow:var(--sh-md); cursor:grab;
}
.range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:3px solid var(--ember); box-shadow:var(--sh-md);
}

.calcsteps{
  display:grid; gap:14px;
  margin-top:6px; padding-top:26px;
  border-top:1px dashed var(--hair);
  counter-reset:cs;
}
.calcsteps li{
  display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:baseline;
  font-size:.9rem; color:var(--ink-3);
}
.calcsteps li::before{
  counter-increment:cs;
  content:counter(cs,decimal-leading-zero);
  font-family:var(--f-mono); font-size:.72rem; color:var(--ember);
}
.calcsteps b{ grid-column:2; font-size:.95rem; }
.calcsteps span{ grid-column:2; }

.calc__out{
  padding:40px;
  color:var(--on-dark-2);
  display:grid; align-content:start; gap:18px;
  background-color:#1B1B1B;
  background-image:
    radial-gradient(420px 260px at 100% 0%, rgba(255,128,21,.18), transparent 70%),
    linear-gradient(160deg,#242424,#161616);
}
.calc__row{ display:grid; gap:4px; }
.calc__row--hero{
  padding:18px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--dark-line);
}
.calc__k{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2); }
.calc__k b{ color:var(--ember-lit); }
.calc__v{
  font-family:var(--f-display); font-weight:800; font-size:1.6rem; color:#fff;
  line-height:1.1;
}
.calc__v small{ font-size:.9rem; font-weight:500; color:var(--on-dark-2); margin-left:4px; }
.calc__v--hero{
  font-size:3rem;
  background:linear-gradient(180deg,#FFB169 0%,#FF7509 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.calc__sub{ font-size:.82rem; color:var(--on-dark-2); opacity:.75; }
.calc__hr{ border:0; border-top:1px solid var(--dark-line); margin:6px 0; }
.calc__note{ font-size:.8rem; color:var(--on-dark-2); opacity:.7; line-height:1.5; }
.calc__out .btn{ margin-top:6px; }

/* --------------------------------------------------------------------------
   16. PLANO (seção 10)
   -------------------------------------------------------------------------- */
.plan{
  max-width:560px; margin-inline:auto;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:35px;
  padding:44px 40px;
  box-shadow:var(--sh-lg);
  position:relative;
  overflow:hidden;
}
.plan::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg,#F9B62E,#FF8015,#EA5A0B);
}
.plan__head{ text-align:center; padding-bottom:26px; border-bottom:1px dashed var(--hair); }
.plan__name{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ember);
}
.plan__price{
  font-family:var(--f-display); font-weight:800; font-size:4rem; line-height:1;
  color:var(--ink); margin:12px 0 6px; letter-spacing:-.03em;
}
.plan__price small{ font-size:1.5rem; vertical-align:super; margin-right:4px; color:var(--ink-2); }
.plan__price span{ font-size:1.1rem; font-weight:500; color:var(--ink-3); }
.plan__sub{ font-size:.9rem; color:var(--ink-3); }

.plan__list{ display:grid; gap:14px; margin:28px 0 32px; }
.plan__list li{ position:relative; padding-left:32px; font-size:.98rem; }
.plan__list li::before{
  content:""; position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(160deg,#FF9D41,#FF690E);
}
.plan__list li::after{
  content:""; position:absolute; left:6px; top:8px;
  width:8px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.plan__foot{ text-align:center; font-size:.84rem; color:var(--ink-3); margin-top:18px; }

/* --------------------------------------------------------------------------
   17. DADOS (seção 11)
   -------------------------------------------------------------------------- */
.dcard{
  background:#fff; border:1px solid var(--hair); border-radius:25px;
  padding:28px 26px; box-shadow:var(--sh-md);
  border-top:3px solid var(--ember);
}
.dcard__t{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ember-hot); margin-bottom:10px;
}
.dcard__d{ font-size:.93rem; color:var(--ink-2); }

/* --------------------------------------------------------------------------
   18. COMPARATIVO
   -------------------------------------------------------------------------- */
.tablewrap{ overflow-x:auto; border-radius:25px; box-shadow:var(--sh-md); background:#fff; }
.cmp{ width:100%; border-collapse:collapse; min-width:520px; }
.cmp th{
  text-align:left; padding:22px 26px;
  font-family:var(--f-display); font-weight:800; font-size:1.05rem; color:var(--ink);
  border-bottom:1px solid var(--hair);
  background:#fff;
}
.cmp__hot{
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%) !important;
  color:#fff !important;
}
.cmp td{
  padding:18px 26px; font-size:.95rem; color:var(--ink-2);
  border-bottom:1px solid var(--hair);
}
.cmp tr:last-child td{ border-bottom:0; }
.cmp td:last-child{ background:var(--ember-soft); color:var(--ink); font-weight:500; }

/* --------------------------------------------------------------------------
   19. FECHAMENTO (seção 12)
   Última seção antes do rodapé: convite direto para fechar. Duas colunas —
   o mascote solto à esquerda, convite e os três passos à direita, cada um
   com o ícone dentro de um anel laranja.
   -------------------------------------------------------------------------- */
.fin{
  position:relative;
  overflow:hidden;
  background:var(--bg-alt);   /* mesmo fundo da seção do totem */
}
.fin::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ember-line),transparent);
}

.fin__grid{
  display:grid;
  grid-template-columns:.74fr 1fr;
  gap:64px;
  align-items:center;
}

/* imagem — sem moldura, só o mascote. Entra depois no HTML (a leitura começa
   pelo título) mas fica à esquerda no desktop, como no layout de referência */
.fin__media{
  order:-1;
  margin:0;
  display:grid;
  justify-items:center;
}
.fin__media img{
  width:100%;
  max-width:440px;
}

/* convite ---------------------------------------------------------------- */
.fin__hd{ margin-bottom:36px; }
.fin .h2{ font-size:clamp(2.1rem, 3.8vw, 2.9rem); }
.fin__lede{
  margin-top:20px;
  font-size:1.24rem;
  line-height:1.55;
  color:var(--ink-2);
  max-width:50ch;
}

/* o que o Smart Paraná entrega — bolinha de gradiente laranja com o
   pictograma branco, o mesmo padrão dos ícones da seção do aplicativo
   (.abn__ico) --------------------------------------------------------------- */
.fin__list{ display:grid; gap:26px; }
.fin__item{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; }

.fin__ico{
  flex:none;
  display:grid; place-items:center;
  width:70px; height:70px; border-radius:50%;
  border:2.5px solid var(--ink-2);
  background:transparent;   /* no fundo cinza o anel fica anel; o #fff virava um disco */
  color:var(--ink-2);
}
.fin__ico svg{ width:34px; height:34px; }

.fin__it{
  font-size:1.18rem;
  line-height:1.5;
  color:var(--ink-2);
  max-width:56ch;
}

/* --------------------------------------------------------------------------
   20. FAQ TERMINAL (seção 13)
   -------------------------------------------------------------------------- */
.term{
  border-radius:20px; overflow:hidden;
  border:1px solid var(--dark-line);
  background:#151517;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8);
}
.term__bar{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--dark-line);
}
.term__dots{ display:flex; gap:6px; }
.term__dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); }
.term__dots i:first-child{ background:var(--ember); }
.term__path{
  font-family:var(--f-mono); font-size:.74rem; color:var(--on-dark-2); letter-spacing:.06em;
}
.term__body{ padding:8px 0; }

.q{ border-bottom:1px solid var(--dark-line); }
.q:last-child{ border-bottom:0; }
.q summary{
  display:flex; align-items:center; gap:10px;
  padding:18px 24px;
  cursor:pointer;
  font-family:var(--f-mono); font-size:.92rem; color:var(--on-dark);
  list-style:none;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.q summary::-webkit-details-marker{ display:none; }
.q summary:hover{ background:rgba(255,255,255,.04); color:var(--ember-lit); }
.q__p{ color:var(--ember); font-weight:600; }
.q[open] summary{ color:var(--ember-lit); }
.q[open] .q__p::after{ content:"_"; animation:blink 1.1s steps(1) infinite; }
.q__a{
  padding:0 24px 22px 46px;
  font-size:.95rem; color:var(--on-dark-2); line-height:1.6;
}

@keyframes blink{ 50%{ opacity:0; } }

/* --------------------------------------------------------------------------
   21. CTA FINAL (seção 14)
   -------------------------------------------------------------------------- */
.sec--cta{ text-align:center; }
.cta{ margin-top:48px; display:grid; justify-items:center; gap:18px; }
.cta .lede{ margin:0 auto; }
.cta__note{ font-size:.85rem; color:var(--on-dark-2); opacity:.7; }

/* --------------------------------------------------------------------------
   21b. MAPA (acima do footer)
   -------------------------------------------------------------------------- */
.map{
  width:100%;
  background:var(--bg-alt);
  line-height:0;
}
.map__frame{
  display:block;
  width:100%;
  height:220px;
  border:0;
  filter:saturate(.92);
}

/* --------------------------------------------------------------------------
   22. FOOTER
   -------------------------------------------------------------------------- */
.ft{ background:#141416; color:var(--on-dark-2); padding-top:64px; }
.ft__in{
  display:grid; grid-template-columns:1.5fr 1fr 1.4fr; gap:44px;
  padding-bottom:48px;
}
.ft__brand-logo{ display:inline-block; line-height:0; }
.ft__brand img{ width:170px; }
.ft__tag{ margin-top:16px; font-size:.92rem; max-width:34ch; }
.ft__social{ display:flex; gap:12px; margin-top:4px; }
.ft__social a{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--dark-line);
  color:#fff; transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.ft__social a:hover{ color:#141416; border-color:var(--ember-lit); background:var(--ember-lit); }
.ft__social svg{ width:19px; height:19px; }

.ft__lbl{
  display:block;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;
}
.ft__links{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ft__links a{
  color:var(--on-dark-2); font-size:.95rem; text-decoration:none;
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.ft__links a:hover{ color:var(--ember-lit); padding-left:6px; }

.ft__contact{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.ft__contact li{ display:flex; align-items:flex-start; gap:10px; }
.ft__contact a{ color:#fff; font-size:.95rem; transition:color .2s var(--ease); }
.ft__contact a:hover{ color:var(--ember-lit); }
.ft__addr a{ font-weight:400; color:var(--on-dark-2); line-height:1.5; }
.ft__ico{
  flex:none; display:grid; place-items:center;
  width:22px; height:22px; margin-top:1px;
  color:var(--ember-lit);
}
.ft__ico svg{ width:20px; height:20px; }

.ft__bar{ border-top:1px solid var(--dark-line); padding:22px 0; }
.ft__bar-in{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:.78rem; color:var(--ink-3);
}
.ft__legal{ display:flex; align-items:center; gap:12px; }
.ft__legal a{
  color:var(--on-dark-2);
  text-decoration:underline;
  text-decoration-color:var(--dark-line);
  text-underline-offset:2px;
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.ft__legal a:hover{ color:var(--ember-lit); text-decoration-color:var(--ember-lit); }

/* --------------------------------------------------------------------------
   23. BOTÃO FLUTUANTE WHATSAPP
   -------------------------------------------------------------------------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.8);
  transition:transform .22s var(--ease);
}
.wa svg{ width:30px; height:30px; }
.wa:hover{ transform:scale(1.06); }

/* --------------------------------------------------------------------------
   24. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .sec{ padding:80px 0; }
  .sec--pilares{ padding-block:56px; }
  .hdr__nav{ display:none; }

  /* banner: o card sai da flutuação e entra no fluxo, sob a imagem --------- */
  .hero{ --media-h:clamp(400px, 62vw, 540px); }
  .hero__copy{ max-width:min(78%, 560px); }
  .qc{
    position:relative; z-index:6;
    top:auto; right:auto;
    width:min(520px, calc(100% - 36px));
    margin:-60px auto 0;
  }
  .hero__below{ min-height:0; }
  .hero__strip-in{ padding-right:24px; padding-block:24px; }
  .hero__strip{ margin-top:26px; }

  .grid--split{ grid-template-columns:1fr; gap:40px; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .vfeat{ grid-template-columns:1fr; gap:36px; }
  .vfeat__player{ order:-1; }

  /* uma coluna, card deitado — evita o terceiro card órfão em grade de 2 */
  .pillars{ grid-template-columns:1fr; gap:32px; }
  .pillar{ flex-direction:row; gap:30px; align-items:flex-start; }
  .pillar__img{ width:42%; flex:none; aspect-ratio:4/3; }
  .pillar__body{ padding-top:0; }
  .pillar__s{ min-height:0; }

  /* totem anotado: a coluna encolhe e os textos apertam, mas continuam nos
     dois lados — abaixo de 768px é que a figura perde a largura e o texto de
     cada ponto vira item de lista (ver o bloco seguinte). --------------------------- */
  .tot{
    --pole-h: min(76vh, 760px);
    --bub-w: 264px;
    --bub-gap: 30px;
  }
  .tot__img{ filter:drop-shadow(0 16px 22px rgba(0,0,0,.18)); }
  .tpin__t{ font-size:1.3rem; }
  .tpin__d{ font-size:1rem; margin-top:10px; }
  .parts{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps::before{ display:none; }
  .mods{ grid-template-columns:repeat(3,1fr); }
  .ladder{ grid-template-columns:repeat(3,1fr); }
  .fin__grid{ grid-template-columns:1fr; gap:48px; }
  .fin__media{ order:0; }
  .fin__media img{ max-width:360px; }
  .calc{ grid-template-columns:1fr; }

  /* app: os aparelhos no topo, benefícios abaixo ---------------------- */
  .appgrid{ grid-template-columns:1fr; gap:40px; }
  .appphone{ order:-1; max-width:500px; }
  .appben__list{ grid-template-columns:repeat(2,1fr); gap:24px 32px; }
  .map__frame{ height:190px; }
  .ft__in{ grid-template-columns:1fr 1fr; gap:32px; }
  .ft__brand{ grid-column:1 / -1; }
}

@media (max-width:767px){
  body{ font-size:16px; }
  .sec{ padding:64px 0; }
  .sec--pilares{ padding-block:40px; }
  .wrap{ padding-inline:18px; }

  .hdr__tel{ display:none; }
  .hdr__logo img{ width:128px; }
  .hdr__logo{ --bleed:18px; }   /* o bleed acompanha o padding do .wrap no mobile */
  .hdr__right .btn--primary{ display:none; }
  .hdr.is-stuck .hdr__right .btn--primary{ display:inline-flex; }

  .hero{ --media-h:clamp(380px, 78vw, 460px); }
  .hero__copy{ max-width:none; }
  .hero__over{ font-size:.86rem; line-height:1.3; }
  .hero__ttl{ font-size:clamp(2.7rem, 13vw, 3.6rem); }
  .hero__scrim{
    background:
      linear-gradient(90deg, rgba(6,18,30,.84) 0%, rgba(6,18,30,.6) 52%, rgba(6,18,30,.2) 100%),
      linear-gradient(180deg, rgba(6,18,30,.6) 0%, rgba(6,18,30,0) 34%);
  }
  .qc{ padding:24px 20px 22px; border-radius:22px; }
  .qc__cta{ font-size:1.04rem; padding:16px 18px; }
  .qc__form{ border-radius:22px; gap:6px; }
  .qc__inp{ flex:1 1 auto; padding-inline:14px; }
  .qc__go{ flex:none; justify-content:center; padding-block:13px; }
  .qc__tel{ font-size:1.45rem; }

  .anim{ padding:58px 22px 34px; min-height:260px; }
  .anim--tall{ min-height:360px; }
  .anim--wide{ min-height:320px; }
  .anim__badge{ top:14px; left:50%; right:auto; transform:translateX(-50%); }

  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  /* pilares viram um carrossel: cards lado a lado, com rolagem encaixada
     e indicadores embaixo */
  .pillars{
    display:flex; gap:0;
    overflow-x:auto;
    /* explícito de propósito: declarar só overflow-x faz o eixo Y computar de
       `visible` para `auto`, e o carrossel fica arrastável na vertical por
       dentro. Qualquer sobra vertical — um transform de entrada, por exemplo —
       vira um arrasto que compete com a rolagem da página. Aqui não há o que
       transbordar, então travar não corta nada. */
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .pillars::-webkit-scrollbar{ display:none; }
  .pillar{
    flex:0 0 100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    flex-direction:column; gap:0;
  }
  .pillar__img{ width:100%; aspect-ratio:16/9; }
  .pillar__body{ padding-top:20px; }
  .pillar__t{ font-size:1.7rem; }
  .pillar__s{ margin-top:10px; }
  .pillar__list{ margin-top:16px; gap:12px; }

  .pillars__dots{
    display:flex; justify-content:center; gap:10px;
    margin-top:26px;
  }
  .pillars__dot{
    width:10px; height:10px; padding:0; border:0;
    border-radius:100px;
    background:var(--hair);
    cursor:pointer;
    transition:width .25s var(--ease), background-color .25s var(--ease);
  }
  .pillars__dot.is-active{
    width:26px;
    background:var(--ember);
  }
  .vfeat{ gap:28px; }
  .vfeat__lede-full{ display:none; }
  .vfeat__lede-short{ display:inline; }
  .apptit__full{ display:none; }
  .apptit__short{ display:inline; }
  .vfeat__play-ico{ width:66px; }
  .vfeat__play-lbl{ font-size:.94rem; }

  /* totem anotado: sem largura para os dois lados, a coluna fica sozinha no
     alto. No mobile os pontos não aparecem: só a imagem. */
  .tot__fig{ padding-inline:0; width:100%; }
  .tot__stage{
    width:100%; height:auto; aspect-ratio:auto;
    display:flex; flex-direction:column; align-items:center; gap:32px;
  }
  .tot__stage::before{ top:0; height:min(72vh, 620px); width:100%; }
  .tot__img{ width:auto; height:min(72vh, 620px); }

  .tot__pins{ display:none; }
  .parts{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .mods{ grid-template-columns:repeat(2,1fr); }
  .ladder{ grid-template-columns:repeat(2,1fr); }
  .fin__media{ display:none; }
  .fin__item{ gap:18px; }
  .fin__ico{ width:62px; height:62px; }
  .fin__ico svg{ width:30px; height:30px; }
  .fin__it{ font-size:1.08rem; }
  .fin__lede{ font-size:1.14rem; }

  .appgrid{ gap:34px; }
  .appphone{ max-width:min(100%, 440px); gap:4%; }
  .appphone::before{ width:100%; }   /* o brilho acompanha o aparelho sem vazar da tela */
  .appben__list{ grid-template-columns:1fr; }
  .abn__ico{ width:62px; height:62px; }
  .abn__ico svg{ width:30px; height:30px; }

  .calc__controls,.calc__out{ padding:28px 22px; }
  .calc__v--hero{ font-size:2.5rem; }

  .plan{ padding:34px 24px; border-radius:25px; }
  .plan__price{ font-size:3.2rem; }
  .map__frame{ height:150px; }
  .ft__in{ grid-template-columns:1fr; }
  .wa{ width:52px; height:52px; right:14px; bottom:14px; }
  .wa svg{ width:26px; height:26px; }
}

/* --------------------------------------------------------------------------
   25. MOVIMENTO — entrada do banner, revelação no scroll, micro-interações

   Tudo aqui pende de `.motion` no <html>, que o script inline do <head> só
   acrescenta quando existe IntersectionObserver e o sistema NÃO pede
   movimento reduzido. Sem essa classe a página é exatamente a de antes: nada
   nasce escondido, nada depende de JS para aparecer. O mesmo script devolve a
   página ao estado parado se o js/main.js não confirmar que assumiu o
   controle — é o guarda `data-rv-ready`.

   Duas peças:
   · entrada do banner — keyframes, tocam no load, acima da dobra;
   · revelação no scroll — `[data-rv]` nasce deslocado e o JS põe `.is-in`.

   `--rv-d` é o atraso de cada peça dentro de um grupo (`data-rv-stagger`),
   escrito pelo JS. `data-rv="cue"` é o caso especial: o elemento não se
   esconde, só serve de gatilho para os filhos — o totem usa isso.
   -------------------------------------------------------------------------- */

/* --- revelação no scroll -------------------------------------------------- */
.motion [data-rv]:not([data-rv="cue"]){
  opacity:0;
  transform:translate3d(var(--rv-x,0), var(--rv-y,30px), 0) scale(var(--rv-s,1));
  transition:opacity .75s var(--ease) var(--rv-d,0ms),
             transform .95s var(--ease) var(--rv-d,0ms);
}
.motion [data-rv].is-in{ opacity:1; transform:none; }

.motion [data-rv="fade"]{ --rv-y:0px; }
.motion [data-rv="left"]{ --rv-x:-38px; --rv-y:0px; }
.motion [data-rv="right"]{ --rv-x:38px; --rv-y:0px; }
.motion [data-rv="zoom"]{ --rv-s:.92; --rv-y:16px; }

/* o navegador só recebe a dica enquanto a peça ainda tem o que animar */
.motion [data-rv]:not(.is-in){ will-change:opacity, transform; }

/* --- 01 · banner: entra de baixo, em cascata ------------------------------ */
@keyframes rv-rise{
  from{ opacity:0; transform:translate3d(0,32px,0); }
  to  { opacity:1; transform:none; }
}
@keyframes rv-drop{
  from{ transform:translate3d(0,-100%,0); }
  to  { transform:none; }
}

/* `backwards`, nunca `both`: quando a entrada acaba o elemento volta a
   obedecer ao próprio CSS — é o que mantém os :hover funcionando */
.motion .hdr        { animation:rv-drop .7s var(--ease) backwards; }
.motion .hero__over { animation:rv-rise .9s var(--ease) .18s backwards; }
.motion .hero__ttl  { animation:rv-rise 1s  var(--ease) .30s backwards; }
.motion .qc         { animation:rv-rise 1s  var(--ease) .52s backwards; }
.motion .hero__strip{ animation:rv-rise .8s var(--ease) .64s backwards; }
.motion .hero__offer{ animation:rv-rise .8s var(--ease) .74s backwards; }

/* parallax: o JS escreve --rv-p (0 → 1) conforme o banner sai de cena. O
   deslocamento é percentual da própria imagem e o scale(1.12) reserva 6% de
   folga de cada lado — em qualquer largura a borda nunca aparece. */
.motion .hero__img{
  transform:translate3d(0, calc(var(--rv-p, 0) * 5%), 0) scale(1.12);
  will-change:transform;
}
.motion .hero__copy{
  transform:translate3d(0, calc(var(--rv-p, 0) * 26px), 0);
  opacity:calc(1 - var(--rv-p, 0) * .85);
}

/* --- header: a seção corrente no menu -------------------------------------
   o mesmo traço do :hover, agora marcando onde a leitura está -------------- */
.hdr__nav a.is-current{ color:var(--ink); }
.hdr__nav a.is-current::after{ right:0; }
.hdr:not(.is-stuck) .hdr__nav a.is-current{ color:#fff; }

/* --- totem: a cascata dos pontos ------------------------------------------
   O gatilho é `.tot` (data-rv="cue"): quando a coluna aparece, cada pino
   acende na ordem do DOM — o ponto salta, a linha de chamada se estende a
   partir dele e o texto entra por último, vindo do lado de fora. Abaixo de
   768px os pinos somem (bloco 24) e sobra a coluna subindo. --------------- */
.motion .tot__stage{
  opacity:0; transform:translate3d(0,28px,0);
  transition:opacity .8s var(--ease), transform 1s var(--ease);
}
.motion .tot.is-in .tot__stage{ opacity:1; transform:none; }

.motion .tot .tpin:nth-child(1){ --rv-d:220ms; }
.motion .tot .tpin:nth-child(2){ --rv-d:400ms; }
.motion .tot .tpin:nth-child(3){ --rv-d:580ms; }

.motion .tot .tpin__dot{
  opacity:0; transform:scale(.2);
  transition:opacity .3s var(--ease) var(--rv-d,0ms),
             transform .55s cubic-bezier(.2,1.5,.4,1) var(--rv-d,0ms);
}
.motion .tot.is-in .tpin__dot{ opacity:1; transform:none; }

/* a linha cresce a partir do ponto, então a origem acompanha o lado */
.motion .tot .tpin__line{
  transform:scaleX(0);
  transition:transform .6s var(--ease) calc(var(--rv-d,0ms) + 140ms);
}
.motion .tot .tpin--r .tpin__line{ transform-origin:left center; }
.motion .tot .tpin--l .tpin__line{ transform-origin:right center; }
.motion .tot.is-in .tpin__line{ transform:scaleX(1); }

/* o bloco de texto já carrega o translateY do --bico: o deslocamento de
   entrada entra como um translateX extra, para não sobrescrever aquele */
.motion .tot .tpin__bubble{
  opacity:0;
  transform:translateY(calc(-1 * var(--bico))) translateX(var(--rv-slide,0px));
  transition:opacity .7s var(--ease) calc(var(--rv-d,0ms) + 300ms),
             transform .8s var(--ease) calc(var(--rv-d,0ms) + 300ms);
}
.motion .tot .tpin--r .tpin__bubble{ --rv-slide:26px; }
.motion .tot .tpin--l .tpin__bubble{ --rv-slide:-26px; }
.motion .tot.is-in .tpin__bubble{ opacity:1; --rv-slide:0px; }

/* pulso de radar no ponto — o sistema vigiando. Entra depois da cascata e
   defasado por pino, para os três não baterem no mesmo compasso. */
.tpin__dot::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:50%;
  border:2px solid var(--ember);
  opacity:0;
  pointer-events:none;
}
.motion .tot.is-in .tpin__dot::after{
  animation:rv-ping 3.2s var(--ease) infinite;
  animation-delay:calc(var(--rv-d,0ms) + 900ms);
}
@keyframes rv-ping{
  0%      { transform:scale(1);   opacity:.5; }
  70%,100%{ transform:scale(2.8); opacity:0; }
}

/* --- CTA do banner: um brilho passando, de tempos em tempos --------------- */
.motion .qc__cta{ position:relative; overflow:hidden; }
.motion .qc__cta::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:42%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:translateX(-260%) skewX(-18deg);
  animation:rv-sweep 5s var(--ease) 2.4s infinite;
  pointer-events:none;
}
@keyframes rv-sweep{
  0%      { transform:translateX(-260%) skewX(-18deg); }
  55%,100%{ transform:translateX(330%)  skewX(-18deg); }
}

/* --- botão do WhatsApp: entra depois da página e chama a atenção ---------- */
.motion .wa{ animation:rv-pop .55s cubic-bezier(.2,1.4,.4,1) 1.2s backwards; }
@keyframes rv-pop{
  from{ opacity:0; transform:scale(.4) translateY(14px); }
  to  { opacity:1; transform:none; }
}
.wa::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  pointer-events:none;
}
.motion .wa::before{ animation:rv-halo 3.4s ease-out 2.6s infinite; }
@keyframes rv-halo{
  0%      { box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%,100%{ box-shadow:0 0 0 20px rgba(37,211,102,0); }
}

/* --- vídeo institucional: o play respira enquanto ninguém clica ----------- */
.motion .vfeat__play:not(:hover) .vfeat__play-ico{
  animation:rv-breathe 3.6s ease-in-out 1.6s infinite;
}
@keyframes rv-breathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.055); }
}

/* --- celular: o percurso encurta ------------------------------------------ */
@media (max-width:767px){
  /* a peça anda menos para não atrasar quem rola rápido, e o deslocamento
     lateral vira vertical — não há largura de sobra para vir de fora */
  .motion [data-rv]:not([data-rv="cue"]){ --rv-y:20px; }
  .motion [data-rv="left"],
  .motion [data-rv="right"]{ --rv-x:0px; --rv-y:20px; }
  .motion [data-rv="zoom"]{ --rv-s:.96; }

  /* Nos pilares o card entra só desaparecendo, sem subir: aqui eles vivem
     dentro de um scroller horizontal, e um deslocamento vertical daria ao
     container 20px de sobra para rolar por dentro — quem arrastasse a tela
     segurando na foto durante a entrada moveria o carrossel, não a página.
     O `overflow-y:hidden` do bloco 24 já fecha a porta; isto tira o motivo. */
  .motion .pillars [data-rv]:not([data-rv="cue"]){ --rv-y:0px; }

  /* o banner ocupa quase a tela toda: o parallax fica mais discreto */
  .motion .hero__img{
    transform:translate3d(0, calc(var(--rv-p, 0) * 3%), 0) scale(1.08);
  }

  /* --- totem: a coluna flutua ------------------------------------------------
     No mobile os pinos somem e sobra só a peça: o balanço lento de cima para
     baixo dá vida à coluna parada. Começa depois da entrada do palco terminar,
     para os dois movimentos não brigar na tela. */
  .motion .tot__img{ animation:rv-float 4.2s ease-in-out 1.2s infinite; }
}
@keyframes rv-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

/* --------------------------------------------------------------------------
   26. MOVIMENTO REDUZIDO / IMPRESSÃO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* rede de segurança: se o sistema passar a pedir movimento reduzido depois
     do load, nada pode ficar preso no estado escondido do bloco 25 */
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .hero__img,.hero__copy{ transform:none !important; opacity:1 !important; }
}

@media print{
  .hdr,.wa,.anim{ display:none !important; }
  .sec--dark{ background:#fff !important; color:#000 !important; }
}