/* ==========================================================================
   EXACT SECURITY
   Direção: Industrial Emergency & Precision
   Rigor de prancha de engenharia + peso tático de operação de emergência.

   Regras estruturais desta folha:
   · Hairline é o divisor padrão. Card é exceção, não default.
   · Raio máximo 3px em superfície técnica. Botão 4px. Nada mais é arredondado.
   · Monoespaçada carrega dado, código, medida e carimbo. Nunca texto corrido.
   · O símbolo da marca não é bullet. Bullet é ícone semântico ou índice.
   ========================================================================== */

:root {
  --red-50:  #FDECEE;
  --red-100: #F9C8CD;
  --red-300: #EC7A85;
  --red-400: #E9515F;
  --red-500: #DE3C4B;
  --red-600: #C7303E;
  --red-700: #B32A38;
  --red-900: #7A1B24;

  --ink-900: #141204;
  --ink-880: #191710;
  --ink-850: #1F1D15;
  --ink-800: #23211A;
  --ink-700: #34322B;
  --ink-600: #4A4841;
  --ink-500: #63615A;
  --ink-400: #7C7A74;
  --ink-300: #A3A19C;
  --ink-200: #C7C5C0;

  /* Superfícies sólidas. Nada de gradiente linear como fundo de seção. */
  --paper:   #F6F7F8;   /* fundo de página, claro */
  --paper-2: #F0F1F3;   /* fundo alternado */
  --paper-3: #E6E8EB;   /* divisor forte */
  --paper-4: #D6D9DE;   /* traço de estado inativo */
  --surface: #FFFFFF;   /* card. Alternativa de marca: #FCFDF9 */
  --ink-void: #0B0C0E;  /* fundo de seção escura */

  /* sinalização operacional */
  --sig-ok:    #3F8F5B;
  --sig-warn:  #C08A16;
  --sig-alert: var(--red-500);

  /* Mapeados para a paleta Exact. Valores literais do spec, se preferir o
     slate neutro: --text: #0F172A; --text-muted: #475569; */
  --text:          var(--ink-900);
  --text-muted:    #4B5563;
  --text-inverse:  var(--paper);
  --accent:        var(--red-500);
  --accent-text:   var(--red-700);

  /* hairlines — o divisor padrão do sistema */
  --hair:      rgba(0, 0, 0, .08);
  --hair-soft: rgba(0, 0, 0, .05);
  --hair-inv:  rgba(252, 253, 249, .16);
  --hair-inv-soft: rgba(252, 253, 249, .08);

  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  /* monoespaçada permanece apenas em medida: rótulo de desenho, carimbo de
     prancha, timestamp e escala. Interface inteira é Jakarta. */
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-mega:    clamp(4rem, 1rem + 14vw, 11rem);
  --fs-display: clamp(2.125rem, 1.2rem + 4vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 1.28rem + 2.1vw, 2.625rem);
  --fs-h3:      clamp(1.1875rem, 1.12rem + 0.34vw, 1.4375rem);
  --fs-lead:    clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --fs-body:    clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;
  --fs-tag:     0.6875rem;

  /* Malha de 8. Toda medida de espaço sai desta escala; 4px só em ajuste
     óptico de ícone e detalhe. 16 agrupa o que é o mesmo conteúdo, 32 separa
     conteúdos diferentes. Hairline e sombra não entram na conta. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Altura de controle: botão, campo e item de lista saem daqui. */
  --ctl-sm: 40px;
  --ctl-md: 48px;
  --ctl-lg: 56px;
  --ctl-line: 24px;   /* line-height que fecha a conta da altura */

  --container: 1240px;
  --gutter: var(--sp-4);
  --section-y: var(--sp-20);

  --r-tech:  8px;
  --r-btn:   9999px;
  --r-card:  24px;
  --r-panel: 16px;

  /* Luz ambiente. Só em pseudo-elemento, nunca como fundo de seção.
     Exemplo do spec usa azul; aqui o halo é o vermelho da marca. */
  --glow-accent: radial-gradient(circle, rgba(222,60,75,.15) 0%, rgba(0,0,0,0) 70%);
  --glow-warm:   radial-gradient(circle, rgba(222,60,75,.10) 0%, rgba(0,0,0,0) 70%);
  --glow-cool:   radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(0,0,0,0) 70%);

  --shadow-card:   0 4px 20px -2px rgba(0,0,0,.03), 0 12px 30px -4px rgba(0,0,0,.04);
  --shadow-raised: 0 6px 24px -4px rgba(0,0,0,.05), 0 20px 46px -10px rgba(0,0,0,.08);
  --shadow-nav:    0 20px 40px -15px rgba(0,0,0,.05);
  --shadow-glow:   0 10px 28px -10px rgba(222,60,75,.45);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: var(--sp-16);
}

@media (min-width: 900px) {
  :root { --gutter: var(--sp-10); --section-y: var(--sp-32); }
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior: smooth entra em conflito com o pin do ScrollTrigger e
     realimenta o scroll. A rolagem suave das âncoras é feita no JS. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* impede a ancoragem automática do navegador de disputar posição com o pin */
  overflow-anchor: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0; line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}

a { color: var(--accent-text); text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-dark :focus-visible, .sec--dark :focus-visible, .hero :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 300;
  background: var(--ink-900); color: var(--paper);
  padding: 12px 24px; font-family: var(--font-mono);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; transition: top 160ms var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- layout -- */

.wrap {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
  position: relative;
}
.wrap--wide { max-width: 1440px; }

.sec { padding-block: var(--section-y); position: relative; isolation: isolate; }
.sec--light { background: var(--paper); }
.sec--light-2 { background: var(--paper-2); }
.sec--dark { background: var(--ink-void); color: #E4E6E9; }
.sec--dark h2, .sec--dark h3 { color: #F7F8F9; }
.sec--alert { background: var(--red-600); color: #fff; }
.sec--alert h2 { color: #fff; }

/* Passagem entre dobras: só a troca de superfície. Sem halo radial. */

/* ---------------------------------------------------- primitivas mono -- */

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}

/* rótulo de seção: índice + traço + nome. Substitui o eyebrow em pílula. */
.slug {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-500);
  margin: 0 0 24px;
  padding: 8px 16px;
  border: 1px solid var(--hair);
  border-radius: var(--r-btn);
  background: rgba(255,255,255,.6);
}
.sec--dark .slug { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.sec--alert .slug { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.sec--dark .slug, .sec--alert .slug { color: var(--ink-300); }
.sec--alert .slug { color: rgba(252,253,249,.7); }
.slug b { font-weight: 500; color: var(--accent); }
.sec--alert .slug b { color: var(--paper); }


/* LED de status operacional */
.led {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--sig-ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-ok) 18%, transparent);
}
.led--alert { background: var(--sig-alert); box-shadow: 0 0 0 3px rgba(222,60,75,.2); animation: pulse 2.4s infinite; }
.led--warn  { background: var(--sig-warn); box-shadow: 0 0 0 3px rgba(192,138,22,.2); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* chip de código técnico */
.code {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: 4px 12px; border: 1px solid var(--hair);
  border-radius: var(--r-btn); color: var(--ink-500);
  background: transparent; white-space: nowrap;
}
.sec--dark .code { border-color: var(--hair-inv); color: var(--ink-300); }
.code--alert { border-color: rgba(222,60,75,.42); color: var(--accent-text); background: var(--red-50); }
.sec--dark .code--alert { color: var(--red-300); background: rgba(222,60,75,.1); border-color: rgba(222,60,75,.4); }
.code--ok { border-color: rgba(63,143,91,.42); color: var(--sig-ok); }

/* faixa de sinalização de risco, usada com parcimônia */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(-45deg,
    var(--accent) 0 10px, transparent 10px 20px);
  opacity: .9;
}

/* ícone técnico de linha */
.ic { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none;
      stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.ic--lg { width: 30px; height: 30px; stroke-width: 1.1; }

/* ------------------------------------------------------- tipo e ritmo -- */

.h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.6; color: var(--text-muted); }
.sec--dark .lead { color: var(--ink-300); }
.sec--alert .lead { color: rgba(252,253,249,.88); }
.measure { max-width: 60ch; }

.head { margin-bottom: 56px; }
.head .lead { margin-top: 24px; }
@media (min-width: 900px) {
  .head--split {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px; align-items: start; margin-bottom: 72px;
  }
  .head--split .lead { margin-top: 8px; }
}

/* número-âncora: métrica em display massivo */
.metric { display: flex; align-items: flex-start; gap: 16px; }
.metric__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-mega); line-height: .82; letter-spacing: -.06em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.metric__side { padding-top: .5em; border-left: 1px solid var(--hair); padding-left: 16px; }
.sec--dark .metric__side { border-left-color: var(--hair-inv); }
.metric__u {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400);
  display: block; margin-bottom: 8px;
}
.metric__d { font-size: var(--fs-small); color: var(--text-muted); max-width: 24ch; }
.sec--dark .metric__d { color: var(--ink-300); }

/* ------------------------------------------------------------ botões -- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  /* altura = padding vertical × 2 + line-height = 16 + 16 + 24 = 56px */
  line-height: var(--ctl-line);
  padding: var(--sp-4) var(--sp-6); border-radius: 12px;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  font-weight: 500; letter-spacing: -.01em;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), box-shadow 180ms var(--ease),
              transform 180ms var(--ease);
}
.btn > * { position: relative; z-index: 1; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--red-600); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn--primary:active { transform: none; }

