/* ===== Tokens ===== */
/* Base identity: black / white / silver. Blue is the one functional "digital" accent
   (CTAs, links, active states, hover) — not purple. Green stays reserved for real
   WhatsApp actions only. Warm hues (red/orange/yellow) are content-only (photos,
   cases, portfolio) and never structural UI color. See the design-system note above
   the button section for the reasoning behind each value. */
:root{
  --bg:#050506;
  --bg-rgb:5,5,6;
  --bg-alt: var(--bg);
  --surface:#101114;
  --card-tint:#16181D;
  --border:rgba(255,255,255,.08);
  --text:#ffffff;
  --text-rgb:255,255,255;
  --text-dim:rgba(255,255,255,.66);
  --text-faint:rgba(255,255,255,.45);
  --silver:#9AA0A8;
  /* Rare "signature" gradient — a thin line, a glow, a special CTA. Not for headlines. */
  --gradient: linear-gradient(90deg,#0b63e5,#5aa9ff,#0b63e5);
  --gradient-size: 300%;
  --whatsapp: linear-gradient(90deg,#075e54,#128c7e,#25d366);
  --radius: 14px;
  --container: 1200px;

  /* Single digital accent (blue) — replaces the old purple-based --iv-accent everywhere
     it's referenced, so the whole Identidade Visual page shifts off purple for free. */
  --accent:#0b63e5;
  --accent-rgb:11,99,229;
  --iv-dark: var(--bg);
  --iv-dark-alt: var(--bg-alt);
  --iv-accent: var(--accent);
  --iv-accent-2: var(--accent);
  --iv-cream: var(--text);
  /* Accent as small/hover TEXT needs a lighter tone on a near-black background to
     clear 4.5:1 — the flat --accent value alone is a touch dark for body-size text. */
  --accent-text:#5b9dff;

  /* --- Blue family: a controlled range (deep → main → electric), no violet —
     spent on MOTION (borders, glows, reflections, progress fills), never on
     headlines. .accent-word stays flat; this range is for energy, not color. */
  --accent-deep:#0a3d99;
  --accent-electric:#4da8ff;
  --accent-hover: var(--accent-electric);
  --accent-soft: rgba(var(--accent-rgb),.12);
  --accent-glow: rgba(var(--accent-rgb),.45);
  --accent-highlight:#eaf3ff;
  --accent-highlight-rgb:234,243,255;
  --accent-gradient: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-electric));
  /* The .accent-word-live sweep band: near-white in dark mode (reads as a
     bright light crossing the letters); on a light/white page that same
     white would just vanish, so light mode uses a saturated electric blue
     instead — still a highlight, never plain white text. */
  --accent-reflect: rgba(255,255,255,.92);

  /* --- Silver support: a soft/low-opacity variant for hairline highlights. --- */
  --silver-soft: rgba(154,160,168,.16);

  /* --- A 4th elevation step (surface-elevated) for hover/active card states —
     dark mode gets a real distinct value; light mode reuses --surface since its
     cards already sit at near-white. --border-strong is for elements that need
     more presence than the hairline --border (important cards in light mode). */
  --surface-elevated:#1B1E24;
  --border-strong: rgba(255,255,255,.16);

  /* --whatsapp stays the legacy gradient already used by every WhatsApp button;
     these solids are for new contexts (tokens, focus rings) that need a flat color. */
  --whatsapp-solid:#25d366;
  --whatsapp-hover:#1fbf5c;

  /* Consolidated alias — --text-dim keeps working everywhere it's already used. */
  --text-secondary: var(--text-dim);

  /* Media Kit only — a dedicated token for the one accent moment left on
     these pages (the audience headline stat). Tried an Instagram-inspired
     orange/magenta/violet version first, then the same 3-stop blue as
     --accent-gradient; that included --accent-deep, which read as too dark/
     muddy on the near-black card background, so this skips the deep stop
     and stays in the brighter half of the blue family. */
  --creator-gradient: linear-gradient(90deg, var(--accent), var(--accent-electric));
  --creator-gradient-soft: linear-gradient(135deg, rgba(var(--accent-rgb),.14), rgba(77,168,255,.1));
}

:root[data-theme="light"]{
  --bg:#fafafa;
  --bg-rgb:250,250,250;
  /* Was #ffffff — only 3/255 off --bg, so cards (.level-block, .choice-card,
     the faq list...) read as flush with the page and only the 8%-opacity
     border gave them any definition. A visibly cooler off-white here makes
     every --surface block read as its own block against the page. */
  --surface:#eef0f3;
  --card-tint:#F2F4F7;
  --border:rgba(0,0,0,.08);
  --text:#111214;
  --text-rgb:17,18,20;
  --text-dim:rgba(17,18,20,.66);
  --text-faint:rgba(17,18,20,.45);
  --silver:#6B7280;
  --accent-text:#0a4fb0;

  --accent-deep:#08327d;
  --accent-electric:#1f6fe0;
  --accent-highlight:#eef5ff;
  --accent-highlight-rgb:238,245,255;
  --accent-gradient: linear-gradient(90deg, var(--accent-deep), var(--accent-text), var(--accent-electric));
  --accent-reflect: rgba(98,199,255,.85);
  --silver-soft: rgba(107,114,128,.14);
  --surface-elevated:#ffffff;
  --border-strong: rgba(0,0,0,.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Balanced line-wrapping: headings avoid an orphaned last word, long-form paragraphs
   avoid a ragged short final line. No-op in browsers without support. */
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}

/* Universal keyboard-focus ring — components with a more specific :focus-visible
   rule (buttons, nav arrows, form fields) override this via higher selector specificity. */
:focus-visible{
  outline:2px solid rgba(var(--text-rgb),.85);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ===== Motion/light utilities (opt-in, used sparingly) =====
   Less color, not less life: these reuse the controlled blue family + silver to
   put reactivity back into specific, important elements — never applied as a
   sitewide default. */

/* .accent-word — solid, calm blue. This is the DEFAULT for every headline
   highlight on the site (Método, Números, Creators, FAQ, Choice, Wayfinding).
   No animation here on purpose — see .accent-word-live below for the few
   words that earn real motion. */
.accent-word{color:var(--accent-text);}

/* .accent-word-live — a light genuinely crossing the letters. The two-layer
   version (a ::after duplicating the text via attr(data-text)) looked good in
   theory, but a second, independently-laid-out copy of the same text drifted
   out of alignment with the real one at this font-weight/size — a visible
   "ghost" at the tail of each word. Rebuilt as ONE layer: the highlight band
   is baked directly into the same gradient that colors the letters, so there
   is only ever one piece of text on screen — nothing to misalign. Reserved
   for a few special words (Hero only for now); must stay display:inline so
   it doesn't disturb the Hero's line breaks. */
.accent-word-live{
  background-image:linear-gradient(110deg,
    var(--accent-deep) 0%, var(--accent) 22%, var(--accent) 40%,
    var(--accent-reflect) 50%,
    var(--accent) 60%, var(--accent) 78%, var(--accent-deep) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* linear, not ease — with explicit hold segments already built into the
     keyframes below, easing each segment independently made the sweep look
     like it hitched/caught at every stage change instead of gliding. Linear
     interpolation between the moving keyframes reads as one smooth pass. */
  animation:accent-text-shine 5.5s linear infinite;
}
/* Rest (band parked off-frame right) → approach → DWELL on the peak (the
   highlight is actually centered on the word for a beat, not just clipping
   past it) → depart → rest (parked off-frame left) → loop. Without an
   explicit dwell, ease-in-out's fastest point lands exactly where the bright
   band crosses the text, so it used to flash past almost too quick to
   register. */
@keyframes accent-text-shine{
  0%,15%{background-position:150% 0;}
  40%,50%{background-position:50% 0;}
  75%,100%{background-position:-50% 0;}
}
@media (prefers-reduced-motion:reduce){
  .accent-word-live{animation:none;background-position:50% 0;}
}

/* The Método flow's active labels: a livelier blue as each step lights up,
   but a flat one — the dots already carry the glow/pulse, and every label
   sweeping forever would be exactly the "everything always moving" clutter
   this whole pass has been trying to avoid. */
.method-step.is-active .method-label{color:var(--accent-electric);}

/* .text-reflect — a very subtle white↔silver sheen for important white headlines.
   Text stays readable as white at all times; only the highlight position drifts,
   slowly enough to read as ambient light rather than "animated text". */
.text-reflect{
  background-image:linear-gradient(100deg,
    var(--text) 0%, var(--text) 42%,
    #ffffff 48%, var(--silver) 52%,
    var(--text) 58%, var(--text) 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.16);
  animation:text-reflect-sweep 9s ease-in-out infinite;
}
@keyframes text-reflect-sweep{
  0%,100%{background-position:200% 0;}
  50%{background-position:0% 0;}
}
:root[data-theme="light"] .text-reflect{
  background-image:linear-gradient(100deg,
    var(--text) 0%, var(--text) 46%,
    var(--silver) 50%,
    var(--text) 54%, var(--text) 100%);
  text-shadow:none;
  animation-duration:12s;
}
@media (prefers-reduced-motion:reduce){
  .text-reflect{animation:none;background-position:0 0;}
}

/* .shimmer-sweep — a translucent diagonal highlight that crosses an element ONCE
   per hover (not continuous). Grouped with .btn-primary so every primary CTA gets
   a bit more energy for free; reusable standalone on anything else important. */
.shimmer-sweep, .btn-primary{position:relative;overflow:hidden;}
.shimmer-sweep::after, .btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform:translateX(-130%);
  transition:transform .6s ease;
  pointer-events:none;
}
.shimmer-sweep:hover::after, .btn-primary:hover::after{transform:translateX(130%);}
@media (prefers-reduced-motion:reduce){
  .shimmer-sweep::after, .btn-primary::after{transition:none;}
}

/* .btn-animated-border — opt-in ring (mask-composite trick, reuses the existing
   --border-angle spin) for a ghost/secondary button that needs "vida" without a
   solid fill. Combine with .btn-ghost/.btn-secondary; not applied by default. */
.btn-animated-border{
  position:relative;
  z-index:0;
  border-color:transparent;
  --btn-glow-rgb:var(--accent-rgb);
  transition:box-shadow .3s ease;
}
.btn-animated-border::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--border-angle),
    var(--accent-deep), var(--accent), var(--accent-electric), var(--accent-highlight), var(--accent-deep));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:border-angle-spin 6s linear infinite;
  pointer-events:none;
  opacity:.7;
  transition:opacity .3s ease;
}
.btn-animated-border:hover::before{opacity:1;}
.btn-animated-border:hover{box-shadow:0 0 26px -6px var(--accent-glow);}
@media (prefers-reduced-motion:reduce){
  .btn-animated-border::before{animation:none;}
}

