/* ============================================================================
   FACILITA A.I — DESIGN SYSTEM
   Deep navy · premium gold · white · off-white · near-black
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
:root {
  /* dark end of the story */
  --ink:        #04060D;
  --navy-900:   #060B1C;
  --navy-850:   #08102A;
  --navy-800:   #0A1330;
  --navy-700:   #0F1E48;
  --navy-600:   #16305F;
  --navy-500:   #1E4384;

  /* the accent — used sparingly, always to mean value / action / growth.
     #FFC107 is the real brand colour, taken from the system's manifest. */
  --gold:       #FFC107;
  --gold-hi:    #FFD75E;
  --gold-deep:  #B8860B;

  /* light end of the story */
  --white:      #FFFFFF;
  --off:        #F7F6F2;
  --off-2:      #EEECE4;
  --line:       #E3E0D6;

  --slate:      #59637A;
  --slate-2:    #8A93A6;

  --pos:        #2FBF87;
  --neg:        #E2604B;

  /* type */
  --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* fluid scale */
  --t-mega:  clamp(2.75rem, 11vw, 10.5rem);
  --t-h1:    clamp(2.25rem, 6.2vw, 5.25rem);
  --t-h2:    clamp(1.9rem,  4.6vw, 3.9rem);
  --t-h3:    clamp(1.35rem, 2.5vw, 2.1rem);
  --t-lead:  clamp(1.02rem, 1.55vw, 1.35rem);
  --t-body:  clamp(0.95rem, 1.15vw, 1.06rem);
  --t-small: clamp(0.8rem,  0.95vw, 0.88rem);
  --t-micro: clamp(0.68rem, 0.8vw,  0.76rem);

  /* rhythm */
  --pad-x:   clamp(1.15rem, 5vw, 6.5rem);
  --sec-y:   clamp(5rem, 12vh, 11rem);
  --maxw:    1280px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A barra de navegação é fixa no topo (75px no celular). Sem isto, todo
     pulo de âncora do menu parava com o alvo colado em y=0 — ou seja, com o
     título da seção ESCONDIDO ATRÁS da barra. `scroll-padding-top` resolve
     de uma vez para todas as âncoras, presentes e futuras, em vez de um
     `scroll-margin` repetido seção por seção. */
  scroll-padding-top: clamp(84px, 11vh, 104px);
}
/* clip (not hidden) so position:sticky keeps working */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; margin: 0; }
p { margin: 0; }
img, canvas, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- primitives */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }

.eyebrow {
  font-size: var(--t-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--slate); }
.section--dark .lead { color: rgba(255,255,255,.62); }

.gold { color: var(--gold); }

/* buttons ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.5), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  z-index: -1;
}
.btn:hover::after { opacity: 1; }
.btn--primary:hover { box-shadow: 0 14px 40px -10px rgba(245,197,66,.55); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--ghost-dark {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost-dark:hover { border-color: var(--ink); }

.btn--sm { padding: .68rem 1.2rem; font-size: var(--t-micro); }
.btn--block { width: 100%; }

/* ================================================================= NAV ==== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad-x);
  transition: background .5s var(--ease-out), backdrop-filter .5s, border-color .5s, padding .5s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(4, 6, 13, .72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(255,255,255,.08);
  padding-block: .7rem;
}
.nav.is-light.is-solid {
  background: rgba(247, 246, 242, .82);
  border-bottom-color: rgba(0,0,0,.07);
  color: var(--ink);
}

.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem; }
/* the real FAI app icon, shown as the rounded mark it was drawn to be */
.brand__mark {
  width: 30px; height: 30px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  flex: none;
  /* a gold halo so the mark reads as lit rather than pasted on */
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,193,7,.28),
              0 0 18px -4px rgba(255,193,7,.55);
  transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.brand:hover .brand__mark {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,193,7,.5),
              0 0 26px -2px rgba(255,193,7,.8);
}
.brand__accent { color: var(--gold); }

.nav__links { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 2rem); }
.nav__links a {
  font-size: var(--t-small);
  color: rgba(255,255,255,.68);
  position: relative;
  transition: color .3s;
  padding-block: .25rem;
}
.nav.is-light .nav__links a { color: rgba(5,7,14,.62); }
.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__links a:hover { color: var(--gold); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { display: flex; align-items: center; gap: .6rem; }

.nav__burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); position: relative; flex: none; }
.nav.is-light .nav__burger { border-color: rgba(0,0,0,.15); }
.nav__burger span { position: absolute; left: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translateX(-50%); transition: transform .4s var(--ease-out), opacity .3s; }
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { bottom: 17px; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateX(-50%) translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { transform: translateX(-50%) translateY(-3.5px) rotate(-45deg); }

.nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(4,6,13,.97);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  padding: 5rem var(--pad-x) 3rem;
  transform: translateY(-100%);
  transition: transform .6s var(--ease-out);
  visibility: hidden;
}
.nav__drawer.is-open { transform: translateY(0); visibility: visible; }
.nav__drawer a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--white);
  padding-block: .45rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav__drawer .btn { margin-top: 1.5rem; align-self: flex-start; }

/* ================================================================ HERO ==== */
/* The runway. Its height IS the scroll budget for the cinematic timeline.    */
.hero {
  position: relative;
  height: calc(var(--hero-vh, 600) * 1vh);
  background: var(--ink);
}
/* The stage sticks for the whole runway — no pin-spacer, no layout jumps,
   and touch scrolling drives it exactly like a wheel does.                   */
/* Two rows that never stack on top of each other: the copy owns the upper
   band, the assembling panel owns the lower one. This is what stops the
   headline from printing over the dashboard on short screens. */
/* ONE centred cell. The copy and the panel are stacked in it and cross-fade,
   which is the whole point: an empty second row used to eat half the screen
   and shove the opening phrase up against the navigation. */
/* Two rows: everything cinematic in the first, the scroll readout in its own
   second row. The HUD used to be absolutely positioned over the panel, which
   put "CAOS DADOS ORGANIZAÇÃO…" straight across the dashboard. */
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: clamp(.7rem, 2.2vh, 1.4rem);
  padding: clamp(4.4rem, 10vh, 6rem) 0 clamp(2.2rem, 5vh, 3.2rem);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* drop-in Seedance clip layer — hidden until a src is configured */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.hero__video.is-active { opacity: 1; }

/* vignette + floor glow to seat the particles in a real space */
.hero__grade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% 46%, transparent 38%, rgba(4,6,13,.55) 78%, var(--ink) 100%),
    radial-gradient(70% 42% at 50% 108%, rgba(30,67,132,.5), transparent 72%);
}