.btn--outline { background: transparent; border-color: var(--ink-900); color: var(--ink-900); }
.btn--outline:hover { background: var(--ink-900); color: var(--paper); }

.btn--ghost {
  background: rgba(252,253,249,.06); border-color: rgba(252,253,249,.34); color: var(--paper);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--ghost:hover { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }

.sec--dark .btn--outline { border-color: var(--hair-inv); color: var(--paper); }
.sec--dark .btn--outline:hover { background: var(--paper); color: var(--ink-900); }
.sec--alert .btn--primary { background: var(--paper); color: var(--red-700); }
.sec--alert .btn--primary:hover { background: var(--paper); box-shadow: 0 14px 32px -14px rgba(20,18,4,.7); }

/* altura = 8 + 8 + 24 = 40px */
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: .875rem; line-height: var(--ctl-line); border-radius: 9999px; }
.btn .arrow { transition: transform 200ms var(--ease); flex: none; }
.btn:hover .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------ header -- */

/* Pílula flutuante em vidro. Sobre o hero escuro usa o vidro escuro;
   ao entrar no corpo claro da página, troca para o vidro claro. */
.header {
  position: fixed; top: var(--sp-6); left: 50%; transform: translateX(-50%);
  width: 90%; max-width: 1100px; z-index: 100;
  display: flex; align-items: center;
  /* altura = 12 + 12 + 40 (altura do CTA) = 64px = --header-h */
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6);
  border-radius: 9999px;
  background: rgba(15, 17, 21, .65);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-nav);
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease),
              box-shadow 320ms var(--ease);
}
.header.is-stuck {
  background: rgba(255, 255, 255, .75);
  border-color: rgba(0, 0, 0, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: rgba(15, 17, 21, .94); }
  .header.is-stuck { background: rgba(255, 255, 255, .97); }
}

.header .wrap { display: flex; align-items: center; gap: 24px; max-width: none; padding-inline: 0; }
.header__logo { flex: none; display: block; position: relative; height: 24px; }
.header__logo img { height: 24px; width: auto; transition: opacity 320ms var(--ease); }
.header__logo img + img { position: absolute; inset: 0; }
.header__logo .logo-dark { opacity: 0; }
.header.is-stuck .logo-dark { opacity: 1; }
.header.is-stuck .logo-light { opacity: 0; }

.header__nav { display: none; margin-left: auto; }
@media (min-width: 1100px) { .header__nav { display: flex; gap: 4px; align-items: center; } }
.header__nav a {
  font-family: var(--font-body); font-size: .875rem;
  letter-spacing: -.01em; font-weight: 500;
  color: rgba(255,255,255,.72); text-decoration: none;
  position: relative; padding: var(--sp-2) var(--sp-3); line-height: var(--ctl-line); border-radius: 9999px;
  transition: color 240ms var(--ease), background-color 240ms var(--ease);
}
.header.is-stuck .header__nav a { color: #52525B; }
.header__nav a:hover { background: rgba(255,255,255,.08); }
.header.is-stuck .header__nav a:hover { background: rgba(0,0,0,.045); }
.header__nav a:hover { color: #fff; }
.header.is-stuck .header__nav a:hover { color: var(--text); }

/* CTA sempre visível: numa pílula flutuante ele é o único ponto de ação */
.header__cta {
  margin-left: auto; flex: none;
  padding: var(--sp-2) var(--sp-4); font-size: .875rem; font-weight: 500;
  line-height: var(--ctl-line); letter-spacing: -.01em; border-radius: 9999px;
  background: var(--accent); color: #fff; border: 0;
  box-shadow: none;
}
.header__cta:hover { background: var(--red-600); transform: none; box-shadow: var(--shadow-glow); }
.header__cta::after { display: none; }

/* ================================================================ HERO */

.hero { position: relative; background: var(--ink-900); }
.hero__stage {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 900ms var(--ease);
}
.hero__media video.is-ready { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(20,18,4,.96) 0%, rgba(20,18,4,.78) 32%, rgba(20,18,4,.4) 64%, rgba(20,18,4,.6) 100%),
    linear-gradient(100deg, rgba(20,18,4,.88) 0%, rgba(20,18,4,.5) 44%, transparent 70%);
}

/* retícula de precisão sobre a imagem: leitura de instrumento, não decoração */
.hero__grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, var(--hair-inv-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair-inv-soft) 1px, transparent 1px);
  background-size: 90px 90px;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 70%, #000 10%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 20% 70%, #000 10%, transparent 72%);
}

.hero__inner {
  position: relative; z-index: 3; width: 100%;
  padding-top: calc(var(--header-h) + 64px); padding-bottom: 0;
  will-change: transform, opacity;
}

.hero__status {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: rgba(252,253,249,.62); margin-bottom: 32px;
}
.hero__status .sep { width: 1px; height: 12px; background: var(--hair-inv); }

.hero__title {
  font-size: var(--fs-display); font-weight: 800;
  line-height: 1.04; letter-spacing: -.04em;
  color: var(--paper); max-width: 17ch; margin-bottom: 24px;
}
.hero__title em { font-style: normal; color: var(--red-400); }
.hero__title .hour {
  font-family: var(--font-mono); font-weight: 500;
  font-size: .72em; letter-spacing: -.02em;
  padding: 0 .12em; border-bottom: 3px solid var(--accent);
}

.hero__sub { font-size: var(--fs-lead); line-height: 1.58; color: rgba(252,253,249,.8); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* barra de dados do hero: hairlines verticais, zero caixa */
.hero__data {
  margin-top: 56px;
  border-top: 1px solid var(--hair-inv);
  display: grid; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .hero__data { grid-template-columns: repeat(4, 1fr); } }
.hero__data div {
  padding: 24px 24px 24px 0;
  border-right: 1px solid var(--hair-inv);
  border-bottom: 1px solid var(--hair-inv);
}
@media (min-width: 760px) {
  .hero__data div { border-bottom: 0; }
  .hero__data div:last-child { border-right: 0; }
}
.hero__data div:nth-child(2n) { padding-left: 24px; }
@media (min-width: 760px) { .hero__data div + div { padding-left: 24px; } }
.hero__data dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(252,253,249,.48); margin-bottom: 12px;
}
.hero__data dd {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 1.75rem; letter-spacing: -.03em; color: var(--paper); line-height: 1;
}
.hero__data dd small {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-micro); letter-spacing: 0; color: rgba(252,253,249,.55);
  margin-top: 8px; text-transform: none;
}

.hero__cue {
  position: absolute; z-index: 4; right: var(--gutter); bottom: 26px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(252,253,249,.45); text-decoration: none;
}
.hero__cue i { width: 46px; height: 1px; background: rgba(252,253,249,.25); position: relative; overflow: hidden; }
.hero__cue i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: var(--accent); animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateX(-110%); } 60%,100% { transform: translateX(260%); } }
@media (max-width: 900px) { .hero__cue { display: none; } }

/* ==================================================== 02 · O PROBLEMA */

/* cronômetro de propagação — a métrica que abre a seção */
.clock {
  display: grid; gap: 8px;
  font-family: var(--font-mono); color: var(--paper);
}
.clock__t {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.25rem, 1rem + 10vw, 7.5rem);
  line-height: .84; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; color: var(--paper);
  display: flex; align-items: baseline; gap: .08em;
}
.clock__t b { color: var(--accent); font-weight: 800; }
.clock__c { font-size: var(--fs-tag); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); }

.note {
  margin-top: 48px; padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-size: var(--fs-lead); line-height: 1.55; max-width: 62ch;
}

/* ------------------------------------------------- planta e desenhos -- */

.plate { margin: 0; }
.plate__top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-500);
}
.sec--dark .plate__top { border-bottom-color: var(--hair-inv); color: var(--ink-400); }
.plate__top .sp { flex: 1; }
.plate__art {
  border: 1px solid var(--hair); border-top: 0;
  background:
    linear-gradient(to right, var(--hair-soft) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, var(--hair-soft) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--paper);
}
.sec--dark .plate__art {
  border-color: var(--hair-inv);
  background:
    linear-gradient(to right, var(--hair-inv-soft) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, var(--hair-inv-soft) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--ink-880);
}
.plate__art svg { width: 100%; height: auto; }
.plate figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400);
  display: flex; flex-wrap: wrap; gap: 8px 24px;
}
.plate figcaption span { display: flex; align-items: center; gap: 8px; }
.plate figcaption b { width: 10px; height: 10px; flex: none; }

/* ==================================================== 03 · ABORDAGEM */

.phase {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-500); margin: 0 0 8px;
  padding-top: 24px; border-top: 1px solid var(--ink-900);
}
.phase--pre { color: var(--accent-text); border-top-color: var(--accent); }
.phase span { margin-left: auto; color: var(--ink-400); letter-spacing: .08em; }

.steps { margin: 0 0 56px; }
.steps li {
  display: grid; gap: 4px 24px;
  padding: 24px 0; border-bottom: 1px solid var(--hair);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .steps li { grid-template-columns: 84px minmax(0, 300px) minmax(0, 1fr); align-items: baseline; padding: 32px 0; }
}
.steps .n {
  font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500;
  letter-spacing: .06em; color: var(--ink-300);
  transition: color 420ms var(--ease);
}
.steps li.is-on .n { color: var(--accent); }
.steps h3 { transition: color 420ms var(--ease); }
.steps p { margin: 0; color: var(--text-muted); }
.steps li.is-on { background: linear-gradient(to right, rgba(222,60,75,.045), transparent 42%); }

/* ==================================================== 05 · CONTINUIDADE */