.gradient-text{
  background-image:var(--gradient);
  background-size:var(--gradient-size) 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradient-shift 7s ease infinite;
}
.gradient-text-blue{background-image:linear-gradient(90deg,#3a6df0,#17d9e0,#6bdb44,#17d9e0,#3a6df0);}
/* Vivid 7-hue wheel: each class is one consecutive slice, so any two picked anywhere on the site read as distinct but harmonious */
.gradient-text-purple-pink{background-image:linear-gradient(90deg,#8b3ffc,#ff3d94,#8b3ffc);}
.gradient-text-pink-orange{background-image:linear-gradient(90deg,#ff3d94,#ff8a3d,#ff3d94);}
.gradient-text-orange-yellow{background-image:linear-gradient(90deg,#ff8a3d,#ffe135,#ff8a3d);}
.gradient-text-yellow-green{background-image:linear-gradient(90deg,#ffe135,#6bdb44,#ffe135);}
.gradient-text-green-cyan{background-image:linear-gradient(90deg,#6bdb44,#17d9e0,#6bdb44);}
.gradient-text-cyan-blue{background-image:linear-gradient(90deg,#17d9e0,#3a6df0,#17d9e0);}
.gradient-text-blue-purple{background-image:linear-gradient(90deg,#3a6df0,#8b3ffc,#3a6df0);}
@keyframes gradient-shift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ===== Placeholders (marked content) ===== */
.media-placeholder{
  background:repeating-linear-gradient(45deg, transparent, transparent 10px, var(--border) 10px, var(--border) 20px);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:.8rem;
  text-align:center;
  padding:12px;
}
.placeholder-inline{
  border:1px dashed rgba(var(--text-rgb),.25);
  border-radius:6px;
  padding:0 6px;
}
/* Variante "pending": estado vazio deliberado (ícone + legenda), sem a
   listra de placeholder de desenvolvimento acima. Opt-in via mediaSlot()
   (5º argumento) — não afeta nenhum .media-placeholder existente. */
.media-placeholder.media-pending{
  background:linear-gradient(155deg, var(--surface), var(--bg));
  border:1px solid var(--border);
  flex-direction:column;
  gap:10px;
}
.media-pending-icon{
  width:26px;
  height:26px;
  color:var(--silver);
  opacity:.6;
}
.media-pending-label{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--text-dim);
}
/* The real-image counterpart to .media-placeholder — same slot, same sizing
   classes (aspect-ratio etc. are on those, not here), just an <img> instead
   of a div once the real file exists on disk. See mediaSlot() in build.js. */
.media-real{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
}

/* ===== Buttons ===== */
@keyframes btn-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--btn-glow-rgb),.28);}
  50%{box-shadow:0 0 18px 4px rgba(var(--btn-glow-rgb),.4);}
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  transition:transform .25s ease, filter .25s ease;
  white-space:nowrap;
  --btn-glow-rgb: var(--text-rgb);
}
.btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.18);}
.btn:active{transform:translateY(0) scale(.97);filter:brightness(1.05);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--btn-glow-rgb),.55);}
.btn-small{padding:10px 20px;font-size:.85rem;}
/* Continuous glow-pulse is now opt-in (one truly special CTA per page), not the
   default on every button — add .btn-pulse where that emphasis is actually earned. */
.btn-pulse{animation:btn-pulse 3s ease-in-out infinite;}
/* Primary system button — solid digital blue, stable at rest, reacts on hover/click. */
.btn-primary{
  background:var(--accent);
  color:#fff;
  --btn-glow-rgb: var(--accent-rgb);
}
.btn-gradient{
  background-image:var(--gradient);
  background-size:var(--gradient-size) 100%;
  color:#fff;
  --btn-glow-rgb: var(--accent-rgb);
  animation:gradient-shift 7s ease infinite;
}
/* .btn-secondary is the consolidated name for this same neutral-solid button
   — new pages should reach for it; .btn-solid stays for pages already using it. */
.btn-secondary, .btn-solid{
  background:var(--text);
  color:var(--bg);
}
.btn-whatsapp{
  background-image:linear-gradient(90deg,#075e54,#128c7e,#25d366,#128c7e,#075e54);
  background-size:300% 100%;
  color:#fff;
  --btn-glow-rgb: 37,211,102;
  animation:gradient-shift 6s ease infinite;
}
.btn-outline{
  border-color:transparent;
  background-image:linear-gradient(90deg,#1e5fd9,#33c1ff,#1e5fd9);
  background-size:300% 100%;
  color:#fff;
  --btn-glow-rgb: 51,193,255;
  animation:gradient-shift 7s ease infinite;
}
.btn-blue{
  background-image:linear-gradient(90deg,#1e5fd9,#33c1ff,#1e5fd9);
  background-size:300% 100%;
  color:#fff;
  --btn-glow-rgb: 51,193,255;
  animation:gradient-shift 7s ease infinite;
}
.btn-purple{
  border-color:transparent;
  background-image:linear-gradient(90deg,#8b3ffc,#c65fe0,#8b3ffc);
  background-size:300% 100%;
  color:#fff;
  --btn-glow-rgb: 139,63,252;
  animation:gradient-shift 7s ease infinite;
}
.btn-pink{
  border-color:transparent;
  background-image:linear-gradient(90deg,#ff3d94,#ff8a3d,#ff3d94);
  background-size:300% 100%;
  color:#fff;
  --btn-glow-rgb: 255,61,148;
  animation:gradient-shift 7s ease infinite;
}
.btn-orange{
  border-color:transparent;
  background-image:linear-gradient(90deg,#e0672a,#ff8a3d,#e0672a);
  background-size:300% 100%;
  color:#fff;
  --btn-glow-rgb: 255,138,61;
  animation:gradient-shift 7s ease infinite;
}
.btn-green-mint{
  border-color:transparent;
  background-image:linear-gradient(90deg,#22c98a,#4ade80,#22c98a);
  background-size:300% 100%;
  color:#fff;
  --btn-glow-rgb: 74,222,128;
  animation:gradient-shift 7s ease infinite;
}
.btn-green-forest{
  border-color:transparent;
  background-image:linear-gradient(90deg,#0f6b48,#0f8a5f,#0f6b48);
  background-size:300% 100%;
  color:#fff;
  --btn-glow-rgb: 15,138,95;
  animation:gradient-shift 7s ease infinite;
}

/* ===== Header ===== */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:18px 0;
  transition:background .3s ease, padding .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled{
  background:rgba(var(--bg-rgb),.85);
  backdrop-filter:blur(10px);
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:24px;
}
.logo{
  margin-right:auto;
}
.logo-mark-link{
  display:flex;
  align-items:center;
}
.logo-mark{
  height:34px;
  width:auto;
}
.main-nav{
  display:flex;
  gap:28px;
}
.main-nav a{
  font-size:.9rem;
  color:var(--text-dim);
  transition:color .2s ease;
}
.main-nav a:hover, .main-nav a.active{color:var(--text);}
.nav-dropdown{position:relative;}
.nav-dropdown summary{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:.9rem;
  color:var(--text-dim);
  cursor:pointer;
  list-style:none;
  transition:color .2s ease;
}
.nav-dropdown summary::-webkit-details-marker{display:none;}
.nav-dropdown summary::after{content:"▾";font-size:.65em;}
.nav-dropdown summary:hover,
.nav-dropdown[open] summary{color:var(--text);}
.nav-dropdown-menu{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:10px;
}
.nav-dropdown-menu a{font-size:.9rem;color:var(--text-dim);}
.nav-dropdown-menu a:hover{color:var(--text);}
/* Segment pages not built yet — visible on the roadmap, not a dead link. */
.nav-dropdown-soon{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.9rem;
  color:var(--text-dim);
  opacity:.5;
  cursor:default;
}
.nav-dropdown-soon small{
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--silver);
  white-space:nowrap;
}
/* "Ver todos os segmentos" — link real (não "em breve"), só visualmente
   separado dos destaques por uma linha fina, pra não virar mais um item
   igual aos outros num dropdown que já lista vários. */
.nav-dropdown-viewall{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid var(--border);
  font-size:.85rem;
  font-weight:600;
  color:var(--accent) !important;
}
@media (min-width:861px){
  .nav-dropdown-menu{
    position:absolute;
    top:calc(100% + 14px);
    left:50%;
    transform:translateX(-50%);
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px;
    min-width:190px;
    box-shadow:0 12px 30px rgba(0,0,0,.3);
    z-index:20;
  }
  .nav-dropdown-menu a{padding:9px 10px;border-radius:8px;white-space:nowrap;}
  .nav-dropdown-menu a:hover{background:rgba(var(--text-rgb),.06);}
  .nav-dropdown-soon{padding:9px 10px;white-space:nowrap;}
}
/* Seletor de idioma: texto, não bandeira (inglês internacional não tem uma
   bandeira única correta). PT/EN com o ativo em destaque, mesmo par em toda
   página — trocar de idioma troca só a árvore (/ vs /en/), mantendo o
   caminho relativo, então sempre leva pra a página equivalente. */
.lang-switch{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:.78rem;
  font-weight:700;
  color:var(--text-faint);
  padding:0 6px;
  flex-shrink:0;
  letter-spacing:.02em;
}
.lang-switch:hover{color:var(--text-dim);}
.lang-switch span[aria-hidden]{color:var(--text-faint);opacity:.5;}
.lang-switch span.is-active{color:var(--accent-text);}
/* Páginas sem versão em inglês ainda (só Para Creators tem /en/ por
   enquanto): em vez de linkar pra um /en/arquivo.html que não existe,
   mostra PT/EN esmaecido e sem clique. */
.lang-switch-disabled{opacity:.4;cursor:default;}
.lang-switch-disabled span.is-active{color:var(--text-faint);}
.theme-toggle{
  position:relative;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  flex-shrink:0;
  overflow:hidden;
}
.theme-toggle:hover{border-color:rgba(var(--text-rgb),.35);}
.theme-toggle-icon{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease, transform .2s ease;
}
.theme-toggle-sun{
  opacity:1;
  width:12px;height:12px;
  border-radius:50%;
  background:currentColor;
  box-shadow:
    0 -8px 0 -5px currentColor, 0 8px 0 -5px currentColor,
    -8px 0 0 -5px currentColor, 8px 0 0 -5px currentColor,
    -5.5px -5.5px 0 -5px currentColor, 5.5px -5.5px 0 -5px currentColor,
    -5.5px 5.5px 0 -5px currentColor, 5.5px 5.5px 0 -5px currentColor;
}
.theme-toggle-moon{
  opacity:0;
  transform:translate(-50%,-50%) rotate(-40deg);
  width:13px;height:13px;
  border-radius:50%;
  background:currentColor;
}
.theme-toggle-moon::before{
  content:"";
  position:absolute;
  top:-2px;right:-4px;
  width:13px;height:13px;
  border-radius:50%;
  background:var(--bg);
}
:root[data-theme="light"] .theme-toggle-sun{opacity:0;transform:translate(-50%,-50%) rotate(40deg);}
:root[data-theme="light"] .theme-toggle-moon{opacity:1;transform:translate(-50%,-50%) rotate(0deg);}
.header-cta{margin-left:8px;}
.main-nav-cta{display:none;}
.nav-backdrop{display:none;}
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
}
.menu-toggle span{
  width:22px;height:2px;background:var(--text);
  transition:transform .25s ease, opacity .25s ease;
}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  .main-nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    height:100dvh;
    width:min(78vw,320px);
    background:var(--bg-alt);
    flex-direction:column;
    justify-content:center;
    gap:28px;
    padding:40px clamp(24px,7vw,40px);
    padding-top:max(40px, env(safe-area-inset-top));
    padding-bottom:max(40px, env(safe-area-inset-bottom));
    transform:translateX(100%);
    transition:transform .3s ease;
    border-left:1px solid var(--border);
    overflow-y:auto;
    z-index:95;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{padding:6px 0;}
  .header-cta{display:none;}
  .main-nav-cta{
    display:inline-flex;
    margin-top:12px;
    width:100%;
    padding:14px 28px;
  }
  .menu-toggle{display:flex;position:relative;z-index:96;}
  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:90;
  }
  .main-nav.open ~ .nav-backdrop{opacity:1;pointer-events:auto;}
  body.nav-open{overflow:hidden;}
}

/* ===== Hero ===== */
.spotlight-zone{
  position:relative;
  overflow:hidden;
  --spot-x:50%;
  --spot-y:20%;
}
.hero{
  padding:130px 0 40px;
}
.hero-grid{
  position:absolute;
  inset:-1px;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 25%, #000 40%, transparent 88%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 25%, #000 40%, transparent 88%);
  animation:hero-grid-drift 9s linear infinite;
}
.hero-spotlight{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle 220px at var(--spot-x) var(--spot-y), rgba(255,255,255,.14), transparent 70%);
}
:root[data-theme="light"] .hero-grid{
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
}
:root[data-theme="light"] .hero-spotlight{
  background:radial-gradient(circle 220px at var(--spot-x) var(--spot-y), rgba(0,0,0,.06), transparent 70%);
}
/* No cursor on touch devices — the spotlight would otherwise sit frozen at its default
   position (50%, 20%) and read as a stray glow/dot stuck in the middle of the hero text. */
@media (hover:none){
  .hero-spotlight{display:none;}
}
@keyframes hero-grid-drift{
  0%{background-position:0 0, 0 0;}
  100%{background-position:46px 46px, 46px 46px;}
}
.hero > .container{position:relative;z-index:1;}
.floating-creators{z-index:1;}
/* Floating creator avatars, positioned on the sides of the hero, grayscale by default */
.floating-creators{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.floating-creator{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  pointer-events:auto;
  animation:float-y 6s ease-in-out infinite;
}
.avatar-float{
  width:76px;
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  filter:grayscale(1) brightness(.8);
  transition:filter .4s ease, box-shadow .4s ease, transform .4s ease;
}
/* Zoomed-crop variant: wraps a photo whose subject doesn't fill the frame as
   tightly as a plain object-fit crop would need (e.g. a full-body shot used
   as a face avatar) — clips a scaled-up <img> instead of resizing the frame. */
.avatar-zoom{overflow:hidden;position:relative;}
.avatar-zoom img{width:100%;height:100%;object-fit:cover;display:block;}
.floating-name{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  font-size:.72rem;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
  background-image:var(--gradient);
  background-size:var(--gradient-size) 100%;
  animation:gradient-shift 7s ease infinite;
  color:#fff;
  white-space:nowrap;
}
.floating-creator:hover .avatar-float,
.floating-creator:focus-visible .avatar-float{
  filter:grayscale(0) brightness(1);
  transform:scale(1.06);
  box-shadow:0 0 46px 14px rgba(var(--accent-rgb),.4), 0 0 90px 30px rgba(154,160,168,.22);
}
.floating-creator:hover .floating-name,
.floating-creator:focus-visible .floating-name{
  opacity:1;
  transform:translateY(0);
}
/* Only two real creators today (Jú, Malu) — placed on either side of the headline,
   never both hidden at the same breakpoint so both stay visible together or not at all. */
.fc-1{ left:4%; top:14%; width:52px; animation-duration:6s; animation-delay:0s; }
.fc-2{ right:4%; top:14%; width:52px; animation-duration:7s; animation-delay:.8s; }
.fc-1 .avatar-float,.fc-2 .avatar-float{ width:100%; }
@keyframes float-y{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-16px);}
}
@media (max-width:1100px) and (min-width:761px){
  .floating-creators{display:none;}
}
@media (max-width:760px){
  .fc-1{ left:3%; top:70px; width:38px; }
  .fc-2{ right:3%; top:70px; width:38px; }
}

.hero-inner{text-align:center;}
.hero-title{
  font-size:clamp(2.8rem,9vw,6.8rem);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.005em;
  margin:0 0 20px;
}
.hero-title span{display:block;}
/* .accent-word must win back inline here: the rule above (needed so
   "Aceleramos" sits on its own line) was also catching the two accent-word
   spans below it, forcing "Criadores" and "e Marcas" onto separate lines
   even on wide desktop screens instead of flowing together and wrapping
   only when the viewport is actually too narrow. */
.hero-title .accent-word,
.hero-title .accent-word-live{display:inline;}
.hero-sub{
  max-width:560px;
  margin:0 auto 36px;
  color:var(--text-dim);
  font-size:1.1rem;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:48px;
}

/* ===== Sections ===== */
.section{padding:64px 0;}
/* Reverted: the alternating card-tint band per "-alt" section read as a hard
   seam between bands rather than rhythm. The page is a single flat --bg now,
   in both themes — .section-alt/.iv-section-alt are back to no-ops, the same
   as before that experiment (kept defined, not deleted, in case a future pass
   wants to reach for a much subtler version). */
.section-alt, .iv-section-alt{background:none;}
.eyebrow{
  display:block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--silver);
  margin-bottom:14px;
}
.section-title{
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 18px;
}
.section-lead{
  color:var(--text);
  max-width:640px;
  font-size:1.05rem;
  margin:0 0 48px;
}

/* ===== About ===== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:56px;
}
.feature-card{
  padding:28px 22px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}
.feature-card h3{margin:0 0 10px;font-size:1.1rem;}
.feature-card p{margin:0;color:var(--text-dim);font-size:.92rem;}

/* ===== Choice section ("O que você quer acelerar?") ===== */
/* ===== Wayfinding ("O que você veio acelerar?") ===== */
.wayfinding-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
  margin-bottom:18px;
}
.wayfinding-skip{
  display:block;
  margin:0 auto;
  background:none;
  border:none;
  color:var(--text-dim);
  font-size:.85rem;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  font-family:inherit;
}
.wayfinding-skip:hover{color:var(--text);}
@media (max-width:860px){.wayfinding-grid{grid-template-columns:minmax(0,1fr);}}

.choice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.choice-card{display:flex;flex-direction:column;gap:16px;}
.choice-card-tag{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);position:relative;z-index:1;}
.choice-card h3{position:relative;z-index:1;}
.choice-card > p{position:relative;z-index:1;}
.choice-card h3{margin:0;font-size:1.3rem;}
.choice-card > p{margin:0;color:var(--text-dim);font-size:.92rem;flex:1;}

/* Same logic as the Media Kit platform cards: the whole block is filled with
   the real brand color instead of a faint wash, so every text element inside
   is forced to a fixed white — these backgrounds are always fairly
   saturated/dark and won't reliably contrast with theme-based text tokens,
   especially in light mode. */
/* Two classes each (not one) so this beats .card-interactive/.feature-card's
   own background on specificity, regardless of which is defined later. */
.choice-card.choice-card-social,.choice-card.choice-card-google,.choice-card.choice-card-whatsapp{border-color:transparent;}
.choice-card.choice-card-social{background:linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045);}
.choice-card.choice-card-google{background:linear-gradient(135deg,#4285f4,#1a56db);}
.choice-card.choice-card-whatsapp{background:var(--whatsapp);}
.choice-card-social .choice-card-tag, .choice-card-social h3, .choice-card-social > p,
.choice-card-google .choice-card-tag, .choice-card-google h3, .choice-card-google > p,
.choice-card-whatsapp .choice-card-tag, .choice-card-whatsapp h3, .choice-card-whatsapp > p{
  color:#fff;
}
.choice-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
.choice-links a:not(.btn){
  font-size:.82rem;
  font-weight:600;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
}
.choice-links a:not(.btn):hover{background:rgba(var(--text-rgb),.06);}
/* .choice-links prefixed on every modifier below: the base rule above
   (.choice-links a:not(.btn)) is specificity (0,2,1) via its own :not()
   pseudo-class, which silently beat a bare single-class modifier selector
   regardless of source order — every one of these colors was being
   overridden back to the default border/text color. Matching the parent
   in the selector brings each modifier to (0,3,1), so it actually wins. */
.choice-links a.choice-link-purple{border-color:rgba(139,63,252,.4);color:var(--accent-text);}
.choice-links a.choice-link-purple:hover{background:rgba(139,63,252,.12);}
.choice-links a.choice-link-pink{border-color:rgba(255,61,148,.4);color:#ff9ec9;}
.choice-links a.choice-link-pink:hover{background:rgba(255,61,148,.12);}
:root[data-theme="light"] .choice-links a.choice-link-pink{color:#c2245f;}
.choice-links a.choice-link-green{border-color:rgba(37,211,102,.4);color:#7de3ab;}
.choice-links a.choice-link-green:hover{background:rgba(37,211,102,.12);}
:root[data-theme="light"] .choice-links a.choice-link-green{color:#0f8a4d;}
.choice-links a.choice-link-blue{border-color:rgba(51,193,255,.4);color:#8ab4ff;}
.choice-links a.choice-link-blue:hover{background:rgba(51,193,255,.12);}
:root[data-theme="light"] .choice-links a.choice-link-blue{color:#1a56db;}
.choice-grid-2{grid-template-columns:1fr 1fr;}
@media (max-width:900px){.choice-grid, .choice-grid-2{grid-template-columns:minmax(0,1fr);}}

/* ===== Método Rizer (connected flow, not a card grid) =====
   A real sequence — Problema → Diagnóstico → Estratégia → Solução → Execução →
   Resultado — drawn as a single connected line instead of six generic cards.
   Neutral (silver/white) at rest; script.js plays a ONE-TIME progression when
   the section enters the viewport — the line fills and each step lights up
   blue in order, then the whole flow stays filled. After that, hover (desktop
   only, .method-flow.method-done) adds emphasis without resetting anything.
   prefers-reduced-motion skips straight to the filled end state. */
.method-flow{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-top:56px;
}
.method-line{
  position:absolute;
  top:5px;
  left:0;
  right:0;
  height:2px;
  background:var(--border);
  overflow:hidden;
}
.method-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent-gradient);
  background-size:200% 100%;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 2.5s linear;
}
.method-flow.progressing .method-line::after{transform:scaleX(1);}
.method-step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  flex:1;
  text-align:center;
}
.method-dot{
  width:12px;height:12px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--silver);
  transition:border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease;
}
@keyframes method-dot-pop{
  0%{transform:scale(1);}
  40%{transform:scale(1.45);}
  100%{transform:scale(1);}
}
/* Once lit, a dot doesn't just sit there — a slow, gentle breathing glow (in
   the lighter --accent-electric, not the base blue) keeps it feeling alive.
   Different property than the one-shot pop (box-shadow vs. transform) so the
   two combine without fighting each other. */
@keyframes method-dot-breathe{
  0%,100%{box-shadow:0 0 0 4px var(--accent-glow);}
  50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),.16);}
}
.method-step.is-active .method-dot{
  border-color:var(--accent-electric);
  background:var(--accent-electric);
  box-shadow:0 0 0 4px var(--accent-glow);
  animation:method-dot-pop .5s ease, method-dot-breathe 2.6s ease-in-out .5s infinite;
}
.method-label{
  font-size:.85rem;
  font-weight:700;
  color:var(--text-dim);
  white-space:nowrap;
  transition:color .35s ease;
}
.method-step-key .method-dot{width:14px;height:14px;}
/* Hover only after the progression has finished, and only where hover means
   something (desktop) — never resets .is-active, just adds emphasis. */
@media (hover:hover){
  .method-flow.method-done .method-step:hover .method-dot{
    transform:scale(1.2);
    box-shadow:0 0 0 6px var(--accent-glow);
  }
  .method-flow.method-done .method-step:hover .method-label{
    background-image:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    color:var(--text);
  }
}
@media (max-width:760px){
  .method-flow{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    margin:40px auto 0;
    padding-left:6px;
    width:fit-content;
  }
  .method-line{
    /* Centered on the dot: flow's padding-left (6px) + half the 12px dot (6px) - half
       the 2px line (1px) = 11px. Keeps the line running straight through every dot,
       including the slightly bigger 14px "Estratégia" one (1px off, imperceptible). */
    top:0;bottom:0;left:11px;right:auto;
    width:2px;height:auto;
  }
  .method-line::after{transform:scaleY(0);transform-origin:top center;}
  .method-flow.progressing .method-line::after{transform:scaleY(1);}
  .method-step{flex-direction:row;align-items:center;text-align:left;gap:16px;width:100%;}
  .method-label{white-space:normal;}
}
@media (prefers-reduced-motion: reduce){
  .method-line::after{transition:none;}
  .method-dot{transition:none;}
  .method-step.is-active .method-dot{animation:none;}
}


.proof-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
/* Only two numbers are real and strong enough to carry a card — sized and
   centered for two instead of forcing a third stat-shaped slot. */
.proof-grid-2{grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;}
.proof-card{
  padding:32px 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.proof-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.1;
  pointer-events:none;
  background:radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb),1), transparent 60%);
}
:root[data-theme="light"] .proof-card{
  border-color:var(--border-strong);
  box-shadow:0 1px 3px rgba(17,18,20,.05);
}
.proof-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:var(--accent);
  box-shadow:0 30px 50px -26px rgba(0,0,0,.5), 0 0 34px -10px var(--accent-glow);
}
:root[data-theme="light"] .proof-card:hover{
  box-shadow:0 30px 50px -30px rgba(17,18,20,.22), 0 0 34px -10px var(--accent-glow);
}
.proof-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  border-radius:50%;
  position:relative;
  z-index:1;
  background:var(--accent-soft);
  color:var(--accent);
  transition:transform .35s ease, background .35s ease;
}
.proof-card:hover .proof-icon{background:rgba(var(--accent-rgb),.2);transform:scale(1.08);}
.proof-icon svg{width:24px;height:24px;}
.proof-number{font-size:2.2rem;font-weight:800;color:var(--text);position:relative;z-index:1;font-variant-numeric:tabular-nums;}
.proof-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--silver);position:relative;z-index:1;}
.proof-card p{margin:0;color:var(--text-dim);font-size:.88rem;position:relative;z-index:1;}
@media (prefers-reduced-motion:reduce){
  .proof-card, .proof-icon{transition:none;}
  .proof-card:hover{transform:none;}
}
.proof-note{
  margin-top:24px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:.9rem;
  color:var(--text-dim);
}
.proof-note strong{color:var(--text);}
@media (max-width:900px){.proof-grid,.proof-grid-2{grid-template-columns:minmax(0,1fr);}}