/* --- hero copy: one phrase at a time -----------------------------------
   The phrases are stacked in a single grid cell and cross-faded by scroll,
   so only one idea is on screen at any moment. Behind them sits a soft dark
   well: without it the particle field reads straight through the letters. */
.hero__copy {
  position: relative;
  z-index: 4;
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: var(--pad-x);
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  min-height: clamp(140px, 26vh, 260px);
  pointer-events: none;
  animation: fadeUp .9s var(--ease-out) .12s both;
}

.hero__scrim {
  position: absolute;
  left: 50%; top: 50%;
  width: min(150%, 1300px);
  height: 260%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 1;                 /* o scroll leva isto a 0 junto com o texto */
  pointer-events: none;
  background: radial-gradient(ellipse 58% 48% at 50% 50%,
              rgba(4,6,13,.94) 0%, rgba(4,6,13,.78) 42%, rgba(4,6,13,0) 74%);
}

/* A MESMA sombra, agora onde ela faz falta: atrás da barra de etapas.
   No fim da animação as partículas passam por ali e "CAOS · DADOS ·
   ORGANIZAÇÃO · PAINEL · CONTROLE" ficava ilegível por cima delas. */
.hero__hud::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 168%;
  height: 320%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 50%,
              rgba(4,6,13,.96) 0%, rgba(4,6,13,.82) 45%, rgba(4,6,13,0) 78%);
}

.hero__seq {
  position: relative;
  display: grid;
  width: 100%;
  margin: 0;
}
.hero__phrase {
  grid-area: 1 / 1;                 /* every phrase shares one cell */
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  opacity: 0;
}
.hero__phrase:first-child { opacity: 1; }
.hero__phrase b { color: var(--gold); font-weight: 700; }

.hero__phrase--md {
  font-size: clamp(1.35rem, 3.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gold);
  text-transform: uppercase;
}
/* All three phrases read as headlines. The opener was styled as a small
   gold kicker and, alone on a dark screen, it looked like a stray label
   rather than the start of a story. */
.hero__phrase--lg { font-size: clamp(2rem, 5.4vw, 4rem); }
.hero__phrase--xl { font-size: clamp(2.4rem, 6.8vw, 5.4rem); }

/* --- the crisp panel the particles resolve into ---
   In flow, in its own grid row — it fills whatever height is left after the
   copy, so it can never collide with the headline. */
/* Mouse tilt lives here; the scroll timeline transforms .hero__dash inside.
   Nesting them keeps GSAP and the pointer from overwriting each other. */
.hero__dashWrap {
  /* position + z-index are REQUIRED here, not decoration. transform-style
     makes this element a stacking context, which traps the panel's own
     z-index inside it — so without these the wrapper competed with the
     canvas at the default level and the particle field drew straight over
     the dashboard. */
  position: relative;
  z-index: 4;
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  width: min(94vw, 1020px);
  height: min(72vh, 500px);
  perspective: 1400px;
  will-change: transform;
  transform-style: preserve-3d;
}
.hero__dash {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  border-radius: clamp(10px, 1.1vw, 18px);
  padding: clamp(.6rem, 1.1vw, 1.1rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: clamp(.4rem, .75vw, .8rem);
  /* SEM moldura. O painel não é uma caixa preta arredondada pousada sobre a
     cena — ele É o conjunto de cards. A opacidade que garante a leitura mora
     em cada card (.dcard), então as partículas continuam atrás do conteúdo
     mas aparecem nos vãos, e o que sobe na tela é o painel, nada mais. */
  background: none;
  border: 0;
  box-shadow: none;
  /* A ghost of the product, visible before a single scroll. The opening used
     to be a black void with one phrase floating in it — this gives the first
     paint something to look at and something to build toward. */
  opacity: .16;
  transform: perspective(1600px) rotateX(14deg) scale(.9) translateY(20px);
  pointer-events: none;
}
.hero__dash .dcard {
  border-radius: clamp(7px, .7vw, 12px);
  /* opaco: agora é o card que segura a legibilidade, não a moldura */
  background: linear-gradient(158deg, #111f42 0%, #0a1330 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9);
  padding: clamp(.45rem, .8vw, .85rem);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
.hero__dash .dcard--wide { grid-column: 1 / -1; }
.dcard__k { font-size: clamp(.5rem, .62vw, .68rem); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.dcard__v { font-family: var(--font-display); font-weight: 700; font-size: clamp(.85rem, 1.7vw, 1.6rem); letter-spacing: -.03em; }
.dcard__v.is-gold { color: var(--gold); }
.dcard__d { font-size: clamp(.5rem, .6vw, .66rem); color: rgba(255,255,255,.4); }
.dcard__d .up { color: var(--pos); }

.hero__dash .dtop { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; padding: 0 .2rem .1rem; }
.dtop__dots { display: flex; gap: 5px; }
.dtop__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.dtop__dots i:first-child { background: rgba(245,197,66,.55); }
.dtop__title { font-size: clamp(.52rem, .66vw, .72rem); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.dtop__pill { margin-left: auto; font-size: clamp(.5rem,.6vw,.66rem); color: var(--gold); border: 1px solid rgba(245,197,66,.28); border-radius: 100px; padding: .12rem .6rem; }

.dbars { display: flex; align-items: flex-end; gap: clamp(3px, .5vw, 8px); height: 100%; min-height: 42px; }
.dbars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(30,67,132,.95), rgba(30,67,132,.35)); transform-origin: bottom; }
.dbars i.is-gold { background: linear-gradient(180deg, var(--gold), rgba(245,197,66,.28)); }

.dline { width: 100%; height: 100%; min-height: 42px; }
.dline path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.dline .ln { stroke: var(--gold); }
.dline .ar { fill: url(#heroGrad); stroke: none; }

.dlist { display: flex; flex-direction: column; gap: .28rem; }
.dlist div { display: flex; justify-content: space-between; gap: .5rem; font-size: clamp(.48rem, .6vw, .66rem); color: rgba(255,255,255,.5); }
.dlist div b { color: rgba(255,255,255,.85); font-weight: 500; }

/* --- stage / progress readout --- */
.hero__hud {
  position: relative;
  grid-row: 2;
  justify-self: center;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  width: min(90vw, 460px);
}
/* .25 de opacidade era ilegível no fim da animação, quando o painel já está
   aceso e disputa o olho. */
.hero__stages { display: flex; gap: clamp(.5rem, 2vw, 1.4rem); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; }
.hero__stages span { transition: color .35s, opacity .35s; }
.hero__stages span.is-on { color: var(--gold); }
.hero__track { width: 100%; height: 2px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; }
.hero__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--navy-500), var(--gold)); border-radius: 2px; }
.hero__hint { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.3); display: flex; align-items: center; gap: .5rem; }
.hero__hint i { display: block; width: 1px; height: 14px; background: linear-gradient(180deg, var(--gold), transparent); animation: hintPulse 2s var(--ease-io) infinite; }
@keyframes hintPulse { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }

/* ============================================================ SECTIONS ==== */
.section { position: relative; padding-block: var(--sec-y); }
.section--light { background: var(--off); color: var(--ink); }
.section--white { background: var(--white); color: var(--ink); }
.section--dark  { background: var(--navy-900); color: var(--white); }

/* the cinematic handoff from the near-black hero into the light body */
.transition-band {
  height: clamp(120px, 22vh, 260px);
  background: linear-gradient(180deg, var(--ink) 0%, #0A1330 42%, #E9E7DF 88%, var(--off) 100%);
}

.section__head { max-width: 780px; }
.section__head h2 { font-size: var(--t-h2); margin-block: 1.1rem .9rem; text-wrap: balance; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow::before { display: none; }

/* reveal primitives (driven by GSAP) */
.r-up   { opacity: 0; transform: translateY(30px); }
.r-fade { opacity: 0; }

/* split-line headline reveal */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(105%); }

/* The pillar headline is the exception: no clipping box.
   A clip reveal only reads well when it runs fast and finishes; tied to a
   scroll it parks mid-way and the visitor sits looking at a word sawn in
   half. Here the word simply arrives whole, and revealOnApproach fades the
   whole column in. */
.pillar__word .reveal-line { overflow: visible; }
.pillar__word .reveal-line > span { transform: none; }

/* ========================================================= SOMOS NOVOS ====
   Substitui a grade de logos da antiga prova social. É um bloco de TEXTO,
   deliberadamente: uma admissão escrita tem peso, uma admissão diagramada
   como infográfico vira mais um banner que ninguém lê. Coluna estreita, do
   tamanho de um parágrafo confortável, e nada competindo por atenção. */
.novos__box {
  max-width: 62ch;
  margin: 0 auto;
  text-align: left;
}
.novos__box h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  letter-spacing: -.03em;
  margin: .55rem 0 1.1rem;
  text-wrap: balance;
}
.novos__body { font-size: var(--t-lead); color: var(--slate); line-height: 1.65; }
.novos__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.novos__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
/* marcador desenhado em CSS: um traço curto, não um emoji e não um "check"
   de venda — o tom aqui é de conversa, não de lista de benefícios */
.novos__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}
.novos__list b { font-weight: 600; }
.novos__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.novos__closing {
  flex-basis: 100%;
  margin: .4rem 0 0;
  font-size: var(--t-small);
  color: var(--slate-2);
  font-style: italic;
}