.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .split--rev > :first-child { order: 2; }
}
.shot { position: relative; margin: 0; overflow: hidden; background: var(--ink-800); }
.shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.shot--tall { aspect-ratio: 3 / 4; }
.shot--wide { aspect-ratio: 4 / 3; }
.shot__tag {
  position: absolute; z-index: 2; left: 0; bottom: 0; right: 0;
  padding: 16px 24px; color: var(--paper);
  background: linear-gradient(to top, rgba(20,18,4,.9), transparent);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.shot__crop {
  position: absolute; z-index: 2; inset: 14px; pointer-events: none;
  border: 1px solid rgba(252,253,249,.22);
  clip-path: polygon(0 0,34px 0,34px 1px,1px 1px,1px 34px,0 34px,
                     0 100%,34px 100%,34px calc(100% - 1px),1px calc(100% - 1px),1px calc(100% - 34px),0 calc(100% - 34px),
                     100% 100%,calc(100% - 34px) 100%,calc(100% - 34px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 34px),100% calc(100% - 34px),
                     100% 0,calc(100% - 34px) 0,calc(100% - 34px) 1px,calc(100% - 1px) 1px,calc(100% - 1px) 34px,100% 34px);
}

/* tabela comparativa tática */
.ttable { margin-top: 56px; font-size: var(--fs-small); }
.ttable caption {
  text-align: left; padding-bottom: 16px;
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500);
}
.ttable th, .ttable td { padding: 16px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.ttable thead th {
  font-family: var(--font-mono); font-size: var(--fs-tag); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500);
  border-bottom: 1px solid var(--ink-900);
}
.ttable tbody th { font-weight: 500; color: var(--ink-800); width: 30%; padding-left: 0; }
.ttable td:first-of-type { color: var(--ink-500); }
.ttable .own { background: rgba(222,60,75,.05); color: var(--ink-900); font-weight: 500; }
.ttable thead th.own { color: var(--accent-text); border-bottom-color: var(--accent); }
@media (max-width: 700px) {
  .ttable, .ttable tbody, .ttable tr, .ttable th, .ttable td { display: block; width: auto; }
  .ttable thead { display: none; }
  .ttable tr { border-bottom: 1px solid var(--hair); padding-block: 12px; }
  .ttable th, .ttable td { border: 0; padding: 4px 0; }
  .ttable td::before { content: attr(data-h) " · "; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
}

/* ==================================================== 08 · APLICAÇÕES */

.apps { border-top: 1px solid var(--ink-900); }
.apps li {
  display: grid; gap: 8px 24px; padding: 32px 0;
  border-bottom: 1px solid var(--hair);
  grid-template-columns: 1fr;
  transition: background 300ms var(--ease), padding-left 300ms var(--ease);
}
@media (min-width: 860px) {
  .apps li { grid-template-columns: 44px minmax(0, 250px) minmax(0, 1fr) 190px; align-items: center; gap: 32px; }
}
.apps li:hover { background: linear-gradient(to right, rgba(222,60,75,.06), transparent 60%); }
@media (min-width: 860px) { .apps li:hover { padding-left: 16px; } }
.apps .ic { color: var(--ink-300); transition: color 240ms var(--ease); }
.apps li:hover .ic { color: var(--accent); }
.apps h3 { font-size: 1.1875rem; }
.apps p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.apps .spec {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400); justify-self: start;
}
@media (min-width: 860px) { .apps .spec { justify-self: end; text-align: right; } }

.sec--dark .apps { border-top-color: var(--hair-inv); }
.sec--dark .apps li { border-bottom-color: var(--hair-inv); }
.sec--dark .apps p { color: var(--ink-300); }
.sec--dark .apps .ic { color: var(--ink-400); }
.sec--dark .apps .spec { color: var(--ink-500); }

/* ==================================================== 09 · QUALIFICAÇÃO */

.specs { border-top: 1px solid var(--ink-900); }
.specs > div {
  display: grid; gap: 8px 32px; padding: 24px 0;
  border-bottom: 1px solid var(--hair); grid-template-columns: 1fr;
}
@media (min-width: 860px) { .specs > div { grid-template-columns: 200px minmax(0, 1fr) 120px; align-items: baseline; } }
.specs dt { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; letter-spacing: .04em; color: var(--ink-900); }
.specs dd { margin: 0; color: var(--text-muted); }
.specs .code { justify-self: start; }
@media (min-width: 860px) { .specs .code { justify-self: end; } }

/* ==================================================== 11 · PROVA */

/* Pilha 3D: os três cards ocupam a mesma célula do grid, então o palco
   ganha a altura do mais alto e nenhum salta de tamanho na troca. */

#prova .h2 { color: #111827; }
#prova .lead { color: #6B7280; }

.deck { position: relative; margin-top: 8px; overflow: hidden; padding-block: 24px; }
.deck__stage {
  --tw: min(34rem, 46vw);
  position: relative;
  display: grid; justify-content: center;
  width: var(--tw); margin-inline: auto;
  perspective: 1200px;
}
.deck__stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 20px; border-radius: 28px; }

.tcard {
  grid-area: 1 / 1; width: var(--tw);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 25px -5px rgba(17,24,39,.10), 0 8px 10px -6px rgba(17,24,39,.10);
  transition: transform .5s cubic-bezier(.4,0,.2,1),
              opacity .5s cubic-bezier(.4,0,.2,1),
              filter .5s cubic-bezier(.4,0,.2,1);
  will-change: transform, opacity, filter;
}

.tcard.is-active { transform: scale(1) translateX(0); opacity: 1; filter: blur(0px); z-index: 10; cursor: pointer; }
.tcard.is-next   { transform: scale(.85) translateX(60%);  opacity: .4; filter: blur(4px); z-index: 5; cursor: pointer; }
.tcard.is-prev   { transform: scale(.85) translateX(-60%); opacity: .4; filter: blur(4px); z-index: 5; cursor: pointer; }
.tcard.is-out    { transform: scale(.8); opacity: 0; filter: blur(6px); z-index: 1; pointer-events: none; }

/* linha 1 · avaliação */
.tcard__stars {
  margin: 0 0 20px;
  font-size: 1.125rem; letter-spacing: .12em; line-height: 1;
  color: #F59E0B;
}

/* linha 2 · autor */
.tcard__who { display: flex; align-items: center; gap: 12px; }
.tcard__av {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: #F3F4F6; border: 1px solid #E5E7EB;
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em;
  color: #6B7280;
}
.tcard__av img { width: 100%; height: 100%; object-fit: cover; }
.tcard__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcard__id b { font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.3; }
.tcard__id span { font-size: .875rem; color: #6B7280; line-height: 1.35; }

/* linha 3 · depoimento */
.tcard__txt {
  margin: 16px 0 0;
  font-size: 1rem; line-height: 1.625; color: #374151;
}

.deck__hint {
  margin: 24px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: .14em; text-transform: uppercase; color: #9CA3AF;
}

/* Abaixo de 768px não há largura para a pilha: fica só o card ativo, que
   continua avançando no toque. */
@media (max-width: 767px) {
  .deck__stage { --tw: 100%; }
  .tcard { padding: 24px; }
  .tcard.is-next, .tcard.is-prev { opacity: 0; pointer-events: none; transform: scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .tcard { transition: opacity .2s linear; }
}

/* ==================================================== 13 · CTA */

.cta { text-align: left; overflow: hidden; }
.cta__grid {
  position: absolute; inset: 0; z-index: -1; opacity: .16; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(252,253,249,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252,253,249,.5) 1px, transparent 1px);
  background-size: 72px 72px;
  will-change: transform;
}
/* retrato recortado no símbolo da marca: ocupa a coluna inteira ao lado do
   bloco de texto, na proporção 6/6 da dobra */
.cta__fig {
  margin: 0; display: flex; justify-content: center; width: 100%;
}
.cta__fig img {
  width: min(380px, 82vw); height: auto; display: block;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .28));
}
@media (min-width: 900px) {
  /* a figura preenche a coluna inteira: metade da dobra é dela */
  .cta__fig img { width: 100%; max-width: none; }
}

.cta__inner { display: grid; gap: 40px; align-items: end; }
@media (min-width: 900px) { .cta__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
/* o título fecha em duas linhas: "Comece pela avaliação / da sua operação." */
.cta .h2 { max-width: 22ch; text-wrap: balance; }
.cta p { font-size: var(--fs-lead); color: rgba(252,253,249,.9); max-width: 46ch; }
.cta__act { display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
/* o botão fecha a coluna de texto: 32 separa conteúdos diferentes */
.cta__inner .btn { margin-top: var(--sp-8); }
.cta__meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(252,253,249,.66);
  display: flex; align-items: center; gap: 8px;
}

/* ==================================================== 14 · RODAPÉ */

.foot { background: var(--ink-900); color: var(--ink-300); padding-block: 64px 24px; font-size: var(--fs-small); }
.foot__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.foot__logo img { height: 34px; width: auto; margin-bottom: 24px; }
.foot p { line-height: 1.7; max-width: 44ch; }
.foot h4 {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400);
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hair-inv);
}
.foot ul { display: grid; gap: 12px; }
.foot a { color: var(--ink-300); text-decoration: none; transition: color 180ms var(--ease); }
.foot a:hover { color: var(--paper); text-decoration: underline; }
.foot button.lnk { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-300); font-size: inherit; text-align: left; }
.foot button.lnk:hover { color: var(--paper); text-decoration: underline; }
.foot__end {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair-inv);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500);
}
.foot__end ul { display: flex; flex-wrap: wrap; gap: 24px; }