@media (max-width:900px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){
  .feature-grid{grid-template-columns:minmax(0,1fr);}
}

/* ===== Creators grid ===== */
.creators-grid{
  display:grid;
  /* Only two real creators today — sized and centered for two, not stretched
     across a third empty slot. Add a column here when a third one is real. */
  grid-template-columns:repeat(2,minmax(0,360px));
  justify-content:center;
  gap:24px;
  margin-bottom:44px;
}
.creator-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  background:var(--surface);
  transition:transform .2s ease, border-color .2s ease;
}
.creator-card:has(.creator-card-inner:hover){
  transform:translateY(-4px);
  border-color:rgba(var(--text-rgb),.2);
}
.creator-card-inner{display:contents;}
.creator-photo{aspect-ratio:4/5;width:100%;margin-bottom:14px;object-fit:cover;}
.creator-niche{
  display:block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-dim);
  margin-bottom:6px;
}
.mediakit-tag{
  position:absolute;
  top:26px;right:26px;
  font-size:.65rem;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.75);
  border:1px solid var(--border);
  color:#5b9dff;
  font-weight:700;
}
.creator-card h3{margin:0 0 4px;font-size:1.05rem;}
.creator-handle{display:block;color:var(--text-dim);font-size:.82rem;margin-bottom:12px;}
.creator-followers{display:flex;align-items:baseline;gap:6px;}
.creator-followers strong{font-size:1.1rem;}
.creator-followers small{color:var(--text-dim);font-size:.75rem;}
.see-all{text-align:center;margin-top:32px;}

@media (max-width:960px){.creators-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.creators-grid{grid-template-columns:minmax(0,1fr);}}

/* ===== Cases ===== */
.cases-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:220px;
  gap:16px;
}
.case-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.case-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 50px -26px rgba(0,0,0,.5), 0 0 34px -8px rgba(var(--text-rgb),.35);
}
.case-card-lg{grid-column:span 2;grid-row:span 2;}
.case-photo{position:absolute;inset:0;border-radius:0;border:none;transition:transform .5s ease;}
.case-card:hover .case-photo{transform:scale(1.08);}
.case-tag,
.case-card h3{
  position:relative;
  z-index:1;
  margin:0 0 0 18px;
}
.case-tag{
  display:inline-block;
  font-size:.65rem;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  margin-bottom:8px;
}
.case-card h3{font-size:1rem;margin-bottom:16px;padding-right:18px;}

@media (max-width:900px){
  .cases-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .case-card-lg{grid-column:span 2;}
}
@media (max-width:560px){
  .cases-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:200px;}
  .case-card-lg{grid-column:span 1;grid-row:span 1;}
}

/* ===== Contact ===== */
.contact-inner{max-width:640px;text-align:center;}
.contact-toggle{
  display:flex;
  gap:12px;
  margin-bottom:36px;
  flex-wrap:wrap;
  justify-content:center;
}
.toggle-group{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:28px;
}
.toggle-btn{
  padding:12px 22px;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-dim);
  font-size:.88rem;
  font-weight:600;
  transition:all .2s ease, transform .2s ease, box-shadow .2s ease;
}
.toggle-btn:not(.active):hover{
  border-color:var(--accent);
  color:var(--text);
  transform:translateY(-2px);
}
.toggle-btn.active{
  color:#fff;
  border-color:transparent;
  background-image:var(--gradient);
  background-size:var(--gradient-size) 100%;
  animation:gradient-shift 7s ease infinite;
}
/* Contact toggle: each option keeps its own color (green = empresa, blue = creator) instead
   of one gradient winner and one plain/dim loser, since they're two paths, not a ranked choice.
   Both stay reactive on hover — lift + brighten + a colored glow — even the dimmed one. */
#contact-toggle .toggle-btn{
  color:#fff;
  border-color:transparent;
  background-size:300% 100%;
  opacity:.55;
  transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
#contact-toggle .toggle-btn.active{opacity:1;}
#contact-toggle .toggle-btn:hover{
  opacity:1;
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.12);
}
#contact-toggle [data-mode="empresa"]{
  background-image:linear-gradient(90deg,#075e54,#128c7e,#25d366,#128c7e,#075e54);
  animation:gradient-shift 6s ease infinite;
}
#contact-toggle [data-mode="empresa"]:hover{box-shadow:0 12px 28px -12px rgba(37,211,102,.5);}
/* Was a hardcoded blue that predated the token system — now the same controlled
   blue family (deep → main → electric) every other blue element uses. */
#contact-toggle [data-mode="creator"]{
  background-image:var(--accent-gradient);
  background-size:130% 100%;
  animation:gradient-shift 7s ease infinite;
}
#contact-toggle [data-mode="creator"]:hover{box-shadow:0 12px 28px -12px var(--accent-glow);}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:left;
  margin-bottom:80px;
}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row label{font-size:.85rem;color:var(--text-dim);}
.form-row input,
.form-row select,
.form-row textarea{
  padding:14px 16px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:.95rem;
  font-family:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-row textarea{resize:vertical;min-height:80px;}
.form-row select:invalid{color:var(--text-dim);}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{outline:none;border-color:rgba(var(--text-rgb),.4);box-shadow:0 0 0 3px rgba(var(--text-rgb),.12);}
/* Same "give it presence" treatment as .card-interactive in light mode — a
   white field on an off-white page with an 8%-black border was nearly
   invisible until you focused it. */
:root[data-theme="light"] .form-row input,
:root[data-theme="light"] .form-row select,
:root[data-theme="light"] .form-row textarea{
  border-color:var(--border-strong);
  box-shadow:0 1px 3px rgba(17,18,20,.05);
}
.form-submit{margin-top:8px;align-self:flex-start;}

/* ===== FAQ ===== */
.faq{text-align:left;}
.faq .section-title, .faq .section-lead{text-align:center;margin-left:auto;margin-right:auto;}
.faq-item{
  border-bottom:1px solid var(--border);
  transition:border-color .2s ease;
}
.faq-question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:none;
  border:none;
  color:var(--text);
  padding:20px 0;
  font-size:1rem;
  text-align:left;
  transition:color .2s ease;
}
.faq-question:hover{color:var(--accent-text);}
.faq-question:hover .faq-icon{color:var(--accent-text);}
.faq-icon{
  font-size:1.3rem;
  color:var(--text-dim);
  transition:transform .25s ease, color .2s ease;
  flex-shrink:0;
}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(45deg);}
.faq-answer{
  display:grid;
  grid-template-rows:minmax(0,0fr);
  transition:grid-template-rows .3s ease;
}
.faq-item.open .faq-answer{grid-template-rows:minmax(0,1fr);}
.faq-answer-inner{overflow:hidden;}
.faq-answer-inner p{
  margin:0 0 20px;
  color:var(--text-dim);
  font-size:.92rem;
}

/* ===== Media Kit (individual creator page) =====
   These pages have ONE shared accent gradient (--creator-gradient, the
   site's own blue family) instead of picking a different gradient-text-*
   color per section like before — but it's spent on a single moment per
   card (.media-kit-accent, only on the audience headline stat) rather than
   repeated on section titles/package numbers too, which read as monotonous
   blue when tried. Section title destaque words render in plain theme text
   now (no span class needed). Platform brand cards keep their own identity
   untouched (Instagram/TikTok/Facebook/YouTube colors), unrelated to this
   token. Reuses the same background-clip/animation mechanism as
   .gradient-text elsewhere on the site. */
.media-kit-accent{
  background-image:var(--creator-gradient);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradient-shift 8s ease infinite;
}
@media (prefers-reduced-motion:reduce){
  .media-kit-accent{animation:none;}
}

.mk-header-section{padding-top:130px;}
.mk-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
.mk-avatar{width:140px;aspect-ratio:1;border-radius:50%;flex-shrink:0;object-fit:cover;}
/* Instagram-story-style ring around the header avatar — same gradient
   used everywhere else on the page for Instagram (platform card, stat
   number). The gradient sits in the wrapper's padding; a background-
   colored box-shadow on the photo itself carves out a small breathing
   gap between the photo and the ring, instead of the gradient
   touching the photo edge-to-edge. */