/* ============================================================ PILLARS ==== */
/* 170vh, not 230: three pillars at 230 each is nearly seven screens of
   scrolling for three words. */
.pillar { position: relative; height: 170vh; }
.pillar__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  align-content: center;
}
.pillar--1 .pillar__stage { background: var(--white); color: var(--ink); }
.pillar--2 .pillar__stage { background: var(--navy-900); color: var(--white); }
.pillar--3 .pillar__stage { background: var(--ink); color: var(--white); }

/* The artwork sits behind a scrim that fades from the text side outward, so
   the headline never has bars and dots running through it. Each pillar
   declares its own background colour for the scrim to blend into. */
.pillar__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.pillar--1 .pillar__stage { --scrim: 255,255,255; }
.pillar--2 .pillar__stage { --scrim: 6,11,28; }
.pillar--3 .pillar__stage { --scrim: 4,6,13; }
.pillar__stage::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(102deg,
    rgba(var(--scrim), .96) 0%,
    rgba(var(--scrim), .90) 28%,
    rgba(var(--scrim), .52) 52%,
    rgba(var(--scrim), 0)   78%);
}
.pillar__inner { position: relative; z-index: 2; width: 100%; }

.pillar__index {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: .9rem;
  display: block;
}
.pillar__word {
  font-size: var(--t-mega);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .88;
  text-wrap: nowrap;
}
.pillar--1 .pillar__word { color: var(--ink); }
.pillar__support {
  margin-top: 1.3rem;
  font-size: var(--t-lead);
  max-width: 30ch;
  color: var(--slate);
}
.pillar--2 .pillar__support, .pillar--3 .pillar__support { color: rgba(255,255,255,.6); }

.pillar__items { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .45rem; max-width: 46ch; }
.pillar__items li {
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .42rem .85rem;
  border-radius: 100px;
  border: 1px solid currentColor;
  opacity: .32;
  transition: opacity .4s, color .4s, border-color .4s;
}
.pillar__items li.is-on { opacity: 1; color: var(--gold); }

/* ========================================================== ECOSYSTEM ==== */
.eco { position: relative; height: 420vh; background: var(--ink); }
/* Three explicit rows. The rail owns whatever height is left after the head
   and the progress bar, so cards are sized to fit instead of overflowing the
   sticky stage and getting clipped. */
.eco__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  gap: clamp(.9rem, 2.6vh, 1.8rem);
  padding-block: clamp(4.6rem, 10vh, 6rem) clamp(1.2rem, 3vh, 2rem);
}
.eco__head { grid-row: 1; padding-inline: var(--pad-x); max-width: 760px; }
.eco__head h2 { font-size: clamp(1.45rem, 3.3vw, 2.55rem); margin-block: .6rem .5rem; }
.eco__head .lead { font-size: clamp(.9rem, 1.15vw, 1.05rem); }

/* As bordas desvanecem em vez de cortar o card no meio. Um trilho
   horizontal sempre tem card entrando e saindo; o que não pode é o corte
   seco, que parece bug. */