/* ==================================================== POPUP */

.rv { opacity: 0; transform: translateY(14px); }
.hero-in { opacity: 0; transform: translateY(20px); }
.no-js .rv, .no-js .hero-in, .is-in { opacity: 1; transform: none; }

@media (max-width: 700px) {
  /* a linha de status vira uma frase só: três blocos com separadores quebram
     em colunas desalinhadas na largura de celular */
  .hero__status .sep, .hero__status .opt { display: none; }
}

@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .cta__act .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv, .hero-in { opacity: 1 !important; transform: none !important; }
  .shot img { transform: none; }
  .btn:hover { transform: none; }
}

@media print {
  .header, .pop, .pop-bg, .hero__media, .hero__scrim, .hero__grid, .hero__cue { display: none !important; }
  .rv, .hero-in { opacity: 1; transform: none; }
  .sec--dark, .sec--alert, .hero { background: #fff !important; color: #000 !important; }
  .hero__stage { min-height: auto; }
  .hero__title, .hero__sub { color: #000 !important; }
}

/* ---------------------------------------------- rótulos dentro de SVG -- */

.plan-l text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; }

/* ==========================================================================
   MÓDULO A · SCROLLYTELLING DA SEÇÃO 01
   Canvas fixado de 300vh. Abaixo de 900px tudo volta a fluir empilhado.
   ========================================================================== */

.scrolly { padding-block: 0; }
.scrolly__wrap { position: relative; }
.scrolly__canvas { position: relative; }

.scrolly__hud,
.scrolly__prog { display: none; }

.scrolly__stage { position: relative; }

.layer { margin-bottom: 64px; }
.layer:last-child { margin-bottom: 0; }
.layer__cap { color: var(--ink-500); margin: 0 0 16px; display: block; }

.scrolly__plan { margin-bottom: 64px; }

/* --------------------------------------------------- versão fixada --- */

@media (min-width: 900px) {
  .scrolly { padding-block: 0; }

  .scrolly__canvas {
    height: 100vh; height: 100svh;
    overflow: hidden;
    display: flex; align-items: center;
    padding-block: calc(var(--header-h) + 32px) 56px;
  }

  .scrolly__stage {
    --card-w: min(28rem, 32vw);
    position: relative;
    width: 100%; max-width: var(--container);
    margin-inline: auto; padding-inline: var(--gutter);
    height: 100%;
  }

  /* HUD superior */
  .scrolly__hud {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    position: absolute; z-index: 4;
    top: calc(var(--header-h) + var(--sp-6)); left: 50%; translate: -50% 0;
    width: 100%; max-width: var(--container); padding-inline: var(--gutter);
  }
  .scrolly__hud .slug { margin: 0; }
  .scrolly__hud .slug::after { display: none; }
  .scrolly__phase {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-family: var(--font-mono); font-size: var(--fs-tag);
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300);
  }

  /* barra de progresso lateral */
  .scrolly__prog {
    display: flex; align-items: center; gap: 12px;
    position: absolute; z-index: 4;
    left: 50%; translate: -50% 0; bottom: 26px;
    width: 100%; max-width: var(--container); padding-inline: var(--gutter);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500);
  }
  .scrolly__prog-t { flex: 1; height: 2px; background: var(--hair-inv); position: relative; }
  .scrolly__prog-t i {
    position: absolute; inset: 0 auto 0 0; width: 0;
    background: linear-gradient(90deg, var(--red-700), var(--red-400));
    box-shadow: 0 0 12px rgba(222,60,75,.6);
  }

  /* a planta ocupa a faixa direita do palco: a coluna que o painel de alerta
     usa fica reservada, então card e desenho nunca se sobrepõem */
  .scrolly__plan {
    position: absolute; inset: 0 0 0 auto; margin: 0;
    width: calc(100% - var(--card-w));
    display: flex; flex-direction: column; justify-content: center;
    padding-inline: var(--gutter);
    will-change: opacity, transform;
  }
  /* a arte ocupa a altura que sobrar do palco em vez de uma fração fixa da
     viewport: em tela baixa ela encolhe junto e nada transborda do pin */
  .scrolly__plan .plate__art { flex: 0 1 auto; min-height: 0; display: flex; }
  .scrolly__plan .plate__art svg { width: 100%; height: auto; max-height: 100%; }

  /* camadas sobrepostas */
  .layer {
    position: absolute; z-index: 3; margin: 0;
    will-change: opacity, transform;
  }
  .layer.layer--alert {
    left: var(--gutter); top: 0; bottom: 0;
    margin-block: auto; height: fit-content;
    width: var(--card-w);
    padding: 24px 32px;
    background: linear-gradient(100deg, rgba(20,18,4,.92), rgba(20,18,4,.66));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-left: 2px solid var(--accent);
  }
  .layer--alert .h2 { font-size: clamp(1.5rem, .9rem + 1.4vw, 2.125rem); margin-top: 24px; }
  .layer--alert .lead { margin-top: 16px; font-size: 1rem; }
  .layer--alert .clock__t { font-size: clamp(3rem, 1.4rem + 6vw, 5.5rem); }

  .layer.layer--end {
    inset: 0; margin: auto; height: fit-content;
    width: min(46rem, 76vw);
    padding: 40px 48px;
    background: rgba(13,13,12,.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--hair-inv);
    border-left: 2px solid var(--accent);
  }
  .layer--end .note { border-left: 0; padding-left: 0; margin-top: 0; }
}

/* palco baixo (notebook 768–900px de altura): o painel de alerta e a
   conclusão encolhem para caber dentro do canvas fixado sem serem cortados */
@media (min-width: 900px) and (max-height: 860px) {
  .scrolly__canvas { padding-block: calc(var(--header-h) + 20px) 44px; }
  .layer--alert { padding: 20px 24px; }
  .layer--alert .clock__t { font-size: clamp(2.5rem, 6.5vh, 4rem); }
  .layer--alert .h2 { font-size: clamp(1.25rem, 3vh, 1.75rem); margin-top: 16px; }
  .layer--alert .lead { font-size: .9375rem; margin-top: 12px; }
  .layer--end { padding: 28px 32px; width: min(42rem, 68vw); }
  .layer--end .note { font-size: 1rem; }
  .plate figcaption { row-gap: 6px; }

}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  /* sem pin e sem scrub: o canvas volta a ser conteúdo empilhado */
  .scrolly__canvas { height: auto; overflow: visible; display: block; padding-block: var(--section-y); }
  .scrolly__stage { height: auto; }
  .scrolly__plan, .layer { position: static; inset: auto; translate: none; width: auto; max-width: none; }
  .scrolly__plan { margin-bottom: 56px; }
  .layer { margin-bottom: 56px; background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .layer--alert { border-left: 2px solid var(--accent); padding-left: 24px; }
  .scrolly__hud, .scrolly__prog { display: none; }
}

/* ==========================================================================
   MÓDULO B · PIPELINE HORIZONTAL DA SEÇÃO 02
   ========================================================================== */

.pipe { padding-block: 0; overflow: hidden; }
.pipe__viewport { position: relative; }

.pipeline-track {
  display: grid; gap: 0;
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
}

.pipe__rail { display: none; }

.pipe__intro { max-width: 46rem; margin-bottom: 56px; }
.pipe__intro .lead { margin-top: 16px; }
.pipe__hint { display: none; }

.node {
  position: relative;
  padding: 24px 0 24px 32px;
  border-top: 1px solid var(--hair);
}
.node:last-of-type { border-bottom: 1px solid var(--hair); }
.node__dot {
  position: absolute; left: 0; top: 34px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--paper-4);
  transition: background 320ms var(--ease), border-color 320ms var(--ease),
              scale 320ms var(--ease), box-shadow 320ms var(--ease);
}
.node__n {
  display: block; font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: .06em; color: var(--ink-300); margin-bottom: 8px;
  transition: color 320ms var(--ease);
}
.node__badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500);
  border: 1px solid var(--hair); padding: 3px 8px; border-radius: var(--r-tech);
  margin-bottom: 12px;
}
.node__t { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 8px; }
.node__d { margin: 0; color: var(--text-muted); font-size: var(--fs-small); max-width: 46ch; }

.node--live .node__badge { border-color: rgba(63,143,91,.4); color: var(--sig-ok); }
.node--live .node__badge .led { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(63,143,91,.2); }

.node.active .node__dot {
  background: var(--accent); border-color: var(--accent);
  scale: 1.3; box-shadow: 0 0 0 5px rgba(222,60,75,.16);
}
.node.active .node__n { color: var(--accent); }
.node--live.active .node__dot {
  background: var(--sig-ok); border-color: var(--sig-ok);
  box-shadow: 0 0 0 5px rgba(63,143,91,.18);
}

.gate {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 0; margin: 8px 0;
  border-block: 1px solid var(--ink-900);
}
.gate__stripe {
  flex: 1; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--ink-900) 0 8px, transparent 8px 16px);
  opacity: .8;
}
.gate__label {
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-900);
  white-space: nowrap; font-weight: 500;
}

.pipe__end { padding-top: 48px; }
.pipe__end-cap { color: var(--ink-500); display: block; margin-bottom: 16px; }
.pipe__end-t {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h3); letter-spacing: -.02em;
  max-width: 24ch; margin-bottom: 24px;
}

/* ------------------------------------------------- versão horizontal --- */