.mk-avatar-ring{
  width:160px;
  aspect-ratio:1;
  border-radius:50%;
  padding:7px;
  flex-shrink:0;
  display:flex;
  background:conic-gradient(from -45deg, #fcb045, #fd1d1d 35%, #833ab4 65%, #fcb045 100%);
}
.mk-avatar-ring .mk-avatar{width:100%;height:100%;box-shadow:0 0 0 3px var(--bg);}
.mk-header-info{flex:1;min-width:220px;}
.mk-name{font-size:clamp(1.8rem,4vw,2.6rem);margin:8px 0;}
.mk-stats-strip{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-left:auto;
}
.mk-stat{display:flex;flex-direction:column;align-items:center;gap:4px;}
.mk-stat strong{font-size:1.3rem;font-variant-numeric:tabular-nums;}
/* White label under each number — was the dim/muted tone, now full
   contrast (adapts light/dark via --text like the eyebrows above). */
.mk-stat small{color:var(--text);font-size:.72rem;}
/* Each number picks up its platform's own color — same palette as the
   platform cards further down the page, just applied to text instead of
   a full card background — and the gradient itself drifts slowly left
   to right (background-size wider than the text + animated
   background-position) so it reads as a living shimmer, not a flat
   fill. Solid brand colors (Facebook/YouTube) get a two-tone gradient
   of their own shade so the same animation applies to all four. */
.mk-stat-instagram strong,
.mk-stat-tiktok strong,
.mk-stat-facebook strong,
.mk-stat-youtube strong{
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:mk-stat-shine 6s linear infinite;
}
.mk-stat-instagram strong{background-image:linear-gradient(90deg,#833ab4,#fd1d1d 35%,#fcb045 55%,#fd1d1d 75%,#833ab4);filter:drop-shadow(0 0 7px rgba(253,29,29,.5)) drop-shadow(0 0 16px rgba(131,58,180,.35));}
.mk-stat-tiktok strong{background-image:linear-gradient(90deg,#0f8a83,#25f4ee 35%,#fe2c55 55%,#25f4ee 75%,#0f8a83);filter:drop-shadow(0 0 7px rgba(37,244,238,.5)) drop-shadow(0 0 16px rgba(254,44,85,.35));}
.mk-stat-facebook strong{background-image:linear-gradient(90deg,#0d47a1,#1877f2 35%,#6ab0ff 55%,#1877f2 75%,#0d47a1);filter:drop-shadow(0 0 7px rgba(24,119,242,.5)) drop-shadow(0 0 16px rgba(24,119,242,.3));}
.mk-stat-youtube strong{background-image:linear-gradient(90deg,#a30000,#ff0000 35%,#ff6a5c 55%,#ff0000 75%,#a30000);filter:drop-shadow(0 0 7px rgba(255,0,0,.5)) drop-shadow(0 0 16px rgba(255,90,90,.3));}
@keyframes mk-stat-shine{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}
@media (prefers-reduced-motion: reduce){
  .mk-stat-instagram strong, .mk-stat-tiktok strong, .mk-stat-facebook strong, .mk-stat-youtube strong{animation:none;}
}
/* Mobile: the row-with-wrap above left the stats stranded on their own
   left-aligned line with a big gap above them. Below this width, stack
   and center the whole header instead — avatar, name/handle, then a
   compact centered stats row right under it. */
@media (max-width:640px){
  .mk-header{flex-direction:column;text-align:center;gap:18px;}
  .mk-avatar{width:104px;}
  .mk-avatar-ring{width:118px;}
  .mk-header-info{flex:none;min-width:0;}
  .mk-stats-strip{margin-left:0;justify-content:center;gap:22px;}
}

.platforms-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.platform-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 16px;
  background:var(--surface);
  text-align:center;
  transition:border-color .2s ease, transform .2s ease;
}
.platform-card:hover{border-color:rgba(var(--text-rgb),.25);transform:translateY(-3px);}
.platform-card h3{margin:0 0 6px;font-size:1rem;color:var(--text);}
.platform-card .creator-handle{margin-bottom:14px;}
.platform-followers{font-size:1.3rem;font-weight:800;}
.platform-followers-label{font-size:.7rem;color:var(--text-dim);display:block;margin-bottom:16px;}
.platform-link{font-size:.82rem;font-weight:700;color:var(--text);display:inline-block;transition:color .2s ease, transform .2s ease;}
.platform-link:hover{transform:translateX(3px);}
/* Each card is filled with its own platform's brand color — not just an
   accent on one line — so every text element inside is forced to a fixed
   white regardless of site theme, since these backgrounds are always fairly
   saturated/dark and the usual --text/--text-dim tokens (built for a plain
   card surface) would lose contrast, especially in light mode. */
:is(.platform-card-instagram, .platform-card-tiktok, .platform-card-facebook, .platform-card-youtube){
  border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:border-color .2s ease, transform .3s cubic-bezier(.2,.8,.2,1), filter .2s ease, box-shadow .3s ease;
}
:is(.platform-card-instagram, .platform-card-tiktok, .platform-card-facebook, .platform-card-youtube):hover{
  filter:brightness(1.1);
  transform:translateY(-4px);
  box-shadow:0 22px 36px -18px rgba(0,0,0,.55);
}
:is(.platform-card-instagram, .platform-card-tiktok, .platform-card-facebook, .platform-card-youtube) :is(h3, .creator-handle, .platform-followers, .platform-followers-label, .platform-link){
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:none;
}
:is(.platform-card-instagram, .platform-card-tiktok, .platform-card-facebook, .platform-card-youtube) .platform-followers-label{color:rgba(255,255,255,.8);}
.platform-card-instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045);}
.platform-card-tiktok{background:linear-gradient(135deg,#010101,#25f4ee 55%,#fe2c55);}
.platform-card-facebook{background:#1877f2;}
.platform-card-youtube{background:#ff0000;}

@media (max-width:960px){.platforms-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.platforms-grid{grid-template-columns:minmax(0,1fr);}}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
/* Editorial refinement (was a plain gray box): near-black gradient fill +
   a faint top-right sheen, same restrained language as .package-card::before,
   so it reads as a premium insight card instead of an admin-dashboard tile. */
.audience-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 26px;
  background:linear-gradient(165deg, var(--surface), var(--bg) 75%);
}
.audience-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 88% -12%, rgba(255,255,255,.06), transparent 55%);
  pointer-events:none;
}
/* Small-caps eyebrow label instead of a same-weight-as-body heading —
   also used as-is by the Incluso/Opcional lists below (same component). */
.audience-card h3{
  position:relative;
  margin:0 0 20px;
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--text);
}
/* Headline stat: the single highest REAL value in the group, computed at
   build time (see audienceCard() in build.js) — never a hardcoded claim. */
.audience-headline{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.audience-headline-value{
  font-size:clamp(2rem,5vw,2.4rem);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.audience-headline-meta{display:flex;flex-direction:column;gap:2px;}
.audience-headline-meta strong{font-size:.92rem;color:var(--text);}
.audience-headline-meta small{font-size:.7rem;color:var(--text);text-transform:uppercase;letter-spacing:.05em;}
.bar-row{
  position:relative;
  display:grid;
  grid-template-columns:104px 1fr 58px;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  font-size:.82rem;
  color:var(--text-dim);
}
.bar-row:last-child{margin-bottom:0;}
.bar-row strong{font-size:.95rem;font-weight:800;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;}
.bar{height:10px;border-radius:999px;background:var(--border);overflow:hidden;}
.bar-fill{
  width:0;
  height:100%;
  border-radius:999px;
  background:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--border) 6px,var(--border) 12px);
  transition:width 1.1s cubic-bezier(.2,.8,.2,1);
}
/* Fill-in on first scroll into view — piggybacks on the sitewide .reveal/
   .in-view mechanism already driving everything else, no new JS needed.
   The target width travels as --w (set inline per row in build.js) instead
   of a plain width style, so it can start at 0 and animate up once. */
.audience-card.in-view .bar-fill{width:var(--w, 0);}
/* Silver, not blue: the headline stat above each card already carries the
   one deliberate accent moment — repeating that same blue on every bar
   read as monotonous, so the bars stay in the site's neutral metal tone. */
.bar-fill-real{background-image:linear-gradient(90deg, var(--silver), var(--text));}

/* Rank-list variant of .audience-card — for insights that are ordered but
   have no real percentage attached (ex.: top locations), so it never fakes
   a bar-fill width. Same card shell/headline as the bar variant. */
.audience-rank-list{list-style:none;margin:0;padding:0;}
.audience-rank-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  font-size:.88rem;
  color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.audience-rank-list li:last-child{border-bottom:none;}
.audience-rank-arrow{color:var(--text);font-weight:700;}

@media (max-width:760px){.audience-grid{grid-template-columns:minmax(0,1fr);}}

.mk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.mk-list li{
  font-size:.88rem;
  color:var(--text-dim);
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .2s ease, background .2s ease;
}
.mk-list li:hover{border-color:rgba(var(--text-rgb),.2);background:var(--surface-elevated);}

.deliverables-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 16px;
}
.deliverables-grid li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.95rem;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.deliverables-grid li:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--text-rgb),.2);
  background:var(--surface);
}
.check-mark{
  width:22px;height:22px;
  border-radius:50%;
  background-image:var(--whatsapp);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  flex-shrink:0;
}
@media (max-width:600px){
  .deliverables-grid{grid-template-columns:minmax(0,1fr);}
}

/* "Não incluído automaticamente" list (Supermercados plans) — same compact
   2-col checklist shape as .deliverables-grid, but a muted ✕ instead of the
   green WhatsApp check, since this is an exclusion list, not a delivery. */
.not-included-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 16px;
}
.not-included-grid li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.85rem;
  color:var(--text-dim);
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
}
.not-included-icon{
  width:22px;height:22px;
  border-radius:50%;
  background:#b91c1c;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  flex-shrink:0;
}
@media (max-width:600px){
  .not-included-grid{grid-template-columns:minmax(0,1fr);}
}

/* Stories Animados explainer (Supermercados only) — one campaign box, an
   arrow, one Stories box. Keeps the "6 produtos -> 6 Stories" idea as a
   single glanceable visual instead of a paragraph. */
.super-stories-example{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  max-width:620px;
  margin:32px auto 0;
}
/* Background/border come from .iv-glow-border (spinning highlight ring,
   same treatment used on package/plan cards elsewhere) — only layout and
   spacing stay local here. */
.super-stories-example-step{
  flex:1 1 220px;
  max-width:260px;
  text-align:center;
  padding:22px 20px;
}
.super-stories-example-step strong{display:block;font-size:1.05rem;margin-bottom:6px;}
.super-stories-example-step span{display:block;color:var(--text-dim);font-size:.85rem;}
.super-stories-example-arrow{font-size:1.6rem;color:var(--accent-text);flex-shrink:0;}
@media (max-width:640px){
  .super-stories-example-arrow{transform:rotate(90deg);}
}

.packages-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.package-card{
  padding:30px 26px;
  position:relative;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.package-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.07;
  pointer-events:none;
  background:radial-gradient(circle at 80% 0%, var(--text), transparent 60%);
}
/* Media Kit: a thin gradient line along the top edge — one more "microdetalhe"
   carrying the signature accent, so the color budget isn't spent only on
   the number below. Scoped to #mk-packages; Para Creators' cards are plain. */
#mk-packages .package-card::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background-image:var(--creator-gradient);
}
.package-card.iv-glow-border:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 50px -26px rgba(0,0,0,.45);
}
.package-number{display:block;font-size:2rem;font-weight:800;color:var(--text-dim);margin-bottom:10px;position:relative;z-index:1;}
/* Para Creators: same blue energy as the includes/index numbers elsewhere in
   the Design System, scoped so Media Kit's own package-number (below) can
   carry its own accent independently. */
#planos-creator .package-number{color:var(--accent-text);text-shadow:0 0 16px var(--accent-glow);}
/* Media Kit: color budget lives on the number + the top line (see ::after
   above), not on the title or body text — titles stay strong white/black
   (no dim gray as primary text), descriptions stay near-full opacity. */
#mk-packages .package-number{
  background-image:var(--creator-gradient);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradient-shift 8s ease infinite;
}
.package-card h3{margin:0 0 10px;font-size:1.2rem;position:relative;z-index:1;}
.package-card p{color:var(--text-dim);font-size:.88rem;margin:0;position:relative;z-index:1;}
/* Never dim-gray as the primary reading color: still clearly white/black,
   just a touch softer than the pure heading. */
#mk-packages .package-card p{color:var(--text);opacity:.85;}
.package-card p.package-price{font-size:1.7rem;font-weight:800;margin:0 0 12px;color:#22c98a;}
.package-cta{display:inline-flex;margin-top:20px;position:relative;z-index:1;}
@media (max-width:900px){.packages-grid{grid-template-columns:minmax(0,1fr);}}

.mk-video-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.mk-video-card{aspect-ratio:9/16;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;}
.mk-video-card:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:rgba(var(--text-rgb),.35);
  box-shadow:0 26px 44px -24px rgba(0,0,0,.5), 0 0 30px -8px rgba(var(--text-rgb),.3);
}
@media (max-width:900px){.mk-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.mk-video-grid{grid-template-columns:minmax(0,1fr);}}

.press-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.press-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  background:var(--surface);
}
.press-card span{display:block;font-size:.75rem;color:var(--text-dim);margin-bottom:8px;}
.press-card p{margin:0 0 14px;font-size:.92rem;}

@media (max-width:900px){.press-grid{grid-template-columns:minmax(0,1fr);}}

.brand-tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.brand-tag{
  padding:8px 18px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.82rem;
  color:var(--text-dim);
}
/* Media Kit — "Marcas que já passaram por aqui": a real horizontally
   scrollable track (not a pure CSS-transform marquee) so it can be
   auto-scrolled AND grabbed/swiped AND driven by arrow buttons with one
   mechanism, instead of three different systems fighting each other.
   JS (script.js) drives scrollLeft slowly at rest and pauses on
   hover/touch/focus; see the "Media Kit brand carousel" block there. */
#mk-brands{padding-bottom:32px;}
#mk-brands .eyebrow{color:var(--text);}
#mk-about .eyebrow{color:var(--text);}
.mk-brands-carousel{position:relative;}
.brand-logo-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  height:130px;
  padding:14px 10px;
  overflow:hidden;
  flex-shrink:0;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
/* Idle: quiet gray logos so the strip reads as one calm band while it
   auto-scrolls. Interact with one (hover on desktop, tap/focus on mobile)
   and its real brand color reveals itself — logos are never recolored or
   forced fully monochrome, just dimmed until you engage with them.
   No card chip (background/border) — logos float directly on the page,
   each hugging its own real proportion (fixed height, auto width) instead
   of letterboxing every shape into the same square-ish box. */