.eco__viewport {
  grid-row: 2; position: relative; overflow: hidden; min-height: 0;
  display: flex; align-items: center;
  /* Sombra lateral mais discreta. A zona de fade ocupava 24% de cada lado —
     quase um card inteiro apagado em cada borda, o que deixava a faixa
     escurecida e pesada. Agora o esmaecimento é curto: serve só para o card
     não parecer serrado pela borda, sem engolir o conteúdo. */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, rgba(0,0,0,.65) 3%, #000 9%, #000 91%, rgba(0,0,0,.65) 97%, transparent 100%);
          mask-image: linear-gradient(90deg,
      transparent 0, rgba(0,0,0,.65) 3%, #000 9%, #000 91%, rgba(0,0,0,.65) 97%, transparent 100%);
}
.eco__rail { display: flex; align-items: stretch; gap: clamp(.85rem, 1.6vw, 1.5rem); padding-inline: var(--pad-x); will-change: transform; }

.eco__card {
  position: relative;
  flex: none;
  /* largura calculada em main.js para caber um numero inteiro de cards;
     o clamp e so o valor inicial antes da medicao */
  width: var(--eco-card, clamp(210px, 20vw, 280px));
  padding: clamp(1.15rem, 2vw, 1.7rem);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(22,48,95,.5), rgba(6,11,28,.7));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  /* `height: 100%` só resolve contra um pai de altura definida, e o trilho
     tem altura automática — então cada card acabava com a altura do próprio
     texto e a fileira ficava serrilhada, com seis alturas diferentes.
     Agora quem iguala é o `align-items: stretch` do trilho: todos ficam da
     altura do mais alto, com as bordas alinhadas. O `overflow` continua como
     última defesa para janela muito baixa. */
  height: auto;
  min-height: 0;
  overflow: hidden;
  transition: border-color .5s, transform .6s var(--ease-out), background .5s;
  overflow: hidden;
}
.eco__card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(340px 180px at 50% -10%, rgba(245,197,66,.16), transparent 70%);
  opacity: 0; transition: opacity .55s;
}
.eco__card:hover { border-color: rgba(245,197,66,.4); transform: translateY(-8px); }
.eco__card:hover::before { opacity: 1; }

.eco__num { font-size: var(--t-micro); letter-spacing: .22em; color: rgba(255,255,255,.28); }
.eco__card h3 { font-size: var(--t-h3); letter-spacing: -.03em; }
.eco__card p { font-size: var(--t-small); color: rgba(255,255,255,.55); line-height: 1.55; }
.eco__kpi {
  margin-top: auto;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: .5rem;
}
.eco__kpi::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* the connective tissue that proves it is one system */
.eco__wire { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }

.eco__progress { grid-row: 3; padding-inline: var(--pad-x); display: flex; align-items: center; gap: 1rem; }
.eco__bar { flex: 1; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.eco__bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--navy-500), var(--gold)); }
.eco__count { font-size: var(--t-micro); letter-spacing: .2em; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }

/* ========================================================== FINANCEIRO ==== */
.fin { background: var(--off); color: var(--ink); }
.fin__grid {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  box-shadow: 0 24px 60px -40px rgba(6,11,28,.35);
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.panel__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -.03em; }
.panel__meta { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); }

.chart { width: 100%; height: clamp(220px, 34vh, 330px); }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .axis { font-size: 11px; fill: var(--slate-2); font-family: var(--font-body); }
.chart .bar-rec { fill: var(--navy-600); }
.chart .bar-des { fill: #C9CEDA; }
.chart .lucro-line { fill: none; stroke: var(--gold-deep); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .lucro-dot { fill: var(--white); stroke: var(--gold-deep); stroke-width: 2.5; }

.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; }
.legend span { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend .k-receita { background: var(--navy-600); }
.legend .k-despesa { background: #C9CEDA; }
.legend .k-lucro   { background: var(--gold-deep); }

.fin__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.7rem, 1.4vw, 1rem); }
.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(.95rem, 1.8vw, 1.35rem);
  display: flex; flex-direction: column; gap: .3rem;
  transition: border-color .4s, transform .5s var(--ease-out);
}
.stat:hover { border-color: var(--gold); transform: translateY(-4px); }
.stat__k { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); }
.stat__v { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat--gold .stat__v { color: var(--gold-deep); }
.stat__h { font-size: var(--t-micro); color: var(--slate-2); line-height: 1.5; }

/* DRE waterfall */
.dre { margin-top: clamp(1rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: .45rem; }
.dre__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: .6rem .85rem; border-radius: 10px; background: var(--off); font-size: var(--t-small); }
.dre__row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.dre__row.is-neg b { color: var(--neg); }
.dre__row.is-pos b { color: var(--navy-600); }
.dre__row.is-gold { background: linear-gradient(100deg, rgba(245,197,66,.18), rgba(245,197,66,.05)); border: 1px solid rgba(245,197,66,.4); }
.dre__row.is-gold b { color: var(--gold-deep); font-size: 1.1em; }

/* ============================================================== VENDAS ==== */
.flow { position: relative; height: 210vh; background: var(--white); color: var(--ink); }
.flow__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding-block: clamp(4.4rem, 10vh, 6rem) clamp(1.5rem, 4vh, 2.5rem);
}
.flow__rail { margin-top: clamp(1.8rem, 4.5vh, 3rem); position: relative; }
.flow__line { position: absolute; left: 0; top: 30px; height: 2px; width: 100%; background: var(--line); }
.flow__line i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--navy-600), var(--gold)); }
.flow__steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.5rem, 1.4vw, 1.2rem); }
.flow__step { text-align: left; }
.flow__dot {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  color: var(--slate-2);
  transition: border-color .45s, color .45s, background .45s, box-shadow .45s, transform .45s var(--ease-out);
  position: relative; z-index: 2;
}
.flow__step.is-on .flow__dot {
  border-color: var(--gold); color: var(--ink);
  background: var(--gold);
  box-shadow: 0 10px 30px -10px rgba(245,197,66,.7);
  transform: scale(1.06);
}
.flow__step h3 { font-size: var(--t-body); margin-top: 1.1rem; letter-spacing: -.02em; transition: color .4s; }
.flow__step p { font-size: var(--t-micro); color: var(--slate-2); margin-top: .3rem; line-height: 1.5; }

/* ========================================================== SHOWCASE ==== */
/* 330vh, não 500: a pista era dimensionada pra OITO telas e a demo agora tem
   CINCO. Mantendo 500vh cada tela ficaria parada por ~100vh de rolagem e o
   passeio pareceria travado. 330/5 ≈ 66vh por tela, o mesmo ritmo de antes. */
.show { position: relative; height: 330vh; background: var(--ink); }
.show__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  perspective: 1800px;
}
.show__glow { position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 44%, rgba(30,67,132,.4), transparent 70%); }