@media (min-width: 900px) {
  .pipe__viewport { height: 100vh; height: 100svh; overflow: hidden; }

  .pipeline-track {
    position: relative;
    display: flex; align-items: center;
    height: 100%;
    width: max-content;
    padding-block: 0;
    padding-left: clamp(48px, 6vw, 120px);
    /* folga extra à direita: sem ela o pin solta antes de o painel final
       chegar ao centro da tela */
    padding-right: clamp(176px, 26vw, 464px);
    gap: clamp(56px, 6vw, 104px);
    will-change: transform;
  }

  /* trilho condutor atravessando todos os nós */
  .pipe__rail {
    display: block; position: absolute; z-index: 0;
    left: 0; right: 0; top: 50%; translate: 0 -50%;
    width: 100%; height: 4px;
  }
  .pipe__rail-bg { stroke: var(--paper-4); stroke-width: 1.5; }
  .pipe__rail-fill {
    stroke: #E52E3D; stroke-width: 2.5;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    filter: drop-shadow(0 0 6px rgba(229,46,61,.75)) drop-shadow(0 0 14px rgba(229,46,61,.4));
  }

  .pipe__intro {
    position: relative; z-index: 1;
    flex: none; width: min(38rem, 42vw); margin-bottom: 0;
    background: var(--paper); padding-right: 32px;
  }
  .pipe__hint {
    display: flex; align-items: center; gap: 8px;
    margin-top: 32px; color: var(--ink-400);
  }
  .pipe__hint .ic { stroke-width: 1.4; }

  .node {
    position: relative; z-index: 1;
    flex: none; width: clamp(17rem, 21vw, 21rem);
    padding: 0; border: 0;
    display: flex; flex-direction: column;
    align-self: center;
  }
  .node:last-of-type { border-bottom: 0; }

  /* Os sete nós nascem alinhados sobre o trilho. O realce de hover e de nó
     ativo usa transform; translate fica livre. */
  .node {
    min-height: 15rem; justify-content: center;
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .node__dot { left: -7px; top: 50%; margin-top: -6.4px; width: 13px; height: 13px; }

  .node__n {
    font-family: var(--font-display); font-weight: 800;
    font-size: 2.75rem; line-height: 1; letter-spacing: -.05em;
    color: var(--paper-4); margin-bottom: 16px;
  }
  .node.active .node__n { color: var(--accent); }
  .node--live.active .node__n { color: var(--sig-ok); }

  /* 01–04 leem como análise: retícula fina de fundo */
  .node--blueprint, .node--live {
    padding: 24px 24px 32px;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .node--blueprint:hover, .node--live:hover,
  .node--blueprint.active, .node--live.active {
    transform: translateY(-2px);   /* compõe com translate, não o substitui */
    box-shadow: var(--shadow-raised);
  }
  /* halo ambiente atrás do nó ativo */
  .node::before {
    content: ""; position: absolute; z-index: -1; inset: 24% -2%;
    border-radius: 50%; background: var(--glow-warm);
    filter: blur(60px); opacity: 0;
    transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .node.active::before { opacity: 1; }
  .node--live.active::before {
    background: radial-gradient(circle, rgba(63,143,91,.16) 0%, rgba(0,0,0,0) 70%);
  }

  .gate {
    position: relative; z-index: 1;
    flex: none; align-self: stretch;
    flex-direction: column; justify-content: center;
    gap: 16px; padding: 0 8px; margin: 0;
    border-block: 0;
    width: 6.5rem;
  }
  .gate__stripe { width: 10px; flex: 1 1 auto; height: auto; }
  .gate__label {
    writing-mode: vertical-rl; text-orientation: mixed;
    transform: rotate(180deg);
    letter-spacing: .2em; color: var(--ink-900);
  }

  .pipe__end {
    position: relative; z-index: 1;
    flex: none; width: min(26rem, 30vw); padding-top: 0;
    background: var(--paper); padding-left: 24px;
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  /* sem pin: volta à coluna vertical em hairline */
  .pipe__viewport { height: auto; overflow: visible; }
  .pipeline-track {
    display: grid; width: auto; height: auto;
    padding-block: var(--section-y); padding-inline: var(--gutter);
    gap: 0;
  }
  .pipe__rail { display: none; }
  .pipe__intro { width: auto; max-width: 46rem; margin-bottom: 56px; padding-right: 0; }
  .pipe__hint { display: none; }
  .node, .node--blueprint, .node--live {
    width: auto; margin-top: 0; padding: 24px 0 24px 32px;
    background: none; border: 0; border-top: 1px solid var(--hair);
  }
  .node__dot { top: 34px; margin-top: 0; left: 0; bottom: auto; }
  .node__n { font-size: var(--fs-small); font-family: var(--font-mono); color: var(--ink-300); margin-bottom: 8px; }
  .gate {
    width: auto; flex-direction: row; align-self: auto;
    padding: 24px 0; border-block: 1px solid var(--ink-900);
  }
  .gate__stripe { width: auto; height: 8px; flex: 1; }
  .gate__label { writing-mode: horizontal-tb; transform: none; }
  .pipe__end { width: auto; padding-top: 48px; padding-left: 0; }
}

/* ==========================================================================
   LUZ AMBIENTE
   Nenhum gradiente linear como fundo. Todo brilho é halo radial desfocado
   em pseudo-elemento, posicionado atrás de um ponto de interesse.
   ========================================================================== */

.hero__stage::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 26%; top: 46%; translate: -50% -50%;
  width: min(760px, 76vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--glow-accent);
  filter: blur(60px);
}

.cta::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 12%; bottom: -30%;
  width: min(720px, 70vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--glow-cool);
  filter: blur(60px);
}

/* halo atrás do foco de incêndio enquanto a fase 01 está em cena */
.scrolly__stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 62%; top: 44%; translate: -50% -50%;
  width: min(640px, 58vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--glow-accent);
  filter: blur(60px);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__stage::after, .scrolly__stage::before { will-change: opacity; }
}

/* ==========================================================================
   SUPERFÍCIES REVISTAS
   ========================================================================== */

.plate__art { border-radius: var(--r-panel); }
.sec--dark .plate__art { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); }

.shot { border-radius: var(--r-card); }

.glass-chip {
  border-radius: 9999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

.pop { border-radius: var(--r-panel); border: 1px solid rgba(0,0,0,.08); box-shadow: var(--shadow-raised); }
.pop__head { background: var(--ink-void); }
.pop__form input { border-radius: 10px; border-color: var(--paper-4); }
.bub--s { border-radius: 14px 14px 14px 4px; background: var(--paper-2); border-left: 0; }
.bub--u { border-radius: 14px 14px 4px 14px; }

/* painéis do canvas fixado */
@media (min-width: 900px) {
  .layer--alert {
    border-radius: var(--r-card);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(11,12,14,.72);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
  }
  .layer--alert { border-left: 1px solid rgba(255,255,255,.08); }
  .layer--end {
    border-radius: var(--r-card);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(11,12,14,.86);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
  }
  .layer--end .note { border-left: 2px solid var(--accent); padding-left: 24px; }
}

/* marco tático: sem listras duras, um divisor limpo com rótulo em pílula */
.gate__stripe { background: var(--hair); opacity: 1; }
@media (min-width: 900px) { .gate__stripe { width: 1px; background: var(--hair); } }
.gate__label {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500);
  border: 1px solid var(--hair); border-radius: 9999px;
  padding: 8px 16px; background: var(--surface);
}

/* topo de seção clara não precisa mais do fio duro */
.specs, .apps { border-top: 1px solid var(--hair); }
.phase { border-top: 1px solid var(--hair); }
.phase--pre { border-top-color: var(--accent); }
.ttable thead th { border-bottom: 1px solid var(--hair); }
.ttable thead th.own { border-bottom-color: var(--accent); }

/* ==========================================================================
   RÓTULOS DE INTERFACE EM JAKARTA
   A monoespaçada fica só onde é medida: rótulo de desenho, escala de dias,
   carimbo de prancha e timestamp. Todo rótulo de interface passa ao padrão
   do spec — 11px, caixa alta, tracking .1em, peso 600.
   ========================================================================== */

