/* ==========================================================================
   Grupo Henri — Landing page
   Desktop segue o frame de 1440px; abaixo de 960px entra a diagramação
   mobile (frame de 390px). Valores extraídos do layout.pen.
   ========================================================================== */

:root {
  --gh-bg: #0A0A0A;
  --gh-page: #050505;
  --gh-surface: #141414;
  --gh-surface-2: #1C1C1C;
  --gh-line: #2A2A2A;
  --gh-text: #F5F5F5;
  --gh-text-2: #A3A3A3;
  --gh-text-3: #6B6B6B;
  --gh-red: #DE020A;
  --gh-red-soft: #FF8A8E;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-tight: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-hand: "Caveat", cursive;

  --gutter: clamp(24px, 5.556vw, 80px);
  --panel-max: 1280px;
  --panel-radius: 32px;
  --grain: url("../assets/grain.png");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--gh-page);
  color: var(--gh-text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@supports (overflow: clip) { body { overflow-x: clip; } }

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-only, .xs-only { display: none; }

/* --------------------------------------------------------------------------
   Utilitários de superfície
   .gb    → borda de 1px em gradiente (respeita border-radius), via --gb
   .grain → textura de ruído (shader grain.glsl), opacidade via --grain-a
   -------------------------------------------------------------------------- */
.gb, .grain { position: relative; isolation: isolate; }

.gb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: var(--gb, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grain) 0 0 / 160px 160px repeat;
  opacity: var(--grain-a, .05);
  pointer-events: none;
}

.logo { color: var(--gh-text); }