.brand-logo-card img{height:88px;width:auto;max-width:280px;object-fit:contain;filter:grayscale(1) opacity(.7);transition:filter .3s ease;}
.brand-logo-card:hover img,
.brand-logo-card:focus-visible img,
.brand-logo-card:active img{filter:grayscale(0) opacity(1);}
@media (hover:hover) and (pointer:fine){
  .brand-logo-card:hover{
    transform:translateY(-3px);
  }
}
.mk-brands-marquee-wrap{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.mk-brands-marquee-track{
  display:flex;
  gap:4px;
  padding:6px 2px 14px;
  overflow-x:auto;
  scroll-behavior:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.mk-brands-marquee-track::-webkit-scrollbar{display:none;}
.mk-brands-nav{
  display:none;
  position:absolute;
  top:50%;
  left:-8px;
  right:-8px;
  transform:translateY(-50%);
  justify-content:space-between;
  pointer-events:none;
  z-index:2;
}
.mk-brands-nav .journey-nav-btn{pointer-events:auto;}
@media (min-width:900px){.mk-brands-nav{display:flex;}}
.mk-brands-progress{
  width:100%;
  max-width:220px;
  height:3px;
  border-radius:999px;
  background:var(--border);
  overflow:hidden;
  margin:6px auto 0;
}
.mk-brands-progress-fill{
  height:100%;
  width:30%;
  border-radius:999px;
  background:var(--silver);
}
@media (prefers-reduced-motion:reduce){
  .brand-logo-card{transition:none;}
}

.mk-cta-inner{text-align:center;}
.mk-cta-inner .section-title,
.mk-cta-inner .section-lead{margin-left:auto;margin-right:auto;}

.mk-about-body p{margin:0 0 16px;}
.mk-about-body p:last-child{margin-bottom:0;}
.mk-about-toggle{
  display:none;
  margin-top:16px;
  background:none;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 20px;
  color:var(--text);
  font-size:.85rem;
  font-weight:600;
}
@media (max-width:640px){
  .mk-about-body{
    max-height:230px;
    overflow:hidden;
    position:relative;
    -webkit-mask-image:linear-gradient(180deg,#000 65%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 65%,transparent 100%);
  }
  .mk-about-body.expanded{max-height:none;-webkit-mask-image:none;mask-image:none;}
  .mk-about-toggle{display:inline-flex;}
}

/* ===== Identidade Visual (warm accent sub-page) ===== */
.iv-hero{
  position:relative;
  padding:130px 0 32px;
  background:var(--iv-dark);
  overflow:hidden;
}
.iv-marquee{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:14px 0;
  margin-bottom:64px;
  background:var(--iv-dark-alt);
}
.iv-marquee-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation:iv-marquee 22s linear infinite;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-dim);
  white-space:nowrap;
}
@keyframes iv-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.iv-hero-inner{position:relative;z-index:1;text-align:center;color:var(--iv-cream);}
.iv-eyebrow{
  display:block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:14px;
  text-align:center;
}
.iv-title{
  font-size:clamp(1.9rem,5vw,3.4rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 20px;
  color:var(--iv-cream);
}
.iv-title span{display:block;}
.iv-typewriter::after{
  content:"";
  display:inline-block;
  width:3px;
  height:.85em;
  margin-left:4px;
  background:var(--text);
  vertical-align:-.1em;
  animation:iv-cursor-blink .9s step-end infinite;
}
@keyframes iv-cursor-blink{0%,100%{opacity:1;}50%{opacity:0;}}
.iv-lead{
  max-width:560px;
  margin:0 auto 36px;
  color:var(--text);
  font-size:1.05rem;
}
.iv-lead-center{
  max-width:600px;
  margin:0 auto 48px;
  color:var(--text);
  text-align:center;
}
.eco-map-caption{margin:32px auto 0;font-size:.85rem;color:var(--text-dim);}

/* Assessoria Rizer: each recurring level as a full-width, stacked block (not a
   3-col grid) so it has room for context + explanation + fit line without
   fighting for space. .eco-panel-when is reused verbatim for the "faz sentido
   se" line, matching the Ecossistema page's own pattern for the same idea. */
.level-block{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:26px 28px;margin-bottom:16px;}
.level-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;}
.level-name{font-size:1.15rem;font-weight:800;margin:0;}
.level-price{font-weight:700;color:var(--accent-text);text-shadow:0 0 14px var(--accent-glow);font-size:.92rem;white-space:nowrap;}
.level-context{font-weight:700;color:var(--accent-text);margin:0 0 8px;font-size:.95rem;}
.level-desc{color:var(--text-dim);margin:0 0 10px;font-size:.9rem;}
.level-envolve{color:var(--text-dim);font-size:.82rem;margin:0 0 12px;font-style:italic;font-weight:700;}
.level-note{color:var(--text-faint);font-size:.78rem;margin:10px 0 0;}

/* Quick comparison strip: 2 lines per level, no card chrome, so it reads fast. */
.compare-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.compare-quick-item h4{margin:0 0 6px;font-size:.95rem;font-weight:800;}
.compare-quick-item p{margin:0;font-size:.84rem;color:var(--text-dim);}
@media (max-width:820px){.compare-quick-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.compare-quick-grid{grid-template-columns:minmax(0,1fr);}}

/* Small uppercase label introducing each concrete block (situações reais,
   como a Rizer pode agir...) inside a .level-block, so the structure reads
   even when the paragraphs around it get long. */
.modal-kicker{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin:22px 0 8px;}
.modal-kicker:first-child{margin-top:0;}

/* "O Que Você Precisa?": each pill is a full anchor link to the section that
   answers that need, not a mini explanation, so it stays scannable on a
   phone opened from WhatsApp. */
.need-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:8px;}
.need-pill{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-weight:600;font-size:.92rem;transition:border-color .2s ease,background .2s ease,color .2s ease;}
.need-pill:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text);}
.need-pill-arrow{color:var(--text-dim);flex-shrink:0;transition:color .2s ease;}
.need-pill:hover .need-pill-arrow{color:var(--accent-text);}

/* Compact real-situation tiles (Rizer Social's 4 objections, Rizer 360's
   2 examples): a short quote/title plus one line of explanation, same
   shape as .compare-quick-item but used mid-section rather than as a
   closing summary. */
.situation-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 0 22px;}
.situation-grid-3{grid-template-columns:repeat(3,1fr);}
.situation-item h4{margin:0 0 6px;font-size:.92rem;font-weight:800;}
.situation-item p{margin:0;font-size:.85rem;color:var(--text-dim);}
@media (max-width:640px){.situation-grid{grid-template-columns:minmax(0,1fr);}}
@media (min-width:641px) and (max-width:900px){.situation-grid-3{grid-template-columns:repeat(2,1fr);}}

/* Decision-helper questions (Rizer Partner): a "?" marker instead of the
   ✓/✕ used for feature lists, since these are prompts, not inclusions. */
.iv-list-q li::before{content:"?";position:absolute;left:0;color:var(--accent-text);font-weight:700;}

.invest-ladder{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;max-width:760px;margin:28px auto 0;}
.invest-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:20px 26px;border-bottom:1px solid var(--border);text-align:left;}
.invest-row:last-child{border-bottom:none;}
.invest-name{font-weight:800;font-size:1.02rem;flex:0 0 150px;}
.invest-desc{color:var(--text-dim);font-size:.86rem;flex:1 1 240px;}
.invest-price{font-weight:700;color:var(--accent-text);text-shadow:0 0 14px var(--accent-glow);white-space:nowrap;font-size:.92rem;margin-left:auto;}
@media (max-width:640px){
  .invest-row{padding:16px 18px;}
  .invest-price{margin-left:0;}
}
/* Secondary clause of a lead paragraph: kept in the DOM (full message stays intact
   for desktop/SEO) but dropped on small phones, where the primary sentence alone
   carries the point and the second one just adds density. */
@media (max-width:520px){
  .iv-lead, .iv-lead-center{
    font-size:.95rem;
    line-height:1.55;
  }
  .iv-lead-secondary{display:none;}
}

.iv-portfolio-section .container{margin-bottom:36px;}
.iv-portfolio-track-wrap{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.iv-portfolio-track{
  display:flex;
  align-items:center;
  gap:16px;
  width:max-content;
  animation:iv-portfolio-scroll 32s linear infinite;
}
.iv-portfolio-track:hover{animation-play-state:paused;}
@keyframes iv-portfolio-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.iv-portfolio-tile{
  width:220px;
  height:170px;
  flex-shrink:0;
  font-size:.72rem;
}
.iv-portfolio-tile-tall{height:260px;}

.iv-section{padding:64px 0;background:var(--bg);}
.iv-section-title{
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 18px;
  text-align:center;
}

/* ===== Campanhas UGC ===== */
.ugc-hero{padding-bottom:0;}
.ugc-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  text-align:left;
}
.ugc-hero-left{text-align:left;}
.ugc-hero-left .iv-eyebrow{text-align:left;}
.ugc-title-left, .ugc-lead-left{text-align:left;margin-left:0;}
.ugc-lead-left{margin-right:0;max-width:480px;}
.ugc-actions-left{justify-content:flex-start;margin-bottom:20px;}
.ugc-trust-label{color:var(--text-dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin:0;}

.ugc-video-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.ugc-video-tile{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
}
.ugc-video-tile-tall{aspect-ratio:3/5;}
.ugc-video-bg{position:absolute;inset:0;border-radius:0;}
.ugc-video-badge-top{
  position:absolute;top:10px;left:10px;
  font-size:.68rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  color:var(--text);
}
.ugc-video-badge-bottom{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 12px 10px;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:.7rem;
  color:var(--text);
}
@media (max-width:900px){
  .ugc-hero-grid{grid-template-columns:minmax(0,1fr);}
}

.ugc-trust-marquee-wrap{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-alt);
  padding:20px 0;
  margin-top:56px;
}
.ugc-trust-marquee-track{
  display:flex;
  gap:32px;
  width:max-content;
  animation:iv-marquee 26s linear infinite;
}
.ugc-trust-marquee-track:hover{animation-play-state:paused;}
.ugc-trust-logo{
  width:130px;height:56px;
  font-size:.68rem;
  opacity:.7;
  flex-shrink:0;
}

.ugc-why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  margin-bottom:64px;
}
.ugc-why-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.ugc-why-tile{aspect-ratio:3/4;}
@media (max-width:860px){.ugc-why-grid{grid-template-columns:minmax(0,1fr);}}

.ugc-mockup-row{
  display:flex;
  align-items:center;
  gap:56px;
  margin-bottom:64px;
}
.ugc-phone-mockup{
  width:220px;
  flex-shrink:0;
  border:6px solid var(--surface);
  border-radius:32px;
  background:var(--bg);
  padding:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.ugc-phone-notch{width:60px;height:6px;border-radius:999px;background:var(--border);margin:0 auto 8px;}
.ugc-phone-media{aspect-ratio:9/16;font-size:.68rem;}
.ugc-phone-actions{display:flex;justify-content:space-between;padding:10px 4px;font-size:.7rem;color:var(--text-dim);}
.ugc-phone-caption{font-size:.68rem;color:var(--text-dim);padding:0 4px;margin:0;}
.ugc-mockup-text h3{font-size:1.4rem;margin:0 0 12px;}
.ugc-mockup-text p{color:var(--text-dim);margin:0 0 20px;}
@media (max-width:760px){.ugc-mockup-row{flex-direction:column;text-align:center;}}

.ugc-icon-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.ugc-icon-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  font-size:.82rem;
  color:var(--text-dim);
}
.ugc-icon-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--bg-alt);
  flex-shrink:0;
  font-size:.9rem;
}
@media (max-width:860px){.ugc-icon-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.ugc-icon-row{grid-template-columns:minmax(0,1fr);}}

.ugc-scroll-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:8px 24px 24px;
  max-width:var(--container);
  margin:0 auto;
}
.ugc-scroll-row .ugc-video-tile{
  flex:0 0 220px;
  scroll-snap-align:start;
}
.ugc-scroll-row::-webkit-scrollbar{height:6px;}
.ugc-scroll-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;}

.ugc-ab-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.ugc-ab-media{position:relative;display:flex;gap:24px;justify-content:center;}
.ugc-ab-tile{position:relative;width:180px;}
.ugc-ab-tile-offset{margin-top:40px;}
.ugc-ab-video{aspect-ratio:9/16;}
.ugc-ab-dot{
  position:absolute;
  top:-16px;left:-16px;
  width:32px;height:32px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:.8rem;
  color:#fff;
  z-index:1;
}
.ugc-ab-dot-a{background:var(--silver);color:var(--bg);}
.ugc-ab-dot-b{background-image:var(--gradient);background-size:var(--gradient-size) 100%;animation:gradient-shift 7s ease infinite;}
@media (max-width:860px){.ugc-ab-grid{grid-template-columns:minmax(0,1fr);}.ugc-ab-media{margin-top:32px;}}
@media (max-width:480px){
  .ugc-ab-media{gap:14px;}
  .ugc-ab-tile{width:calc((100% - 14px) / 2);}
}

/* Process timeline — same idea as the Método Rizer flow (neutral at rest,
   blue as each step arrives) adapted to this component instead of copied:
   here there's no dedicated JS progression, so each icon simply picks up the
   accent as ITS OWN step scrolls into view, reusing the .reveal/.in-view
   observer already running sitewide, staggered by the existing --step-i. */
.ugc-timeline{
  display:flex;
  justify-content:space-between;
  gap:16px;
  position:relative;
  padding:32px 24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.ugc-timeline::before{
  content:"";
  position:absolute;
  top:56px;left:24px;right:24px;
  height:1px;
  background:var(--border);
  z-index:0;
}
/* "Linha preenchendo" — same language as the Método Rizer flow, adapted: no
   dedicated JS sequencer here, so the fill is a pure-CSS payoff that plays
   once the last step's own .reveal/.in-view fires (reusing the observer
   already running sitewide), reaching across the row exactly as the icons
   finish lighting up in sequence. */
.ugc-timeline::after{
  content:"";
  position:absolute;
  top:56px;left:24px;right:24px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.2s ease;
  z-index:0;
}
.ugc-timeline:has(.ugc-timeline-step:last-child.reveal.in-view)::after{
  transform:scaleX(1);
}
.ugc-timeline-step{
  position:relative;
  z-index:1;
  flex:1;
  text-align:center;
}
.ugc-timeline-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--bg-alt);
  border:2px solid var(--silver);
  color:var(--silver);
  font-size:1.2rem;
  font-weight:700;
  transition:border-color .4s ease, color .4s ease, box-shadow .4s ease, background .4s ease;
}
.ugc-timeline-step.reveal.in-view .ugc-timeline-icon{
  border-color:var(--accent);
  color:var(--accent-text);
  /* --accent-soft is translucent (12% alpha) — layered directly over the
     connecting line it let the line show straight through the circle and
     the number. An opaque base underneath fixes that while keeping the same
     soft-blue-tinted look. */
  background:linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface);
  box-shadow:0 0 0 4px var(--accent-glow);
  transition-delay:calc(var(--step-i, 0) * .12s);
  /* Continuous life once lit, same idea as the Método dots' breathing glow —
     starts only after this icon's own turn-on transition has settled, so it
     never fights the fade-in. */
  animation:ugc-timeline-icon-breathe 2.6s ease-in-out infinite;
  animation-delay:calc(var(--step-i, 0) * .12s + .6s);
}
@keyframes ugc-timeline-icon-breathe{
  0%,100%{box-shadow:0 0 0 4px var(--accent-glow);}
  50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),.16);}
}
@media (prefers-reduced-motion:reduce){
  .ugc-timeline-step.reveal.in-view .ugc-timeline-icon{animation:none;}
  .ugc-timeline::after{transition:none;}
}
.ugc-timeline-step h3{margin:0 0 8px;font-size:1.05rem;}
.ugc-timeline-step p{margin:0;font-size:.85rem;color:var(--text-dim);}
.ugc-timeline-eyebrow{margin:14px 0 4px;}
.ugc-timeline-step.reveal{transition-delay:calc(var(--step-i, 0) * .12s);}
.ugc-timeline-step:nth-child(1){--step-i:0;}
.ugc-timeline-step:nth-child(2){--step-i:1;}
.ugc-timeline-step:nth-child(3){--step-i:2;}
.ugc-timeline-step:nth-child(4){--step-i:3;}
.ugc-timeline-step:nth-child(5){--step-i:4;}
@media (max-width:860px){
  .ugc-timeline{flex-direction:column;gap:0;}
  .ugc-timeline::before, .ugc-timeline::after{display:none;}
  .ugc-timeline-step{padding:28px 0 4px;}
  .ugc-timeline-step:not(:last-child){
    position:relative;
    padding-bottom:28px;
  }
  .ugc-timeline-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:76px;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    background:var(--border);
    z-index:0;
  }
  .ugc-timeline-step h3,
  .ugc-timeline-step p,
  .ugc-timeline-step .iv-eyebrow{
    position:relative;
    z-index:1;
    width:fit-content;
    margin-inline:auto;
    background:var(--card-tint);
    padding:0 10px;
  }
}