.mono,
.slug,
.hero__status,
.hero__data dt,
.hero__cue,
.scrolly__phase,
.scrolly__prog,
.pipe__hint,
.node__badge,
.apps .spec,
.specs dt,
.ttable caption,
.ttable thead th,
.foot h4,
.foot__end,
.gate__label,
.pipe__end-cap,
.layer__cap,
.cta__meta,
.pop__head h2,
.pop__head p,
.pop__form label,
.skip-link {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* exceções de tamanho dentro do mesmo padrão */
.specs dt { font-size: .9375rem; letter-spacing: -.01em; text-transform: none; font-weight: 600; }
.hero__status { font-size: 11px; }
.hero__data dt { font-size: 10px; letter-spacing: .12em; }
.ttable thead th { font-size: 10px; }
.foot__end { font-size: 11px; letter-spacing: .06em; text-transform: none; font-weight: 400; }
.scrolly__prog { font-size: 10px; }
.pipe__hint { text-transform: none; letter-spacing: -.01em; font-size: .8125rem; font-weight: 500; }
.skip-link { font-size: .8125rem; letter-spacing: .04em; text-transform: none; font-weight: 600; }

/* números de interface com figuras tabulares, sem trocar de família */
.clock__t, .metric__n, .node__n, .hero__data dd {
  font-variant-numeric: tabular-nums;
}

/* item de grid não encolhe sozinho: sem min-width 0 o texto longo estoura a
   coluna na versão vertical do pipeline */
.pipeline-track > * { min-width: 0; }
.node { min-width: 0; }
@media (max-width: 899px) {
  .node__d { max-width: 100%; }
  .pipe__intro, .pipe__end { max-width: 100%; }
}

/* ==========================================================================
   SEÇÃO 08 · BASE TÉCNICA E LEGAL
   Cabeçalho centrado e a parede de logos de quem já opera com a Exact.
   ========================================================================== */

.head-c { text-align: center; margin-bottom: 56px; }
.head-c .slug { margin-inline: auto; }
.head-c .h2 { max-width: 600px; margin-inline: auto; }
.head-c .lead { max-width: 560px; margin: 16px auto 0; }

/* O carrossel já fecha a dobra com peso visual próprio. Com o rodapé cheio
   desta seção somado ao topo cheio da seguinte, o vão até o próximo título
   passava de 270px; os dois lados encurtam para fechar em torno de 130. */
#qualificacao { padding-bottom: var(--sp-16); }
#qualificacao + .sec { padding-top: var(--sp-16); }

/* parede de logos: grade que não deixa nenhuma marca dominar as outras.
   A altura é normalizada, não a largura — logo horizontal e lockup vertical
   têm proporções diferentes e o que precisa casar é o peso óptico. */
.clients-wall {
  list-style: none; margin: 0; padding: var(--sp-8) 0;
  display: grid; gap: var(--sp-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  border-block: 1px solid var(--hair);
}
/* são 5 marcas: a linha incompleta fica centrada em vez de encostar à esquerda.
   Até 640px o arranjo é 2+2+1; de 640px a 899px vira 3+2 sobre uma grade de
   6 colunas com cada item ocupando 2 — os dois de baixo entram deslocados
   uma coluna. A partir de 900px as cinco cabem numa linha só. */
.clients-wall li:last-child { grid-column: 1 / -1; }

@media (min-width: 640px) {
  .clients-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-10); }
  .clients-wall li { grid-column: span 2; }
  .clients-wall li:nth-child(4) { grid-column: 2 / span 2; }
  .clients-wall li:last-child { grid-column: 4 / span 2; }
}

@media (min-width: 900px) {
  .clients-wall {
    padding: var(--sp-10) 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .clients-wall li,
  .clients-wall li:nth-child(4),
  .clients-wall li:last-child { grid-column: auto; }
}

.clients-wall li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.clients-wall img {
  height: 40px; width: auto; max-width: 100%; object-fit: contain;
  mix-blend-mode: multiply;

}
.clients-wall img[data-lockup="vertical"] { height: 64px; }
.clients-wall li:hover img { filter: none; opacity: 1; }
@media (min-width: 900px) {
  .clients-wall img { height: 44px; }
  .clients-wall img[data-lockup="vertical"] { height: 72px; }
}
@media (min-width: 1100px) {
  .clients-wall img { height: 48px; }
  .clients-wall img[data-lockup="vertical"] { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-wall img { transition: none; }
}



/* ==========================================================================
   CTA DE SEÇÃO
   Um por seção, conforme o briefing de copy. Nunca dois concorrentes.
   ========================================================================== */

.sec-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.sec--dark .sec-cta { border-top-color: rgba(255,255,255,.1); }

.sec-cta__t {
  margin: 0; flex: 1 1 260px;
  font-size: .9375rem; line-height: 1.55; color: var(--text-muted);
}
.sec--dark .sec-cta__t { color: rgba(255,255,255,.6); }

.sec-cta__b {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  /* altura = 12 + 12 + 24 = 48px */
  padding: var(--sp-3) var(--sp-6); line-height: var(--ctl-line);
  border-radius: 9999px; cursor: pointer;
  font-family: var(--font-body); font-size: .875rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--text); background: transparent;
  border: 1px solid rgba(0,0,0,.14);
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sec-cta__b .ic { stroke: currentColor; stroke-width: 1.7; fill: none; transition: transform .25s cubic-bezier(0.16,1,0.3,1); }
.sec-cta__b:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateY(-2px); box-shadow: var(--shadow-glow);
}
.sec-cta__b:hover .ic { transform: translateX(3px); }

.sec--dark .sec-cta__b { color: #fff; border-color: rgba(255,255,255,.2); }
.sec--dark .sec-cta__b:hover { background: #fff; border-color: #fff; color: var(--ink-void); }

/* dentro do canvas fixado da seção 01 o CTA fica compacto */
.layer--end .sec-cta { margin-top: 24px; padding-top: 24px; }

/* ==========================================================================
   COMPARATIVO OUTRAS EMPRESAS × EXACT
   Sem coluna de critério: cada linha se explica sozinha. O contraste entre
   as colunas é o argumento, então elas não podem ter o mesmo peso visual.
   ========================================================================== */

.vs { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 820px) { .vs { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } }

.vs__col { border-radius: 24px; padding: 32px 32px 32px; }
@media (min-width: 820px) { .vs__col { padding: 32px 32px 40px; } }

.vs__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -.02em;
  margin: 0 0 24px; padding-bottom: 16px;
}

.vs__l { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.vs__l li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  padding: 16px 0; font-size: .9375rem; line-height: 1.5;
}
.vs__l li + li { border-top: 1px solid var(--hair); }

.vs__ic {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; margin-top: -1px;
}
.vs__ic svg { width: 14px; height: 14px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* coluna negativa: recuada, sem elevação, texto apagado */
.vs__col--bad {
  background: transparent;
  border: 1px dashed rgba(0,0,0,.12);
}
.vs__col--bad .vs__h { color: var(--ink-400); border-bottom: 1px solid var(--hair); }
.vs__col--bad .vs__l li { color: var(--ink-400); }
.vs__col--bad .vs__ic { background: rgba(0,0,0,.045); }
.vs__col--bad .vs__ic svg { stroke: var(--ink-400); }

/* coluna positiva: elevada, sólida, acento vermelho e texto cheio */
.vs__col--good {
  position: relative; overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.08);
}
@media (min-width: 820px) { .vs__col--good { transform: translateY(-8px); } }
.vs__col--good::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #E9515F, #E52E3D);
}
.vs__col--good .vs__h { color: var(--text); border-bottom: 1px solid rgba(229,46,61,.28); }
.vs__col--good .vs__l li { color: var(--text); font-weight: 500; }
.vs__col--good .vs__ic { background: rgba(229,46,61,.1); }
.vs__col--good .vs__ic svg { stroke: #E52E3D; }

@media (prefers-reduced-motion: reduce) {
  .sec-cta__b:hover { transform: none; }
}

/* ==========================================================================
   COBERTURA NACIONAL
   Faixa compacta: frase de impacto à esquerda, território à direita.
   Altura contida — não é uma dobra inteira.
   ========================================================================== */

.br {
  background: #090A0C;
  padding-block: 56px;
  overflow: hidden;
}

/* ---------------------------------------------- fixação e sobreposição */

@media (min-width: 900px) {
  /* a pista de rolagem: o que sobra dela é o quanto a seção fica presa */
  .br-pin { position: relative; height: 300vh; }

  .br {
    position: sticky; top: 0; z-index: 1;
    min-height: 100vh; height: 100vh;
    display: flex; align-items: center;
    padding-block: 0;
  }
  .br .wrap { width: 100%; }

  /* a próxima seção começa antes de a fixação acabar e sobe por cima */
  .br-next {
    position: relative; z-index: 3;
    margin-top: -70vh;
    border-radius: 34px 34px 0 0;
    box-shadow: 0 -34px 70px -24px rgba(0, 0, 0, .45);
  }
  .br-next::before { border-radius: 34px 34px 0 0; }
}

/* entrada do mapa e do título */
.br__stage { will-change: transform, opacity; }
.br__t { will-change: transform, opacity; }
.br__grid {
  display: grid; gap: 24px; align-items: center;
  min-height: 340px;
}
@media (min-width: 900px) {
  .br { padding-block: 0; }
  .br__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 48px; min-height: 0; }
}

.br__t {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.03em; text-transform: uppercase;
  color: #FFFFFF; max-width: 14ch;
}
.br__t em {
  font-style: normal;
  background: linear-gradient(90deg, #FFFFFF, #FF4D5E);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #FF4D5E;
}

/* ------------------------------------------------------ mapa em 3D --- */

.br__map, .br__stage {
  position: relative;
  perspective: 800px;
  display: flex; justify-content: center; align-items: center;
}

/* o plano do mapa recebe a inclinação; os pinos desfazem essa inclinação */
.br__tilt {
  position: relative;
  width: 100%; max-width: 480px;
  transform: rotateX(25deg) rotateY(-8deg);
  transform-style: preserve-3d;
}
@media (max-width: 899px) {
  /* o tamanho do mapa no mobile sai daqui, nunca do SVG: os pinos são
     posicionados em % desta caixa, e encolher só o SVG os desalinha */
  .br__tilt { max-width: 240px; }
}

.br__svg { width: 100%; height: auto; display: block; overflow: visible; }

.br__uf {
  fill: #12151C;
  stroke: rgba(255, 255, 255, .15);
  stroke-width: .7;
  stroke-linejoin: round;
}

/* rota curva desenhada no scroll */
.br__rota {
  fill: none;
  stroke: #FF2E43;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px #FF2E43);
}

/* ------------------------------------------------ pinos de localização */

.mpin {
  position: absolute; z-index: 2;
  transform: translate(-50%, -100%);
  transform-style: preserve-3d;
  pointer-events: none;
}

/* sombra deitada no chão do mapa, sem contra-rotação */
.mpin__sh {
  position: absolute; left: 50%; bottom: -3px;
  width: 14px; height: 5px; margin-left: -8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  filter: blur(4px);
}

/* corpo do pino: desfaz a inclinação do mapa para ficar de pé */
.mpin__b {
  display: block;
  transform: rotateX(-25deg) rotateY(8deg);
  transform-origin: 50% 100%;
}
.mpin__b svg {
  width: 17px; height: 23px; display: block;
  fill: #3A3F4D;
  transition: fill .35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mpin.is-on .mpin__b svg { fill: #FF2E43; }
.mpin.is-on .mpin__b {
  filter: drop-shadow(0 0 10px #FF2E43) drop-shadow(0 0 20px rgba(255, 46, 67, .6));
}

@media (max-width: 899px) {
  .mpin__b svg { width: 13px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mpin__b svg { transition: none; }
}

/* ==========================================================================
   AJUSTES DA RODADA
   ========================================================================== */

/* CTA de seção: base vermelha, hover preto */
.sec-cta { margin-top: 56px; padding-top: 32px; }
.sec-cta__b {
  /* altura = 16 + 16 + 24 = 56px */
  padding: var(--sp-4) var(--sp-8);
  font-size: 1rem; font-weight: 600; line-height: var(--ctl-line);
  color: #FFFFFF;
  background: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 8px 22px -10px rgba(222, 60, 75, .7);
}
.sec-cta__b:hover,
.sec-cta__b:focus-visible {
  background: #0D0E11;
  border-color: #0D0E11;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
}
.sec--dark .sec-cta__b {
  background: var(--accent); border-color: var(--accent); color: #FFFFFF;
}
.sec--dark .sec-cta__b:hover {
  background: #000000; border-color: #000000; color: #FFFFFF;
}
.sec-cta__t { font-size: 1rem; }


@media (max-width: 620px) {
  /* o rótulo do CTA é longo: em coluna estreita ele ocupa a linha inteira
     e quebra, em vez de empurrar a página para o lado */
  .sec-cta { flex-direction: column; align-items: stretch; }
  .sec-cta__b {
    width: 100%; justify-content: center; text-align: center;
    padding: 16px 24px; white-space: normal;
  }
}

@media (max-width: 899px) {
  /* a faixa de cobertura continua compacta empilhada */
  .br { padding-block: 40px; }
  .br__grid { min-height: 0; gap: 16px; }
  .br__t { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); max-width: 16ch; }
}

/* a sede é a origem da rede: pino maior e halo permanente */
.mpin--sede { z-index: 3; }
.mpin--sede .mpin__b svg { width: 22px; height: 30px; }
.mpin--sede.is-on .mpin__b {
  filter: drop-shadow(0 0 12px #FF2E43) drop-shadow(0 0 26px rgba(255, 46, 67, .75));
}
@media (max-width: 899px) {
  .mpin--sede .mpin__b svg { width: 17px; height: 23px; }
}

/* ==========================================================================
   AVISO DE COOKIES E DADOS
   ========================================================================== */

.consent {
  position: fixed; z-index: 400;
  left: 0; right: 0; bottom: 0;
  padding: 16px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.consent__box {
  pointer-events: auto;
  width: 100%; max-width: 1100px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 24px;
  border-radius: 20px;
  background: rgba(15, 17, 21, .92);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  transform: translateY(20px); opacity: 0;
  transition: transform .34s cubic-bezier(0.16, 1, 0.3, 1),
              opacity .34s cubic-bezier(0.16, 1, 0.3, 1);
}
.consent.is-up .consent__box { transform: none; opacity: 1; }

@media (min-width: 760px) {
  .consent { padding: 24px; }
  .consent__box { flex-direction: row; align-items: center; gap: 32px; padding: 24px 24px; }
}

.consent__t {
  font-family: var(--font-display); font-weight: 600;
  font-size: .9375rem; letter-spacing: -.01em; color: #FFFFFF;
  margin: 0 0 8px;
}
.consent__d {
  margin: 0; font-size: .8125rem; line-height: 1.55;
  color: rgba(255, 255, 255, .68); max-width: 68ch;
}
.consent__d a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

.consent__acts { display: flex; gap: 8px; flex: none; }
/* os dois botões cabem lado a lado a partir de ~360px: empilhar só no
   extremo estreito evita um aviso ocupando meia tela */
@media (max-width: 359px) { .consent__acts { flex-direction: column; } }
@media (max-width: 759px) { .consent__acts .consent__b { flex: 1; padding-inline: 16px; } }

.consent__b {
  font-family: var(--font-body); font-size: .875rem; font-weight: 500;
  letter-spacing: -.01em; padding: 12px 24px;
  border-radius: 9999px; cursor: pointer; white-space: nowrap;
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.consent__b--ok { background: var(--accent); color: #FFFFFF; border: 1px solid var(--accent); }
.consent__b--ok:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink-void); }
.consent__b--ghost { background: transparent; color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.24); }
.consent__b--ghost:hover { background: rgba(255,255,255,.1); color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .consent__box { transition: none; transform: none; opacity: 1; }
}

/* ==========================================================================
   PÁGINAS DE DOCUMENTO (termos e privacidade)
   ========================================================================== */

.doc-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 247, 248, .86);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--hair);
}
.doc-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.doc-head__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.doc-head__logo img { height: 24px; width: auto; }
.doc-head__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink-500); text-decoration: none;
  padding: 8px 16px; border-radius: 9999px; border: 1px solid var(--hair);
  transition: all .25s var(--ease);
}
.doc-head__back:hover { background: var(--ink-void); border-color: var(--ink-void); color: #fff; }

.doc { padding-block: 64px 96px; background: var(--paper); }
.doc .wrap { max-width: 1080px; }
.doc__grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .doc__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; } }