/* Eyebrow (pílula com ponto vermelho) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFFFFF0D 0%, #FFFFFF03 100%);
  --gb: linear-gradient(180deg, #FFFFFF33 0%, #FFFFFF0D 45%, #FFFFFF1A 100%);
  box-shadow: 0 8px 24px #00000080;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gh-text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 15px;
  white-space: nowrap;
}
.eyebrow i {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: var(--gh-red);
  box-shadow: 0 0 8px #DE020AB3;
  flex: none;
}

/* CTA */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 10px 10px 10px 40px;
  border-radius: 100px;
  background:
    radial-gradient(ellipse 45% 50% at 50% 0%, #FFFFFF4D 0%, #FFFFFF00 100%),
    linear-gradient(180deg, #FF2B33 0%, #D4040C 55%, #A80007 100%);
  --gb: linear-gradient(180deg, #FFFFFF99 0%, #FFFFFF14 50%, #FF8A8E40 100%);
  color: #FFF;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.cta__label { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; white-space: nowrap; }
.cta__chip {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF 0%, #E9E9E9 100%);
  color: #B30008;
  flex: none;
  transition: transform .25s ease;
}
.cta__chip svg { width: 24px; height: 24px; }
.cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 32px #DE020A40; }
.cta:hover .cta__chip { transform: rotate(45deg); }
.cta:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }

/* Tipografia recorrente */
.t-body { color: var(--gh-text-2); font-size: 19px; line-height: 30px; }
.t-body strong { color: var(--gh-text); font-weight: 700; }
.t-white { color: var(--gh-text); }
.t-bold { color: var(--gh-text); font-weight: 700; }
.t-strong { color: var(--gh-text); font-weight: 600; }

.h-48 { font-family: var(--font-tight); font-size: 48px; line-height: 53px; font-weight: 700; letter-spacing: -1.2px; text-align: center; color: var(--gh-text); }
.h-38 { font-family: var(--font-tight); font-size: clamp(30px, 2.639vw, 38px); line-height: 1.132; font-weight: 700; letter-spacing: -1px; color: var(--gh-text); }
.h-36 { font-family: var(--font-tight); font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -1px; color: var(--gh-text); }

.prose { display: flex; flex-direction: column; gap: 22px; padding-top: 12px; width: 100%; }
.prose p { color: var(--gh-text-2); font-size: 19px; line-height: 30px; }
.prose p.t-strong { color: var(--gh-text); font-weight: 600; }
.prose p.t-white { color: var(--gh-text); }

/* --------------------------------------------------------------------------
   Seções em painel
   -------------------------------------------------------------------------- */
.section { padding: 12px var(--gutter); }
.section--first { padding-top: 80px; }

.panel {
  max-width: var(--panel-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 104px 0;
  border-radius: var(--panel-radius);
  background:
    radial-gradient(ellipse 65% 25% at 50% 0%, #FFFFFF0B 0%, #FFFFFF00 100%),
    linear-gradient(180deg, #141414 0%, #0B0B0B 100%);
  --gb: linear-gradient(180deg, #FFFFFF38 0%, #FFFFFF0D 30%, #FFFFFF06 75%, #FFFFFF14 100%);
  --grain-a: .05;
  box-shadow: 0 40px 100px #000000E6, inset 0 1px 0 #FFFFFF12;
}

/* Brilho de luz no topo do painel */
.leak {
  position: absolute;
  top: 0;
  left: 50%;
  width: 520px;
  height: 1px;
  margin-left: -260px;
  background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFFB3 50%, #FFFFFF00 100%);
  pointer-events: none;
  z-index: 2;
}
.leak:not(.leak--line)::after {
  content: "";
  position: absolute;
  left: 0; top: -60px;
  width: 520px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #FFFFFF1F 0%, #FFFFFF00 100%);
}

.col { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; width: calc(100% - 80px); }
.col--820 { max-width: 820px; }
.col--760 { max-width: 760px; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: #000;
}
.hero__bg {
  position: absolute;
  top: 0; left: 50%;
  width: 1600px; height: 964px;
  margin-left: -800px;
  background: url("../assets/bg-hero-desktop.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hero__grid {
  position: absolute;
  top: 0; left: 50%;
  width: 1440px; height: 1099px;
  margin-left: -720px;
  z-index: 1;
  pointer-events: none;
}
.hero__line {
  position: absolute;
  top: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, #FFFFFF21 0%, #FFFFFF12 55%, #FFFFFF03 100%);
}
.hero__trail {
  position: absolute;
  width: 1px;
  background: linear-gradient(180deg, #FF6B7000 0%, #FFC2C4E6 60%, #FF6B7000 100%);
  mix-blend-mode: screen;
}
.hero__line--1 { left: 160px; } .hero__line--2 { left: 320px; } .hero__line--3 { left: 480px; }
.hero__line--4 { left: 960px; } .hero__line--5 { left: 1120px; } .hero__line--6 { left: 1280px; }
/* Light trails: cada traço desce pela própria linha em loop (só transform/opacity).
   --from deixa o traço logo acima do topo da grade; --to, logo abaixo da base (1099px). */
.hero__trail { animation: trail var(--dur) cubic-bezier(.45, 0, .55, 1) var(--delay) infinite both; will-change: transform, opacity; }
.hero__trail--1 { left: 160px;  top: 90px;  height: 260px; --from: -350px; --to: 1009px; --dur: 6.2s; --delay: -1.3s; }
.hero__trail--2 { left: 480px;  top: 380px; height: 200px; --from: -580px; --to: 719px;  --dur: 7.8s; --delay: -4.1s; }
.hero__trail--3 { left: 960px;  top: 160px; height: 240px; --from: -400px; --to: 939px;  --dur: 5.1s; --delay: -2.4s; }
.hero__trail--4 { left: 1280px; top: 460px; height: 220px; --from: -680px; --to: 639px;  --dur: 8.6s; --delay: -5.6s; }
.hero__trail--5 { left: 320px;  top: 620px; height: 180px; --from: -800px; --to: 479px;  --dur: 4.4s; --delay: -0.7s; }
.hero__trail--6 { left: 1120px; top: 700px; height: 200px; --from: -900px; --to: 399px;  --dur: 6.9s; --delay: -3.3s; }
@keyframes trail {
  0%   { transform: translate3d(0, var(--from), 0); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(0, var(--to), 0); opacity: 0; }
}
.hero__trail::before {
  content: "";
  position: absolute;
  inset: 0 -3px;
  background: linear-gradient(180deg, #DE020A00 0%, #FF2B3359 60%, #DE020A00 100%);
  filter: blur(3px);
}
.hero__fade {
  position: absolute;
  left: 0; right: 0; top: 380px;
  height: 719px;
  z-index: 2;
  background: linear-gradient(180deg, #00000000 0%, #000000B3 18%, #000000F2 30%, #000000 40%, #000000 100%);
}
.hero__stage { position: relative; height: 470px; width: 100%; }
.hero__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: min(1080px, calc(100% - 48px));
  padding-bottom: 96px;
  text-align: center;
}
.hero__logo { width: 84px; height: 91px; }
.hero__hl {
  background: linear-gradient(90deg, #FF4B52 0%, #DE020A 55%, #A80007 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__title {
  font-family: var(--font-tight);
  font-size: 43px;
  line-height: 46px;
  font-weight: 700;
  letter-spacing: -1.5px;
  /* Branco → #BDBDBD do design feito com máscara de opacidade (sobre o fundo preto
     dá o mesmo tom). Não usa background-clip:text no h1 para o destaque vermelho
     (.hero__hl) não ficar com borda branca serrilhada por baixo. */
  color: #FFFFFF;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .74) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .74) 100%);
}
.hero__sub { max-width: 880px; color: var(--gh-text-2); font-size: 21px; line-height: 32px; }
.hero__cta { padding-top: 8px; }

/* ---------- TICKER ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  background: #0E0E0E;
  border-block: 1px solid #1F1F1F;
  padding: 22px 0;
}
.ticker .ticker__track { --gap: 36px; align-items: center; }
.ticker__item {
  font-family: var(--font-tight);
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--gh-text);
}
.ticker__item--dim { color: #5C5C5C; }
.ticker__sep { width: 16px; height: 16px; color: var(--gh-red); flex: none; }

/* ---------- MARQUEE (genérico) ---------- */
.marquee__track {
  --gap: 16px;
  display: flex;
  gap: var(--gap);
  width: max-content;
}
.js .marquee__track[data-ready] {
  padding-right: var(--gap);
  animation: marquee var(--dur, 60s) linear infinite;
}
.js .marquee__track[data-ready][data-reverse] { animation-direction: reverse; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.ticker__track { --dur: 38s; }

/* ---------- 01 — NOTÍCIA ---------- */
.news { width: 100%; padding: 28px 0 36px; container-type: inline-size; }
.clip {
  /* escala do recorte: 1px no tamanho do design; fallback por vw, cqi via @supports */
  --u: min(1px, calc((100vw - 2 * var(--gutter) - 80px) / 820));
  position: relative;
  width: calc(820 * var(--u));
  height: calc(219 * var(--u));
  margin-left: calc(5 * var(--u));
  padding: calc(26 * var(--u)) calc(44 * var(--u)) calc(30 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  transform: rotate(1.5deg);
  transform-origin: top left;
  color: #1C1C1A;
}
.clip__edge, .clip__paper { position: absolute; z-index: 0; pointer-events: none; }
.clip__edge { inset: calc(-6 * var(--u)); width: calc(100% + 12 * var(--u)); height: calc(100% + 12 * var(--u)); filter: drop-shadow(0 14px 15px #00000073) drop-shadow(0 2px 1.5px #00000033); }
.clip__paper { inset: 0; width: 100%; height: 100%; }
.clip__edge--m, .clip__paper--m { display: none; }
.clip__top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.clip__portal { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: -0.2px; color: #1A1A1A; }
.clip__portal b {
  display: grid; place-items: center;
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: 4px;
  background: #1A1A1A; color: #FFF;
  font-size: calc(9 * var(--u)); font-weight: 800;
}
.clip__crumb { font-size: calc(11 * var(--u)); font-weight: 500; color: #6E6E6A; white-space: nowrap; }
.clip__headline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  font-family: var(--font-serif);
  font-size: calc(28 * var(--u));
  line-height: calc(34 * var(--u));
  font-weight: 700;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.clip__l { display: block; }
.clip__l3 { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.clip__headline mark { background: #DDF247; color: inherit; border-radius: 2px; padding: 0 calc(6 * var(--u)); margin-left: calc(-6 * var(--u)); }

/* ---------- 02 — HÁ 6 MESES ---------- */
.panel--s02 { padding: 450px 0 0; gap: 72px; }
.s02__hero {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 640px;
  background: url("../assets/hero-fade.webp") center / cover no-repeat;
}
.s02__col { z-index: 1; }
.s02__body { display: flex; flex-direction: column; gap: 22px; width: 100%; }
.s02__title { font-family: var(--font-tight); font-size: 46px; line-height: 52px; font-weight: 600; letter-spacing: -1.2px; color: var(--gh-text); }
.stats { display: flex; width: 100%; border-block: 1px solid var(--gh-line); padding: 32px 0; }
.stat { flex: 1 1 0; display: flex; flex-direction: column; gap: 18px; padding: 0 0 0 28px; min-width: 0; }
.stat:first-child { padding: 0 28px 0 0; }
.stat + .stat { border-left: 1px solid var(--gh-line); }
.stat__chip {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: #FFFFFF0A;
  box-shadow: inset 0 0 0 1px var(--gh-line);
  color: var(--gh-red);
  flex: none;
}
.stat__chip svg { width: 28px; height: 28px; }
.stat__text { font-family: var(--font-tight); font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.4px; color: var(--gh-text); }
.s02__pause { font-family: var(--font-tight); font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -1px; }
.gains { border-left: 2px solid var(--gh-line); padding: 4px 0 4px 28px; }
.gains li { display: flex; gap: 20px; padding: 14px 0; }
.gains__num { flex: none; width: 22px; font-family: var(--font-tight); font-size: 15px; line-height: 29px; font-weight: 700; color: var(--gh-red); }
.gains p { flex: 1; font-size: 19px; line-height: 30px; font-weight: 600; color: var(--gh-text); }

.s2027 { position: relative; width: 100%; padding: 220px 0 40px; text-align: center; }
.s2027__num {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-tight);
  font-size: 300px;
  line-height: 300px;
  font-weight: 800;
  letter-spacing: -14px;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF2E 0%, #FFFFFF0A 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s2027__text { position: relative; font-family: var(--font-tight); font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -1px; color: var(--gh-text); }

/* ---------- CHATS (prints de WhatsApp) ---------- */
.chats {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 8px 0;
  overflow: hidden;
  z-index: 2;
}
.chats__row { align-items: center; --dur: 70s; }
.chats__row--2 { margin-left: calc(100% - 1888px); }
.chats__fade { position: absolute; top: 0; bottom: 0; width: 260px; z-index: 3; pointer-events: none; }
.chats__fade--l { left: 0; background: linear-gradient(90deg, var(--gh-page) 0%, #05050500 100%); }
.chats__fade--r { right: 0; background: linear-gradient(270deg, var(--gh-page) 0%, #05050500 100%); }

.chat {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 220px;
  overflow: hidden;
  border-radius: 10px;
  background: #0B141A;
  box-shadow: inset 0 0 0 1px var(--gh-line);
  font-family: var(--font);
  color: #E9EDEF;
}
.chat--260 { height: 260px; } .chat--280 { height: 280px; } .chat--300 { height: 300px; } .chat--320 { height: 320px; }
.av-1 { background: #6B7C85; } .av-2 { background: #7A6B85; } .av-3 { background: #5E7D6E; }
.av-4 { background: #85776B; } .av-5 { background: #6B7385; } .av-6 { background: #857069; }
.chat__head { display: flex; align-items: center; gap: 6px; padding: 9px 10px 9px 6px; background: #202C33; }
.chat__ic { width: 13px; height: 13px; color: #AEBAC1; flex: none; }
.chat__ic--sm { width: 12px; height: 12px; }
.chat__av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #FFF; font-size: 10px; font-weight: 600; flex: none; }
.chat__who { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat__who strong { font-size: 11px; font-weight: 600; white-space: nowrap; }
.chat__who small { font-size: 8.5px; color: #8696A0; }
.chat__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 8px; }
.chat__date {
  align-self: center;
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  background: #182229;
  color: #8696A0;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: .3px;
}
.msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 158px;
  padding: 5px 7px 4px;
  border-radius: 1px 7px 7px 7px;
  background: #202C33;
  font-size: 10.5px;
  line-height: 14px;
}
.msg--out { align-self: flex-end; border-radius: 7px 1px 7px 7px; background: #005C4B; }
.msg small { display: flex; align-items: center; justify-content: flex-end; gap: 3px; color: #FFFFFF8C; font-size: 7.5px; line-height: 1.2; white-space: nowrap; }
.msg--inline { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
.msg--inline > span { white-space: nowrap; }
.msg__read { width: 10px; height: 10px; color: #53BDEB; }
.chat__input { display: flex; align-items: center; gap: 5px; padding: 0 6px 7px; }
.chat__field { flex: 1; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 12px; background: #202C33; color: #8696A0; font-size: 9px; }
.chat__field svg { width: 11px; height: 11px; color: #8696A0; }
.chat__mic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #00A884; color: #111B21; flex: none; }
.chat__mic svg { width: 11px; height: 11px; }

/* ---------- 03 — O PROBLEMA ---------- */
.panel--s03 { gap: 96px; }
.problem { position: relative; display: flex; flex-direction: column; gap: 64px; width: calc(100% - 80px); max-width: 1120px; }
.problem__top { display: flex; align-items: flex-end; gap: clamp(32px, 5.556vw, 80px); }
.problem__left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: clamp(300px, 30.556vw, 440px); flex: none; }
.problem__right { flex: 1; display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }

.diag {
  width: 100%;
  padding-block: 1px; /* a borda de 1px do design entra na altura */
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, #111111 0%, #090909 100%);
  --gb: linear-gradient(180deg, #FFFFFF2E 0%, #FFFFFF0A 45%, #FFFFFF12 100%);
  --grain-a: .04;
  box-shadow: 0 24px 60px #000000B3, inset 0 1px 0 #FFFFFF14;
}
.diag__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 32px; box-shadow: inset 0 -1px 0 #FFFFFF0F; }
.diag__title { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: var(--gh-text); }
.diag__title svg { width: 20px; height: 20px; color: var(--gh-text-2); }
.diag__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: #DE020A1A;
  box-shadow: inset 0 0 0 1px #DE020A40;
  color: var(--gh-red-soft);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.diag__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--gh-red); }
.diag__row { display: flex; align-items: center; gap: 20px; padding: 26px 32px; }
.diag__row + .diag__row { box-shadow: inset 0 1px 0 #FFFFFF0A; }
.ibox {
  display: grid; place-items: center;
  width: 51.5px; height: 51.5px;
  border-radius: 13px;
  background: #FFFFFF08;
  --gb: linear-gradient(180deg, #FFFFFF26 0%, #FFFFFF08 45%, #FFFFFF10 100%);
  color: var(--gh-text-2);
  flex: none;
}
.ibox svg { width: 24px; height: 24px; }
.diag__text { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.diag__text strong { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--gh-text); }
.diag__text small { font-size: 16px; line-height: 1.2; color: var(--gh-text-3); }
.diag__metric { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: 200px; flex: none; }
.diag__metric b { font-family: var(--font-tight); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--gh-text-2); white-space: nowrap; }
.track { display: block; width: 100%; height: 6px; border-radius: 3px; background: #FFFFFF0F; }
.track__fill { display: block; height: 100%; border-radius: 3px; background: var(--gh-red); }
.track__fill--gray { background: #8A8A8A; }
.track__fill[data-w="1"] { width: 82.5%; } .track__fill[data-w="2"] { width: 12.5%; }
.track__fill[data-w="3"] { width: 28%; } .track__fill[data-w="4"] { width: 17.5%; }

.s03__col { z-index: 1; }
.nots { width: 100%; border-top: 1px solid var(--gh-line); }
.nots li { display: flex; align-items: center; gap: 16px; padding: 17.75px 0; box-shadow: inset 0 -1px 0 var(--gh-line); }
.nots svg { width: 18px; height: 18px; color: #DE020AB3; flex: none; }
.nots s {
  font-size: 19px; line-height: 27px;
  color: var(--gh-text-3);
  text-decoration: line-through;
  text-decoration-color: #6B6B6BCC;
  text-decoration-thickness: 1.5px;
}
.s03__lead { font-family: var(--font-tight); font-size: 24px; line-height: 35px; font-weight: 600; color: var(--gh-text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 12px;
  border-radius: 100px;
  background: #FFFFFF06;
  --gb: linear-gradient(180deg, #FFFFFF26 0%, #FFFFFF0A 45%, #FFFFFF14 100%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--gh-text-2);
  white-space: nowrap;
}
.objective { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; width: 100%; }
.objective__label { font-family: var(--font-mono); font-size: 13px; line-height: 21px; letter-spacing: 2px; color: var(--gh-text-3); }
.objective__quote {
  border-left: 3px solid var(--gh-red);
  padding: 4px 0 4px 28px;
  font-family: var(--font-tight);
  font-size: 36px; line-height: 43px; font-weight: 700; letter-spacing: -1px;
  color: var(--gh-text);
}
.cta-wrap { padding-top: 24px; }

/* ---------- 04 — POR QUE ANUNCIAR ---------- */
.panel--s04 { gap: 28px; }
.s04__title { position: relative; width: calc(100% - 80px); max-width: 760px; text-align: center; font-family: var(--font-tight); font-size: 44px; line-height: 49px; font-weight: 700; letter-spacing: -1px; color: var(--gh-text); }
/* A faixa vermelha atravessa o painel de borda a borda e as pontas da fita saem
   para fora dele. Por isso o painel da 04 não corta o conteúdo: quem corta as fotos
   é o .billboard__clip, e o brilho do topo (.leak) é cortado só acima do painel. */
.panel--s04 { overflow: visible; }
/* As pontas da fita saem do painel: o corte fica na seção, senão a página ganha rolagem lateral */
#por-que-anunciar { overflow-x: hidden; }
@supports (overflow: clip) { #por-que-anunciar { overflow-x: clip; } }
.panel--s04 > .leak { clip-path: inset(0 -100vw -100vw -100vw); }
.billboard { position: relative; width: 100%; border-block: 1px solid #FFFFFF12; }
.billboard__stage { position: relative; height: 510px; }
.billboard__clip { position: absolute; inset: 0; overflow: hidden; }
.photos { position: absolute; --gap: 12px; --dur: 55s; align-items: flex-start; }
.photos--1 { left: -36px; top: 24px; z-index: 0; }
.photos--2 { left: -110px; top: 294px; z-index: 1; --dur: 50s; }
.photos img {
  width: 144px; height: 192px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 24px #00000080, 0 0 0 1px #FFFFFF1A;
  background: #1C1C1C;
  flex: none;
}
.phrase {
  position: absolute;
  --tail: 64px;      /* largura de cada ponta (fica fora do painel) */
  /* Faixa de borda a borda do painel; as pontas saem para fora dele. */
  left: 0; top: 199px;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 34px max(40px, calc((100% - 880px) / 2 + 40px));
  background: linear-gradient(90deg, #1F0203 0%, #5C0206 40%, #9E0209 100%);
  box-shadow: 0 28px 56px #000000D9, 0 -14px 40px #00000099;
  transform: rotate(-2.2deg);
  transform-origin: top left;
}
/* Pontas da faixa de presente: saem de trás de cada extremidade, um pouco mais baixas,
   com corte em "V" e sombra no lado da dobra. A faixa (.phrase) é o contexto de
   empilhamento; as pontas ficam fora dela, então não precisam ir para trás. */
.phrase__tail {
  position: absolute;
  top: 0;
  width: var(--tail);
  height: 100%;
  pointer-events: none;
}
.phrase__tail--l { right: calc(100% - 1px); }
.phrase__tail--r { left: calc(100% - 1px); }
.phrase__left { display: flex; flex-direction: column; gap: 10px; }
.phrase__brand { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFFCC; font-size: 12px; font-weight: 700; letter-spacing: 4px; }
.phrase__brand .logo { width: 26px; height: 28px; color: #FFF; }
.phrase__stat { font-family: var(--font-tight); font-size: 60px; line-height: 60px; font-weight: 800; letter-spacing: -2.6px; color: #FFF; white-space: nowrap; }
.phrase__caption {
  width: 254px; flex: none;
  border-left: 1px solid #FFFFFF4D;
  padding: 4px 0 4px 24px;
  font-size: 16px; line-height: 23px;
  color: #FFFFFFE6;
}
.prose--760 { width: calc(100% - 80px); max-width: 760px; }
.s04__body { position: relative; }
.s04__body .s04__win { font-family: var(--font-tight); font-size: 26px; line-height: 34px; font-weight: 700; color: var(--gh-text); }

/* ---------- 05 — AS 5 ESTRUTURAS ---------- */
.s05 { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 120px var(--gutter); }
.s-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; width: calc(100% - 48px); max-width: 880px; }
.etapas { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1120px; }

/* Etapa: o estilo escuro é a base; o vermelho é o estado "ativo".
   Sem JS valem as cores do design (01, 03 e 05 vermelhas). Com JS (.is-live)
   só o card ativo da pilha fica vermelho. */
.etapa {
  --t: .4s ease;
  display: flex;
  gap: 64px;
  padding: 48px 56px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 40% at 15% 0%, #FFFFFF0A 0%, #FFFFFF00 100%),
    linear-gradient(180deg, #141414 0%, #0A0A0A 100%);
  --gb: linear-gradient(180deg, #FFFFFF33 0%, #FFFFFF0A 50%, #FFFFFF14 100%);
  --grain-a: .05;
  box-shadow: 0 30px 80px #000000CC, inset 0 1px 0 #FFFFFF14;
  color: var(--gh-text);
  transform-origin: 50% 0;
  transition: box-shadow var(--t), color var(--t);
}
.etapa__bg {
  position: absolute; inset: 0; z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 60% at 10% 0%, #FFFFFF2E 0%, #FFFFFF00 100%),
    radial-gradient(ellipse 50% 50% at 90% 100%, #5A000080 0%, #5A000000 100%),
    linear-gradient(180deg, #E5101A 0%, #B30008 100%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.etapa__shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }
.etapa__num { display: flex; flex-direction: column; align-items: flex-start; width: 200px; flex: none; }
.etapa__label, .etapa__count { font-size: 12px; line-height: 15px; font-weight: 600; color: var(--gh-text-3); transition: color var(--t); }
.etapa__label { letter-spacing: 3px; }
.etapa__count { letter-spacing: 1px; }
.etapa__n {
  font-family: var(--font-tight);
  font-size: 150px; line-height: 150px; font-weight: 800; letter-spacing: -6px;
  padding-right: 6px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF1A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.etapa__progress { display: flex; gap: 4px; padding-top: 18px; }
.etapa__progress i { position: relative; width: 28px; height: 3px; border-radius: 2px; overflow: hidden; background: #FFFFFF1A; transition: background-color var(--t); }
.etapa__progress i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gh-red);
  transform: scaleX(var(--f, 0));
  transform-origin: 0 50%;
  transition: background-color var(--t);
}
.etapa__progress i.on { --f: 1; }

.etapa__body { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.etapa__title { font-family: var(--font-tight); font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -1px; }
.etapa__sub { font-size: 18px; line-height: 27px; font-weight: 600; }
.etapa__bullets { padding-top: 20px; }
.etapa__bullets li {
  display: flex; align-items: center; gap: 18px; padding: 17.75px 0;
  background: linear-gradient(270deg, #FFFFFF14 0%, #FFFFFF05 100%) top / 100% 1px no-repeat;
  box-shadow: inset 0 1px 0 #FFFFFF00;
  transition: box-shadow var(--t);
}
.etapa__bullets p { flex: 1; font-size: 16px; line-height: 24px; color: var(--gh-text-2); transition: color var(--t); }
.etapa__ibox {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #FFFFFF08;
  --gb: linear-gradient(180deg, #FFFFFF2E 0%, #FFFFFF0A 100%);
  flex: none;
  transition: background-color var(--t);
}
.etapa__ibox svg { width: 18px; height: 18px; }

/* Estado vermelho (ativo) */
.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active {
  --gb: linear-gradient(180deg, #FFFFFF66 0%, #FFFFFF14 100%);
  --grain-a: .08;
  box-shadow: 0 30px 80px #DE020A4D, inset 0 1px 0 #FFFFFF4D;
  color: #FFF;
}
:is(.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active) .etapa__bg { opacity: 1; }
:is(.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active) :is(.etapa__label, .etapa__count) { color: #FFFFFFB3; }
:is(.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active) .etapa__n { background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF40 100%); }
:is(.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active) .etapa__progress i { background-color: #FFFFFF33; }
:is(.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active) .etapa__progress i::after { background-color: #FFF; }
:is(.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active) .etapa__bullets li { background-size: 0 0; box-shadow: inset 0 1px 0 #FFFFFF2E; }
:is(.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active) .etapa__bullets p { color: #FFFFFFD9; }
:is(.etapas:not(.is-live) .etapa--red, .etapas.is-live .etapa.is-active) .etapa__ibox { background-color: #FFFFFF1F; --gb: linear-gradient(#FFFFFF40, #FFFFFF40); }

/* Pilha em sticky (o top de cada card vem do JS; estes são os valores base) */
.etapas.is-live .etapa { position: sticky; top: calc(80px + var(--i, 0) * 20px); will-change: transform; }
@media (max-height: 520px) {
  .etapas.is-live .etapa { position: relative; top: auto !important; transform: none !important; }
  .etapas.is-live .etapa__shade { opacity: 0 !important; }
}

/* ---------- 06 — CASES ---------- */
.panel--s06 { gap: 72px; }
.cases { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: calc(100% - 80px); max-width: 1160px; }
.case {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #111111 0%, #090909 100%);
  --gb: linear-gradient(180deg, #FFFFFF2E 0%, #FFFFFF0A 45%, #FFFFFF12 100%);
  --grain-a: .04;
  box-shadow: 0 24px 60px #000000B3, inset 0 1px 0 #FFFFFF14;
}
.case__video {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 316px;
  padding: 16px;
  border-radius: 19px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 40% 45% at 50% 45%, #FFFFFF0D 0%, #FFFFFF00 100%),
    linear-gradient(200deg, #242424 0%, #0D0D0D 100%);
  --gb: linear-gradient(180deg, #FFFFFF1F 0%, #FFFFFF08 45%, #FFFFFF0F 100%);
  --grain-a: .06;
}
.case__top, .case__bottom { display: flex; justify-content: space-between; }
.case__top { align-items: center; }
.case__bottom { align-items: flex-end; }
.case__chip, .case__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 100px;
  background: #00000066;
  box-shadow: inset 0 0 0 1px #FFFFFF1F;
  font-size: 11px;
  line-height: 1.2;
}
.case__chip { font-weight: 700; letter-spacing: 1.5px; color: var(--gh-text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.case__tag { font-weight: 500; color: var(--gh-text-2); }
.case__tag svg { width: 12px; height: 12px; }
.case__play {
  align-self: center;
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: #FFFFFF0F;
  box-shadow: inset 0 0 0 1px #FFFFFF2E;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.case__play > span {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #FFF;
  color: #0A0A0A;
  box-shadow: 0 10px 30px #000000A6;
  transition: transform .25s ease;
}
.case__play svg { width: 30px; height: 30px; }
.case__play:hover > span { transform: scale(1.06); }
.case__who { display: flex; flex-direction: column; gap: 2px; }
.case__who strong { font-size: 14px; font-weight: 600; color: var(--gh-text); }
.case__who small { font-size: 12px; color: var(--gh-text-3); }
.case__dur { padding: 4px 8px; border-radius: 5px; background: #000000B3; font-size: 11px; font-weight: 600; color: var(--gh-text); }
.case__content { display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 10px; }
.case__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.case__company { font-size: clamp(10px, .834vw, 12px); font-weight: 600; letter-spacing: clamp(1px, .139vw, 2px); color: var(--gh-text-3); }
.case__growth {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 100px;
  background: #DE020A1A;
  box-shadow: inset 0 0 0 1px #DE020A4D;
  color: var(--gh-red-soft);
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.case__growth svg { width: 12px; height: 12px; color: #FF6B70; }
.case__stat { font-family: var(--font-tight); font-size: clamp(26px, 2.5vw, 36px); line-height: 1.056; font-weight: 800; letter-spacing: -1.2px; color: var(--gh-text); }
.case__arrow { display: inline-block; width: .78em; height: .78em; vertical-align: -0.06em; margin: 0 .02em; }
.case__sub { font-size: 15px; font-weight: 600; color: var(--gh-text-2); }
.case__desc { min-height: 72px; font-size: 15px; line-height: 23px; color: var(--gh-text-3); }
.case__metrics {
  display: flex;
  margin: 0 8px 8px;
  border-radius: 16px;
  background: #FFFFFF05;
  --gb: linear-gradient(180deg, #FFFFFF1A 0%, #FFFFFF08 45%, #FFFFFF0F 100%);
}
.case__m { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; padding: 16px clamp(12px, 1.25vw, 18px); min-width: 0; }
.case__m + .case__m { border-left: 1px solid #FFFFFF0F; }
.case__m dt { font-size: 12px; color: var(--gh-text-3); }
.case__m dd { font-family: var(--font-tight); font-size: clamp(14px, 1.18vw, 17px); white-space: nowrap; line-height: 1.25; font-weight: 600; letter-spacing: -0.4px; color: var(--gh-text-2); }
.case__m:nth-child(2) dd { font-size: clamp(16px, 1.39vw, 20px); font-weight: 800; color: var(--gh-text); }

/* ---------- 07 — HISTÓRIA ---------- */
.panel--s07 { gap: 56px; }
.eyebrow--story { white-space: normal; }
.polaroids { position: relative; width: calc(100% - 80px); max-width: 1000px; container-type: inline-size; }
.polaroids__stage { --u: min(1px, calc((100vw - 2 * var(--gutter) - 80px) / 1000)); position: relative; height: calc(400 * var(--u)); }
.polaroid {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  width: calc(300 * var(--u));
  height: calc(320 * var(--u));
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  background: #EDEDED;
  box-shadow: 0 20px 40px #00000080;
  transform-origin: top left;
}
.polaroid--1 { left: calc(60 * var(--u)); top: calc(70 * var(--u)); transform: rotate(-6deg); z-index: 0; --dx: calc(290 * var(--u)); --dy: calc(-50 * var(--u)); }
.polaroid--2 { left: calc(350 * var(--u)); top: calc(20 * var(--u)); height: calc(360 * var(--u)); z-index: 1; }
.polaroid--3 { left: calc(640 * var(--u)); top: calc(70 * var(--u)); transform: rotate(6deg); z-index: 0; --dx: calc(-290 * var(--u)); --dy: calc(-50 * var(--u)); }
.polaroid__photo { flex: 1; display: grid; place-items: center; background: #2B2B2B; }
.polaroid__photo span { font-family: var(--font-mono); font-size: calc(11 * var(--u)); letter-spacing: 2px; color: #777; }
.polaroid figcaption { font-family: var(--font-hand); font-size: calc(24 * var(--u)); line-height: 1.25; font-weight: 600; color: var(--gh-line); white-space: nowrap; }
.story { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; width: calc(100% - 80px); max-width: 560px; text-align: center; }
.story p { font-size: 18px; line-height: 29px; color: var(--gh-text-2); }
.story .story__today { color: var(--gh-text); font-weight: 700; }
.story .story__close { color: var(--gh-text); font-weight: 600; }

/* ---------- 08 — PROVA SOCIAL ---------- */
.s08 { display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 120px 0 140px; }

/* ---------- 09 — CTA FINAL ---------- */
.final {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 140px 24px;
  overflow: hidden;
  background: #000;
  border-top: 1px solid var(--gh-line);
  text-align: center;
}
.final > :not(.final__stage) { position: relative; z-index: 1; }
.final__stage { position: absolute; top: 0; left: 50%; width: 1440px; height: 824px; margin-left: -720px; pointer-events: none; }
.final__stage > * { position: absolute; }
.final__ambient { left: 320px; top: -320px; width: 800px; height: 600px; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, #DE020A1F 0%, #DE020A00 100%); }
.final__beams { inset: 0; width: 100%; height: 100%; overflow: visible; mix-blend-mode: screen; }
.final__src { border-radius: 50%; mix-blend-mode: screen; filter: blur(5px); background: radial-gradient(ellipse 50% 50% at 50% 50%, #FF4A5240 0%, #DE020A14 40%, #DE020A00 100%); }
.final__src::after { content: ""; position: absolute; left: 50%; border-radius: 50%; opacity: .5; background: radial-gradient(ellipse 50% 50% at 50% 50%, #FFD6D8CC 0%, #FF6B7000 100%); }
.final__src--l { left: 145px; top: -98px; width: 220px; height: 176px; }
.final__src--r { left: 1075px; top: -98px; width: 220px; height: 176px; }
.final__src--c { left: 570px; top: -140px; width: 300px; height: 240px; }
.final__src--l::after, .final__src--r::after { top: 77px; width: 53px; height: 22px; margin-left: -26px; }
.final__src--c::after { top: 105px; width: 72px; height: 30px; margin-left: -36px; }
.final__haze { inset: 0; background: var(--grain) 0 0 / 160px 160px repeat; opacity: .03; mix-blend-mode: screen; }
.final__vignette { inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 35%, #00000000 45%, #000000B3 100%); }
.final__logo { width: 96px; height: 103px; }
.final__title { max-width: 900px; font-family: var(--font-tight); font-size: 52px; line-height: 57px; font-weight: 700; letter-spacing: -1.2px; color: var(--gh-text); }
.final__sub { max-width: 640px; font-size: 19px; line-height: 29px; color: var(--gh-text-2); }
.trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 28px; padding-top: 8px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gh-text-2); }
.trust svg { width: 16px; height: 16px; color: var(--gh-text-2); }

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding-top: 64px;
  overflow: hidden;
  background: #000;
}
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF26 50%, #FFFFFF00 100%); }
.footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain) 0 0 / 160px 160px repeat; opacity: .035; pointer-events: none; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 1440px; padding: 0 var(--gutter); }
.footer__logo { width: 40px; height: 43px; }
.footer__links { display: flex; align-items: center; gap: 32px; }
.footer__links a { font-size: 14px; color: var(--gh-text-2); text-decoration: none; transition: color .2s; }
.footer__links a:hover { color: var(--gh-text); }
.footer__copy { font-size: 13px; color: var(--gh-text-3); }
.footer__wordmark { position: relative; width: 100%; height: min(330px, 22.92vw); }
.footer__wordmark span {
  position: absolute;
  top: min(10px, .69vw);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-tight);
  font-size: min(500px, 34.72vw);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.048em;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF24 0%, #FFFFFF05 70%, #FFFFFF00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   MOBILE (frame de 390px)
   ========================================================================== */
@media (max-width: 959px) {
  :root { --panel-radius: 22px; }
  .d-only { display: none; }
  .m-only { display: initial; }

  .section { padding: 12px; }
  .section--first { padding-top: 48px; }
  .panel { padding: 56px 20px; }
  .leak { display: none; }
  .col { width: 100%; gap: 20px; }

  .t-body, .prose p { font-size: 16px; line-height: 26px; }
  .h-48 { font-size: 26px; line-height: 30px; letter-spacing: -0.7px; }
  .h-38 { font-size: 27px; line-height: 30px; letter-spacing: -0.6px; }
  .h-36 { font-size: 26px; line-height: 29px; letter-spacing: -0.6px; }

  .cta { display: inline-flex; width: auto; max-width: 100%; justify-content: flex-start; gap: 12px; padding: 7px 7px 7px 20px; }
  .final__cta { align-self: center; }
  .cta__label { font-size: clamp(11px, calc((100vw - 132px) / 17), 16px); white-space: nowrap; }
  .cta__chip { width: 48px; height: 48px; }

  /* Hero */
  .hero { justify-content: flex-end; }
  .hero__bg {
    left: 0; margin-left: 0;
    width: 100%; height: 483px; /* ancorado no topo: o corte, se houver, fica embaixo (área do degradê) */
    background-position: center top;
    background-image: url("../assets/bg-hero-mobile.webp");
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__grid { display: none; }
  .hero__fade { top: 170px; height: 460px; z-index: 1; }
  .hero__stage { height: 250px; }
  .hero__content { width: 100%; gap: 18px; padding: 0 20px 64px; }
  .hero__title { font-size: 30px; line-height: 34px; letter-spacing: -0.8px; }
  .hero__logo, .hero__title { --hy: -20px; translate: 0 var(--hy); } /* sobe só logo + headline; layout e fundo não mudam */
  .hero__sub { font-size: 15px; line-height: 22px; }
  .hero__cta { width: 100%; display: flex; justify-content: center; }

  /* Ticker */
  .ticker { padding: 16px 0; }
  .ticker .ticker__track { --gap: 20px; }
  .ticker__item { font-size: 14px; line-height: 17px; }
  .ticker__sep { width: 12px; height: 12px; }

  /* 01 */
  .panel:has(.news) { padding: 20px 20px 56px; }
  .news { padding: 10px 0; }
  .clip {
    --u: calc((100vw - 64px) / 326); /* sem teto: o papel sempre ocupa a largura do container */
    width: calc(326 * var(--u));
    height: calc(238 * var(--u));
    margin-left: 0; transform-origin: center;
    padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(24 * var(--u));
    gap: calc(12 * var(--u));
  }
  .clip__edge { inset: calc(-5 * var(--u)); width: calc(100% + 10 * var(--u)); height: calc(100% + 10 * var(--u)); }
  .clip__edge--d, .clip__paper--d { display: none; }
  .news { padding: calc(10px + 4.3 * var(--u, 1px)) 0; } /* recorte girado pelo centro: folga igual em cima e embaixo */
  .clip__edge--m, .clip__paper--m { display: block; }
  .clip__portal { font-size: calc(12 * var(--u)); }
  .clip__crumb { font-size: calc(10 * var(--u)); }
  .clip__headline { font-size: calc(21 * var(--u)); line-height: calc(25 * var(--u)); letter-spacing: -0.4px; }
  .clip__headline { align-items: flex-start; }
  .clip__l, .clip__l3 { display: contents; }
  .clip__l > span { display: block; }
  .clip__headline mark { display: block; padding: 0 calc(5 * var(--u)); margin-left: calc(-5 * var(--u)); }

  /* 02 */
  .panel--s02 { padding: 250px 20px 0; gap: 40px; }
  .s02__hero { height: 330px; }
  .s02__title { font-size: 29px; line-height: 32px; letter-spacing: -0.8px; }
  .stats { flex-direction: column; gap: 14px; padding: 22px 0; }
  .stat { flex-direction: row; align-items: center; gap: 14px; padding: 0; }
  .stat + .stat { border-left: 0; }
  .stat__chip { width: 44px; height: 44px; border-radius: 12px; }
  .stat__chip svg { width: 22px; height: 22px; }
  .stat__text { font-size: 17px; line-height: 20px; }
  .s02__pause { font-size: 25px; line-height: 28px; letter-spacing: -0.6px; }
  .gains p { font-size: 16px; line-height: 26px; }
  .s2027 { padding: 132px 0 40px; }
  .s2027__num { font-size: 126px; line-height: 126px; letter-spacing: -8.4px; }
  .s2027__text { font-size: 22px; line-height: 26px; letter-spacing: -0.6px; }
  .chats--s02 { width: calc(100% + 40px); margin-inline: -20px; padding: 8px 20px; }
  .chats--s02 .chats__row--2 { display: none; }

  /* 03 */
  .panel--s03 { gap: 53px; }
  .problem { width: 100%; gap: 36px; }
  .problem__top { flex-direction: column; align-items: stretch; gap: 18px; }
  .problem__left { width: 100%; gap: 16px; }
  .problem__right { gap: 16px; padding-top: 0; }
  .diag__head { padding: 16px; }
  .diag__title { gap: 8px; font-size: 12px; }
  .diag__title svg { width: 14px; height: 14px; }
  .diag__status { gap: 6px; padding: 4px 10px; font-size: 11px; }
  .diag__status i { width: 6px; height: 6px; }
  .diag__row { gap: 12px; padding: 16px; }
  .ibox { width: 37px; height: 37px; border-radius: 10px; }
  .ibox svg { width: 18px; height: 18px; }
  .diag__text strong { font-size: clamp(13px, 3.85vw, 15px); }
  .diag__text small { font-size: 12px; }
  .diag__metric { width: clamp(72px, 22.6vw, 88px); gap: 8px; }
  .diag__metric b { font-size: 14px; }
  .track { height: 4px; }
  .nots s { font-size: 16px; line-height: 22px; }
  .nots li:last-child { align-items: flex-start; }
  .s03__lead { font-size: 18px; line-height: 25px; }
  .objective__quote { font-size: 22px; line-height: 26px; letter-spacing: -0.6px; }
  .cta-wrap { width: 100%; display: flex; justify-content: center; }

  /* 04 */
  .panel--s04 { padding: 56px 0; gap: 24px; }
  .s04__title { width: calc(100% - 40px); max-width: 326px; font-size: 24px; line-height: 28px; letter-spacing: -0.6px; }
  .billboard__stage { height: 444px; }
  .photos { --gap: 10px; }
  .photos--1 { left: -40px; top: 18px; }
  .photos--2 { left: -90px; top: 276px; }
  .photos img { width: 112px; height: 150px; border-radius: 8px; }
  .phrase {
    --tail: 12px;
    left: 0; top: 151px;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px;
    transform: rotate(-3deg);
  }
  .phrase__left { gap: 8px; }
  .phrase__brand { font-size: 10px; }
  .phrase__stat { font-size: 32px; line-height: 32px; letter-spacing: -1.2px; white-space: normal; }
  .phrase__caption { width: 100%; border-left: 0; border-top: 1px solid #FFFFFF4D; padding: 10px 0 0; font-size: 13px; line-height: 19px; }
  .prose--760 { width: calc(100% - 40px); max-width: 326px; }
  .s04__body .s04__win { font-size: 19px; line-height: 25px; }

  /* 05 */
  .s05 { gap: 32px; padding: 64px 12px; }
  .s05 .s-head { gap: 14px; width: 100%; padding: 0 8px; }
  .s05 .h-48 { font-size: 27px; line-height: 30px; }
  .etapas { gap: 14px; }
  .etapas.is-live .etapa { top: calc(16px + var(--i, 0) * 10px); }
  .etapa { flex-direction: column; gap: 18px; padding: 28px 22px 24px; }
  .etapa__num { width: 100%; }
  .etapa__n { font-size: 64px; line-height: 64px; letter-spacing: -3px; padding-right: 3px; }
  .etapa__progress { padding-top: 10px; }
  .etapa__body { gap: 10px; }
  .etapa__title { font-size: 22px; line-height: 25px; }
  .etapa__sub { font-size: 15px; line-height: 21px; }
  .etapa__bullets { padding-top: 8px; }
  .etapa__bullets li { gap: 12px; padding: 11.75px 0; }
  .etapa__bullets p { font-size: 14px; line-height: 20px; }
  .etapa__ibox { width: 30px; height: 30px; }

  /* 06 */
  .panel--s06 { gap: 36px; }
  .s-head { width: 100%; }
  .cases { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .case__video { height: 210px; }
  .case__company { font-size: 10px; }
  .case__stat { font-size: 24px; line-height: 28px; letter-spacing: -0.7px; }
  .case__sub { font-size: 14px; }
  .case__desc { min-height: 0; font-size: 14px; line-height: 22px; }
  .case__m { padding: 16px clamp(10px, 4.6vw, 18px); }
  .case__m dd, .case__m:nth-child(2) dd { font-size: 14px; }
  .s2027__num { left: calc(50% - 125px); transform: none; } /* left:38px na coluna de 326px */

  /* 07 */
  .panel--s07 { gap: 31px; }
  .panel--s07 .h-48 { font-size: 24px; line-height: 28px; }
  .eyebrow--story { font-size: 9.5px; letter-spacing: 1px; line-height: 1.2; }
  .polaroids { width: 100%; max-width: 326px; }
  .polaroids__stage { --u: min(1px, calc((100vw - 64px) / 326)); height: calc(230 * var(--u)); }
  .polaroid { width: calc(140 * var(--u)); height: calc(160 * var(--u)); gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); }
  .polaroid--1 { left: calc(6 * var(--u)); top: calc(34 * var(--u)); }
  .polaroid--2 { left: calc(92 * var(--u)); top: calc(8 * var(--u)); height: calc(176 * var(--u)); }
  .polaroid--3 { left: calc(178 * var(--u)); top: calc(34 * var(--u)); }
  .polaroid--1 { --dx: calc(86 * var(--u)); --dy: calc(-26 * var(--u)); }
  .polaroid--3 { --dx: calc(-86 * var(--u)); --dy: calc(-26 * var(--u)); }
  .polaroid__photo span { font-size: calc(13 * var(--u)); }
  .polaroid figcaption { font-size: calc(13 * var(--u)); }
  .story { width: 100%; }
  .story p { font-size: 16px; line-height: 26px; }

  /* 08 */
  .s08 { gap: 36px; padding: 72px 0 84px; }
  .s08 .s-head { gap: 14px; padding: 0 20px; }
  .chats__fade { display: none; }

  /* 09 */
  .final { gap: 22px; padding: 84px 20px; }
  .final__title { font-size: 29px; line-height: 32px; letter-spacing: -0.7px; }
  .final__sub { font-size: 15px; line-height: 23px; }
  .trust { flex-direction: column; gap: 10px; }

  /* Footer */
  .footer { gap: 31px; }
  .footer__top { flex-direction: column; gap: 18px; padding: 0 20px; }
  .footer__links { gap: 20px; }
  .footer__wordmark { height: min(109px, 27.95vw); }
  .footer__wordmark span { top: 1.54vw; font-size: 32.82vw; letter-spacing: -0.034em; }
}

/* ---------- Tablet (600–959px): diagramação mobile, sem esticar ---------- */
@media (min-width: 600px) and (max-width: 959px) {
  .cta { display: inline-flex; width: auto; gap: 28px; }
  .hero__cta, .cta-wrap { width: 100%; display: flex; justify-content: center; }
  .final__cta { align-self: center; }

  /* Recorte de notícia: volta à versão de 3 linhas do desktop, centralizado */
  .clip {
    --u: min(1px, calc((100vw - 64px) / 830));
    width: calc(820 * var(--u));
    height: calc(219 * var(--u));
    margin-left: calc((100% - 830 * var(--u)) / 2 + 5 * var(--u));
    padding: calc(26 * var(--u)) calc(44 * var(--u)) calc(30 * var(--u));
    transform-origin: top left;
    gap: calc(14 * var(--u));
  }
  .clip__edge { inset: calc(-6 * var(--u)); width: calc(100% + 12 * var(--u)); height: calc(100% + 12 * var(--u)); }
  .clip__edge--d, .clip__paper--d { display: block; }
  .clip__edge--m, .clip__paper--m { display: none; }
  .clip .d-only { display: initial; }
  .news { padding: 20px 0 28px; }
  .clip__portal { font-size: calc(14 * var(--u)); }
  .clip__crumb { font-size: calc(11 * var(--u)); }
  .clip__headline { align-items: stretch; font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); letter-spacing: -0.5px; }
  .clip__l { display: block; }
  .clip__l > span { display: inline; }
  .clip__l3 { display: flex; }
  .clip__headline mark { display: inline; padding: 0 calc(6 * var(--u)); margin-left: calc(-6 * var(--u)); }

  .s04__title, .prose--760 { max-width: 560px; }
  .polaroids { max-width: 560px; }
  .polaroids__stage { --u: min(1.72px, calc((100vw - 64px) / 326)); }
}

@media (max-width: 599px) {
  .hero__bg { height: max(483px, calc(100vw * 1157 / 934)); } /* celular: imagem inteira na proporção, sem cortar a cabeça */
  .xs-only { display: initial; }
}

/* Container query units onde houver suporte (Safari 16+, Chrome 105+) */
@supports (width: 1cqi) {
  .clip { --u: min(1px, 100cqi / 820); }
  .polaroids__stage { --u: min(1px, 100cqi / 1000); }
  @media (max-width: 959px) {
    .clip { --u: calc(100cqi / 326); }
    .polaroids__stage { --u: min(1px, 100cqi / 326); }
  }
  @media (min-width: 600px) and (max-width: 959px) {
    .clip { --u: min(1px, 100cqi / 830); }
    .polaroids__stage { --u: min(1.72px, 100cqi / 326); }
  }
}

/* ---------- Fade-in no scroll ----------
   Escondido só com JS (.js); main.js marca .is-in via IntersectionObserver.
   .no-reveal (failsafe de 4s no <head>) mostra tudo se o main.js não rodar. */
.js:not(.no-reveal) :is(.news, .prose > *, .s02__col > .eyebrow, .s02__body > *, .s2027 > *,
  .problem__left > *, .problem__right > *, .diag, .s03__col > *, .s04__title, .billboard, .s-head > *, .case,
  .polaroids, .story > *, .chats--s02, .chats--s08, .final > :not(.final__stage), .footer__top > *):not(.is-in) {
  opacity: 0;
  translate: 0 20px;
}
.is-in:not(.rv-done) {
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1) var(--rd, 0s), translate .7s cubic-bezier(.22, .61, .36, 1) var(--rd, 0s) !important;
}

/* Polaroids (seção 07): as fotos laterais começam escondidas atrás da do meio
   (mesma posição, sem rotação) e saem para os lados quando o bloco entra na tela.
   As duas laterais ficam sempre por baixo da foto do meio. */
.js:not(.no-reveal) .polaroids:not(.is-in) .polaroid--1 { translate: var(--dx) var(--dy); rotate: 6deg; }
.js:not(.no-reveal) .polaroids:not(.is-in) .polaroid--3 { translate: var(--dx) var(--dy); rotate: -6deg; }
.js .polaroids.is-in .polaroid--1,
.js .polaroids.is-in .polaroid--3 {
  transition: translate 1s cubic-bezier(.2, .8, .2, 1) .35s, rotate 1s cubic-bezier(.2, .8, .2, 1) .35s;
}

/* ---------- CTA fixo no rodapé da tela ----------
   Entra e sai com "motion blur": desliza de baixo esticado e desfocado,
   passa um pouco do ponto e assenta; na saída, mergulha de volta desfocando. */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  translate: -50% 0;
  visibility: hidden;
  pointer-events: none;
}
.sticky-cta__btn, .sticky-cta__btn:hover { box-shadow: none; } /* sem sombra: no Safari ela vaza sob a barra do navegador */
.sticky-cta.is-shown { visibility: visible; pointer-events: auto; animation: sticky-in .62s cubic-bezier(.16, 1, .3, 1) both; }
.sticky-cta.is-leaving { visibility: visible; pointer-events: none; animation: sticky-out .42s cubic-bezier(.55, 0, .85, .35) both; }
@keyframes sticky-in {
  0%   { transform: translateY(160%) scale(.92, 1.45); filter: blur(16px); opacity: 0; }
  45%  { opacity: 1; }
  65%  { transform: translateY(-10%) scale(1.02, .96); filter: blur(1px); }
  100% { transform: none; filter: blur(0); opacity: 1; }
}
@keyframes sticky-out {
  0%   { transform: none; filter: blur(0); opacity: 1; }
  25%  { transform: translateY(-8%) scale(1.02, .97); filter: blur(0); }
  100% { transform: translateY(170%) scale(.92, 1.5); filter: blur(18px); opacity: 0; }
}

@media (max-width: 599px) {
  .sticky-cta { width: max-content; max-width: calc(100% - 32px); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sticky-cta__btn { width: auto; display: inline-flex; white-space: nowrap; }
}

/* Hero: entra no load só com CSS (não depende do main.js) */
.hero__content > * { animation: hero-in .75s cubic-bezier(.22, .61, .36, 1) both; }
.hero__content > :nth-child(2) { animation-delay: 70ms; }
.hero__content > :nth-child(3) { animation-delay: 140ms; }
.hero__content > :nth-child(4) { animation-delay: 210ms; }
@keyframes hero-in { from { opacity: 0; translate: 0 calc(var(--hy, 0px) + 20px); } to { opacity: 1; translate: 0 var(--hy, 0px); } }
@media (max-width: 380px) {
  /* Métricas dos cases em telas muito estreitas: quebram em vez de vazar */
  .case__m dd, .case__m:nth-child(2) dd { white-space: normal; font-size: clamp(12px, 3.75vw, 14px); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .marquee__track[data-ready] { animation: none; }
  .hero__trail, .hero__content > * { animation: none; }
  .js :is(.news, .prose > *, .s02__col > .eyebrow, .s02__body > *, .s2027 > *,
    .problem__left > *, .problem__right > *, .diag, .s03__col > *, .s04__title, .billboard, .s-head > *, .case,
    .polaroids, .story > *, .chats--s02, .chats--s08, .final > :not(.final__stage), .footer__top > *) { opacity: 1 !important; translate: none !important; transition: none !important; }
  .etapas.is-live .etapa { position: relative; top: auto !important; transform: none !important; }
  .etapa, .etapa *, .etapa__bg, .etapa__progress i::after { transition: none !important; }
  .etapa__shade { opacity: 0 !important; }
  .sticky-cta.is-shown { animation: sticky-fade .2s linear both; }
  .sticky-cta.is-leaving { animation: sticky-fade-out .2s linear both; }
  @keyframes sticky-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sticky-fade-out { from { opacity: 1; } to { opacity: 0; } }
  .js .polaroids .polaroid { translate: none !important; rotate: none !important; transition: none !important; }  .cta, .cta__chip, .case__play > span { transition: none; }
}