.browser {
  position: relative;
  z-index: 2;
  width: min(92vw, 1120px);
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  background: #0B1226;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 60px 160px -60px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.08);
  transform-style: preserve-3d;
  will-change: transform;
}
.browser__bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem clamp(.7rem, 1.2vw, 1rem);
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.browser__url {
  flex: 1;
  font-size: var(--t-micro);
  color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.05);
  border-radius: 100px;
  padding: .28rem .85rem;
  max-width: 340px;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser__tag { font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

.browser__screens { position: relative; aspect-ratio: 16 / 9.4; }
.screen {
  position: absolute; inset: 0;
  padding: clamp(.6rem, 1.2vw, 1.15rem);
  display: grid;
  gap: clamp(.4rem, .8vw, .75rem);
  opacity: 0;
  will-change: opacity, transform;
}
.screen.is-live { opacity: 1; }

.ui-row { display: grid; gap: clamp(.4rem, .8vw, .75rem); }
.ui-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: clamp(6px, .6vw, 11px);
  padding: clamp(.45rem, .85vw, .8rem);
  display: flex; flex-direction: column; gap: .28rem;
  min-width: 0; min-height: 0;
}
.ui-k { font-size: clamp(.46rem, .58vw, .66rem); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(.78rem, 1.5vw, 1.4rem); letter-spacing: -.03em; }
.ui-v.g { color: var(--gold); }
.ui-v.p { color: var(--pos); }
.ui-v.n { color: var(--neg); }
.ui-s { font-size: clamp(.44rem, .55vw, .62rem); color: rgba(255,255,255,.35); }
.ui-bars { display: flex; align-items: flex-end; gap: clamp(2px,.42vw,7px); flex: 1; min-height: 34px; }
.ui-bars i { flex: 1; border-radius: 2px 2px 0 0; background: rgba(30,67,132,.85); }
.ui-bars i.g { background: var(--gold); }
.ui-list { display: flex; flex-direction: column; gap: clamp(2px,.35vw,5px); flex: 1; min-height: 0; }
.ui-li { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; font-size: clamp(.46rem,.6vw,.68rem); color: rgba(255,255,255,.55); padding: clamp(2px,.32vw,5px) 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.ui-li b { color: rgba(255,255,255,.9); font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-chip { font-size: clamp(.42rem,.52vw,.58rem); padding: .1rem .45rem; border-radius: 100px; border: 1px solid currentColor; }
.ui-chip.g { color: var(--gold); }
.ui-chip.p { color: var(--pos); }
.ui-chip.n { color: var(--neg); }
.ui-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.4rem,.8vw,.75rem); }
.ui-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.4rem,.8vw,.75rem); }
.ui-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.4rem,.8vw,.75rem); }
.ui-thumb { aspect-ratio: 1; border-radius: clamp(4px,.5vw,8px); background: linear-gradient(140deg, rgba(30,67,132,.6), rgba(6,11,28,.8)); border: 1px solid rgba(255,255,255,.06); }
.ui-spark { width: 100%; height: 100%; min-height: 34px; }
.ui-spark path { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }

.show__caption {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(1.2rem, 5vh, 3rem);
  z-index: 3;
  text-align: center;
  width: min(90vw, 620px);
}
.show__nav { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin-bottom: .9rem; }
.show__nav button {
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.45);
  transition: color .35s, border-color .35s, background .35s;
}
.show__nav button.is-on { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.show__cap-text { font-size: var(--t-small); color: rgba(255,255,255,.55); min-height: 1.5em; }

/* ========================================================= TRANSFORM ==== */
/* 200vh, not 320: the old runway was three screens of almost-empty off-white
   before the metrics, which read as a blank page rather than a section. */
.tf { position: relative; height: 200vh; background: var(--off); }
.tf__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
}
.tf__inner { width: 100%; max-width: var(--maxw); padding-inline: var(--pad-x); }
.tf__labels { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-bottom: clamp(1.4rem, 4vh, 2.6rem); }
.tf__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.9rem);
  letter-spacing: -.03em;
  transition: color .5s, opacity .5s;
}
.tf__label--a { color: var(--slate-2); }
.tf__label--b { color: var(--slate-2); opacity: .35; }
.tf__arrow { color: var(--gold); font-size: 1.1rem; }

.tf__field { position: relative; height: clamp(280px, 46vh, 460px); }
.tf__node {
  position: absolute;
  /* `width: max-content` é o que impede a etiqueta de ficar estreita e alta.
     Um elemento absoluto sem largura própria é espremido pelo espaço que
     sobra até a borda do container, então uma etiqueta colocada a 63% da
     largura ganhava ~130px e quebrava a frase em quatro linhas. Com
     max-content ela pede exatamente o tamanho do texto, e só quebra quando
     bate no teto abaixo. */
  width: max-content;
  max-width: min(86vw, 300px);
  padding: .58rem 1rem;
  border-radius: 10px;
  font-size: var(--t-micro);
  letter-spacing: .04em;
  /* Era `nowrap` com max-width: a frase mais longa passava da caixa e ficava
     cortada no meio ("...o que sobro"). O texto foi encurtado, e a quebra
     aqui é a rede de segurança: nenhuma frase futura volta a ser decepada. */
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--slate);
  box-shadow: 0 8px 24px -16px rgba(6,11,28,.5);
  will-change: transform, opacity;
  transform-origin: center;
}
.tf__node.is-after {
  background: linear-gradient(150deg, rgba(16,30,72,.96), rgba(6,11,28,.96));
  color: var(--white);
  border-color: rgba(245,197,66,.34);
}
.tf__node.is-after b { color: var(--gold); }

/* No desktop a etiqueta se TRANSFORMA: uma frase de cada vez, e a seta de
   ligação não aparece (quem faz a ligação ali é o movimento). */
.tf__node .tf__link,
.tf__node .tf__to { display: none; }
.tf__node.is-after .tf__from { display: none; }
.tf__node.is-after .tf__to { display: inline; }
.tf__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tf__wires path { fill: none; stroke: rgba(245,197,66,.5); stroke-width: 1; }

/* ========================================================== SEGURANÇA ====
   Herda o fundo escuro que era das métricas — a seção continua sendo a pausa
   grave antes do preço. O que muda é que não há mais número gigante: aqui
   nada é performado, é uma lista de afirmações que precisam ser LIDAS, então
   o texto tem o tamanho de texto e não de manchete. */