.doc__lead { margin-bottom: 48px; }
.doc__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  letter-spacing: -.03em; line-height: 1.1;
}
.doc__meta {
  margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400);
}

.doc__toc { position: sticky; top: 92px; }
.doc__toc h2 {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400);
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hair);
}
.doc__toc ol { display: grid; gap: 2px; counter-reset: toc; list-style: none; margin: 0; padding: 0; }
.doc__toc a {
  display: block; padding: 8px 0;
  font-size: .8125rem; line-height: 1.45; color: var(--ink-500);
  text-decoration: none; transition: color .2s var(--ease);
}
.doc__toc a:hover { color: var(--accent); }
@media (max-width: 959px) { .doc__toc { display: none; } }

.doc__body > section { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--hair); }
.doc__body > section:last-child { border-bottom: 0; margin-bottom: 0; }
.doc__body h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.25rem; letter-spacing: -.02em; margin: 0 0 16px;
  scroll-margin-top: 96px;
}
.doc__body h2 span {
  font-family: var(--font-mono); font-size: .75rem; color: var(--accent);
  margin-right: 12px; letter-spacing: 0;
}
.doc__body p, .doc__body li { color: var(--text-muted); font-size: .9375rem; line-height: 1.7; }
.doc__body p { margin: 0 0 16px; max-width: 68ch; }
.doc__body strong { color: var(--text); font-weight: 600; }
.doc__body ul { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; max-width: 68ch; }
.doc__body ul li { position: relative; padding-left: 24px; }
.doc__body ul li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 8px; height: 1.5px; background: var(--accent);
}
.doc__body a { color: var(--accent-text); }

.doc__note {
  margin-top: 8px; padding: 16px 24px;
  background: var(--paper-2); border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0;
  font-size: .875rem; line-height: 1.6; color: var(--ink-600);
}

.doc-foot {
  background: var(--ink-void); color: var(--ink-300);
  padding-block: 40px; font-size: .8125rem;
}
.doc-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.doc-foot a { color: var(--ink-300); text-decoration: none; }
.doc-foot a:hover { color: #fff; text-decoration: underline; }
.doc-foot ul { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
/* ------------------------------------- fixação da dobra de continuidade --
   Mesma mecânica da cobertura nacional: a seção fica presa pela base e a
   dobra da fumaça sobe por cima dela. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .pin-track { position: relative; z-index: 1; }
  .pin-sec { position: relative; z-index: 1; }
  /* a dobra da fumaça sobe por cima da seção presa */
  .pin-next {
    position: relative; z-index: 3;
    margin-top: -84vh;
    border-radius: 34px 34px 0 0;
    box-shadow: 0 -34px 70px -24px rgba(0, 0, 0, .55);
  }
}

/* ==========================================================================
   FUMAÇA EM VÍDEO — corre atrás da frase da seção 07
   Camada 1 (z 1): vídeo · Camada 2 (z 10): conteúdo. O bloco .smoke abaixo
   segue servindo a seção do estudo, que herda dele o fundo e as cores.
   ========================================================================== */

.smoke {
  background: #050608;
  color: #E4E6E9;
  overflow: hidden;
}
.smoke h2, .smoke h3 { color: #F7F8F9; }
.smoke .lead { color: var(--ink-300); }

/* Vídeo de fumaça clara sobre fundo preto: 'screen' apaga o preto do vídeo.
   Se o material for escuro sobre fundo claro, troque por mix-blend-mode: multiply. */
.smoke__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  will-change: transform, opacity;
}
.smoke__video.is-ready { opacity: .34; }

.smoke__wrap { position: relative; z-index: 10; }

.smoke .btn--outline { border-color: var(--hair-inv); color: var(--paper); }

/* etapas do estudo: hairline sobre o escuro, sem card */
.steps {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--hair-inv);
}
.steps li {
  display: grid; grid-template-columns: 32px 1fr; gap: 16px;
  padding: 24px 0; align-items: start;
  border-bottom: 1px solid var(--hair-inv-soft);
}
.steps__n {
  font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: .06em;
  color: var(--accent); padding-top: 3px;
}
.steps h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; }
.steps p { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-300); }