.ugc-deliverable-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  margin-bottom:64px;
}
.ugc-deliverable-row:nth-child(even){direction:rtl;}
.ugc-deliverable-row:nth-child(even) > *{direction:ltr;}
.ugc-deliverable-img{aspect-ratio:4/3;}
.ugc-deliverable-tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text-dim);
  margin-bottom:14px;
}
.ugc-deliverable-text h3{font-size:1.5rem;margin:0 0 12px;}
.ugc-deliverable-text > p{color:var(--text-dim);margin:0 0 18px;}
@media (max-width:860px){
  .ugc-deliverable-row{grid-template-columns:minmax(0,1fr);direction:ltr !important;}
  .ugc-deliverable-row > *{direction:ltr !important;}
}

.ugc-testi-row{justify-content:center;}
.ugc-testi-row .ugc-testi-tile{
  flex:0 0 280px;
  scroll-snap-align:start;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  padding:20px;
}
.ugc-testi-thumb{aspect-ratio:9/16;margin-bottom:14px;}
.ugc-testi-tile p{font-size:.88rem;margin:0 0 14px;}
.ugc-testi-tile strong{display:block;font-size:.85rem;}
.ugc-testi-tile span{font-size:.75rem;color:var(--text-dim);}

.ugc-cta-card{
  background-image:var(--gradient);
  background-size:var(--gradient-size) 100%;
  animation:gradient-shift 7s ease infinite;
  border-radius:28px;
  padding:64px 40px;
  text-align:center;
}
.ugc-cta-card .iv-section-title, .ugc-cta-card p{max-width:600px;margin-left:auto;margin-right:auto;}

.iv-fit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.iv-fit-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  background:var(--surface);
}
.iv-fit-card h3{margin:0 0 18px;font-size:1.1rem;}
/* "Com a Rizer" side of the comparison: a static blue wash + border, not the
   spinning destaque ring — enough to read as the side to pick, without
   fighting the ✓/✕ list colors for attention. */
.iv-fit-card-accent{
  border-color:rgba(var(--accent-rgb),.35);
  background:linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--surface);
  box-shadow:0 20px 40px -30px var(--accent-glow);
}
.iv-fit-card-accent h3{color:var(--accent-text);}
.iv-list{display:flex;flex-direction:column;gap:10px;font-size:.92rem;color:var(--text-dim);}
.iv-list li{padding-left:22px;position:relative;}
/* Mesma paleta de .compare-card-wrong/.compare-card-rizer (segmentos),
   adaptada aqui como faixa lateral + fundo tingido em vez de card cheio —
   o vermelho/verde precisa ficar óbvio de relance, não só no ícone. */
.iv-list-yes li, .iv-list-no li{padding:9px 14px 9px 30px;border-radius:8px;}
.iv-list-yes li{background:rgba(37,211,102,.09);border-left:3px solid #25d366;}
.iv-list-no li{background:rgba(239,68,68,.09);border-left:3px solid #ef4444;}
.iv-list-yes li::before{content:"✓";position:absolute;left:12px;color:#25d366;font-weight:700;}
.iv-list-no li::before{content:"×";position:absolute;left:12px;color:#ef4444;font-weight:700;}
/* Variante sem caixa colorida, só check + texto — para listas onde o
   card já tem informação suficiente e a caixa verde vira ruído. */
.iv-list-flat li{padding-left:20px;}
.iv-list-flat li::before{content:"✓";position:absolute;left:0;color:var(--accent-text);font-weight:700;}
@media (max-width:800px){.iv-fit-grid{grid-template-columns:minmax(0,1fr);}}

.iv-includes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.iv-include-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px 26px;
  background:var(--bg);
  position:relative;
}
.iv-include-index{
  display:block;
  font-size:.8rem;
  font-weight:800;
  /* Same blue accent for every index number — the three layers are told
     apart by their number, title and copy, not by a different hue each. */
  color:var(--accent-text);
  text-shadow:0 0 16px var(--accent-glow);
  margin-bottom:14px;
}
.iv-include-card h3{margin:0 0 8px;font-size:1.15rem;}
.iv-include-card > p{color:var(--text-dim);font-size:.9rem;margin:0 0 16px;}
.iv-include-card li{
  font-size:.85rem;
  color:rgba(0,0,0,.75);
  padding:10px 14px;
  margin-top:8px;
  border-radius:var(--radius);
  background:#fff;
  border-color:transparent;
}
.iv-include-card li:first-child{margin-top:0;}

.iv-includes-grid .iv-include-card.reveal{transition-delay:calc(var(--step-i, 0) * .12s);}
.iv-includes-grid .iv-include-card:nth-child(1){--step-i:0;}
.iv-includes-grid .iv-include-card:nth-child(2){--step-i:1;}
.iv-includes-grid .iv-include-card:nth-child(3){--step-i:2;}
@media (max-width:900px){.iv-includes-grid{grid-template-columns:minmax(0,1fr);}}
.iv-includes-grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:700px){.iv-includes-grid-2{grid-template-columns:minmax(0,1fr);}}
.iv-includes-grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.iv-includes-grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.iv-includes-grid-4{grid-template-columns:minmax(0,1fr);}}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch;
}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 26px;
  background:var(--surface);
}
.plan-featured{
  box-shadow:0 20px 60px -20px rgba(var(--accent-rgb),.4);
}

/* Thin white "beam" that travels around the border, ring only (never a full fill).
   Uses the two-layer background-clip trick (opaque fill on padding-box, spinning
   conic-gradient on border-box) instead of mask-composite, which rendered a stray
   seam on pill-shaped buttons. */
@property --border-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
@keyframes border-angle-spin{ to { --border-angle:360deg; } }
/* .card-featured is the consolidated name for this same destaque ring — new
   components should reach for it; .iv-glow-border is kept as-is since every
   existing page already depends on it. */
.iv-glow-border, .card-featured{
  position:relative;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  background-image:
    linear-gradient(var(--card-tint), var(--card-tint)),
    conic-gradient(from var(--border-angle),
      transparent 0%, transparent 80%,
      rgba(var(--text-rgb),.9) 92%,
      transparent 100%);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  animation:border-angle-spin 4s linear infinite;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.iv-glow-border:hover, .card-featured:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 30px 50px -26px rgba(0,0,0,.5), 0 0 34px -8px rgba(var(--text-rgb),.35);
}

/* ===== Card tiers =====
   Not every card is a destaque. Three levels, spent by role:
   .card             — normal surface, neutral border, no effect.
   .card-interactive — hover feedback (lift + reactive border + glow + a one-pass
                        reflect sweep), no continuous animation. The default for
                        cards people click through.
   .iv-glow-border / .card-featured — reserved for genuine destaque (same ring
                        mechanism, new name for cards built going forward —
                        .iv-glow-border kept as the legacy name already used
                        across every page). */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.card-interactive{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
/* A resting cue that this is clickable — subtle in dark, more necessary in light
   where a white card on an off-white page otherwise reads as flat/washed out. */
:root[data-theme="light"] .card-interactive{
  border-color:var(--border-strong);
  box-shadow:0 1px 3px rgba(17,18,20,.05);
}
.card-interactive::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 35%, rgba(var(--accent-rgb),.16) 50%, transparent 65%);
  transform:translateX(-130%);
  transition:transform .7s ease;
  pointer-events:none;
}
.card-interactive:hover::after{transform:translateX(130%);}
.card-interactive:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:0 24px 44px -28px rgba(0,0,0,.5), 0 0 22px -6px var(--accent-glow);
}
:root[data-theme="light"] .card-interactive:hover{
  box-shadow:0 24px 44px -30px rgba(17,18,20,.2), 0 0 22px -6px var(--accent-glow);
}
@media (prefers-reduced-motion: reduce){
  .card-interactive{transition:none;}
  .card-interactive:hover{transform:none;}
  .card-interactive::after{transition:none;}
}
.plan-badge{
  position:absolute;
  top:-13px;left:50%;
  transform:translateX(-50%);
  background:var(--text);
  color:#25d366;
  font-size:.7rem;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
}
.plan-card h3{margin:0 0 8px;font-size:1.3rem;}
.plan-featured h3{color:var(--iv-cream);}
.plan-tagline{color:var(--text-dim);font-size:.85rem;margin:0 0 20px;min-height:2.6em;}
.plan-featured .plan-tagline{color:var(--text-dim);}
.plan-price{margin-bottom:22px;display:flex;flex-direction:column;gap:10px;}
.plan-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;}
.plan-price span{font-size:1.3rem;font-weight:800;display:inline-block;white-space:nowrap;}
.plan-price-row:first-child span{font-size:1.6rem;}
.plan-featured .plan-price span{color:var(--iv-cream);}
.plan-price small{color:var(--text-dim);font-size:.78rem;white-space:nowrap;}
.plan-features{flex:1;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;font-size:.88rem;}
.plan-features li{padding-left:20px;position:relative;color:var(--text-dim);}
.plan-features li::before{content:"✓";position:absolute;left:0;color:#25d366;}

/* Identidade Visual, Sites and Google Meu Negócio plan cards (scoped by
   #iv-planos/#sites-planos/#gmn-planos, same pattern Supermercados already
   uses for its own plan tweaks) — the badge was too small/low-contrast to
   notice, the dim gray text read as half-invisible at this size, and the
   cash/PIX price needed to stand out as the deal it is. All three sections
   use the same one-time-payment card. */
#iv-planos .plan-badge,
#sites-planos .plan-badge,
#gmn-planos .plan-badge,
#super-planos .plan-badge{
  background:var(--accent);
  color:#fff;
  font-size:.78rem;
  padding:6px 16px;
  box-shadow:0 6px 18px -4px var(--accent-glow);
}
#iv-planos .plan-tagline,
#iv-planos .plan-price small,
#iv-planos .plan-features li,
#sites-planos .plan-tagline,
#sites-planos .plan-price small,
#sites-planos .plan-features li,
#gmn-planos .plan-tagline,
#gmn-planos .plan-price small,
#gmn-planos .plan-features li{
  color:var(--silver);
}
#iv-planos .plan-price-cash span,
#sites-planos .plan-price-cash span,
#gmn-planos .plan-price-cash span{color:#25d366;}
#iv-planos .plan-cta span,
#sites-planos .plan-cta span,
#gmn-planos .plan-cta span{margin-left:6px;display:inline-block;transition:transform .2s ease;}
#iv-planos .plan-cta:hover span,
#sites-planos .plan-cta:hover span,
#gmn-planos .plan-cta:hover span{transform:translateX(3px);}
.plan-featured .plan-features li{color:var(--text-dim);}
.plan-cta{align-self:stretch;text-align:center;}
.iv-plans-note{text-align:center;color:var(--text-dim);font-size:.85rem;margin-top:32px;}

@media (max-width:960px){.plans-grid{grid-template-columns:minmax(0,1fr);}}

.iv-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.iv-step{
  text-align:center;
  padding:26px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
}
.iv-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background-image:var(--gradient);
  background-size:var(--gradient-size) 100%;
  animation:gradient-shift 7s ease infinite;
  color:#fff;
  font-weight:800;
  margin-bottom:14px;
}
.iv-step h3{margin:0 0 8px;font-size:1rem;}
.iv-step p{margin:0;font-size:.82rem;color:var(--text-dim);}
@media (max-width:900px){.iv-steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.iv-steps{grid-template-columns:minmax(0,1fr);}}

.iv-cta-final{background:var(--bg-alt);}
.iv-cta-inner{text-align:center;}
.iv-cta-inner .iv-section-title{color:var(--iv-cream);}