.security { background: var(--ink); color: var(--white); }
.security__grid {
  margin-top: clamp(2.2rem, 5vh, 3.6rem);
  display: grid;
  /* 320px, não 255: com 255 a grade abria 4 colunas e, como são SEIS itens,
     sobrava um cartão sozinho na segunda linha — e aqui a "borda" é o fundo
     aparecendo pelo gap de 1px, então célula vazia vira buraco visível.
     320 dá 3 colunas no desktop (3+3), 2 no tablet e 1 no celular: em todas
     as larguras as linhas fecham cheias. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  overflow: hidden;
}
.sec__card {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: background .5s;
}
.sec__card:hover { background: var(--navy-850); }
.sec__card h3 {
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--gold);
  text-wrap: balance;
}
.sec__card p { font-size: var(--t-small); line-height: 1.62; color: rgba(255,255,255,.66); }
/* a ressalva sobre não ter SOC 2 / ISO fica logo abaixo da grade, no mesmo
   tamanho do resto — esconder em corpo 9 seria contradizer a própria seção */
.security__note {
  margin-top: 1.3rem;
  font-size: var(--t-small);
  color: rgba(255,255,255,.45);
  max-width: 62ch;
}

/* =========================================================== PRICING ==== */
.pricing { background: var(--off); color: var(--ink); }
/* "nos 30 primeiros dias tudo abre como Plus" — o argumento mais forte da
   página, então vem acima do subtítulo e com o destaque do acento */
.pricing__note {
  margin: .9rem 0 .2rem;
  font-size: var(--t-lead);
  font-weight: 500;
  color: var(--ink);
}
.pricing__note b { color: var(--gold-deep); font-weight: 700; }
/* O aviso do cartão. Fica DEPOIS dos planos, largura de leitura, com uma
   régua dourada à esquerda: precisa parecer uma ressalva assumida, não uma
   letra miúda escondida — é exatamente o que separa transparência de
   pegadinha. */
.pricing__card {
  margin: clamp(1.6rem, 3.5vh, 2.4rem) auto 0;
  max-width: 66ch;
  padding: 1rem 0 1rem 1.15rem;
  border-left: 3px solid var(--gold);
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--slate);
}
.pricing__card b { color: var(--ink); font-weight: 600; }
.toggle { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem; padding: .32rem; border-radius: 100px; background: var(--white); border: 1px solid var(--line); position: relative; }
.toggle__btn { position: relative; z-index: 2; padding: .55rem 1.35rem; border-radius: 100px; font-size: var(--t-small); font-weight: 600; font-family: var(--font-display); color: var(--slate); transition: color .35s; white-space: nowrap; }
.toggle__btn.is-on { color: var(--ink); }
.toggle__pill { position: absolute; z-index: 1; top: .32rem; bottom: .32rem; border-radius: 100px; background: var(--gold); transition: left .5s var(--ease-out), width .5s var(--ease-out); }
.toggle__save { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin-left: .6rem; }

.plans { margin-top: clamp(2.4rem, 6vh, 4rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.8vw, 1.5rem); align-items: start; }
.plan {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s;
}
.plan:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -45px rgba(6,11,28,.5); }
.plan--hl {
  background: linear-gradient(168deg, var(--navy-800), var(--ink));
  color: var(--white);
  border-color: rgba(245,197,66,.4);
  box-shadow: 0 40px 90px -50px rgba(6,11,28,.85);
}
.plan--hl::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(245,197,66,.55), transparent 45%);
  z-index: -1;
}
.plan__badge {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold); color: var(--ink);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em;
  padding: .35rem .9rem; border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(245,197,66,.7);
}
.plan__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -.03em; }
.plan__tag { font-size: var(--t-small); color: var(--slate); line-height: 1.5; }
.plan--hl .plan__tag { color: rgba(255,255,255,.6); }
.plan__price { display: flex; align-items: flex-end; gap: .25rem; margin-top: .3rem; }
.plan__cur { font-size: var(--t-body); font-weight: 600; color: var(--slate); padding-bottom: .55rem; }
.plan--hl .plan__cur { color: rgba(255,255,255,.6); }
.plan__val { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5.2vw, 3.4rem); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan--hl .plan__val { color: var(--gold); }
.plan__per { font-size: var(--t-small); color: var(--slate); padding-bottom: .5rem; }
.plan--hl .plan__per { color: rgba(255,255,255,.55); }
.plan__cycle { font-size: var(--t-micro); color: var(--slate-2); min-height: 1.2em; }
.plan--hl .plan__cycle { color: rgba(255,255,255,.45); }
.plan__feats { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.plan__feats li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); line-height: 1.45; }
.plan__feats svg { flex: none; margin-top: .18rem; }
.plan__feats path { stroke: var(--gold-deep); }
.plan--hl .plan__feats path { stroke: var(--gold); }
.plan .btn { margin-top: auto; }

/* =============================================================== FAQ ==== */
.faq { background: var(--white); color: var(--ink); }
.faq__list { margin-top: clamp(2rem, 5vh, 3.2rem); border-top: 1px solid var(--line); max-width: 900px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  letter-spacing: -.02em;
  transition: color .35s;
}
.faq__q:hover { color: var(--gold-deep); }
.faq__icon { flex: none; width: 26px; height: 26px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 1.6px; background: currentColor;
  transform: translate(-50%,-50%);
  transition: transform .45s var(--ease-out), opacity .3s;
}
.faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .faq__q { color: var(--gold-deep); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%,-50%) rotate(0deg); opacity: 0; }
.faq__a { height: 0; overflow: hidden; }
.faq__a-inner { padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem); padding-right: clamp(0px, 6vw, 3.5rem); font-size: var(--t-body); color: var(--slate); line-height: 1.7; }

/* ========================================================= FINAL CTA ==== */
/* 180vh, not 260: the closing shot has one beat to land and should not
   make the visitor scroll through it. */
.calm { position: relative; height: 180vh; background: var(--off); }
/* Same two-row rule as the hero: copy on top, laptop below. Previously both
   were centred in the same cell, so the dark dashboard printed straight
   through the headline. */