/* header centralizado da seção: cinza frio, mais próximo do fundo do card */
.smoke .head-c { max-width: 48rem; margin-inline: auto; margin-bottom: 48px; }
.smoke .head-c .h2 { max-width: none; }
.smoke .head-c .lead { max-width: 42rem; font-size: 1rem; color: #9CA3AF; }

/* grid inferior: foto do profissional à esquerda, card de passos à direita */
.study { display: grid; gap: 40px; }
@media (min-width: 1000px) {
  .study { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
}

.study__media {
  position: relative; margin: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.study__media img {
  position: relative; z-index: 1;
  width: 100%; max-width: 100%; max-height: 620px;
  object-fit: contain; object-position: bottom;
}

.study__card {
  background: #0B0D12;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 32px;
}
.study__card .steps { border-top: 0; }
.study__card .steps li:first-child { padding-top: 0; }
.study__card .steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.study__cta { margin-top: 32px; }

@media (max-width: 599px) {
  .study__card { padding: 24px; }
  .study__cta { width: 100%; }
}

@media print {
  .smoke { background: #fff !important; color: #000 !important; }
  .smoke__video { display: none !important; }
  .steps li { border-color: rgba(0,0,0,.12) !important; }
  .steps p { color: #333 !important; }
}

/* --------------------------------------------- foto com borda esfumada --
   Imagem já sai do tratamento com feather branco: dispensa moldura, marca
   de corte e fundo escuro. A legenda desce para fora do quadro. */
.shot--feather {
  background: transparent; border-radius: 0; overflow: visible;
  aspect-ratio: auto; padding-bottom: 32px;
}
.shot--feather img {
  height: auto; object-fit: contain; transform: none;
  mix-blend-mode: multiply;
}
.shot--feather .shot__crop { display: none; }
.shot--feather .shot__tag {
  position: static; padding: 0; background: none;
  color: var(--ink-500);
}
.shot--feather .shot__tag .led { background: var(--accent); }

/* --------------------------------------------- variantes de nota ------ */
.note--accent { border-left-color: var(--accent); }
.note-src { color: var(--ink-500); }

/* ==========================================================================
   UTILITÁRIOS DE ESPAÇO
   Ficam no fim da folha de propósito: precisam vencer o espaço padrão do
   componente. Existem para não haver style="margin-top" no HTML — valor
   fora da malha escrito inline é fundação furada num lugar só.
   ========================================================================== */
.mt-2  { margin-top: var(--sp-2); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }

/* ==========================================================================
   07 · CENÁRIOS FIXADOS (ICP)
   Camada 1 (z 1) fundo que desliza · camada 2 (z 2) véu · camada 3 (z 10)
   palavra em foco. Dentro de cada cenário a imagem corre em contramão do
   trilho: é o que dá a profundidade de parallax. O texto nunca recebe blur —
   quem desfoca é o fundo, e a palavra inativa sai de foco.
   ========================================================================== */

.icp-sec { position: relative; background: #05060A; color: #E4E6E9; }

#hero-pinned-section {
  position: relative;
  width: 100%; height: 100vh; height: 100svh;
  overflow: hidden;
}

/* ---------------------------------------------------- camada 0: fundo -- */
.bg-track {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: flex;
  width: 300%; height: 100%;
  will-change: transform;
}
.bg-slide {
  position: relative;
  width: 33.3333%; height: 100%; flex: none;
  overflow: hidden;
}
/* A imagem é mais larga que o cenário para poder deslizar dentro dele, e o
   desfoque mora aqui, não num backdrop-filter: amostrar a tela inteira a
   cada quadro trava a composição quando três camadas estão em movimento. */
.bg-slide__img {
  position: absolute; inset: -4% -12%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(3px);
  will-change: transform;
}
.bg-slide--industria { background-image: url("../assets/icp/industria.jpg"); }
.bg-slide--logistica { background-image: url("../assets/icp/logistica.jpg"); }
.bg-slide--eventos   { background-image: url("../assets/icp/eventos.jpg"); }

/* ------------------------------------------------- camada 1: véu ------- */
.bg-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-color: rgba(9, 10, 15, .42);
}
/* gradiente de pé: sustenta o contraste onde a foto costuma clarear */
.bg-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,10,.74) 0%, rgba(5,6,10,.2) 44%, transparent 72%);
}

/* --------------------------------------------- camada 2: tipografia ---- */
.text-layer {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-6);
  padding-inline: var(--gutter);
  will-change: transform;
}

/* rótulo no padrão dos sobretítulos do site */
.icp__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.words { position: relative; display: grid; place-items: center; min-height: 1.1em; width: 100%; }

/* mesma família e peso dos títulos do site, em caixa de frase; só a escala
   é de cenário. Caixa alta aqui é do carimbo mono, não do título. */
.word-node {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7.5vw, 5.5rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
  color: #FFFFFF; text-align: center; white-space: nowrap;
  text-shadow: 0 8px 40px rgba(0, 0, 0, .5);
  will-change: transform, filter, opacity;
}
.word-1 { opacity: 1; filter: blur(0px); transform: scale(1); }
.word-2, .word-3 { opacity: 0; filter: blur(20px); transform: scale(.9); }

/* o CTA volta ao fluxo normal, abaixo do cenário */
.icp-sec .wrap { position: relative; z-index: 3; padding-block: var(--sp-16) var(--sp-20); }
.icp-sec .sec-cta { margin-top: 0; border-top-color: rgba(255,255,255,.1); }
.icp-sec .sec-cta__t { color: rgba(255,255,255,.6); }

/* ------------------------------------------------------------ ajustes -- */

/* backdrop-filter em tela cheia custa caro no celular: só o véu de cor */
@media (max-width: 899px) {
  /* menos camadas em movimento no celular: o desfoque sai, o véu compensa */
  .bg-slide__img { filter: none; }
  .bg-overlay { background-color: rgba(9,10,15,.5); }
}

/* sem pin nem scrub: os três cenários viram uma pilha legível */
@media (prefers-reduced-motion: reduce) {
  #hero-pinned-section { height: auto; }
  .bg-track { position: relative; display: grid; width: 100%; grid-auto-flow: row; }
  .bg-slide { width: 100%; height: 60vh; }
  .bg-slide__img { inset: 0; }
  .bg-overlay { display: none; }
  .text-layer { position: absolute; inset: 0; justify-content: space-around; }
  .words { min-height: 0; }
  .word-node { position: static; grid-area: auto; opacity: 1; filter: none; transform: none; }
}

@media print {
  #hero-pinned-section { height: auto; }
  .bg-track, .bg-overlay { display: none !important; }
  .word-node { grid-area: auto; opacity: 1; filter: none; color: #000; }
}

/* ==========================================================================
   07 · FRASE EM REVELAÇÃO
   Uma dobra, uma frase. As palavras acendem uma a uma conforme a rolagem
   atravessa a seção. Sem GSAP elas já nascem acesas: o texto é o conteúdo,
   a animação é só o ritmo de leitura.
   ========================================================================== */

.reveal-sec {
  position: relative; overflow: hidden;
  background: var(--ink-void);
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding-inline: var(--gutter);
}

.reveal {
  position: relative; z-index: 10;
  margin: 0;
  max-width: 20ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -.025em;
  color: #FFFFFF;
  text-wrap: balance;
}

.reveal__w { display: inline-block; will-change: opacity, filter; }

/* --------------------------------------------- carrossel de registros --
   Duas trilhas idênticas correndo lado a lado: quando a primeira sai por
   completo, a segunda já ocupou o lugar dela e a emenda não aparece. A
   cópia é aria-hidden — para leitor de tela existe uma lista só. */
.marquee {
  margin-top: var(--sp-10);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sp-10), #000 calc(100% - var(--sp-10)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--sp-10), #000 calc(100% - var(--sp-10)), transparent);
}
.marquee__inner {
  display: flex; width: max-content; gap: var(--sp-4);
  animation: marquee-run 44s linear infinite;
  will-change: transform;
}
.marquee__track {
  display: flex; gap: var(--sp-4);
  list-style: none; margin: 0; padding: 0;
}
.marquee__track li { flex: none; }
.marquee__track img {
  display: block;
  width: 320px; height: 200px; object-fit: cover;
  border-radius: var(--r-panel);
  background: var(--paper-3);
}
@media (min-width: 900px) {
  .marquee__track img { width: 384px; height: 240px; }
}

/* a pausa vale para o ponteiro e para o teclado */
.marquee:hover .marquee__inner,
.marquee:focus-within .marquee__inner { animation-play-state: paused; }

@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--sp-4) / 2)); }
}

/* sem animação: vira uma faixa que a pessoa arrasta */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee__inner { animation: none; }
  .marquee__track[aria-hidden="true"] { display: none; }
}

/* -------------------------------------- sobreposição sobre o scrolly ---
   Mesmo princípio do mapa: a dobra seguinte começa antes de a anterior
   soltar e sobe por cima dela. Aqui a margem é curta porque o espaçador do
   pin do scrolly é o que sobra depois da última fase — comer mais que isso
   cortaria o fecho da animação. */
@media (min-width: 900px) {
  #qualificacao {
    position: relative; z-index: 3;
    margin-top: -12vh;
    border-radius: 34px 34px 0 0;
    box-shadow: 0 -34px 70px -24px rgba(0, 0, 0, .45);
  }
}