/* ===== Footer ===== */
.site-footer{
  padding:0 0 28px;
  border-top:1px solid var(--border);
  background:var(--bg-alt);
}
.footer-guide{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  padding:22px 24px;
  margin-bottom:50px;
  border-bottom:1px solid var(--border);
  text-align:center;
}
.footer-guide span{color:var(--text-dim);font-size:.9rem;}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:40px;
  margin-bottom:56px;
}
.footer-logo-link{display:inline-block;}
.logo-full{
  width:100%;
  max-width:220px;
  height:auto;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.35)) drop-shadow(0 0 22px rgba(255,255,255,.18));
}
.logo-full path{fill:url(#riz-anim-grad-dark);}
:root[data-theme="light"] .logo-full{filter:none;}
:root[data-theme="light"] .logo-full path{fill:url(#riz-anim-grad-light);}
.footer-brand p{color:var(--text-dim);font-size:.9rem;max-width:320px;margin:14px 0 20px;}
/* Botões sociais reais: cada rede na cor da própria marca (ícone SVG, não
   texto tipo "IG"), em vez do círculo monocromático genérico de antes. */
.social-links{display:flex;gap:10px;}
.social-links a{
  width:36px;height:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, filter .2s ease;
}
.social-links a svg{width:18px;height:18px;}
.social-links a:hover{transform:translateY(-2px);filter:brightness(1.08);}
.social-link-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.social-link-whatsapp{background:var(--whatsapp-solid);}
.footer-col h4{margin:0 0 16px;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a, .footer-col p{color:var(--text-dim);font-size:.9rem;margin:0;transition:color .2s ease;}
.footer-col a:hover{color:var(--text);}
/* Contact info now lives under the brand block instead of its own column
   (freed up a column for Segmentos, which needed the room more). */
.footer-contact{margin-top:18px;display:flex;flex-direction:column;gap:6px;}
.footer-contact p{margin:0;color:var(--text-dim);font-size:.85rem;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-top:24px;
  border-top:1px solid var(--border);
  color:var(--text-dim);
  font-size:.8rem;
}
.footer-legal{display:flex;gap:20px;}

@media (max-width:760px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-brand{grid-column:span 2;}
}

/* ===== Conversa Guiada (WhatsApp-style chat app) ===== */
.chat-section{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:100px 16px 24px;
}
.chat-app{
  /* Follows the site's own theme normally: white in light mode, black in
     dark mode — no separate palette of its own. */
  width:100%;
  max-width:420px;
  height:min(78vh, 720px);
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.5);
}
.chat-app-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.chat-app-avatar{
  width:38px;height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#000;
  flex-shrink:0;
}
.chat-app-avatar .logo-mark{height:27px;}
.chat-app-identity{display:flex;flex-direction:column;gap:1px;flex:1;}
.chat-app-identity strong{font-size:.92rem;}
.chat-app-status{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--text-dim);}
.chat-status-dot{width:7px;height:7px;border-radius:50%;background:#25d366;flex-shrink:0;}
.chat-app-close{
  width:28px;height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:.85rem;
  flex-shrink:0;
}
.chat-app-close:hover{background:var(--bg-alt);}

@keyframes chat-bg-shift{
  0%{background-position:0 0, 0% 50%;}
  50%{background-position:0 0, 100% 50%;}
  100%{background-position:0 0, 0% 50%;}
}
.chat-window{
  position:relative;
  flex:1;
  overflow:hidden;
  background-image:
    radial-gradient(circle, var(--border) 1px, transparent 1px),
    linear-gradient(120deg, #08080a, #1a1a1e, #08080a);
  background-size:20px 20px, 300% 300%;
  animation:chat-bg-shift 14s ease infinite;
}
:root[data-theme="light"] .chat-window{
  background-image:
    radial-gradient(circle, var(--border) 1px, transparent 1px),
    linear-gradient(120deg, #f6f6f8, #e9e9ec, #f6f6f8);
}
.chat-start-screen[hidden]{display:none;}
.chat-start-screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  padding:24px;
}
.chat-start-avatar{
  position:relative;
  width:84px;height:84px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--border);
  background:#000;
  margin-bottom:14px;
}
.chat-start-avatar .logo-mark{height:58px;}
.chat-start-avatar-badge{
  position:absolute;
  bottom:-2px;right:-2px;
  width:22px;height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1d9bf0;
  color:#fff;
  font-size:.6rem;
  font-weight:800;
  border:2px solid var(--bg);
}
.chat-start-screen h2{margin:0 0 4px;font-size:1.15rem;}
.chat-start-screen p{margin:0 0 20px;color:var(--text-dim);font-size:.86rem;}
.chat-log{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  overflow-y:auto;
}
.chat-bubble{
  max-width:82%;
  padding:10px 14px;
  border-radius:14px;
  font-size:.86rem;
  line-height:1.4;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.chat-bubble.in{opacity:1;transform:translateY(0);}
.chat-bubble-bot{
  align-self:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  border-bottom-left-radius:3px;
}
.chat-bubble-user{
  align-self:flex-end;
  background-image:var(--whatsapp);
  color:#fff;
  border-bottom-right-radius:3px;
}
.chat-typing{
  align-self:flex-start;
  display:flex;
  gap:4px;
  padding:12px 14px;
  border-radius:14px;
  border-bottom-left-radius:3px;
  background:var(--surface);
  border:1px solid var(--border);
}
.chat-typing span{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--text-dim);
  animation:chat-typing-bounce 1s ease-in-out infinite;
}
.chat-typing span:nth-child(2){animation-delay:.15s;}
.chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes chat-typing-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.5;}
  30%{transform:translateY(-4px);opacity:1;}
}

.chat-options-wrap{
  flex-shrink:0;
  border-top:1px solid var(--border);
  padding:8px 12px;
  max-height:26vh;
  overflow-y:auto;
}
.chat-options-label{
  display:block;
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--text-dim);
  text-align:center;
  margin-bottom:6px;
}
.chat-options{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.chat-option{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:9px 16px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font-size:.84rem;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.chat-option:hover{
  border-color:#25d366;
  background:rgba(37,211,102,.12);
  box-shadow:0 0 0 1px rgba(37,211,102,.4), 0 0 16px 2px rgba(37,211,102,.35);
  transform:translateY(-1px);
}
.chat-option-chevron{display:none;}
.chat-restart{
  display:block;
  margin:10px auto 0;
  background:none;
  border:none;
  color:var(--text-dim);
  font-size:.76rem;
  text-decoration:underline;
}
.chat-restart:hover{color:var(--text);}

.chat-input-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.chat-input-bar input{
  flex:1;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  padding:10px 16px;
  font-size:.82rem;
  font-family:inherit;
}
.chat-input-bar input:focus{outline:none;border-color:rgba(var(--text-rgb),.3);}
.chat-input-bar button{
  width:36px;height:36px;
  border-radius:50%;
  border:none;
  background-image:var(--whatsapp);
  color:#fff;
  font-size:1rem;
  flex-shrink:0;
}

@media (max-width:480px){
  .chat-section{padding:90px 0 0;align-items:stretch;}
  .chat-app{max-width:none;height:calc(100vh - 90px);height:calc(100dvh - 90px);border-radius:0;border-left:none;border-right:none;}
}

/* ===== Link na Bio ===== */
.bio-page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:480px;
  margin:0 auto;
  text-align:center;
  position:relative;
  overflow:hidden;
  --spot-x:50%;
  --spot-y:20%;
}
.bio-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding:56px 24px 40px;
}
.bio-theme-toggle{position:absolute;top:16px;right:16px;}
.bio-avatar{
  width:110px;height:110px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  margin-bottom:20px;
}
/* Preenchimento sólido em vez do degradê (ficava quase invisível nesse
   fundo transparente) — acompanha o tema, igual ao resto do texto do site. */
.bio-avatar .logo-mark{height:60px;}
.bio-avatar .logo-mark path{fill:var(--text);}
.bio-title{
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:.04em;
  margin:0 0 6px;
}
.bio-tagline{color:var(--text-dim);font-size:.92rem;margin:0 0 20px;}
.bio-socials{margin-bottom:28px;}
.bio-hint{color:var(--text-dim);font-size:.85rem;margin:0 0 20px;}

.bio-hero-cta{
  position:relative;
  display:block;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:44px;
  min-height:180px;
}
.bio-hero-bg{position:absolute;inset:0;border-radius:0;}
.bio-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  padding:22px 52px 22px 22px;
  text-align:left;
  background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,.15));
}
.bio-hero-overlay strong{color:#fff;font-size:1.05rem;}
.bio-hero-overlay small{color:rgba(255,255,255,.8);font-size:.82rem;}
.bio-hero-arrow{
  position:absolute;
  bottom:20px;right:20px;
  z-index:1;
  font-size:1.3rem;
  color:#fff;
}

.bio-section-title{
  align-self:flex-start;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-dim);
  margin:0 0 16px;
}
.bio-product-grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:40px;
}
.bio-product-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  text-align:left;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.bio-product-card:hover{transform:translateY(-5px);border-color:rgba(var(--text-rgb),.3);box-shadow:0 20px 34px -22px rgba(0,0,0,.5), 0 0 20px -8px rgba(var(--text-rgb),.3);}
.bio-product-media{aspect-ratio:16/10;border-radius:0;border:none;border-bottom:1px solid var(--border);}
.bio-product-icon{font-size:1.6rem;}
.bio-product-body{display:flex;flex-direction:column;gap:2px;padding:14px;}
.bio-product-body strong{font-size:.88rem;}
.bio-product-body small{color:var(--text-dim);font-size:.75rem;margin-bottom:6px;}
.bio-product-cta{font-size:.72rem;color:var(--text-dim);}

.bio-contact-grid{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:40px;
}
.bio-contact-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  text-align:left;
  transition:transform .3s ease;
}
.bio-contact-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  background-image:var(--whatsapp);
  font-size:1rem;
  flex-shrink:0;
}
.bio-contact-text{flex:1;display:flex;flex-direction:column;gap:2px;}
.bio-contact-text small{color:var(--text-dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;}
.bio-contact-text strong{font-size:.9rem;}
.bio-contact-card .bio-product-cta{flex-shrink:0;}

.bio-footer{color:var(--text-dim);font-size:.75rem;margin:0;}

@media (max-width:420px){
  .bio-product-grid{grid-template-columns:minmax(0,1fr);}
  .bio-contact-card .bio-product-cta{display:none;}
}

/* ===== Ecossistema (network/web diagram) ===== */
.eco-web-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  padding:20px 40px 64px;
  max-width:var(--container);
  margin:0 auto;
}
.eco-web{
  position:relative;
  width:100%;
  max-width:640px;
  aspect-ratio:1;
  --spot-x:50%;
  --spot-y:50%;
}
/* On wide viewports there's room to let the diagram breathe and sit the panel
   beside it instead of stacking both centered in a narrow column. */
@media (min-width:1080px){
  .eco-web-wrap{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:56px;
    padding:32px 40px 72px;
  }
  .eco-web{max-width:600px;flex:1 1 600px;}
  .eco-panel{flex:0 0 380px;margin:0;}
}
.magnetic-dots{position:absolute;inset:0;z-index:0;pointer-events:none;}
.eco-web .hero-grid{-webkit-mask-image:none;mask-image:none;}
.eco-web .hero-spotlight{background:radial-gradient(circle 260px at var(--spot-x) var(--spot-y), rgba(255,255,255,.14), transparent 70%);}
:root[data-theme="light"] .eco-web .hero-spotlight{background:radial-gradient(circle 260px at var(--spot-x) var(--spot-y), rgba(0,0,0,.08), transparent 70%);}
.eco-web-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none;}
.eco-web-line{
  fill:none;
  stroke-width:1.4px;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity .3s ease;
}
.eco-hub{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:130px;height:130px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 0 40px 8px rgba(255,255,255,.25);
  z-index:2;
  transition:left .45s ease, top .45s ease;
}
:root[data-theme="light"] .eco-hub{background:#000;box-shadow:0 0 40px 8px rgba(0,0,0,.2);}
/* Logo do hub sempre em cor sólida (preto no círculo branco, branco no
   círculo preto do tema claro) em vez do degradê usado no resto do site —
   o degradê ficava quase invisível nesse tamanho/fundo. */
.eco-hub .logo-mark{height:76px;}
.eco-hub .logo-mark path{fill:#000;}
:root[data-theme="light"] .eco-hub .logo-mark path{fill:#fff;}
@keyframes eco-node-float{
  0%,100%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-10px);}
}
.eco-node{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(154,160,168,.35);
  border-radius:999px;
  background:#fff;
  color:#000;
  padding:10px 18px 10px 12px;
  font-size:.8rem;
  font-weight:600;
  white-space:nowrap;
  transition:border-color .2s ease, box-shadow .2s ease, opacity .35s ease, transform .35s ease, left .45s ease, top .45s ease;
  animation:eco-node-float 6s ease-in-out infinite;
}
.eco-node:hover{border-color:rgba(var(--text-rgb),.3);}
.eco-node.active{
  border-color:transparent;
  box-shadow:0 0 0 1px var(--accent), 0 0 12px 1px rgba(var(--accent-rgb),.35);
}
.eco-node.dimmed{
  opacity:.18;
  animation-play-state:paused;
}
.eco-node.dimmed:hover{opacity:.5;}
/* Hover preview: lights up a node and whatever it connects to, without activating it */
.eco-node.eco-node-hint:not(.active):not(.dimmed){
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
:root[data-theme="light"] .eco-node{
  background:#000;
  color:#fff;
  border-color:transparent;
}
@keyframes eco-child-float{
  0%,100%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-8px);}
}
.eco-web-child{
  position:absolute;
  transform:translate(-50%,-50%) scale(.6);
  z-index:1;
  border:1px dashed var(--border);
  border-radius:16px;
  background:var(--bg);
  color:var(--text-dim);
  padding:6px 12px;
  font-size:.7rem;
  white-space:normal;
  max-width:118px;
  text-align:center;
  line-height:1.25;
  opacity:0;
  transition:opacity .35s ease, transform .35s ease;
}
.eco-web-child.in{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  animation:eco-child-float 5s ease-in-out infinite;
}

@keyframes eco-node-float-sm{
  0%,100%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-4px);}
}
@keyframes eco-child-float-sm{
  0%,100%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-3px);}
}
@media (max-width:640px){
  .eco-web-wrap{padding:16px 4px 48px;}
  .eco-web{aspect-ratio:.76;}
  .eco-hub{width:84px;height:84px;}
  .eco-hub .logo-mark{height:46px;}
  /* Smaller float amplitude: on the tighter mobile layout, the full desktop
     bob (±10px/±8px) drifts fanned labels into their neighbors mid-cycle even
     when their resting positions don't overlap. */
  .eco-node{padding:7px 12px;font-size:.62rem;animation-name:eco-node-float-sm;}
  .eco-web-child{
    font-size:.58rem;
    padding:5px 8px;
    white-space:normal;
    max-width:74px;
    text-align:center;
    line-height:1.2;
  }
  .eco-web-child.in{animation-name:eco-child-float-sm;}
}

.eco-panel{
  max-width:560px;
  margin:0 auto;
  padding:32px;
  text-align:center;
}
.eco-panel-tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--silver);
  margin-bottom:10px;
}
.eco-panel h3{margin:0 0 10px;font-size:1.3rem;}
.eco-panel p{color:var(--text-dim);margin:0 0 16px;}
.eco-panel-when{
  font-size:.85rem;
  color:var(--text-dim);
  background:var(--card-tint);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 14px;
  margin:-6px 0 16px;
}
.eco-panel-connects{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  margin:0 0 16px;
}
.eco-panel-connects-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--silver);
  margin-right:4px;
}
.eco-connect-chip{
  font-size:.78rem;
  font-weight:600;
  padding:6px 13px;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
}
.eco-connect-chip:hover{border-color:var(--accent);color:var(--accent-text);}
.eco-panel-nav{justify-content:center;margin-top:20px;}

.journey-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:48px;
  align-items:start;
}
.journey-sidebar{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:28px;
  padding-left:28px;
}
.journey-line{
  position:absolute;
  left:5px;top:6px;bottom:6px;
  width:2px;
  background:var(--border);
  border-radius:999px;
}
.journey-line-fill{
  width:100%;
  background-image:var(--accent-gradient);
  background-size:100% var(--gradient-size);
  animation:gradient-shift 7s ease infinite;
  border-radius:999px;
  height:0%;
  transition:height .4s ease;
}
.journey-step{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:10px;
  background:none;
  border:none;
  text-align:left;
  color:var(--text-dim);
  padding:0;
}
.journey-step-dot{
  position:absolute;
  left:-28px;top:3px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--border);
  transition:border-color .2s ease, background .2s ease;
}
.journey-step-num{font-size:.72rem;color:var(--text-dim);}
.journey-step-label{font-size:.95rem;font-weight:600;}
.journey-step.active{color:var(--text);}
.journey-step.active .journey-step-dot,
.journey-step.completed .journey-step-dot{
  border-color:transparent;
  background-image:var(--accent-gradient);
  background-size:var(--gradient-size) 100%;
  animation:gradient-shift 7s ease infinite;
}