.calm__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  /* Uma coluna: frase, CTA, e a marca assinando embaixo. Ela estava
     posicionada de forma absoluta e caía por cima dos botões. */
  grid-auto-flow: row;
  justify-items: center;
  align-content: center;
  /* O palco tem altura fixa de 100vh e overflow:hidden. Com padding só em
     cima, numa janela baixa (650px) o conteúdo pedia 652px e a assinatura
     era empurrada contra a borda de baixo, encostando na seção escura.
     Agora o respiro é dos DOIS lados e o gap é menor: em 650px sobra folga
     em vez de faltar. */
  row-gap: clamp(1rem, 2.5vh, 2rem);
  padding-block: clamp(4.2rem, 9vh, 5.5rem) clamp(1.6rem, 4vh, 2.6rem);
  background:
    radial-gradient(90% 70% at 50% 8%, #FFFFFF, transparent 60%),
    linear-gradient(180deg, #FAF9F6, #EFEDE5);
}
.calm__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.calm__video.is-active { opacity: 1; }
.calm__particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* the desk scene — in flow, in the lower row, clipped at the bottom edge */
/* Centred, not bottom-anchored: anchoring to the bottom clipped the base and
   the mug, so the scene read as a floating dark rectangle instead of a desk. */
.desk {
  position: relative;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: min(78vw, 700px);
  max-height: 100%;
  z-index: 1;
  filter: drop-shadow(0 30px 50px rgba(6,11,28,.18));
}
.laptop { position: relative; width: 100%; }
.laptop__screen {
  width: 78%;
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  border-radius: 10px 10px 3px 3px;
  background: #0B1226;
  border: 8px solid #23283A;
  border-bottom-width: 10px;
  box-shadow: 0 40px 80px -40px rgba(6,11,28,.55);
  overflow: hidden;
  padding: clamp(.4rem, .8vw, .7rem);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(.3rem,.6vw,.55rem);
}
.laptop__base {
  width: 96%;
  height: clamp(9px, 1.2vw, 14px);
  margin: 0 auto;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #2C3244, #1A1E2B);
  box-shadow: 0 18px 40px -18px rgba(6,11,28,.5);
}
.laptop__base::after { content: ''; display: block; width: 14%; height: 3px; margin: 0 auto; border-radius: 0 0 4px 4px; background: rgba(255,255,255,.14); }

.mug { position: absolute; right: 1%; bottom: 8%; width: clamp(40px, 5.6vw, 68px); z-index: 3; }
.mug__body { width: 100%; aspect-ratio: 1/.92; border-radius: 6px 6px 40% 40%; background: linear-gradient(160deg, #FFFFFF, #E4E1D8); box-shadow: 0 14px 30px -16px rgba(6,11,28,.45), inset -6px 0 12px -8px rgba(0,0,0,.12); }
.mug__handle { position: absolute; right: -14%; top: 26%; width: 30%; aspect-ratio: 1; border: 5px solid #EDEAE1; border-left-color: transparent; border-radius: 50%; }
.steam { position: absolute; left: 50%; bottom: 88%; transform: translateX(-50%); width: 60%; height: 60px; pointer-events: none; }
.steam i {
  position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(120,130,150,.34); filter: blur(2px);
  animation: steamRise 4.5s var(--ease-io) infinite;
}
.steam i:nth-child(1) { left: 18%; animation-delay: 0s; }
.steam i:nth-child(2) { left: 48%; animation-delay: 1.1s; }
.steam i:nth-child(3) { left: 76%; animation-delay: 2.3s; }
@keyframes steamRise {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  18%  { opacity: .75; }
  100% { transform: translate(-9px, -58px) scale(3.4); opacity: 0; }
}

.calm__copy { position: relative; z-index: 4; text-align: center; padding-inline: var(--pad-x); color: var(--ink); max-width: 900px; margin-inline: auto; }
.calm__title { font-size: clamp(2rem, 5vw, 4rem); }
.calm__trust {
  margin-top: 1.1rem;
  display: flex; gap: clamp(.6rem, 1.8vw, 1.4rem);
  justify-content: center; flex-wrap: wrap;
  font-size: var(--t-micro); color: var(--slate-2);
}
.calm__trust span { display: inline-flex; align-items: center; gap: .35rem; }
.calm__trust span::before { content: '✓'; color: var(--gold-deep); font-weight: 700; }
.calm__eyebrow { color: var(--gold-deep); }
/* O título é o que mais pesa neste palco: em 1349x650 ele sozinho ocupava
   261px de 650, o conteúdo pedia 665px e sobrava −15 — por isso a manchete
   aparecia decepada em cima e a assinatura era espremida embaixo.
   --t-h1 só olha a LARGURA da janela; o `min` com 11vh faz o tamanho também
   respeitar a ALTURA. Numa janela normal (900px+) 11vh é maior que --t-h1,
   então o `min` escolhe --t-h1 e nada muda; só encolhe em tela baixa. */
.calm__title { font-size: min(var(--t-h1), 11vh); font-weight: 700; letter-spacing: -.045em; text-wrap: balance; }
.calm__sub { margin-top: 1rem; font-size: var(--t-lead); color: var(--slate); text-wrap: balance; }
.calm__actions { margin-top: 2rem; display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.calm__actions .btn--ghost-dark { background: rgba(255,255,255,.7); }

/* the brand mark the golden particles resolve into */
/* the brand mark the golden particles resolve into — sits in the gap between
   the copy and the laptop so it never lands on top of either */
/* Placed as a grid item in the laptop's row, aligned to its top, so the mark
   lands in the gap between the copy and the screen instead of printing over
   either of them. */
/* Assina a página, embaixo do call to action — em fluxo, nunca sobreposta. */
.markmark {
  position: relative; z-index: 5;
  transform: scale(.9);
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  letter-spacing: -.04em;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}
.markmark .brand__mark { width: clamp(30px, 4vw, 46px); height: clamp(30px, 4vw, 46px); font-size: clamp(.8rem, 1.3vw, 1.1rem); border-radius: 12px; }

/* ============================================================ FOOTER ==== */
.footer { background: var(--ink); color: var(--white); padding-block: clamp(3rem, 8vh, 5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.footer__blurb { font-size: var(--t-small); color: rgba(255,255,255,.45); max-width: 34ch; margin-top: 1rem; line-height: 1.65; }
.footer__col h4 { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-weight: 600; }
.footer__col a { display: block; font-size: var(--t-small); color: rgba(255,255,255,.55); padding-block: .35rem; transition: color .3s, transform .3s; }
.footer__col a:hover { color: var(--gold); transform: translateX(3px); }
.footer__legal { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--t-micro); color: rgba(255,255,255,.32); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ======================================================== RESPONSIVE ==== */
@media (max-width: 1080px) {
  .fin__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  /* O `order: -1` jogava o plano destacado pro TOPO quando a grade vira uma
     coluna só. O destaque tem que ficar no MEIO, como no desktop: é a
     posição que faz o Pro ser lido como o equilíbrio entre os dois vizinhos.
     No topo ele vira "o primeiro da fila" e perde exatamente esse efeito —
     além de fazer o visitante ver o preço do meio antes do mais barato. */
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__burger { display: block; }
  .flow__steps { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .flow__line { display: none; }
  .show { height: 280vh; }   /* mesma proporção da redução de 8 -> 5 telas */
  .eco { height: 340vh; }
}

@media (max-width: 640px) {
  :root { --sec-y: clamp(3.5rem, 9vh, 5rem); }
  .hero__dash { grid-template-columns: 1fr 1fr; width: 92vw; max-height: none; }
  .hero__dash .dcard--hideSm { display: none; }
  .hero__stages { gap: .45rem; font-size: .58rem; letter-spacing: .1em; }
  .flow__steps { grid-template-columns: repeat(2, 1fr); }
  .flow__dot { width: 48px; height: 48px; font-size: .8rem; }

  /* "Na prática" deixa de ser um palco preso de uma tela no celular.
     Os seis passos em duas colunas dão três fileiras: com o cabeçalho e o
     botão o conteúdo pedia 946px dentro de uma caixa de 812px travada com
     overflow:hidden — e o excedente era cortado dos DOIS lados, escondendo
     o título atrás da barra de cima e os passos 05 e 06 embaixo.
     Solto, o conteúdo simplesmente cabe e rola. A animação que acende os
     passos continua: ela é disparada pelo scroll da seção, não pelo pino. */
  .flow { height: auto; }
  .flow__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: var(--sec-y);
  }
  .fin__cards { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .tf__labels { gap: .7rem; }
  /* a largura vem do calculo em main.js (--eco-card); aqui so a altura */
  .eco__card { min-height: 260px; }
  .browser__url { display: none; }
  .pillar { height: 150vh; }
  .show__nav button { padding: .3rem .6rem; }
}

/* ==================================================== TELAS BAIXAS ====
   Guarda por ALTURA, não por largura. Os palcos presos têm altura de uma
   tela e cortam o que passa disso — foi o que escondeu a manchete do bloco
   final e os passos do "Na prática". Num Android de 360x640 o bloco final
   ficava com só 18px de sobra: positivo, mas a um acento de distância de
   voltar a cortar. Aqui o respiro encolhe antes que o conteúdo estoure. */
@media (max-height: 700px) {
  .calm__stage { padding-block: clamp(3.4rem, 8vh, 4.4rem) 1rem; row-gap: .7rem; }
  .calm__sub { margin-top: .6rem; }
  .calm__actions { margin-top: 1.1rem; }
  .calm__trust { margin-top: .8rem; }
  .markmark { transform: scale(.72); }
}

/* ================================================== REDUCED MOTION ==== */
/* We never remove the story — we shorten the runway and drop the drift so
   the same timeline stays reachable without vestibular strain.            */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .steam i, .hero__hint i { animation: none; }
  .r-up, .r-fade { opacity: 1; transform: none; }
}

/* connector between ecosystem cards — the visible seam of one system */
.eco__link {
  flex: none;
  align-self: center;
  position: relative;
  width: clamp(14px, 2.2vw, 38px);
  height: 1px;
  background: linear-gradient(90deg, rgba(245,197,66,.08), rgba(245,197,66,.55), rgba(245,197,66,.08));
}
.eco__link::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(245,197,66,.9);
}

/* optional cinematic backdrop for a pillar (clip 2 lands here) */
.pillar__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.pillar__video.is-active { opacity: .55; }
.pillar__stage.has-video .pillar__canvas { opacity: .25; }

/* real product footage inside the browser frame, scrubbed by scroll */
.browser__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
  background: #0B1226;
}
.browser__video.is-active { opacity: 1; }

/* footer social row */
.footer__social { display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.footer__social a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-micro); letter-spacing: .04em;
  padding: .5rem .9rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.6);
  transition: color .3s, border-color .3s, background .3s;
}
.footer__social a:hover { color: var(--gold); border-color: var(--gold); background: rgba(255,193,7,.07); }

/* ============================================================ HERO INTRO ==
   Runs on load, with no scrolling and no JavaScript required.
   `both` fill keeps each element hidden through its delay, and if animations
   never run the element rests in its final, visible state — so the worst case
   is "no animation", never "empty screen".
   ========================================================================= */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lineUp   { from { transform: translateY(110%); }            to { transform: translateY(0); } }
@keyframes hudIn    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The copy container fades in as a whole (see .hero__copy). Only the HUD
   needs its own delay so the scroll invitation lands last. */
.hero__hud { animation: hudIn .80s var(--ease-out) .85s both; }

/* the scroll affordance has to read as an invitation, not decoration */
.hero__hint {
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.hero__hint i {
  width: 2px; height: 18px;
  background: linear-gradient(180deg, var(--gold), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy, .hero__hud { animation: none; }
}

/* ===================================================== READABILITY PASS ==
   Fixes from the design review: text was competing with the artwork behind
   it on narrow screens, and long labels were overflowing their chips.
   ========================================================================= */

/* On phones the pillar copy is full-width, so a side scrim does nothing —
   the artwork has to dim from the top instead. */
@media (max-width: 860px) {
  .pillar__canvas { opacity: .38; }
  .pillar__stage::after {
    background: linear-gradient(180deg,
      rgba(var(--scrim), .94) 0%,
      rgba(var(--scrim), .86) 45%,
      rgba(var(--scrim), .40) 72%,
      rgba(var(--scrim), 0)   100%);
  }
  .tf__node { white-space: normal; text-align: center; line-height: 1.35; }
}

/* The chips sit directly on the artwork, so they need their own ground. */
.pillar__items li {
  background: rgba(var(--scrim), .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* The support paragraph is the smallest text on a busy field — give it a
   touch more weight and contrast than a default body copy. */
.pillar__support { font-weight: 450; }
.pillar--2 .pillar__support,
.pillar--3 .pillar__support { color: rgba(255,255,255,.72); }

/* os dois CTAs do fluxo de vendas lado a lado */
.flow__cta { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ícone de cada rede, do tamanho da linha de texto */
.footer__social svg {
  width: 15px; height: 15px;
  flex: none;
  fill: currentColor;
}

/* O texto do card aparece INTEIRO. Antes havia um limite de 3 linhas que
   terminava a frase em "..." — e uma descrição cortada no meio é pior do
   que nenhuma: o leitor não recebe a informação e ainda fica com a sensação
   de que falta alguma coisa. Os textos em config.js foram encurtados para
   caber; o card cresce conforme o conteúdo. */

/* ============================================ ECOSSISTEMA EM JANELA BAIXA
   Num monitor de 620–780px de altura o cabeçalho comia o palco e sobravam
   215px para cards de 265px. O cabeçalho encolhe para devolver essa altura.
   ======================================================================= */
@media (max-height: 800px) {
  .eco__stage {
    row-gap: clamp(.5rem, 1.4vh, .9rem);
    padding-block: clamp(3.6rem, 8vh, 4.6rem) clamp(.8rem, 2vh, 1.2rem);
  }
  .eco__head h2 { font-size: clamp(1.15rem, 2.3vw, 1.7rem); margin-block: .35rem .3rem; }
  .eco__head .lead { font-size: .84rem; line-height: 1.45; }
  .eco__card { padding: clamp(.9rem, 1.5vw, 1.2rem); }
  .eco__card h3 { font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
}
@media (max-height: 660px) {
  .eco__head .lead { display: none; }
  /* nada de cortar o texto do card aqui: ganha-se altura escondendo o
     subtítulo da seção, não decepando a descrição do módulo */
  .eco__card p { font-size: .78rem; line-height: 1.45; }
}

/* Toque no celular (27/10/2026): sem a caixa azul translucida que o navegador desenha a cada toque em botao/link/cartao. O foco por teclado
   continua visivel (:focus-visible das paginas). Antes so o sistema (v3) tinha isto; a landing e o checkout nao. */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }