/* ==========================================================================
   SMART PARANÁ — landing page
   Identidade: Griffin Solution (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); }


/* --------------------------------------------------------------------------
   5.1 MARCA — lockup do símbolo + "GRIFFIN / SOLUTION"
   O logo antigo trazia o nome desenhado dentro do próprio SVG. Com a troca
   para Griffin Solution, o arquivo entra só com o símbolo (o grifo) e o nome
   passa a ser texto de verdade, em Outfit: mantém o mesmo peso visual do
   original — palavra forte em cima, palavra leve e espaçada embaixo — e ainda
   deixa a cor trocar entre fundo claro e escuro sem um segundo arquivo.
   Tudo sai do font-size: mexa em --brand-fs e mark e texto acompanham juntos.
   -------------------------------------------------------------------------- */
.brand{
  display:inline-flex; align-items:center; gap:.46em;
  font-size:var(--brand-fs, 22px);
  line-height:1;
  color:var(--brand-ink, var(--ink));
  text-decoration:none;
}
.brand__mark{ flex:none; display:block; width:auto; height:2.7em; }

.brand__word{ display:block; }
.brand__name,
.brand__sub{
  display:block;
  font-family:var(--f-display);
  white-space:nowrap;
  text-transform:uppercase;
}
.brand__name{ font-size:1em; font-weight:800; letter-spacing:-.005em; }
/* o tracking alarga "SOLUTION" até encostar nas pontas de "GRIFFIN"; a margem
   negativa devolve o espaço que o letter-spacing pendura depois do último N */
.brand__sub{
  margin-top:.2em; margin-right:-.235em;
  font-size:.6em; font-weight:400; letter-spacing:.235em;
}
/* --------------------------------------------------------------------------
   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{
  --brand-fs:21px;
  --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__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;
  /* mesma moldura dos três players da Smart Sampa (.ytc__stage): o recorte
     diagonal das fotos dos pilares saiu daqui para os dois blocos de vídeo da
     página lerem como a mesma peça */
  border-radius:10px;
  overflow:hidden;
  background:#0E0E10;
  box-shadow:0 26px 44px -28px #000;
}

.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; }

/* A tarja: cabeçalho, play e assinatura em três faixas, na mesma leitura dos
   embeds da Smart Sampa. O botão é a tarja inteira — clicar em qualquer ponto
   dá play — e ele some no primeiro frame, então nada disso cobre o vídeo. */
.vfeat__play{
  position:absolute; inset:0;
  display:grid; grid-template-rows:auto 1fr auto;
  align-items:center; justify-items:center;
  border:0; padding:0;
  color:#fff; cursor:pointer;
  text-align:left;
  /* os dois degradês escurecem só onde entra texto: o miolo do poster fica
     limpo, que é o que a moldura do YouTube faz nos outros três */
  background:
    linear-gradient(180deg, rgba(8,8,10,.78) 0%, rgba(8,8,10,.34) 26%, transparent 46%),
    linear-gradient(0deg,   rgba(8,8,10,.72) 0%, rgba(8,8,10,.28) 22%, transparent 42%),
    rgba(10,10,12,.16);
  transition:background .25s var(--ease);
}
.vfeat__play:hover{
  background:
    linear-gradient(180deg, rgba(8,8,10,.8) 0%, rgba(8,8,10,.36) 26%, transparent 46%),
    linear-gradient(0deg,   rgba(8,8,10,.74) 0%, rgba(8,8,10,.3) 22%, transparent 42%),
    rgba(10,10,12,.3);
}
.vfeat__play[hidden]{ display:none; }

/* --- cabeçalho: brasão redondo, título do vídeo e o canal ----------------- */
.vfeat__head{
  justify-self:start; align-self:start;
  display:flex; align-items:center; gap:12px;
  padding:18px 20px 0;
  max-width:100%;
}
.vfeat__av{
  flex:none;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.vfeat__av img{ display:block; width:auto; height:26px; }

.vfeat__chan{ display:block; min-width:0; }
.vfeat__chan-t{
  display:block;
  font-family:var(--f-display); font-weight:700;
  font-size:1.16rem; line-height:1.25; letter-spacing:-.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.vfeat__chan-n{
  display:block; margin-top:2px;
  font-size:.92rem; line-height:1.3; color:rgba(255,255,255,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
/* botão no formato e no vermelho do YouTube — 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:#FF0000; transition:fill .25s var(--ease); }
.vfeat__play:hover .vfeat__play-ico{ transform:scale(1.07); }
.vfeat__play:hover .vfeat__play-bg{ fill:#E60000; }

/* --- pé: a chamada e a assinatura, no lugar do "Assista no YouTube" ------- */
.vfeat__foot{
  justify-self:end; align-self:end;
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px 10px;
  padding:0 20px 18px;
}
.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);
}
.vfeat__sign{ display:flex; align-items:center; gap:7px; }
.vfeat__sign-mark{ flex:none; display:block; width:auto; height:26px; }
.vfeat__sign-word{
  display:block;
  font-family:var(--f-display); line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.vfeat__sign-name{ display:block; font-weight:800; font-size:1.02rem; letter-spacing:-.01em; }
.vfeat__sign-sub{
  display:block; margin-top:2px;
  font-size:.56rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}

/* --------------------------------------------------------------------------
   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(--ink);
  border-right:3.4px solid var(--ink);
  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); }

/* --------------------------------------------------------------------------
   8b·2. TABELA DE PLANOS — BRONZE / PRATA / OURO
   Um cartão branco só, com a tabela inteira dentro, sobre o mesmo cinza da
   seção do vídeo (.sec--alt). É o contraste com o cinza que levanta a peça —
   a sombra difusa só assenta a borda.

   As três marcas de plano saem da paleta da casa, não do azul do comparativo
   de referência: Bronze no grafite quente, Prata no aço, Ouro no gradiente da
   marca — é a única coluna que ganha cor, e por isso ela puxa a leitura.
   -------------------------------------------------------------------------- */
.sec--planos{ padding-block:72px 104px; }

.plans__hd{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.plans__claim{
  margin:0; text-align:right;
  font-size:.98rem; line-height:1.5; color:var(--ink-2);
}
.plans__claim b{
  display:block; font-weight:800; color:var(--ember-hot);
}

.plans{
  border-radius:25px;
  background:#fff;
  border:1px solid var(--hair);
  box-shadow:var(--sh-lg);
  overflow:hidden;
}

/* a rolagem lateral vive aqui dentro para que o cantinho arredondado do
   cartão não seja cortado pelo overflow da tabela.
   overscroll-behavior-x segura o gesto: sem ele, arrastar até o fim da tabela
   escapa para o "voltar página" do navegador. */
.plans__scroll{ overflow-x:auto; overscroll-behavior-x:contain; }
.plans__scroll:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; }

.ptab{
  /* altura da tarja "Recomendado" — uma fonte só para a faixa e para o respiro
     que o cabeçalho reserva acima dos nomes de plano */
  --flag-h:24px;

  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:.96rem;
}
.ptab__c-feat{ width:31%; }

/* ---- cabeçalho: a faixa dos três planos ---------------------------------- */
.ptab__hd{
  position:relative;
  /* o respiro do topo é o da tarja "Recomendado" e entra em TODAS as células,
     não só na do Ouro: com vertical-align:middle, reservar a altura em uma só
     desalinharia os três nomes de plano entre si */
  padding:calc(16px + var(--flag-h)) 16px 16px;
  font-family:var(--f-display); font-weight:800; font-size:1.06rem;
  line-height:1.2;
  text-align:center;
  color:#fff;
  vertical-align:middle;
}
.ptab__hd--feat{
  text-align:left; padding-left:24px;
  background:var(--dark);
}
.ptab__hd--bronze{ background:#3B3733; }
.ptab__hd--prata { background:#5F6E78; }
.ptab__hd--ouro  { background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%); }

.ptab__plan{
  display:inline-flex; align-items:center; gap:9px;
}
.ptab__ico{ width:20px; height:20px; flex:none; }

/* a tarja "Recomendado": uma faixa de ponta a ponta no alto da coluna do Ouro,
   e não mais uma pílula solta no canto. A pílula dependia de sobrar largura à
   direita do nome do plano — assim que a coluna estreitava, ela entrava por
   cima de "Plano Ouro". A faixa não disputa espaço com nada: ocupa a linha
   inteira, o texto centraliza sozinho e a altura é a mesma que o cabeçalho já
   reservou em --flag-h, em qualquer largura.
   O fundo é um véu escuro sobre o gradiente, não uma cor nova: assim a faixa
   escurece o laranja da coluna sem inventar um token fora da paleta. */
.ptab__flag{
  position:absolute; top:0; left:0; right:0;
  height:var(--flag-h);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.2);
  font-family:var(--f-mono); font-size:.58rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff;
}

/* ---- corpo --------------------------------------------------------------- */
.ptab tbody th,
.ptab tbody td{
  padding:15px 16px;
  border-top:1px solid var(--hair);
  vertical-align:middle;
}
.ptab tbody th{
  text-align:left; padding-left:24px;
  font-weight:600; color:var(--ink);
  background:var(--bg-alt);
}
.ptab tbody td{
  text-align:center; color:var(--ink-2);
}
.ptab tbody td b{ color:var(--ink); font-weight:700; }

/* a coluna do Ouro é a única com fundo: uma faixa quente de ponta a ponta */
.ptab .is-ouro{ background:#FFF8EE; }
.ptab .is-ouro b{ color:var(--ember-hot); }

/* ---- marcadores: o símbolo é decoração, a frase é o dado ----------------- */
.pc::before{
  margin-right:7px;
  font-weight:700;
  speak:never;                 /* o conteúdo gerado fica fora da leitura */
}
.pc--yes::before{ content:"✓"; color:#1F9D55; }
.pc--no::before { content:"✕"; color:var(--ink-3); }
.pc--opt::before{ content:"—"; color:var(--ink-3); }
.pc--star::before{ content:"★"; color:var(--ember); }
.pc--no{ color:var(--ink-3); }
.is-ouro.pc--yes::before{ color:var(--ember-hot); }

/* ---- a linha do preço ---------------------------------------------------- */
.ptab__money th,
.ptab__money td{
  padding-block:22px;
  border-top:2px solid var(--hair);
}
.ptab__money th{
  font-family:var(--f-display); font-weight:800; font-size:1.06rem;
}
.ptab__price{
  display:block;
  font-family:var(--f-display); font-weight:800;
  font-size:1.7rem; letter-spacing:-.02em; line-height:1.1;
  color:var(--ink);
}
.ptab__price--prata{ color:#4E5D67; }
.ptab__price--ouro { color:var(--ember-hot); }
.ptab__per{ font-size:.86rem; font-weight:700; letter-spacing:0; }
.ptab__note{
  display:block; margin-top:6px;
  font-size:.72rem; line-height:1.4; color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   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;
}

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

   O fundo é o mesmo da Smart Sampa (.sec--dark): o cinza-quase-preto da marca
   com dois clarões laranja de canto. As duas faixas escuras da página passam a
   ler como um par, e a anotação em branco ganha o contraste que sobre o
   laranja vivo faltava. */
.sec--totem{
  background:var(--dark);
  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%);
}

.sec--totem .tpin__t,
.sec--totem .tpin__d{
  color:#fff;
  /* sombra curta e neutra: no escuro ela não sustenta a leitura, só assenta a
     letra sobre os clarões do fundo */
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* 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(0,0,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 ------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
   8d. SMART SAMPA — parceria / integração
   O lockup das duas marcas e três vídeos, nada mais. Última seção da página,
   depois dos cases: o escuro não é enfeite, é o que assenta os três players —
   sobre branco eles viravam retângulos pesados.

   O lockup coloca as marcas lado a lado e só a nossa metade recebe cor — a do
   parceiro fica em branco chapado. É o que faz o par ler como "duas empresas"
   e não como uma submarca da casa.

   Os players são embeds do YouTube sem disfarce: a moldura da plataforma é
   justamente o que dá a eles peso de material oficial da Prefeitura. Não há
   JS envolvido — o loading="lazy" de cada iframe é quem segura o download
   até o card chegar perto da tela.
   -------------------------------------------------------------------------- */
.sec--sampa{ padding-block:96px; }

/* --- lockup das duas marcas ---------------------------------------------- */
.samp__lock{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(30px, 4.4vw, 58px);
  /* o lockup é tudo que vem antes das capas: este respiro é o que separa
     as marcas dos vídeos, já que a seção não tem mais título nem texto */
  margin-bottom:64px;
}
/* o .brand já resolve símbolo + palavra; aqui só troca a tinta e o corpo */
.samp__brand{ --brand-fs:23px; --brand-ink:#fff; }

/* A marca do parceiro é símbolo + palavra, como a nossa. O font-size do
   invólucro é a única medida real: as duas artes têm a altura em em, então o
   par inteiro escala junto e a largura sai da proporção de cada arquivo.
   É o mesmo truque do --brand-fs no bloco 5.1. */
.samp__partner{
  display:inline-flex; align-items:center;
  gap:.6em;
  font-size:clamp(20px, 2.1vw, 26px);
}
.samp__sym{ display:block; width:auto; height:1.68em; }
.samp__logo{ display:block; width:auto; height:1em; }

/* --- os três players -------------------------------------------------------- */
.sampv{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.ytc__stage{
  position:relative;
  aspect-ratio:16/9;
  /* o recorte diagonal das outras peças não serve aqui: a moldura do YouTube
     escreve o título no canto de cima e o "Assista no YouTube" no de baixo,
     e um raio grande comeria os dois. Um arredondamento curto tira a cara de
     embed cru sem encostar em nada que o player desenha. */
  border-radius:10px;
  overflow:hidden;
  background:#0E0E10;
  box-shadow:0 26px 44px -28px #000;
}
.ytc__frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; border:0;
}

/* --------------------------------------------------------------------------
   8e. MURALHA DIGITAL NA MÍDIA — carrossel de cases
   O card do meio em tamanho cheio e por cima; os vizinhos encolhidos e
   escurecidos, espiando dos lados.

   A fila NÃO rola: ela desliza. Um único translate3d no <ul> move o conjunto
   inteiro, e o navegador resolve isso na GPU — nada de layout, nada de pintura
   a cada quadro. Foi o que trocou a rolagem nativa com scroll-snap: lá o snap
   e a rolagem programada disputavam o mesmo eixo (dava solavanco no salto do
   laço infinito) e um empurrão forte de trackpad atravessava três ou quatro
   cards de uma vez. Aqui quem manda no passo é o js/main.js, e o passo é
   sempre de um card — inclusive no arrasto, que tem trava elástica no limite
   de um vizinho.

   A sobreposição vem de margem negativa nos cards, e não de gap: gap não
   aceita valor negativo — declarado assim ele é descartado sem aviso, e os
   cards ficam lado a lado com uma folga larga em vez de se cobrirem.

   Sem JS a fila fica parada no primeiro card, mas legível: o CSS sozinho já
   desenha os cards, e o .no-js abaixo devolve a rolagem manual.
   -------------------------------------------------------------------------- */
.sec--cases{ padding-block:96px; overflow:hidden; }

/* --- a marca do programa, na abertura da seção ---------------------------
   A arte oficial que temos é a de fundo escuro: "MURALHA" é branco vazado num
   bloco, e "DIGITAL" e o "By CCONET" são brancos puros. Sobre o #F5F5F5 da
   seção essas duas últimas linhas somem — por isso a placa, que devolve à
   marca o fundo para o qual ela foi desenhada.

   O tom da placa não é o --dark da casa (#1E1E1E) e sim um preto azulado:
   é o único que faz o bloco escuro de DENTRO do logo desaparecer, em vez de
   aparecer como um retângulo mais claro flutuando na placa. Não é um tom
   estranho aqui — é o mesmo frio do fundo dos cards logo abaixo. */
.cases__brand{
  display:inline-flex; align-items:center; justify-content:center;
  margin:0;                 /* o vão até o carrossel é o do .sechd */
  padding:20px 30px;
  border-radius:18px;
  background:#0F1520;
  box-shadow:var(--sh-md);
}
.cases__logo{
  display:block; height:auto;
  width:clamp(150px, 19vw, 196px);
}

.cases{
  --card-w:min(430px, 76vw);
  --over:-30px;             /* margem negativa: o quanto um card entra no outro */
  --shrink:.84;             /* tamanho do card fora do centro */
  --dur:.58s;               /* um tempo só para o deslize e para o card crescer */
  --swing:cubic-bezier(.33,.72,.25,1);   /* sai firme, chega macio, sem quique */
  position:relative;

  /* A caixa tem a largura EXATA dos três cards à mostra, e é ela que corta o
     resto da fila. Antes, numa tela larga, sobrava uma lasca do quarto e do
     quinto card na borda; tapá-las com degradê deixava manchas embaçadas nas
     pontas. Medindo a caixa, não sobra o que esconder.

     A conta: o card do meio inteiro, mais dois avanços. Cada avanço é a
     largura do card menos a sobreposição dos dois lados, e o vizinho entra
     na conta já encolhido pelo --shrink. */
  width:min(100%, calc(var(--card-w) * var(--shrink) + 2 * (var(--card-w) + 2 * var(--over))));
  margin-inline:auto;
  overflow:hidden;          /* é esta caixa que recorta a fila deslizante */
}

/* --- a fila ---------------------------------------------------------------
   Uma linha só, larga demais de propósito, deslocada por transform. O
   `translate3d` (e não `translateX`) é o que garante camada própria na GPU
   também nos navegadores antigos do celular.
   -------------------------------------------------------------------------- */
.cases__track{
  list-style:none; margin:0;
  padding:34px 0 40px;
  display:flex;
  transform:translate3d(0,0,0);
  touch-action:pan-y;       /* o dedo na vertical continua rolando a página */
  user-select:none; -webkit-user-select:none;
  cursor:grab;
}
/* `will-change` só enquanto anda: manter a camada viva o tempo todo custa
   memória de vídeo à toa numa fila de dezoito cards. */
.cases__track.is-glide{
  transition:transform var(--dur) var(--swing);
  will-change:transform;
}
.cases__track.is-drag{ cursor:grabbing; will-change:transform; }

/* sem JS ninguém move a fila — devolvemos a rolagem manual */
html:not(.js) .cases__track{ overflow-x:auto; scrollbar-width:none; }

.case{
  flex:none;
  width:var(--card-w);
  margin-inline:var(--over);
  /* o card do meio precisa ficar por cima dos vizinhos */
  z-index:1;
}
.case.is-active{ z-index:3; }

.case__link{
  position:relative; display:block;
  aspect-ratio:4/3;
  border-radius:22px;
  overflow:hidden;
  background:#12161C;
  box-shadow:0 18px 42px -20px rgba(6,9,14,.6);
  /* os laterais nascem menores; o do meio recebe .is-active */
  transform:scale(var(--shrink));
  transition:transform var(--dur) var(--swing);
  -webkit-user-drag:none;
}
.case.is-active .case__link{ transform:scale(1); }

/* O véu que apaga os vizinhos é uma camada opaca com opacity animada, e não
   `filter:brightness()`: filtro obriga o navegador a repintar a foto inteira a
   cada quadro, e com três cards mudando ao mesmo tempo era ele o responsável
   pelos engasgos. Opacidade o compositor resolve sozinho. */
.case__link::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:#080B10;
  opacity:.5;
  pointer-events:none;
  transition:opacity var(--dur) var(--swing);
}
.case.is-active .case__link::after{ opacity:0; }

.case__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
  -webkit-user-drag:none; user-select:none;
}
.case.is-active .case__link:hover .case__img{ transform:scale(1.05); }

/* o véu do texto: o título é branco e a foto é imprevisível — sem isto, uma
   capa clara comeria o texto. Mais denso no pé, onde o texto mora. */
.case__body{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:26px;
  background:linear-gradient(180deg,
              rgba(10,12,16,.15) 0%,
              rgba(10,12,16,.55) 48%,
              rgba(10,12,16,.9) 100%);
}


.case__t{
  font-family:var(--f-display); font-weight:800;
  font-size:1.32rem; line-height:1.22; letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
/* a fonte fica visível em todo card: é o que impede alguém de ler
   "case de sucesso" como cliente nosso — o case é da tecnologia */
.case__src{
  margin-top:12px;
  font-family:var(--f-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ember-lit);
}

/* --- setas ---------------------------------------------------------------- */
.cases__nav{
  position:absolute; top:50%; z-index:4;
  transform:translateY(-50%);
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.94);
  color:var(--ink);
  cursor:pointer;
  box-shadow:var(--sh-md);
  transition:background-color .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease),
             opacity .22s var(--ease);
}
.cases__nav svg{ width:22px; height:22px; }
.cases__nav:hover{
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  border-color:transparent; color:#fff;
  transform:translateY(-50%) scale(1.06);
}
.cases__nav:active{ transform:translateY(-50%) scale(.96); }
/* encostadas na borda do card do meio, como no modelo */
.cases__nav--prev{ left:calc(50% - var(--card-w) / 2 - 26px); }
.cases__nav--next{ right:calc(50% - var(--card-w) / 2 - 26px); }

/* --------------------------------------------------------------------------
   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; }

/* --------------------------------------------------------------------------
   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{ --brand-fs:23px; --brand-ink:#fff; }
.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; }

  /* tabela de planos: a partir daqui ela não cabe mais na tela e rola na
     horizontal — inteira, em bloco. A coluna dos recursos já foi presa à
     esquerda, e não vale a pena: parada no lugar, ela passa por cima dos
     valores que deslizam por baixo e corta as frases pela metade. Rolando
     tudo junto, cada linha continua legível do começo ao fim. */
  .sec--planos{ padding-block:56px 80px; }
  .plans__hd{ display:block; }
  .plans__claim{ text-align:left; margin-top:16px; }

  /* o cursor avisa que a tabela anda de lado; o arrasto em si é do main.js,
     e só para mouse — no toque quem rola é o próprio navegador */
  .plans__scroll{ cursor:grab; }
  .plans__scroll.is-drag{ cursor:grabbing; user-select:none; }

  .ptab{ min-width:760px; }
  .ptab__c-feat{ width:264px; }

  /* 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); }
  .calc{ grid-template-columns:1fr; }

  /* smart sampa: o padding próprio precisa ser repetido aqui — .sec--sampa e
     .sec têm a mesma especificidade e o nosso vem depois no arquivo */
  .sec--sampa{ padding-block:76px; }
  .sampv{ gap:20px; }
  .cases{ --card-w:min(390px, 74vw); --over:-26px; }

  /* 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{ --brand-fs:18px; --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;
  }
  /* no carrossel o "Prevenir" abre a fila — é o card que explica o totem na
     rua, e o que melhor segura quem chega pelo celular. Só a ordem visual
     muda; o DOM (e o desktop) seguem Encontrar / Prevenir / Proteger. */
  .pillar:nth-child(2){ order:-1; }
  /* a foto ganha altura no carrossel: em 16/9 ela virava uma tarja fina em
     cima do texto; 4/3 devolve o peso da imagem, igual ao desktop. E com um
     card por vez a ponta arredondada da primeira e da última não fecha mais
     o desenho da fileira, sobra só um canto solto — as três ficam retas. */
  .pillar__img{ width:100%; aspect-ratio:4/3; }
  .pillar:first-child .pillar__img,
  .pillar:last-child  .pillar__img{ border-radius:0; }
  .pillar__body{ padding-top:20px; }
  .pillar__t{ font-size:1.7rem; }
  .pillar__s{ margin-top:10px; }
  .pillar__list{ margin-top:16px; gap:12px; }

  .sec--planos{ padding-block:40px 64px; }
  .plans{ border-radius:20px; }

  .ptab{ min-width:660px; font-size:.9rem; }
  .ptab__c-feat{ width:200px; }
  .ptab__hd{ padding:calc(13px + var(--flag-h)) 12px 13px; font-size:.98rem; }
  .ptab__hd--feat,
  .ptab tbody th{ padding-left:16px; }
  .ptab tbody th,
  .ptab tbody td{ padding:13px 12px; }
  .ptab__price{ font-size:1.4rem; }

  .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;
    /* mesmo escuro do fundo da Smart Sampa */
    background:var(--dark);
  }
  .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; }

  /* a tarja encolhe junto: no celular a largura do player é a da tela, e o
     cabeçalho e o pé são as duas pontas que primeiro se atropelam */
  .vfeat__head{ gap:10px; padding:13px 14px 0; }
  .vfeat__av{ width:36px; height:36px; }
  .vfeat__av img{ height:21px; }
  .vfeat__chan-t{ font-size:1rem; }
  .vfeat__chan-n{ font-size:.84rem; }
  .vfeat__foot{ gap:8px; padding:0 14px 13px; }
  .vfeat__sign-mark{ height:22px; }
  .vfeat__sign-name{ font-size:.94rem; }
  .vfeat__sign-sub{ font-size:.5rem; letter-spacing:.18em; }

  /* 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); }

  /* smart sampa: as três capas viram uma pilha — a 16/9 já é larga, em duas
     colunas de celular cada capa ficaria menor que o próprio botão de play */
  .sec--sampa{ padding-block:60px; }
  /* o lockup empilha: lado a lado, Griffin + smartsampa pedem ~430px só de
     marca, e num celular de 360px a linha quebraria com o × pendurado sozinho
     no fim. Em coluna cabe em qualquer largura e as duas marcas até crescem. */
  .samp__lock{ flex-direction:column; gap:22px; margin-bottom:44px; }
  .samp__brand{ --brand-fs:21px; }
  .samp__partner{ font-size:23px; }
  .sampv{ grid-template-columns:1fr; gap:30px; }

  /* cases: no celular as setas dariam alvo pequeno e ficariam por cima da
     foto — saem, e o gesto (arrastar) assume. O card cresce quase
     até a largura da tela, então o vizinho vira só uma fresta */
  .sec--cases{ padding-block:60px; }
  .cases__brand{ padding:15px 22px; border-radius:14px; }
  .cases__logo{ width:min(148px, 42vw); }
  .cases{ --card-w:min(300px, 82vw); --over:-14px; --shrink:.86; }
  .cases__track{ padding-block:22px 26px; }
  .cases__nav{ display:none; }
  .case__link{ border-radius:18px; }
  .case__body{ padding:20px; }
  .case__t{ font-size:1.12rem; }

  .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,.sec--totem{ background:#fff !important; background-image:none !important; color:#000 !important; }
  .sec--totem .tpin__t,.sec--totem .tpin__d{ color:#000 !important; text-shadow:none !important; }
}