/* fontes hospedadas no próprio site (só o alfabeto latino, que cobre o português) */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/DMMono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/Poppins-300.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/Poppins-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/Poppins-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/Poppins-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(assets/fonts/Poppins-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/DMMono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   MÍDIA KIT · PORTAL TUCUXI
   Território: editorial de impacto (tabloide de rua, grid suíço por baixo)
   Decisão arriscada: os aparelhos são 3D de verdade (um palco WebGL só, fixo,
   e os aparelhos seguem os lugares marcados na página). A capa é um palco
   escuro com o disco vermelho; o resto é papel com grade editorial à mostra.

   Fontes   display Poppins 800/900 (a da apresentação da marca), tracking -0.05em
            texto   Poppins 300/400 · rótulos DM Mono 400/500
   Escala   12 · 14 · 16 · 18 · 24 · 32 · 48 · 64 · 96 · clamp(—, 22vw, —)
   Cores    --paper  #F1EFEC  fundo (papel com curvas de nível)
            --ink    #151312  texto e seções escuras (preto quente, nunca #000)
            --red    #FE0F0A  vermelho Tucuxi, a única cor de destaque
            --mute   #77706B  texto de apoio
            --bone   #FAF9F7  superfícies claras (cartões, telas)
   Grid     4 colunas no celular, 12 no desktop, margem 16 → 64
   Raio     0 nos blocos, 999 em botão e ícone redondo, 36 nos aparelhos
   Sombra   só nos aparelhos: a do 3D é de verdade, a das maquetes de reserva é longa e macia
   Fundo    papel + grão + grade de colunas visível
   Sem degradê na interface: cor chapada.
   ===================================================================== */

:root {
  --paper: #F1EFEC;
  --paper-2: #E6E3DF;
  --bone: #FAF9F7;
  --ink: #151312;
  --ink-2: #221F1D;
  --ink-3: #3A3532;
  --red: #FE0F0A;
  --red-dk: #C80B07;
  --mute: #77706B;
  --line: rgba(21, 19, 18, .14);
  --line-l: rgba(250, 249, 247, .14);

  --f-d: 'Poppins', 'Helvetica Neue', sans-serif;
  --f-m: 'DM Mono', ui-monospace, monospace;

  --gut: 16px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur: 320ms;
  --night: #0B0908;
  --line-grid: rgba(21, 19, 18, .055);
  --dev-shadow: 0 40px 80px -30px rgba(21, 19, 18, .45), 0 12px 24px -12px rgba(21, 19, 18, .25);
  --top-h: 64px;
}
@media (min-width: 768px) { :root { --gut: 32px; --top-h: 72px; } }
@media (min-width: 960px) { body { background-size: calc((100% - var(--gut) * 2) / 12) 100%; } }
@media (min-width: 1200px) { :root { --gut: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  /* grade editorial à mostra: 4 colunas no celular, 12 no desktop */
  background: var(--paper) linear-gradient(90deg, var(--line-grid) 1px, transparent 1px) var(--gut) 0 / calc((100% - var(--gut) * 2) / 4) 100%;
  font: 400 16px/1.6 var(--f-d); letter-spacing: -.01em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
img { max-width: 100%; display: block; }
main { overflow-x: clip; } /* a faixa inclinada não cria rolagem pro lado */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .f, svg.f { fill: currentColor; stroke: none; }
.red { color: var(--red); }
.mono { font-family: var(--f-m); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
b, strong { font-weight: 600; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------- curvas de nível (canvas fixo atrás de tudo) ---------- */
/* cada lugar de aparelho tem o próprio canvas, com folga em volta pra girar sem cortar */
.stage { position: relative; }
.stage-cv { position: absolute; left: -14%; top: -10%; width: 128%; height: 120%; pointer-events: none; opacity: 0; transition: opacity 700ms var(--ease); }
.stage-cv.on { opacity: 1; }
.grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- abertura: contador, depois a cortina abre ao meio ---------- */
.intro { position: fixed; inset: 0; z-index: 100; color: var(--paper); pointer-events: none; }
.intro-half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--night); transition: transform 1100ms cubic-bezier(.76, 0, .24, 1); }
.intro-half.ih-a { top: 0; } .intro-half.ih-b { bottom: 0; }
.intro-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 24px var(--gut); transition: opacity 400ms var(--ease); }
.intro-mark { width: 56px; }
.intro-n { margin: 0; font: 900 clamp(120px, 38vw, 420px)/.8 var(--f-d); letter-spacing: -.07em; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; }
.intro-n i { font-style: normal; font-size: .3em; color: var(--red); margin: .12em 0 0 .05em; letter-spacing: 0; }
.intro-t { margin: 0; display: flex; align-items: center; gap: 12px; color: #8d8680; }
.intro-t b { flex: 1; height: 1px; background: #3A3532; position: relative; overflow: hidden; }
.intro-t b::after { content: ''; position: absolute; inset: 0; background: var(--red); transform: scaleX(var(--p, 0)); transform-origin: left; }
.intro.out .intro-in { opacity: 0; }
.intro.out .intro-half.ih-a { transform: translateY(-100%); }
.intro.out .intro-half.ih-b { transform: translateY(100%); }

/* ---------- topo ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--top-h);
  display: flex; align-items: center; gap: 16px; padding: 0 var(--gut);
  background: rgba(241, 239, 236, .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.top.scrolled { border-bottom-color: var(--line); }
.top.on-dark { background: rgba(11, 9, 8, .55); color: var(--paper); border-bottom-color: transparent; }
.top-logo { display: grid; }
.top-logo img { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease); }
.top-logo .lw { opacity: 0; }
.top.on-dark .top-logo .lw { opacity: 1; } .top.on-dark .top-logo .lc { opacity: 0; }
.top.on-dark .top-nav a { color: #B9B2AC; }
.top.on-dark .top-nav a:hover { background: rgba(250, 249, 247, .1); color: #fff; }
.top.on-dark .top-menu { background: var(--paper); } .top.on-dark .top-menu i { background: var(--ink); }
.top.hide { transform: translateY(-100%); }
.top-logo img { height: 34px; width: auto; }
.top-nav { display: none; margin-left: auto; gap: 4px; }
.top-nav a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 400; color: var(--ink-3); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.top-nav a:hover { background: var(--paper-2); color: var(--ink); }
.top-nav a.on { color: var(--red); font-weight: 600; }
.top-cta { margin-left: auto; padding: 10px 18px; font-size: 14px; }
.top-menu { width: 44px; height: 44px; border-radius: 999px; display: grid; place-content: center; gap: 6px; background: var(--ink); }
.top-menu i { display: block; width: 18px; height: 2px; background: var(--paper); transition: transform var(--dur) var(--ease); }
.top-menu[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.top-menu[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 960px) { .top-nav { display: flex; } .top-cta { margin-left: 8px; } .top-menu { display: none; } .top-logo img { height: 40px; } }

.drawer {
  position: fixed; inset: 0; z-index: 45; background: var(--ink); color: var(--paper);
  padding: calc(var(--top-h) + 32px) var(--gut) 32px; display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path 520ms var(--ease-io); visibility: hidden;
}
.drawer.open { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer nav { display: grid; }
.drawer nav a { display: flex; align-items: baseline; gap: 16px; font: 800 clamp(36px, 11vw, 64px)/1.1 var(--f-d); letter-spacing: -.05em; padding: 8px 0; border-bottom: 1px solid var(--line-l); opacity: 0; transform: translateY(24px); transition: opacity 400ms var(--ease), transform 400ms var(--ease), color var(--dur) var(--ease); }
.drawer nav a span { font: 500 12px var(--f-m); color: var(--red); letter-spacing: .04em; }
.drawer nav a:hover, .drawer nav a:active { color: var(--red); }
.drawer.open nav a { opacity: 1; transform: none; }
.drawer.open nav a:nth-child(2) { transition-delay: 40ms; } .drawer.open nav a:nth-child(3) { transition-delay: 80ms; }
.drawer.open nav a:nth-child(4) { transition-delay: 120ms; } .drawer.open nav a:nth-child(5) { transition-delay: 160ms; } .drawer.open nav a:nth-child(6) { transition-delay: 200ms; }
.drawer .mono { color: var(--mute); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn svg { font-size: 18px; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.96); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 0 0 0 rgba(254, 15, 10, .4); }
.btn-red:hover { background: var(--red-dk); box-shadow: 0 10px 24px -10px rgba(254, 15, 10, .7); }
.btn-line { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-line:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dark .btn-line:hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--paper); }
.btn.is-off { opacity: .35; pointer-events: none; }
.btn.wide { width: 100%; }

/* ---------- revelar ao rolar ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease) var(--d, 0s), transform 700ms var(--ease) var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.line { display: block; overflow: hidden; padding-bottom: .04em; }
.rv-up { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease) var(--d, 0s); }
.ready .rv-up { transform: none; }

/* ---------- capa: palco escuro ---------- */
.hero {
  position: relative; min-height: 100svh; padding: calc(var(--top-h) + 20px) var(--gut) 32px;
  display: flex; flex-direction: column; background: var(--night); color: var(--paper); overflow: hidden;
}
.hero-disk { position: absolute; z-index: 0; left: 50%; top: 43%; width: min(96vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--ds, 0)); transition: transform 1600ms var(--ease) 300ms; }
.hero-disk i { position: absolute; inset: 0; border-radius: 50%; background: var(--red); }
.hero-disk::before, .hero-disk::after { content: ''; position: absolute; inset: -9%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(254, 15, 10, .35); }
.hero-disk::after { inset: -20%; box-shadow: inset 0 0 0 1px rgba(254, 15, 10, .18); }
.ready .hero-disk { --ds: 1; }
.kicker { display: flex; align-items: center; gap: 10px; color: #A49D97; margin: 0 0 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); display: inline-block; animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(254, 15, 10, .55); } 70% { box-shadow: 0 0 0 12px rgba(254, 15, 10, 0); } 100% { box-shadow: 0 0 0 0 rgba(254, 15, 10, 0); } }
.hero-title { position: relative; z-index: 0; margin: 0; font: 900 clamp(92px, 29vw, 360px)/.82 var(--f-d); letter-spacing: -.07em; margin-left: -.05em; color: var(--paper); }
.stage-hero { height: 48svh; margin: 8px calc(var(--gut) * -1) 0; }
.hero-copy { position: relative; z-index: 3; margin-top: 40px; } /* respiro entre o círculo vermelho e o texto */
.hero-sub { margin: 0; font: 300 clamp(26px, 7vw, 52px)/1.04 var(--f-d); letter-spacing: -.045em; max-width: 14ch; }
.hero-sub .red { font-weight: 800; }
.hero-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero .btn-line { color: var(--paper); }
.hero .btn-line:hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--paper); }
/* resumo da capa: três colunas iguais, ícone em bloco (mesmo estilo das reações), número e rótulo alinhados */
.hero-live { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--line-l); padding-top: 20px; max-width: 640px; }
.hl { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 12px; border-left: 1px solid var(--line-l); min-width: 0; }
.hl:first-child { padding-left: 0; border-left: 0; }
.hl-ico { width: 40px; height: 40px; border-radius: 30%; display: grid; place-content: center; font-size: 21px; background: var(--red); color: #fff; margin-bottom: 14px; box-shadow: 0 12px 24px -12px rgba(254, 15, 10, .7); }
.hl:nth-child(2) .hl-ico { background: var(--paper); color: var(--ink); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); }
.hero-live b { display: block; font: 800 clamp(26px, 7vw, 44px)/1 var(--f-d); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-live .hl > span:not(.hl-ico) { display: block; font-size: 12px; line-height: 1.35; color: #A49D97; margin-top: 6px; max-width: 16ch; }
@media (min-width: 960px) { .hl { padding: 0 24px; } .hl-ico { width: 48px; height: 48px; font-size: 25px; } .hero-live .hl > span:not(.hl-ico) { font-size: 13px; } }
@media (min-width: 960px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; padding-top: calc(var(--top-h) + 24px); }
  .kicker { grid-column: 1 / -1; }
  .hero-title { grid-column: 1; grid-row: 1; align-self: center; font-size: clamp(110px, 14.5vw, 260px); }
  .hero-disk { left: 73%; top: 52%; width: min(44vw, 700px); }
  .stage-hero { position: absolute; z-index: 2; right: var(--gut); top: calc(var(--top-h) + 10px); bottom: 40px; width: 52%; height: auto; margin: 0; }
  .hero-copy { grid-column: 1; grid-row: 2; align-self: end; position: relative; z-index: 3; margin-top: 24px; }
  .hero-live { grid-column: 1; grid-row: 3; }
}

.float {
  position: absolute; z-index: -0; width: 64px; height: 64px; border-radius: 22px; display: grid; place-content: center;
  background: var(--red); color: #fff; font-size: 30px; pointer-events: none;
  box-shadow: 0 18px 36px -14px rgba(254, 15, 10, .6);
  transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(var(--r, -8deg));
  transition: transform 900ms var(--ease);
  animation: bob 6s var(--ease-io) infinite alternate;
}
.float svg { fill: currentColor; stroke: none; }
.float.ink { background: var(--ink); box-shadow: 0 18px 36px -14px rgba(21, 19, 18, .55); }
.float.ink svg { fill: none; stroke: currentColor; stroke-width: 2; }
.float.f1 { top: 16%; right: 8%; --r: 10deg; }
.float.f2 { top: 52%; right: 4%; --r: -12deg; width: 52px; height: 52px; font-size: 24px; animation-delay: -2s; }
@keyframes bob { to { translate: 0 -14px; } }
.float.ink { background: var(--paper); color: var(--ink); }
.float { z-index: 3; }
@media (max-width: 959px) { .float { width: 52px; height: 52px; font-size: 24px; border-radius: 18px; } .float.f1 { top: 21%; right: 5%; } .float.f2 { top: 61%; right: 6%; } }
@media (min-width: 960px) { .float { width: 80px; height: 80px; font-size: 36px; border-radius: 26px; } .float.f1 { top: 20%; right: 6%; } .float.f2 { width: 64px; height: 64px; font-size: 28px; top: auto; bottom: 12%; right: 40%; } }

.scroll-cue { position: absolute; z-index: 3; right: var(--gut); bottom: 16px; display: none; align-items: center; gap: 10px; color: var(--mute); }
.scroll-cue i { width: 1px; height: 32px; background: var(--paper); transform-origin: top; animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-height: 760px) and (min-width: 960px) { .scroll-cue { display: flex; } }

/* ---------- faixa ---------- */
.band { background: var(--red); color: #fff; overflow: hidden; padding: 14px 0; margin: 0; }
.band-track { display: flex; width: max-content; animation: marq 26s linear infinite; }
.band span { font: 800 clamp(22px, 5vw, 40px)/1 var(--f-d); letter-spacing: -.04em; text-transform: uppercase; padding: 0 20px; display: flex; align-items: center; gap: 40px; }
.band span::after { content: ''; width: 12px; height: 12px; background: var(--ink); border-radius: 50%; margin-left: 20px; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- seções ---------- */
.sec { position: relative; padding: 96px var(--gut); }
.sec.dark { background: var(--ink); color: var(--paper); }
.sec-head { margin-bottom: 48px; max-width: 1100px; }
.num { color: var(--red); margin: 0 0 16px; }
.sec h2 { margin: 0; font: 800 clamp(40px, 10.5vw, 112px)/.95 var(--f-d); letter-spacing: -.055em; }
.sec-note { margin: 24px 0 0; max-width: 52ch; color: var(--mute); font-size: 16px; }
.dark .sec-note { color: #A49D97; }
.dark .sec-note b { color: var(--paper); }
@media (min-width: 960px) { .sec { padding: 160px var(--gut); } .sec-head { margin-bottom: 72px; } }

/* 01 · portal */
.portal-grid { display: grid; gap: 48px; }
.lead { font: 300 clamp(22px, 5vw, 36px)/1.3 var(--f-d); letter-spacing: -.035em; margin: 0 0 24px; }
.lead b { font-weight: 800; }
.portal-text > p:not(.lead) { color: var(--ink-3); max-width: 52ch; margin: 0 0 32px; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; background: var(--bone); box-shadow: inset 0 0 0 1px var(--line); }
.tags li.r { background: var(--red); color: #fff; box-shadow: none; }
@media (min-width: 960px) { .portal-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; } }

.browser { background: var(--ink); border-radius: 14px; padding: 0 0 8px; box-shadow: var(--dev-shadow); overflow: hidden; transform: perspective(1400px) rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); transition: transform 900ms var(--ease); }
.br-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.br-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.br-bar span { margin-left: 10px; color: #8d8680; font-size: 11px; text-transform: none; background: var(--ink-2); padding: 4px 12px; border-radius: 999px; flex: 1; max-width: 240px; }
.br-site { background: var(--bone); margin: 0 8px; border-radius: 4px; overflow: hidden; }
.br-shot { display: block; width: 100%; height: auto; }
.ps-head { background: var(--ink); color: #cfc8c2; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.ps-head img { height: 22px; width: auto; }
.ps-weather { font-size: 8px; line-height: 1.3; text-transform: none; }
.ps-soc { display: flex; gap: 4px; }
.ps-soc i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #cfc8c2; }
.ps-nav { display: flex; gap: 14px; padding: 8px 14px; font-size: 10px; color: var(--ink-3); border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.ps-nav span:first-child { color: var(--red); font-weight: 600; }
.ps-body { padding: 18px 14% 24px; }
.ps-cat { font-size: 10px; font-weight: 600; margin: 0; }
.ps-title { font: 800 clamp(20px, 3.4vw, 30px)/1.1 var(--f-d); letter-spacing: -.04em; margin: 2px 0 18px; }
.ps-card { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ps-img { aspect-ratio: 4/3; background: var(--ink); color: #fff; display: grid; place-content: center; font: 800 clamp(14px, 2.4vw, 22px)/1 var(--f-d); letter-spacing: -.03em; position: relative; overflow: hidden; }
.ps-img::before { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: var(--red); transform: translateY(100%); transition: transform 600ms var(--ease); }
.browser:hover .ps-img::before { transform: none; }
.ps-img span { position: relative; }
.ps-lines { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.ps-lines i { height: 8px; background: var(--ink); width: 100%; }
.ps-lines i.s { width: 70%; }
.ps-lines i.xs { height: 5px; width: 90%; background: var(--ink-3); }
.ps-lines em { margin-top: auto; font-size: 8px; font-style: normal; color: var(--mute); }

/* 02 · números */
.stats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.stat {
  display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "ico big" "ico lbl"; column-gap: 16px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line); position: relative; cursor: default;
}
.stat::before { content: ''; position: absolute; inset: 0 calc(var(--gut) * -1); background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform 500ms var(--ease); z-index: -1; }
.stat .ico { grid-area: ico; width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-content: center; font-size: 26px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.stat .big { grid-area: big; font: 900 clamp(64px, 19vw, 200px)/.9 var(--f-d); letter-spacing: -.065em; font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease); }
.stat .lbl { grid-area: lbl; font-weight: 600; font-size: 15px; line-height: 1.25; }
.stat .lbl em { font-style: normal; color: var(--red); transition: color var(--dur) var(--ease); }
@media (hover: hover) {
  .stat:hover::before { transform: scaleY(1); }
  .stat:hover { color: #fff; }
  .stat:hover .ico { background: #fff; color: var(--red); }
  .stat:hover .lbl em { color: var(--ink); }
}
@media (min-width: 768px) {
  .stat { grid-template-columns: 80px minmax(0, 1fr) 240px; grid-template-areas: "ico big lbl"; column-gap: 32px; padding: 12px 0; }
  .stat .ico { width: 80px; height: 80px; font-size: 38px; }
  .stat .lbl { font-size: 18px; }
}

/* 90 MIL */
.ig { position: relative; overflow: hidden; padding: 64px 0 96px; min-height: 920px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ig-words { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0; pointer-events: none; }
.ig-words .w { font: 900 clamp(120px, 30vw, 330px)/.86 var(--f-d); letter-spacing: -.07em; white-space: nowrap; will-change: transform; transform: translateX(var(--x, 0)); }
.ig-words .w.out { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.ig-notes { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 760px; padding: 0 var(--gut); margin-top: 24px; }
.note { margin: 0; min-width: 0; display: flex; flex-direction: column; font-size: 13px; font-weight: 600; line-height: 1.2; padding: 10px 10px 12px; background: var(--paper); border-top: 3px solid var(--ink); }
.note b { font-weight: 800; font-size: clamp(16px, 4.2vw, 28px); letter-spacing: -.04em; line-height: 1.05; white-space: nowrap; } /* o número numa linha só */
@media (min-width: 960px) { .note { font-size: 15px; } }

.phone {
  position: relative; z-index: 1; width: min(78vw, 340px); aspect-ratio: 9 / 19; border-radius: 44px; background: var(--ink); padding: 10px;
  box-shadow: var(--dev-shadow), inset 0 0 0 2px var(--ink-3);
  transform: perspective(1600px) rotateY(var(--ry, -14deg)) rotateX(var(--rx, 6deg)) rotateZ(4deg);
  transition: transform 900ms var(--ease);
}
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; width: 30%; height: 22px; border-radius: 999px; background: var(--ink); transform: translateX(-50%); z-index: 3; }
.ph-screen { height: 100%; border-radius: 34px; background: #fff; overflow: hidden; color: #111; padding: 48px 12px 0; font-size: 11px; line-height: 1.35; display: flex; flex-direction: column; }
.ph-top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; margin-bottom: 10px; }
.ph-icons { display: flex; gap: 10px; } .ph-icons i { width: 16px; height: 16px; border: 1.8px solid #111; border-radius: 5px; }
.ph-prof { display: grid; grid-template-columns: 64px repeat(3, 1fr); align-items: center; text-align: center; gap: 4px; }
.ph-av { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: var(--red); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); display: grid; place-content: center; }
.ph-av img { width: 44px; }
.ph-st b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.ph-st span { font-size: 10px; color: #444; }
.ph-bio { margin: 10px 0 8px; display: flex; flex-direction: column; }
.ph-bio span { color: #333; }
.ph-panel { background: #EFEFEF; border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; }
.ph-panel b { font-size: 11px; } .ph-panel span { font-size: 9.5px; color: #555; }
.ph-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0 10px; }
.ph-btns i { font-style: normal; font-weight: 600; font-size: 10px; text-align: center; background: #EFEFEF; border-radius: 7px; padding: 6px 0; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -12px; flex: 1; align-content: start; }
.tile { aspect-ratio: 4 / 5; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 5px; color: #fff; font: 800 7.5px/1.05 var(--f-d); letter-spacing: -.02em; text-transform: uppercase; }
.tile i { position: absolute; top: 5px; left: 5px; font: 600 5.5px/1 var(--f-d); font-style: normal; background: var(--red); padding: 2px 3px; }
.tile.k1 { background: var(--ink); } .tile.k2 { background: var(--red); } .tile.k2 i { background: var(--ink); }
.tile.k3 { background: #6e6862; } .tile.k4 { background: var(--bone); color: var(--ink); }
.tile.k4 i { color: #fff; }
.tile::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); }
.tile.new { animation: tileIn 700ms var(--ease); }
@keyframes tileIn { from { transform: scale(.6); opacity: 0; } }

/* 03 · formatos */
.fmt { display: grid; gap: 24px; }
.fmt-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 4px var(--gut); scroll-snap-type: x proximity; }
.fmt-list::-webkit-scrollbar { display: none; }
.fmt-list button {
  flex: none; scroll-snap-align: start; text-align: left; padding: 14px 18px; border-radius: 18px; background: var(--ink-2); display: flex; flex-direction: column; gap: 4px; min-width: 168px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fmt-list button .mono { color: #8d8680; }
.fmt-list button b { font-weight: 800; font-size: 16px; letter-spacing: -.03em; }
.fmt-list button:hover { background: var(--ink-3); }
.fmt-list button:active { transform: scale(.97); }
.fmt-list button[aria-selected="true"] { background: var(--red); }
.fmt-list button[aria-selected="true"] .mono { color: rgba(255, 255, 255, .8); }
.fmt-stage { display: grid; gap: 24px; }
.mock-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--line-l); background: var(--bone); }
.mock { width: 1200px; transform-origin: 0 0; background: var(--bone); color: var(--ink); position: relative; padding-bottom: 32px; }
.m-head { background: var(--ink); color: #cfc8c2; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; font-size: 12px; text-transform: none; }
.m-head img { height: 40px; width: auto; }
.m-head .ps-soc i { width: 20px; height: 20px; }
.m-nav { display: flex; justify-content: center; gap: 28px; font-size: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.m-nav span:first-child { color: var(--red); font-weight: 600; }
.m-main { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 0 75px; }
.m-col { display: flex; flex-direction: column; gap: 28px; }
.m-lead { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.m-ph { background: #CFCAC5; aspect-ratio: 16 / 10; }
.m-lead .m-ph { background: var(--ink-3); }
.m-txt { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.m-txt i, .m-news i, .m-side i { display: block; height: 14px; background: var(--ink); }
.m-txt i.s, .m-news i.s, .m-side i.s { width: 60%; background: #9c958f; height: 10px; }
.m-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.m-row .slot[data-slot="ret"] { justify-self: end; }
.m-news { display: flex; flex-direction: column; gap: 8px; }
.m-side { display: flex; flex-direction: column; gap: 16px; padding-top: 0; }
.m-side-t { margin: 0; font-weight: 800; font-size: 18px; letter-spacing: -.03em; border-bottom: 3px solid var(--red); padding-bottom: 6px; }
.m-side ol { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 14px; font-weight: 800; color: var(--red); }
.m-side ol li i { margin-bottom: 6px; }
.slot {
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); max-width: 100%; margin: 0 auto;
  display: grid; place-content: center; text-align: center; position: relative; overflow: hidden;
  background: #DDD8D3; color: #77706B; font: 600 15px/1.2 var(--f-d); letter-spacing: -.02em;
  outline: 2px dashed rgba(21, 19, 18, .18); outline-offset: -2px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), outline-color var(--dur) var(--ease);
}
.slot[data-slot="super"] { margin: 20px auto 28px; }
.slot[data-slot="home"] { margin: 0; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot.on { background: var(--red); color: #fff; outline: 4px solid var(--ink); outline-offset: 4px; animation: slotPulse 1.6s var(--ease) infinite; }
.slot.on.has { animation: none; }
@keyframes slotPulse { 50% { outline-offset: 10px; outline-color: rgba(21, 19, 18, .35); } }
.pop { position: absolute; inset: 0; background: rgba(21, 19, 18, .55); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 400ms; }
.pop.show { opacity: 1; visibility: visible; }
.pop .slot { transform: scale(.9); transition: transform 500ms var(--ease), background var(--dur) var(--ease); }
.pop.show .slot { transform: none; }
.pop-x { position: absolute; top: 10px; right: 14px; font-size: 28px; line-height: 1; color: #fff; z-index: 2; }
.fmt-info { display: flex; flex-direction: column; gap: 20px; }
.fmt-info .mono { color: var(--red); margin: 0 0 6px; font-size: 14px; }
.fmt-info h3 { margin: 0 0 8px; font: 800 clamp(28px, 6vw, 48px)/1 var(--f-d); letter-spacing: -.05em; }
.fmt-info p:not(.mono) { margin: 0; color: #A49D97; max-width: 44ch; }
.upload { cursor: pointer; align-self: flex-start; color: var(--paper); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
@media (min-width: 960px) {
  .fmt { grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
  .fmt-list { flex-direction: column; overflow: visible; margin: 0; padding: 0; position: sticky; top: calc(var(--top-h) + 24px); }
  .fmt-list button { min-width: 0; }
  .fmt-info { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* 04 · eventos */
.ev-grid { display: grid; gap: 56px; }
.ev-list { list-style: none; margin: 0; padding: 0; counter-reset: ev; }
.ev-list li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ev-list li .mono { color: var(--red); font-size: 14px; }
.ev-list p { margin: 0; font: 300 clamp(22px, 5vw, 34px)/1.15 var(--f-d); letter-spacing: -.035em; }
.ev-list b { font-weight: 800; }
.ev-visual { position: relative; display: grid; place-items: center; min-height: 560px; }
.story { position: relative; width: min(72vw, 300px); aspect-ratio: 9 / 16; border-radius: 28px; background: var(--ink); overflow: hidden; box-shadow: var(--dev-shadow); color: #fff; transform: rotate(-3deg); }
.st-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative; }
.st-bars i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: left; }
.st-user { position: absolute; top: 22px; left: 12px; display: flex; align-items: center; gap: 8px; z-index: 3; font-size: 12px; }
.st-user em { font-style: normal; opacity: .7; }
.st-av { width: 30px; height: 30px; border-radius: 50%; background: var(--red); display: grid; place-content: center; }
.st-av img { width: 20px; }
.st-frame { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0; transition: opacity 500ms var(--ease); }
.st-frame.on { opacity: 1; }
.st-frame.s1 { background: var(--red); }
.st-frame.s2 { background: var(--ink); }
.st-frame.s3 { background: var(--bone); color: var(--ink); }
.st-tag { align-self: flex-start; font: 600 12px var(--f-m); text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: #fff; padding: 6px 10px; }
.st-frame.s2 .st-tag, .st-frame.s3 .st-tag { background: var(--red); }
.st-frame p { margin: 0; font: 900 clamp(34px, 9vw, 42px)/.92 var(--f-d); letter-spacing: -.05em; text-transform: uppercase; }
.st-frame.on p { animation: stIn 700ms var(--ease); }
@keyframes stIn { from { transform: translateY(24px); opacity: 0; } }
.st-msg { position: absolute; bottom: 14px; left: 12px; right: 12px; z-index: 3; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); padding: 8px 14px; font-size: 11px; opacity: .8; }
.st-frame.s3.on ~ .st-msg { box-shadow: inset 0 0 0 1px rgba(21, 19, 18, .3); color: var(--ink); }
.story:has(.s3.on) .st-user { color: var(--ink); }
.story:has(.s3.on) .st-bars i { background: rgba(21, 19, 18, .2); }
.story:has(.s3.on) .st-bars i::after { background: var(--ink); }
.mic { position: absolute; left: 4%; bottom: 0; width: 120px; transform: rotate(28deg); transform-origin: bottom; }
.mic-head { width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4441 0 2px, transparent 2.5px) 0 0 / 8px 8px, var(--ink); }
.mic-flag { width: 120px; height: 104px; background: var(--ink); margin-top: -12px; display: grid; place-content: center; border-radius: 6px; }
.mic-flag img { width: 92px; }
.mic-stick { width: 34px; height: 110px; background: var(--ink); margin: 0 auto; border-radius: 0 0 14px 14px; }
@media (min-width: 960px) { .ev-grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .story { margin-left: 22%; } .mic { left: 0; bottom: -24px; } }
@media (max-width: 520px) { .mic { width: 84px; left: -2%; } .mic-head { width: 64px; height: 64px; } .mic-flag { width: 84px; height: 72px; } .mic-flag img { width: 64px; } .mic-stick { width: 24px; height: 70px; } }

/* 05 · informe */
.inf-grid { display: grid; gap: 48px; }
.inf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.inf-list li { position: relative; padding: 20px 0 20px 32px; border-bottom: 1px solid var(--line); font: 300 clamp(20px, 4.6vw, 30px)/1.2 var(--f-d); letter-spacing: -.03em; }
.inf-list li::before { content: ''; position: absolute; left: 0; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.inf-list b { font-weight: 800; }
.inf-try { background: var(--bone); padding: 24px; box-shadow: inset 0 0 0 1px var(--line); }
.try-t { color: var(--red); margin: 0 0 16px; }
.fields { display: grid; gap: 12px; margin-bottom: 24px; }
.fields label, .sum-name { display: grid; gap: 6px; }
.fields span, .sum-name span { font-size: 13px; font-weight: 600; }
input {
  font: 400 16px var(--f-d); color: var(--ink); background: var(--paper); border: 0; border-radius: 12px; padding: 14px 16px; width: 100%;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
input::placeholder { color: #A49D97; }
input:hover { box-shadow: inset 0 0 0 1.5px rgba(21, 19, 18, .3); }
input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--red); background: #fff; }
.art { border-top: 4px solid var(--ink); padding-top: 16px; }
.art-cat { display: inline-block; margin: 0 0 12px; background: var(--red); color: #fff; font: 600 11px var(--f-m); text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; }
.art-h { margin: 0 0 10px; font: 800 clamp(22px, 5vw, 34px)/1.08 var(--f-d); letter-spacing: -.045em; }
.art-h.flash { animation: flash 500ms var(--ease); }
@keyframes flash { from { opacity: .3; transform: translateY(6px); } }
.art-by { color: var(--mute); margin: 0 0 14px; text-transform: none; }
.art-img { aspect-ratio: 16 / 8; background: var(--ink); color: #fff; display: grid; place-content: center; padding: 16px; text-align: center; font: 900 clamp(20px, 5vw, 36px)/1 var(--f-d); letter-spacing: -.05em; text-transform: uppercase; margin-bottom: 14px; position: relative; overflow: hidden; }
.art-img::before { content: ''; position: absolute; left: 0; bottom: 0; width: 38%; height: 8px; background: var(--red); }
.art > i { display: block; height: 10px; background: #CFCAC5; margin-bottom: 8px; }
.art > i.s { width: 60%; }
.hint { margin: 16px 0 0; font-size: 12px; color: var(--mute); }
@media (min-width: 960px) { .inf-grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .inf-try { padding: 32px; position: sticky; top: calc(var(--top-h) + 24px); } }

/* 06 · proposta */
.plan-grid { display: grid; gap: 32px; }
.opts { display: grid; gap: 10px; }
.opt {
  position: relative; text-align: left; display: grid; gap: 4px; padding: 20px 64px 20px 20px; border-radius: 22px; background: var(--ink-2);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.opt .mono { color: var(--red); }
.opt b { font-weight: 800; font-size: clamp(20px, 4.6vw, 26px); letter-spacing: -.04em; line-height: 1.1; }
.opt em { font-style: normal; color: #A49D97; font-size: 14px; }
.opt .chk { position: absolute; right: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-3); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.opt .chk::after { content: ''; position: absolute; left: 9px; top: 6px; width: 7px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur) var(--ease); }
.opt:hover { background: var(--ink-3); }
.opt:active { transform: scale(.98); }
.opt[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.opt[aria-pressed="true"] em { color: var(--mute); }
.opt[aria-pressed="true"] .chk { background: var(--red); box-shadow: none; }
.opt[aria-pressed="true"] .chk::after { transform: rotate(45deg) scale(1); }
.sum { background: var(--red); color: #fff; padding: 24px; border-radius: 28px; display: flex; flex-direction: column; gap: 16px; }
.sum > .mono { margin: 0; opacity: .85; }
.sum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 40px; }
.sum li { font: 800 clamp(22px, 5vw, 30px)/1.1 var(--f-d); letter-spacing: -.04em; animation: tileIn 500ms var(--ease); }
.sum li.empty { font-weight: 300; opacity: .75; }
.sum-name input { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.sum-name input:focus { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 2px #fff; }
.sum .btn-red { background: var(--ink); }
.sum .btn-red:hover { background: #000; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.sum-mail { font-size: 13px; opacity: .85; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.sum-mail:hover { opacity: 1; }
@media (min-width: 960px) { .plan-grid { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; } .sum { position: sticky; top: calc(var(--top-h) + 24px); padding: 32px; } }

/* canais */
.channels { text-align: center; }
.channels h2 { margin-bottom: 48px; }
.ch { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; max-width: 960px; }
.ch a { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px; border-radius: 22px; transition: transform var(--dur) var(--ease); }
.ch .ico { width: 88px; height: 88px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-content: center; font-size: 40px; transition: transform 500ms var(--ease), background var(--dur) var(--ease); }
.ch b { font-weight: 800; font-size: 18px; letter-spacing: -.03em; }
.ch em { font-style: normal; font-weight: 600; color: var(--mute); margin-top: -8px; }
.ch a:hover .ico { transform: rotate(-10deg) scale(1.06); background: var(--ink); }
.ch a:active { transform: scale(.96); }
@media (min-width: 768px) { .ch { grid-template-columns: repeat(4, 1fr); } .ch .ico { width: 112px; height: 112px; font-size: 52px; } }

/* rodapé */
.foot { background: var(--ink); color: var(--paper); overflow: hidden; padding: 0 var(--gut) 32px; }
.foot-word { font: 900 25vw/.8 var(--f-d); letter-spacing: -.075em; color: var(--red); margin: 0 -.03em; padding-top: 48px; white-space: nowrap; }
.foot-row { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-l); padding-top: 24px; margin-top: 24px; }
.foot-row img { height: 36px; width: auto; }
.foot-row a { color: #A49D97; transition: color var(--dur) var(--ease); }
.foot-row a:hover { color: var(--red); }

/* menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .band-track { animation: none; }
}

/* o Netlify injeta o selo "Powered by Netlify" no plano grátis */
#nl-badge-frame, #nl-hud-frame { display: none !important; }


/* =====================================================================
   PALCO 3D
   O canvas fica fixo (z 1). Fundo das seções fica embaixo dele; o conteúdo
   das seções fica em cima (z 2). Título da capa e "90 MIL" ficam atrás (z 0).
   ===================================================================== */
:where(.sec, .ig) > :not(.ig-words, .ig-notes) { position: relative; z-index: 2; }
.hero > :not(.hero-disk, .hero-title, .float, .scroll-cue, .stage-hero) { position: relative; z-index: 2; }
.band { position: relative; z-index: 2; }
.ig-words { z-index: 0; }
.ig-notes { z-index: 3; }
.foot { position: relative; z-index: 2; }

/* lugares dos aparelhos quando o 3D está ligado */
.webgl .fallback { display: none !important; }
.webgl .stage-portal { aspect-ratio: 1.25; width: 100%; }
.webgl .stage-ig { width: min(92vw, 460px); height: min(112vw, 640px); }
.webgl .ig { min-height: 0; padding: 96px 0; }
.webgl .stage-fmt { aspect-ratio: 1.42; width: 100%; }
.webgl .stage-ev { min-height: min(130vw, 640px); }
.no-webgl .stage-fmt, .no-webgl .stage-hero { display: none; }


.webgl .fmt-info { margin-top: 24px; }

/* ícones de rede no mesmo estilo das reações da capa: bloco arredondado, inclinado, com sombra */
.stat .ico, .ch .ico {
  border-radius: 30%; transform: rotate(var(--r, -7deg)); box-shadow: 0 16px 30px -14px rgba(254, 15, 10, .65);
  animation: bob 5s var(--ease-io) infinite alternate;
}
.stat:nth-child(even) .ico, .ch li:nth-child(even) .ico { --r: 6deg; background: var(--ink); color: #fff; box-shadow: 0 16px 30px -14px rgba(21, 19, 18, .55); animation-delay: -2.5s; }
.stat:nth-child(3n) .ico { --r: -4deg; }
@media (hover: hover) {
  .stat:hover .ico { background: #fff; color: var(--red); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .35); }
  .ch a:hover .ico { transform: rotate(0deg) scale(1.08); background: var(--red); color: #fff; }
  .ch li:nth-child(odd) a:hover .ico { background: var(--ink); }
}