.journey-panel{
  padding:40px;
  transition:opacity .2s ease;
}
.journey-panel.journey-fade{opacity:0;}
.journey-panel h3{margin:10px 0 14px;font-size:1.6rem;}
.journey-panel > p{color:var(--text-dim);margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.journey-panel-eyebrow{
  display:block;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-dim);
  margin-bottom:16px;
}
.journey-panel-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.journey-panel-list li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  font-size:.9rem;
}
.journey-item-num{
  font-size:.72rem;
  font-weight:700;
  color:var(--text-dim);
  flex-shrink:0;
}
.journey-panel-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
  color:var(--text-dim);
}
.journey-nav-btns{display:flex;gap:10px;}
.journey-nav-btn{
  width:38px;height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  position:relative;
  border:1.5px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    conic-gradient(from var(--border-angle),
      transparent 0%, transparent 80%,
      rgba(0,0,0,.9) 92%,
      transparent 100%);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  animation:border-angle-spin 4s linear infinite;
  color:#000;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
:root[data-theme="light"] .journey-nav-btn{
  background-image:
    linear-gradient(#000, #000),
    conic-gradient(from var(--border-angle),
      transparent 0%, transparent 80%,
      rgba(255,255,255,.9) 92%,
      transparent 100%);
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.25);
}
.journey-nav-arrow{display:inline-block;transition:transform .2s ease;}
.journey-nav-btn:hover{
  transform:scale(1.08);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.5), 0 0 0 1px var(--iv-accent-2), 0 0 16px 2px var(--accent-glow);
}
.journey-nav-prev:hover .journey-nav-arrow{transform:translateX(-2px);}
.journey-nav-next:hover .journey-nav-arrow{transform:translateX(2px);}
.journey-nav-btn:active{transform:scale(.92);}
.journey-nav-btn:focus-visible{outline:2px solid var(--iv-accent-2);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){.journey-nav-btn{animation:none;}}

@media (max-width:800px){
  .journey-layout{grid-template-columns:minmax(0,1fr);}
  .journey-sidebar{
    flex-direction:row;
    flex-wrap:wrap;
    padding-left:0;
    gap:12px;
  }
  .journey-line{display:none;}
  .journey-step{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:999px;
  }
  .journey-step-dot{display:none;}
  .journey-step.active{border-color:transparent;background:var(--text);color:var(--bg);}
  .journey-panel{padding:28px;}
}

/* ===== Supermercados (landing page) ===== */
.super-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  text-align:left;
}
.super-hero-left{text-align:left;}
.super-hero-left .iv-eyebrow{text-align:left;}
.super-hero-tile{aspect-ratio:3/4;animation:float-y 7s ease-in-out infinite;}
@media (max-width:900px){.super-hero-grid{grid-template-columns:minmax(0,1fr);}}

/* Lighter weight and tighter leading than the default .iv-title — reads as a landing
   page headline, not a heavy template slab. One flat accent color, no gradient. */
.super-hero-title{font-weight:700;line-height:1.05;max-width:15ch;}
.super-hero-title span{display:inline;}
.super-hero .hero-grid{opacity:.45;}
.super-hero .hero-actions .btn{padding:12px 22px;font-size:.9rem;}
.btn-ghost{
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  animation:none;
  --btn-glow-rgb: var(--text-rgb);
}
.btn-ghost:hover{background:rgba(var(--text-rgb),.06);}
@media (max-width:640px){
  .super-hero-title{font-size:clamp(2.4rem,8vw,5rem);max-width:none;}
  .super-hero-btn-main{width:100%;}
}

/* Flow steps: reuses .iv-steps, adds a connector arrow between cards on wide screens only */
.super-flow-steps .iv-step{position:relative;}
.super-flow-steps .iv-step:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:18px; right:-24px;
  color:var(--text-dim);
  font-size:1.1rem;
}
/* Only above the .iv-steps 2-col/1-col collapse breakpoints — otherwise this would
   override the responsive columns and force 4-up even on phones. */
@media (min-width:901px){.super-flow-steps-4{grid-template-columns:repeat(4,1fr);}}
/* Blue system only now — this used to alternate in greens too (a leftover
   from before green was reserved for WhatsApp), so it's now a pure blue
   depth scale: each step a bit lighter/deeper than the next. */
.super-flow-steps .iv-step-num{animation:none;}
.super-flow-steps .iv-step:nth-child(5n+1) .iv-step-num{background-image:linear-gradient(135deg,#1e5fd9,#33c1ff);}
.super-flow-steps .iv-step:nth-child(5n+2) .iv-step-num{background-image:linear-gradient(135deg,#0a3d99,#1e5fd9);}
.super-flow-steps .iv-step:nth-child(5n+3) .iv-step-num{background-image:linear-gradient(135deg,#33c1ff,#4da8ff);}
.super-flow-steps .iv-step:nth-child(5n+4) .iv-step-num{background-image:linear-gradient(135deg,#0a3d99,#33c1ff);}
.super-flow-steps .iv-step:nth-child(5n+5) .iv-step-num{background-image:linear-gradient(135deg,#1e5fd9,#4da8ff,#0a3d99);}
@media (max-width:900px){
  .super-flow-steps .iv-step::after{display:none;}
}

/* ===== "Errado" x "Certo" — comparativo de sinais =====
   Reutilizável entre segmentos: troque só o array de sinais (3 valores por
   item: problema, o que a Rizer faz, impacto) por página. Vermelho aqui é
   semântica de problema, não marca — o azul (Certo) é a marca Rizer; verde
   segue reservado só para WhatsApp em todo o resto do site. */
.compare-versus{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
  max-width:1000px;
  margin:0 auto;
}
.compare-card{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
}
.compare-card-header{padding:18px 26px;text-align:center;}
.compare-card-header h3{margin:0;font-size:1.15rem;font-weight:800;color:#fff;}
.compare-card-wrong .compare-card-header{background:linear-gradient(135deg,#7f1d1d,#b91c1c);}
/* Green here by explicit request, scoped to this "Certo/Com a Rizer" side of
   the comparison only — everywhere else on the site, green stays reserved
   for WhatsApp. */
.compare-card-rizer .compare-card-header{background:linear-gradient(135deg,#0f6b48,#22c98a);}
.compare-list{list-style:none;margin:0;padding:22px 26px 26px;display:flex;flex-direction:column;gap:16px;}
.compare-list li{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;color:var(--text-dim);}
.compare-list-rizer li{color:var(--text);font-weight:600;}
.compare-list li small{display:block;margin-top:4px;font-weight:400;font-style:italic;color:var(--text-dim);font-size:.82rem;}
.compare-icon{
  flex-shrink:0;
  width:22px;height:22px;
  margin-top:1px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  font-weight:800;
  color:#fff;
}
.compare-icon-wrong{background:#b91c1c;}
.compare-icon-rizer{background:#0f8a5f;}
@media (max-width:800px){.compare-versus{grid-template-columns:minmax(0,1fr);}}
.compare-cta{text-align:center;margin-top:32px;}

/* ===== "Imagine Seu Mercado Assim" — componente reutilizável entre segmentos =====
   Um carrossel curto (poucos slides), não uma parede de cards: o visitante
   passa pelos conceitos no próprio ritmo, arrastando/deslizando ou usando as
   setas — nada rola sozinho. Cada slide carrega um selo "Conceito Rizer"
   visível para nunca ser confundido com case de cliente real. */
.segment-preview-slider{overflow:hidden;}
.segment-preview-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:8px 40px 24px;
  max-width:var(--container);
  margin:0 auto;
}
.segment-preview-track::-webkit-scrollbar{height:6px;}
.segment-preview-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;}
.segment-preview-slide{
  position:relative;
  flex:0 0 clamp(200px,60vw,280px);
  scroll-snap-align:start;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.segment-preview-slide:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 20px 40px -24px var(--accent-glow);
}
.segment-preview-media{width:100%;aspect-ratio:4/5;border-radius:0;border:none;}
.segment-preview-badge{
  position:absolute;
  top:10px;left:10px;
  z-index:1;
  font-size:.65rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(var(--bg-rgb),.75);
  backdrop-filter:blur(6px);
  border:1px solid var(--border);
  color:var(--accent-text);
}
.segment-preview-nav{justify-content:center;margin-top:4px;}

.segment-preview-spotlight{margin-top:48px;text-align:center;}
.segment-preview-spotlight-label{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  color:var(--accent-text);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:18px;
}

.super-formats-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:8px 24px 24px;
  max-width:var(--container);
  margin:0 auto;
  justify-content:center;
}
.super-format-tile{
  flex:0 0 180px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.super-format-media{width:100%;aspect-ratio:9/16;}
.super-formats-row::-webkit-scrollbar{height:6px;}
.super-formats-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;}
@media (max-width:640px){.super-formats-row{justify-content:flex-start;}}

.super-recur-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.super-recur-card{
  flex:1 1 180px;
  max-width:240px;
  text-align:center;
  padding:22px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.super-recur-card strong{font-size:1.1rem;}
.super-recur-card span{font-size:.88rem;color:var(--text-dim);font-weight:600;}

/* ===== O que a Rizer faz, agrupado por função ===== */
.solution-groups-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.solution-group{padding:26px 22px;}
.solution-group-tag{
  display:block;
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--accent-text);
  margin-bottom:10px;
}
.solution-group h3{margin:0 0 14px;font-size:1.05rem;}
.solution-group-list{display:flex;flex-direction:column;gap:8px;font-size:.85rem;color:var(--text-dim);padding:0;margin:0;list-style:none;}
.solution-group-list li{padding-left:16px;position:relative;}
.solution-group-list li::before{content:"•";position:absolute;left:0;color:var(--silver);}
@media (max-width:1000px){.solution-groups-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.solution-groups-grid{grid-template-columns:minmax(0,1fr);}}

/* Each plan tier gets its own depth of blue for its checkmarks — lighter for the entry
   plan, the standard accent on the recommended plan, deep for the top tier.
   (Was a green scale reusing the WhatsApp brand color for non-WhatsApp checkmarks —
   green on this site is reserved for WhatsApp, so this moved to the blue system.) */
/* Supermercados' plan cards used to carry their own green wash (checkmarks,
   card background, badge, animated price gradient) — green is reserved for
   WhatsApp sitewide, so this was removed; the cards now fall back to the
   same default .plan-card/.plan-price styling used by every other page's
   pricing section (#iv-planos etc.), with only the featured (middle) card
   getting the blue accent treatment via the shared .plan-featured rules. */

/* ===== Scroll reveal ===== */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal:where(.in-view){
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .gradient-text,.btn-gradient,.toggle-btn.active,.floating-name{animation:none;}
  .floating-creator{animation:none;}
  .eco-hub,.eco-hub::before,.eco-node,.eco-node.active,.eco-phase-tab.active,.eco-web-child.in{animation:none;}
  .iv-glow-border{animation:none;}
  .proof-icon svg,.proof-bars line{animation:none;}
  .mk-brands-marquee-track{animation:none;}
  .super-hero-tile{animation:none;}
  .iv-portfolio-track{animation:none;}
  .offer-modal-backdrop,.offer-modal{transition:none;}
}

/* ===== Sistema comercial global: modal "Contratar" / "Solicitar Proposta" =====
   Um único componente para o site inteiro (ver offers.js) — preto/branco/prata,
   azul como ação principal, verde reservado só pra opção de WhatsApp. Superfície
   opaca (var(--surface)), nunca vidro/blur pesado. */
.offer-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity .25s ease;
}
.offer-modal-backdrop.is-open{opacity:1;}
.offer-modal-backdrop[hidden]{display:none;}
.offer-modal{
  position:relative;
  width:100%;
  max-width:480px;
  max-height:88vh;
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:20px;
  padding:32px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--accent-rgb),.08);
  transform:translateY(12px) scale(.98);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.offer-modal-backdrop.is-open .offer-modal{transform:translateY(0) scale(1);opacity:1;}
.offer-modal-close{
  position:absolute;
  top:16px;right:16px;
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-size:.9rem;
  transition:border-color .2s ease, transform .2s ease;
}
.offer-modal-close:hover{border-color:var(--accent);transform:scale(1.06);}

.offer-modal-eyebrow{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--silver);margin-bottom:8px;}
.offer-modal-title{margin:0 0 10px;font-size:1.4rem;font-weight:800;padding-right:30px;}
.offer-modal-summary{margin:0 0 16px;color:var(--text-dim);font-size:.92rem;}
.offer-modal-price{font-size:1.3rem;font-weight:800;color:var(--accent-text);margin:0;}
.offer-modal-price small{font-size:.7rem;font-weight:700;color:var(--text-dim);margin-left:2px;}
.offer-modal-price-pending{font-size:.95rem;font-weight:600;color:var(--silver);}
.offer-modal-price-block{margin:0 0 18px;}
.offer-modal-savings{margin:4px 0 0;font-size:.8rem;font-weight:700;color:#25d366;}
.offer-period-tabs{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap;}
.offer-period-tab{flex:1;min-width:0;padding:9px 6px;font-size:.8rem;font-weight:700;color:var(--text-dim);background:var(--card-tint);border:1px solid var(--border);border-radius:999px;transition:border-color .2s ease,color .2s ease,background .2s ease;}
.offer-period-tab:hover{border-color:var(--accent);color:var(--text);}
.offer-period-tab.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.offer-modal-includes{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:8px;}
.offer-modal-includes li{padding-left:20px;position:relative;font-size:.88rem;color:var(--text-dim);}
.offer-modal-includes li::before{content:"✓";position:absolute;left:0;color:var(--accent-text);font-weight:700;}
.offer-modal-question{font-weight:700;margin:0 0 14px;font-size:.95rem;}

.offer-modal-options{display:flex;flex-direction:column;gap:10px;}
.offer-option{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:100%;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  text-align:left;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.offer-option span{font-weight:700;font-size:.95rem;}
.offer-option small{color:var(--text-dim);font-size:.78rem;}
.offer-option:hover:not(:disabled){border-color:var(--accent);transform:translateX(2px);background:var(--accent-soft);}
.offer-option:disabled{opacity:.55;cursor:not-allowed;}
.offer-option-whatsapp{border-color:rgba(37,211,102,.35);}
.offer-option-whatsapp span{color:#25d366;}
.offer-option-whatsapp:hover{border-color:#25d366;background:rgba(37,211,102,.1);}
.offer-option-pay span{color:var(--accent-text);}

.offer-modal-back{
  background:none;border:none;color:var(--text-dim);
  font-size:.82rem;font-weight:600;margin-bottom:14px;padding:0;
  transition:color .2s ease;
}
.offer-modal-back:hover{color:var(--text);}

.offer-form{display:flex;flex-direction:column;gap:14px;}
.offer-form[hidden]{display:none;}
.offer-form-row{display:flex;flex-direction:column;gap:6px;}
.offer-form-row label{font-size:.85rem;color:var(--text-dim);}
.offer-form-row label small{color:var(--text-faint);}
.offer-form-row input,.offer-form-row textarea{
  padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:.92rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.offer-form-row input:focus,.offer-form-row textarea:focus{outline:none;border-color:rgba(var(--text-rgb),.4);box-shadow:0 0 0 3px rgba(var(--text-rgb),.12);}
:root[data-theme="light"] .offer-form-row input,
:root[data-theme="light"] .offer-form-row textarea{border-color:var(--border-strong);box-shadow:0 1px 3px rgba(17,18,20,.05);}
.offer-form-submit{align-self:flex-start;margin-top:4px;}
.offer-form-note{margin-top:16px;font-size:.88rem;color:var(--text-dim);line-height:1.6;}
.offer-form-note strong{color:var(--text);}
.offer-form-fallback-wa{margin-top:12px;}

@media (max-width:640px){
  .offer-modal-backdrop{align-items:flex-end;padding:0;}
  .offer-modal{
    max-width:100%;
    max-height:90vh;
    border-radius:20px 20px 0 0;
    padding:28px 20px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%);
  }
  .offer-modal-backdrop.is-open .offer-modal{transform:translateY(0);}
  .offer-modal-close{top:14px;right:14px;}
}