/* =========================================================
   AUTIFEX — Home
   Paleta: Near Black #020407 · Soft Gray #F0F0F0 · Deep Blue #007CEA · Nexus #FF7E39 → #E85D1C
   Tipografia: Eurostile Next LT Pro Semibold (fallback Saira expandida) · Montserrat Light
   ========================================================= */

:root {
  --black: #020407;
  --surface: #070b12;
  --surface-2: #0d141f;
  --text: #f0f0f0;
  --muted: rgba(240, 240, 240, .66);
  --dim: rgba(240, 240, 240, .42);
  --line: rgba(240, 240, 240, .1);
  --line-strong: rgba(240, 240, 240, .2);

  --blue: #007cea;
  --blue-hi: #3d9df5;
  --blue-deep: #0063bf;
  --orange: #ff7e39;
  --orange-2: #e85d1c;
  --grad-orange: linear-gradient(135deg, #ff7e39 0%, #e85d1c 100%);

  /* Para usar a fonte oficial como webfont, adicione @font-face "Eurostile Next LT Pro" com o arquivo licenciado. */
  --f-display: "Eurostile Next LT Pro", "Eurostile Next", "Eurostile Extended", "Saira", "Segoe UI", sans-serif;
  --f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1480px;
  --nav-h: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); color-scheme: dark; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 4px; }
section[id] { scroll-margin-top: calc(var(--nav-h) - 8px); }
html.intro-running { overflow: hidden; }

/* Grão de filme */
body::after {
  content: "";
  position: fixed;
  inset: -100%;
  z-index: 300;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 400;
  background: var(--text); color: var(--black); padding: 12px 18px; font-weight: 500;
  transition: top .3s var(--ease);
}
.skip:focus { top: 16px; }

.i-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .5s var(--ease); flex: none; }

/* ---------- Tipografia ---------- */
.h2, .h3, .hero__title, .cta__title, .front__title, .concept__title, .brand__word,
.manifesto__text, .objection__q, .pillar__title, .aud h3, .caps h4, .tab__title,
.explore__name, .footer__word, .footer__word-sm, .menu__link, .concept--cta__title {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 600;
}
.h2 { font-size: clamp(30px, 4.3vw, 66px); line-height: 1.02; text-transform: uppercase; letter-spacing: -.005em; }
.h3 { font-size: clamp(24px, 3.2vw, 48px); line-height: 1.04; text-transform: uppercase; }

.label {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 12px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 28px;
}
.label b { font-family: var(--f-display); font-stretch: 125%; color: var(--orange); font-weight: 600; letter-spacing: .08em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 12px/1.3 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.slash {
  display: inline-block; width: 22px; height: 9px; flex: none;
  background: var(--grad-orange);
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
}
.grad-text {
  background: linear-gradient(95deg, #f0f0f0 0%, #8cc6ff 38%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chancela { font: 300 12px/1.4 var(--f-body); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }

/* ---------- Botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 56px; padding: 0 28px;
  font: 600 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: color .4s, background-color .4s, border-color .4s;
}
.btn:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.btn--primary { background: var(--grad-orange); color: var(--black); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn:hover .i-arrow { transform: translateX(5px); }
.btn--ghost {
  color: var(--text); background: rgba(2, 4, 7, .35);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--blue-hi); background: rgba(0, 124, 234, .14); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 11.5px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.btn--lg { height: 64px; padding: 0 36px; font-size: 13px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-strong);
  transition: border-color .4s, color .4s;
}
.link-arrow:hover { border-color: var(--orange); }
.link-arrow:hover .i-arrow { transform: translateX(6px); }

/* ---------- Intro ---------- */
.intro { display: none; }
html.js .intro {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center;
  animation: introFailsafe .01s 5s forwards;
}
html.intro-seen .intro, html.reduced-motion .intro { display: none; }
@keyframes introFailsafe { to { visibility: hidden; opacity: 0; } }
.intro__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--black); transition: transform 1.15s var(--ease-io); }
.intro__panel--top { top: 0; }
.intro__panel--bottom { bottom: 0; }
.intro.is-leaving .intro__panel--top { transform: translateY(-101%); }
.intro.is-leaving .intro__panel--bottom { transform: translateY(101%); }
.intro__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 26px; transition: opacity .45s, transform .9s var(--ease); }
.intro.is-leaving .intro__inner { opacity: 0; transform: scale(.94); }
.intro__mark { width: clamp(130px, 13vw, 190px); overflow: visible; }
.intro__mark path {
  stroke: var(--text); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1;
  fill-opacity: 0; transition: stroke-dashoffset 1.25s cubic-bezier(.65, 0, .35, 1), fill-opacity .6s ease, stroke-opacity .6s ease;
}
.intro__p1 { fill: var(--text); }
.intro__p2 { fill: url(#afxIntroGrad); transition-delay: .15s !important; }
.intro.is-drawing .intro__mark path { stroke-dashoffset: 0; }
.intro.is-filled .intro__mark path { fill-opacity: 1; stroke-opacity: 0; }
.intro__bar { width: 180px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.intro__bar::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-io); }
.intro.is-drawing .intro__bar::after { transform: scaleX(1); }
.intro__meta { display: flex; justify-content: space-between; width: 180px; font: 500 10.5px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------- Header ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  transition: transform .6s var(--ease), background-color .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(2, 4, 7, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__bar { height: 100%; display: flex; align-items: center; gap: 40px; }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { width: 44px; height: auto; }
.brand__word { font-size: 19px; letter-spacing: .02em; line-height: 1; }
.nav__links { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav__links a {
  position: relative; font: 500 12.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 8px 0; transition: color .3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--grad-orange); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__toggle { display: none; width: 48px; height: 48px; margin-right: -12px; flex-direction: column; justify-content: center; align-items: center; gap: 7px; }
.nav__toggle span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: transform .5s var(--ease); }
.menu-open .nav__toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .nav__toggle span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 32px) var(--pad) 36px;
  background: var(--black);
  visibility: hidden; opacity: 0; transition: opacity .5s, visibility 0s .5s;
}
.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .5s; }
.menu__link {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(26px, 8vw, 44px); line-height: 1.1; text-transform: uppercase;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .8s var(--ease);
}
.menu__link small { font: 500 11px var(--f-body); letter-spacing: .2em; color: var(--orange); }
.menu-open .menu__link { opacity: 1; transform: none; }
.menu-open .menu__link:nth-child(2) { transition-delay: .05s; }
.menu-open .menu__link:nth-child(3) { transition-delay: .1s; }
.menu-open .menu__link:nth-child(4) { transition-delay: .15s; }
.menu-open .menu__link:nth-child(5) { transition-delay: .2s; }
.menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate;
  padding-top: calc(var(--nav-h) + 40px);
}
.hero__media { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.hero__zoom { position: absolute; inset: 0; }
.hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__video { opacity: 0; transition: opacity 1.6s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 4, 7, .94) 0%, rgba(2, 4, 7, .72) 30%, rgba(2, 4, 7, .1) 62%, rgba(2, 4, 7, 0) 100%),
    linear-gradient(0deg, var(--black) 0%, rgba(2, 4, 7, 0) 34%),
    linear-gradient(180deg, rgba(2, 4, 7, .7) 0%, rgba(2, 4, 7, 0) 20%);
}
.hud {
  position: absolute; top: calc(var(--nav-h) + 22px); left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between;
  padding-inline: var(--pad); max-width: var(--maxw); margin-inline: auto;
  font: 500 10.5px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
  pointer-events: none;
}
@media (max-height: 820px) { .hud { display: none; } }
.hud span { display: inline-flex; align-items: center; gap: 10px; }
.hud b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.rec { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.hero__content { position: relative; z-index: 2; will-change: transform, opacity; }
.hero__title {
  margin: 26px 0 28px;
  font-size: clamp(34px, 6.1vw, 96px); line-height: .96; letter-spacing: -.01em; text-transform: uppercase;
}
/* clip-path em vez de overflow: só corta embaixo (onde o texto entra na animação);
   acentos de maiúsculas (Ê, Á, Ç) ficam inteiros acima e abaixo da linha */
.line { display: block; padding-bottom: .16em; margin-bottom: -.16em; clip-path: inset(-.6em -.4em 0 -.4em); }
.line > span { display: block; }
.hero__lead { max-width: 500px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; color: var(--muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero__foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: clamp(48px, 9vh, 110px); padding-top: 22px; padding-bottom: 26px;
}
.hero__foot::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.hero__pillars { display: flex; flex-wrap: wrap; gap: 10px 36px; font: 500 12px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__pillars li { display: inline-flex; align-items: center; gap: 10px; }
.hero__pillars li::before { content: ""; width: 6px; height: 6px; background: var(--blue); transform: skewX(-20deg); }
.scroll-cue { display: inline-flex; align-items: center; gap: 14px; font: 500 11px/1 var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { position: relative; width: 1px; height: 44px; background: var(--line-strong); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--orange); animation: cue 2s var(--ease-io) infinite; }
@keyframes cue { to { top: 110%; } }

/* Entrada do hero */
@media all { /* animações ativas em todos os dispositivos */
  html.js .hero .line > span { transform: translateY(110%); }
  html.js .hero [data-hero-fade] { opacity: 0; transform: translateY(26px); }
  html.js .hero__zoom { transform: scale(1.16); }
  html.js .hud { opacity: 0; }
  html.is-ready .hero .line > span { transform: none; transition: transform 1.4s var(--ease) calc(var(--i) * 110ms + 250ms); }
  html.is-ready .hero [data-hero-fade] { opacity: 1; transform: none; transition: opacity 1s ease calc(var(--d, 0) * 1ms + 250ms), transform 1.3s var(--ease) calc(var(--d, 0) * 1ms + 250ms); }
  html.is-ready .hero__zoom { transform: scale(1); transition: transform 2.8s var(--ease); }
  html.is-ready .hud { opacity: 1; transition: opacity 1s 1.2s; }
}

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; padding: 26px 0; border-block: 1px solid var(--line); background: var(--black); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee span { font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(15px, 1.4vw, 20px); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); white-space: nowrap; padding-inline: 28px; }
.marquee i { width: 20px; height: 8px; flex: none; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Manifesto ---------- */
.manifesto { padding-block: clamp(110px, 15vw, 220px) clamp(90px, 11vw, 160px); }
.manifesto__text {
  max-width: 1240px;
  font-size: clamp(26px, 3.7vw, 58px); line-height: 1.14; font-weight: 500; letter-spacing: -.01em;
}
.manifesto__text em { color: var(--blue-hi); }
.manifesto__note { margin-top: 36px; max-width: 520px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); padding-left: 36px; position: relative; }
.manifesto__note::before { content: ""; position: absolute; left: 0; top: .8em; width: 22px; height: 2px; background: var(--orange); }

.fronts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(72px, 9vw, 130px); }
.front {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(380px, 40vw, 560px); padding: clamp(24px, 3vw, 44px);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .5s;
}
.front__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .5; transform: scale(1.03); transition: transform 1.6s var(--ease), opacity .8s; }
.front::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 4, 7, .15) 0%, rgba(2, 4, 7, .55) 45%, rgba(2, 4, 7, .95) 100%); }
.front::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.front:hover { border-color: var(--line-strong); }
.front:hover::after { transform: scaleX(1); }
.front:hover .front__img { transform: scale(1.09); opacity: .72; }
.front__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--blue-hi); }
.front__title { margin: 18px 0 14px; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.04; text-transform: uppercase; }
.front__desc { max-width: 440px; color: var(--muted); }
.front__go {
  position: absolute; top: clamp(24px, 3vw, 44px); right: clamp(24px, 3vw, 44px);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: rgba(2, 4, 7, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .5s, border-color .5s, transform .6s var(--ease);
}
.front__go .i-arrow { transform: rotate(-45deg); }
.front:hover .front__go, .concept--cta:hover .front__go { background: var(--blue); border-color: var(--blue); }
.front:hover .front__go .i-arrow, .concept--cta:hover .front__go .i-arrow { transform: rotate(0); }

/* ---------- Seções: cabeçalho ---------- */
.shead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: end; }
.shead__side { display: grid; justify-items: start; gap: 30px; max-width: 470px; padding-bottom: 8px; }
.shead__side p { color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }

/* ---------- Produção ---------- */
.production { padding-top: clamp(40px, 6vw, 80px); }
.gallery { margin-top: clamp(56px, 7vw, 100px); }
.gallery__pin { position: relative; }
.gallery__bar { display: flex; align-items: center; gap: 28px; margin-bottom: 26px; font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.gallery__label { display: inline-flex; align-items: center; gap: 12px; }
.gallery__progress { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.gallery__progress i { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.gallery__count { font-variant-numeric: tabular-nums; }
.gallery__count b { color: var(--text); font-weight: 500; }
.gallery__track {
  display: flex; gap: clamp(14px, 1.6vw, 24px);
  padding: 4px var(--pad) 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery.is-pinned .gallery__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.gallery.is-pinned .gallery__track { overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform; }

.concept {
  position: relative; flex: 0 0 auto; overflow: hidden; isolation: isolate;
  width: min(80vw, 440px); aspect-ratio: 4 / 5;
  background: var(--surface); scroll-snap-align: start;
}
.gallery.is-pinned .concept { width: auto; height: min(68vh, 660px); }
.concept__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.concept__parallax { position: absolute; top: 0; bottom: 0; left: -8%; right: -8%; }
.concept__parallax img, .concept__parallax video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.concept__parallax video { opacity: 0; transition: opacity 1.2s ease, transform 1.6s var(--ease); }
.concept__parallax video.is-playing { opacity: 1; }
.concept:hover .concept__parallax img, .concept:hover .concept__parallax video { transform: scale(1.05); }
.concept::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 4, 7, .35) 0%, rgba(2, 4, 7, 0) 22%, rgba(2, 4, 7, 0) 52%, rgba(2, 4, 7, .92) 100%); }
.concept__tag {
  position: absolute; top: 18px; left: 18px;
  font: 500 10.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 11px; background: rgba(2, 4, 7, .45); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.concept__info { position: absolute; left: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); bottom: clamp(18px, 2vw, 28px); }
.concept__title { font-size: clamp(22px, 2vw, 32px); line-height: 1.05; text-transform: uppercase; }
.concept__meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-strong); font-size: 13px; color: var(--muted); }
.concept--cta {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(24px, 2.6vw, 36px);
  background: linear-gradient(160deg, rgba(0, 124, 234, .22) 0%, rgba(2, 4, 7, 0) 60%), var(--surface);
  border: 1px solid var(--line);
}
.concept--cta::after { display: none; }
.concept--cta__top { max-width: 240px; font-size: 14px; color: var(--muted); }
.concept--cta__title { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.04; text-transform: uppercase; max-width: 300px; }
.concept--cta .front__go { top: auto; bottom: clamp(24px, 2.6vw, 36px); }

/* Fidelidade */
.fidelity { padding-block: clamp(90px, 11vw, 160px) 0; }
.fidelity__media { position: relative; height: min(92vh, 880px); overflow: hidden; isolation: isolate; }
.fidelity__inner { position: absolute; inset: 0; z-index: -2; }
.fidelity__inner img, .fidelity__inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fidelity__inner video { opacity: 0; transition: opacity 1.2s ease; }
.fidelity__inner video.is-playing { opacity: 1; }
.fidelity__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(2, 4, 7, .92) 0%, rgba(2, 4, 7, .1) 55%), linear-gradient(90deg, rgba(2, 4, 7, .6) 0%, transparent 60%); }
.fidelity__content { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(32px, 5vw, 72px); }

.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(56px, 7vw, 100px); }
.caps li { padding: 28px 0 34px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 38px 1fr; gap: 8px 8px; }
.caps span { font: 500 11px/1.8 var(--f-body); letter-spacing: .16em; color: var(--orange); }
.caps h4 { font-size: clamp(16px, 1.3vw, 19px); text-transform: uppercase; line-height: 1.25; }
.caps p { grid-column: 2; color: var(--muted); font-size: 15px; }

/* ---------- Soluções ---------- */
.solutions {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(100px, 12vw, 180px);
  padding-block: clamp(110px, 12vw, 180px);
  background: radial-gradient(ellipse 70% 45% at 85% 0%, rgba(0, 124, 234, .2), transparent 70%), var(--black);
  border-top: 1px solid var(--line);
}
.solutions__bg { position: absolute; inset: 0 0 auto 0; height: 80%; z-index: -1; opacity: .26; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.solutions__bg img { width: 100%; height: 100%; object-fit: cover; }

.demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 100px); align-items: center; margin-top: clamp(64px, 8vw, 110px); }
.tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tab {
  position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: 10px;
  text-align: left; padding: 22px 0; border-bottom: 1px solid var(--line);
  color: var(--dim); transition: color .4s;
}
.tab:hover { color: var(--muted); }
.tab__num { font: 500 11.5px/1.7 var(--f-body); letter-spacing: .18em; transition: color .4s; }
.tab__title { font-size: clamp(15px, 1.3vw, 19px); text-transform: uppercase; line-height: 1.3; }
.tab__desc { grid-column: 2; font-size: 14.5px; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--ease), opacity .5s, margin .7s var(--ease); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"] .tab__num { color: var(--orange); }
.tab[aria-selected="true"] .tab__desc { max-height: 90px; opacity: 1; margin-top: 8px; }
.tab__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition-property: transform; transition-timing-function: linear; }
.tab.is-timing .tab__progress { transform: scaleX(1); }
[data-auto="false"] .tab[aria-selected="true"] .tab__progress { transform: scaleX(1); transition: transform .8s var(--ease) !important; }

.demo__device { position: relative; }
.demo__device::before { content: ""; position: absolute; inset: 10% -6% -8%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 124, 234, .35), transparent); filter: blur(30px); }
.chat {
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #0b1320 0%, #05080d 100%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 60px 140px -60px rgba(0, 124, 234, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.chat__head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.chat__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); flex: none; }
.chat__avatar img { width: 22px; }
.chat__who { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.chat__name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.chat__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 0 0 rgba(61, 157, 245, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(61, 157, 245, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 157, 245, 0); } }
.chat__chip { font: 500 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; }
.chat__body {
  height: clamp(340px, 34vw, 430px); overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; padding: 24px 20px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px); mask-image: linear-gradient(180deg, transparent 0, #000 48px);
}
.chat__body > :first-child { margin-top: auto; }
.msg {
  max-width: 80%; padding: 11px 15px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.45; font-weight: 400;
  opacity: 0; transform: translateY(12px) scale(.97);
  transition: opacity .45s ease, transform .7s var(--ease);
  flex: none;
}
.msg.is-in { opacity: 1; transform: none; }
.msg--in { align-self: flex-start; background: #151d2a; border-bottom-left-radius: 4px; transform-origin: bottom left; }
.msg--out { align-self: flex-end; background: var(--blue-deep); color: #fff; border-bottom-right-radius: 4px; transform-origin: bottom right; }
.msg--typing { display: flex; gap: 5px; padding: 15px 16px; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .85); animation: typing 1s infinite ease-in-out; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 20px; border-top: 1px solid var(--line); }
.chat__event {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #ffb48c;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(255, 126, 57, .1); border: 1px solid rgba(255, 126, 57, .35);
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .7s var(--ease);
}
.chat__event.is-in { opacity: 1; transform: none; }
.chat__event i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; box-shadow: 0 0 10px var(--orange); }
.chat__note { font: 500 10px/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); text-align: right; }

.flow { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.flow__node { flex: none; font: 500 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(2, 4, 7, .6); }
.flow__node--ai { color: var(--text); border-color: rgba(0, 124, 234, .6); background: rgba(0, 124, 234, .14); }
.flow__link { position: relative; flex: 1; min-width: 12px; height: 1px; background: var(--line-strong); overflow: hidden; }
.flow__link::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -45%; background: linear-gradient(90deg, transparent, var(--blue-hi), transparent); animation: flow 2.2s linear infinite; }
.flow__link:nth-of-type(4)::after { animation-delay: .7s; }
.flow__link:nth-of-type(6)::after { animation-delay: 1.4s; }
@keyframes flow { to { left: 100%; } }

.objections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(80px, 10vw, 140px); }
.objection { position: relative; padding: clamp(28px, 3.6vw, 52px); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(240, 240, 240, .03), rgba(240, 240, 240, 0)); overflow: hidden; }
.objection::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--grad-orange); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease); }
.objection:hover::before { transform: scaleY(1); }
.objection__label { font: 500 11px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.objection__q { margin-top: 20px; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.2; text-transform: uppercase; }
.objection__a { margin-top: 20px; color: var(--muted); max-width: 540px; }
.objection__a strong { color: var(--orange); font-weight: 600; }

/* ---------- Case ---------- */
.case {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(100vh, 820px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(120px, 14vw, 200px) clamp(56px, 7vw, 96px);
}
.case__bg { position: absolute; inset: -10% 0; z-index: -2; will-change: transform; }
.case__bg img { width: 100%; height: 100%; object-fit: cover; }
.case::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--black) 0%, rgba(2, 4, 7, .3) 26%, rgba(2, 4, 7, .45) 55%, rgba(2, 4, 7, .96) 88%, var(--black) 100%); }
.case__head { max-width: 920px; }
.case__client { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--muted); font-size: 14px; }
.case__client svg { width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 1.5; }
.case__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(48px, 6vw, 88px); border: 1px solid var(--line); background: var(--line); }
.case__cell { padding: clamp(22px, 2.4vw, 34px); background: rgba(2, 4, 7, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.case__cell h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 500 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-hi); }
.case__cell h3 span { color: var(--dim); }
.case__cell p { font-size: 15px; line-height: 1.6; }
.case__link { margin-top: 44px; }

/* ---------- Por que ---------- */
.why { padding-block: clamp(110px, 13vw, 190px); }
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(56px, 7vw, 96px); }
.aud { padding-top: 26px; border-top: 1px solid var(--line-strong); }
.aud h3 { font-size: clamp(18px, 1.6vw, 24px); text-transform: uppercase; margin-bottom: 12px; }
.aud p { color: var(--muted); }
.pillars { margin-top: clamp(80px, 10vw, 150px); border-top: 1px solid var(--line); }
.pillar { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 32px; align-items: center; padding: clamp(26px, 3vw, 44px) 0; border-bottom: 1px solid var(--line); }
.pillar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--blue), transparent 80%); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.pillar:hover::after { transform: scaleX(1); }
.pillar__num { font: 500 12px/1 var(--f-body); letter-spacing: .2em; color: var(--dim); transition: color .4s; }
.pillar__title { font-size: clamp(20px, 2.7vw, 42px); line-height: 1.05; text-transform: uppercase; transition: transform .8s var(--ease); }
.pillar__desc { color: var(--muted); }
.pillar:hover .pillar__num { color: var(--orange); }
.pillar:hover .pillar__title { transform: translateX(14px); }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(120px, 14vw, 210px) clamp(80px, 9vw, 130px); border-top: 1px solid var(--line); }
.cta__glow { position: absolute; left: -10%; right: -10%; top: -10%; height: 90%; z-index: -1; background: radial-gradient(ellipse 55% 60% at 70% 0%, rgba(0, 124, 234, .28), transparent 70%); }
.cta__mark { position: absolute; right: -8vw; top: 6%; width: min(62vw, 900px); z-index: -1; opacity: .045; }
.cta__title { font-size: clamp(34px, 6.2vw, 100px); line-height: .98; text-transform: uppercase; letter-spacing: -.01em; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 60px; margin-top: clamp(40px, 5vw, 64px); }
.cta__lead { max-width: 520px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }

.explore { margin-top: clamp(100px, 12vw, 170px); }
.explore__title { font: 500 12px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.explore__list a { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 20px; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); transition: opacity .5s; }
.explore__num { font: 500 12px/1 var(--f-body); letter-spacing: .2em; color: var(--dim); }
.explore__name { font-size: clamp(22px, 3.4vw, 52px); line-height: 1.05; text-transform: uppercase; color: rgba(240, 240, 240, .82); transition: color .4s, transform .8s var(--ease); }
.explore__go { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); transition: background-color .5s, border-color .5s; }
.explore__go .i-arrow { transform: rotate(-45deg); }
.explore__list a:hover .explore__name, .explore__list a:focus-visible .explore__name { color: var(--text); transform: translateX(14px); }
.explore__list a:hover .explore__go { background: var(--orange); border-color: var(--orange); color: var(--black); }
.explore__list a:hover .explore__go .i-arrow { transform: rotate(0); }
@media (hover: hover) { .explore__list:hover a:not(:hover) { opacity: .38; } }
.explore__preview { position: fixed; top: 0; left: 0; z-index: 40; width: 340px; aspect-ratio: 4 / 3; overflow: hidden; pointer-events: none; opacity: 0; scale: .85; transition: opacity .4s, scale .6s var(--ease); display: none; }
.explore__preview.is-on { opacity: 1; scale: 1; }
.explore__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.explore__preview img.is-active { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .explore__preview { display: block; } }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 110px); }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer__brand img { width: 72px; }
.footer__word-sm { font-size: 28px; line-height: 1; margin: 18px 0 12px; letter-spacing: .01em; }
.footer__h { font: 500 11px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; }
.footer li a { display: inline-block; padding: 5px 0; font-size: 15px; color: var(--muted); transition: color .3s; }
.footer li a:hover { color: var(--text); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 72px; padding-block: 26px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }
.footer__word {
  font-size: clamp(64px, 15.5vw, 280px); line-height: .8; text-align: center; white-space: nowrap; user-select: none;
  letter-spacing: -.01em; margin-top: 10px; transform: translateY(16%);
  background: linear-gradient(180deg, rgba(240, 240, 240, .16) 0%, rgba(240, 240, 240, 0) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =========================================================
   ===== PÁGINAS INTERNAS =====
   Componentes compartilhados das páginas internas (shell: _template.html).
   Só variáveis do :root. Blocos de uma página específica ficam no fim
   desta seção, cada um com o próprio comentário.
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Navegação: página atual (mesmo tratamento do .is-active) ---------- */
/* aria-current="true" marca a seção (ex.: Blog dentro de um post) com o mesmo visual */
.nav__links a[aria-current="page"], .nav__links a[aria-current="true"] { color: var(--text); }
.nav__links a[aria-current="page"]::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.menu__link[aria-current="page"]::after, .menu__link[aria-current="true"]::after {
  content: ""; align-self: center; flex: none; margin-left: auto; width: 22px; height: 9px;
  background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
}
.footer li a[aria-current="page"] { color: var(--text); }

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 70vh; min-height: 70svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 56px) 0 clamp(48px, 7vw, 96px);
}
.page-hero--tall { min-height: 86vh; min-height: 86svh; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.page-hero__zoom { position: absolute; inset: 0; }
.page-hero__media img, .page-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 60% 50%); }
.page-hero__media video { opacity: 0; transition: opacity 1.4s ease; }
.page-hero__media video.is-playing { opacity: 1; }
.page-hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--black) 92%, transparent) 0%, color-mix(in srgb, var(--black) 62%, transparent) 36%, transparent 72%),
    linear-gradient(0deg, var(--black) 0%, transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--black) 72%, transparent) 0%, transparent 24%);
}
.page-hero__content { position: relative; z-index: 2; }
.page-hero__title {
  margin: 26px 0 24px;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 600;
  font-size: clamp(32px, 5.2vw, 82px); line-height: .98; letter-spacing: -.01em; text-transform: uppercase;
}
.page-hero__lead { max-width: 560px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; color: var(--muted); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 34px; font: 500 12px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.page-hero__meta li { display: inline-flex; align-items: center; gap: 10px; }
.page-hero__meta li::before { content: ""; width: 6px; height: 6px; background: var(--blue); transform: skewX(-20deg); }

@media all { /* animações ativas em todos os dispositivos */
  html.js .page-hero .line > span { transform: translateY(110%); }
  html.js .page-hero [data-hero-fade] { opacity: 0; transform: translateY(22px); }
  html.js .page-hero__zoom { transform: scale(1.1); }
  html.is-ready .page-hero .line > span { transform: none; transition: transform 1.3s var(--ease) calc(var(--i, 0) * 100ms + 120ms); }
  html.is-ready .page-hero [data-hero-fade] { opacity: 1; transform: none; transition: opacity .9s ease calc(var(--d, 0) * 1ms + 120ms), transform 1.2s var(--ease) calc(var(--d, 0) * 1ms + 120ms); }
  html.is-ready .page-hero__zoom { transform: scale(1); transition: transform 2.4s var(--ease); }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: ""; width: 14px; height: 6px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.breadcrumb a { display: inline-block; padding: 8px 0; transition: color .3s; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* ---------- Page intro ---------- */
.page-intro { padding-block: clamp(90px, 12vw, 180px) clamp(60px, 8vw, 120px); }
.page-intro__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: end; }
.page-intro__statement { font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(24px, 3.2vw, 48px); line-height: 1.16; letter-spacing: -.01em; }
.page-intro__statement em { color: var(--blue-hi); }
.page-intro__aside { display: grid; justify-items: start; gap: 24px; max-width: 440px; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }

/* ---------- Seção genérica ---------- */
.section { position: relative; padding-block: clamp(90px, 11vw, 170px); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section--flush-top { padding-top: 0; }
.section__head { margin-bottom: clamp(48px, 6vw, 88px); }

/* ---------- Contato: layout ---------- */
.contact { padding-block: clamp(70px, 9vw, 140px) clamp(110px, 12vw, 190px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.contact__title { font-size: clamp(22px, 2.5vw, 38px); }
.contact__note { margin: 20px 0 clamp(36px, 4vw, 56px); color: var(--muted); font-size: 14.5px; }

/* ---------- Formulário ---------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.form[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
.field { display: grid; gap: 10px; align-content: start; min-width: 0; }
.field__label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 0; font: 500 12px/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.field__label small { font-size: 11px; font-weight: 400; letter-spacing: .12em; color: var(--muted); }
.field__hint { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.field__control {
  width: 100%; min-height: 54px; padding: 14px 16px;
  font: 300 16px/1.4 var(--f-body); color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--line-strong); border-radius: 0; appearance: none;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.field__control--narrow { max-width: 420px; }
textarea.field__control { min-height: 170px; resize: vertical; }
.field__control::placeholder { color: var(--muted); }
.field__control:hover { border-color: color-mix(in srgb, var(--text) 38%, transparent); }
.field__control:focus-visible { outline: none; border-color: var(--blue-hi); background: var(--surface-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.field__control[aria-invalid="true"] { border-color: var(--orange); }
.field__control[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 28%, transparent); }
.field__control:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 100px var(--surface-2) inset; }
.field__select { position: relative; display: block; max-width: 420px; }
.field__select::after { content: ""; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field__select .field__control { padding-right: 48px; cursor: pointer; }
.field__select option { background: var(--surface); color: var(--text); }
.field__error { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--orange); }
.field__error[hidden] { display: none; }
.field__error::before { content: ""; flex: none; width: 12px; height: 5px; margin-top: .55em; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }

.choices { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.choices legend { margin-bottom: 12px; }
.choices__list { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 18px;
  font: 500 13.5px/1.2 var(--f-body); color: var(--muted); cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: color .3s, border-color .3s, background-color .3s;
}
.choice span::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--dim); transition: border-color .3s, background-color .3s, box-shadow .3s; }
.choice:hover span { color: var(--text); border-color: color-mix(in srgb, var(--text) 38%, transparent); }
.choice input:checked + span { color: var(--text); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.choice input:checked + span::before { border-color: var(--blue-hi); background: var(--blue-hi); box-shadow: inset 0 0 0 2px var(--surface); }
.choice input:focus-visible + span { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
.choices[data-invalid] .choice span { border-color: color-mix(in srgb, var(--orange) 60%, transparent); }

.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__summary { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); background: color-mix(in srgb, var(--orange) 8%, transparent); font-size: 14.5px; font-weight: 400; color: var(--text); }
.form__summary:empty { display: none; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.form__legal { max-width: 420px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--black) 25%, transparent); border-top-color: var(--black); animation: afx-spin .8s linear infinite; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .btn__spinner { display: block; }
.btn[aria-busy="true"] .i-arrow { display: none; }
.btn:disabled { cursor: not-allowed; }
@keyframes afx-spin { to { transform: rotate(360deg); } }

.form-success {
  display: grid; justify-items: start; gap: 20px; padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 18%, transparent) 0%, transparent 60%), var(--surface);
}
.form-success[hidden] { display: none; }
.form-success .label { margin-bottom: 0; }
.form-success__title:focus { outline: none; }
.form-success__title:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 6px; }
.form-success__text { max-width: 520px; color: var(--muted); }
.form-success__demo { padding: 12px 14px; border: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--muted); }
.form-success__demo[hidden] { display: none; }
.form-success__actions { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 8px; }

/* ---------- Coluna de confiança ---------- */
.trust { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.trust__block { padding: clamp(24px, 3vw, 36px); background: var(--black); }
.trust__title { margin-bottom: 18px; font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--blue-hi); }
.trust__steps li { display: grid; grid-template-columns: 38px 1fr; gap: 6px 8px; padding: 16px 0; border-top: 1px solid var(--line); }
.trust__steps li:first-child { padding-top: 0; border-top: 0; }
.trust__steps span { font: 500 11px/1.9 var(--f-body); letter-spacing: .16em; color: var(--orange); }
.trust__steps h3 { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 15px; line-height: 1.3; text-transform: uppercase; }
.trust__steps p { grid-column: 2; font-size: 14.5px; color: var(--muted); }
.trust__sla { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; text-transform: uppercase; }
.trust__seal { display: flex; align-items: center; gap: 20px; }
.trust__seal img { width: 64px; height: auto; flex: none; }
.trust__text { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* ---------- Páginas internas: responsivo ---------- */
@media (max-width: 1100px) {
  .contact__grid { grid-template-columns: 1fr; }
  .trust { position: static; }
}
@media (max-width: 767px) {
  .page-hero { min-height: 64vh; min-height: 64svh; }
  .page-hero--tall { min-height: 80vh; min-height: 80svh; }
  .page-hero__shade {
    background:
      linear-gradient(0deg, var(--black) 6%, color-mix(in srgb, var(--black) 80%, transparent) 46%, color-mix(in srgb, var(--black) 20%, transparent) 80%),
      linear-gradient(180deg, color-mix(in srgb, var(--black) 70%, transparent) 0%, transparent 22%);
  }
  .page-hero__title { font-size: clamp(28px, 8.6vw, 46px); }
  .page-intro__grid, .form__row { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }
}

/* ---------- CTA final de página interna (compartilhado) ---------- */
.page-cta {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(88vh, 860px);
  display: flex; align-items: center;
  padding-block: clamp(110px, 13vw, 190px);
  border-top: 1px solid var(--line);
}
.page-cta__media { position: absolute; inset: 0; z-index: -2; }
.page-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 70% 50%); }
.page-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--black) 0%, color-mix(in srgb, var(--black) 78%, transparent) 38%, transparent 75%),
    linear-gradient(180deg, var(--black) 0%, transparent 22%, transparent 78%, var(--black) 100%);
}
.page-cta__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(34px, 5.8vw, 94px); line-height: .98; letter-spacing: -.01em; text-transform: uppercase; }
.page-cta__lead { max-width: 520px; margin: 30px 0 42px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }
.page-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }

/* ---------- Página: Produção Visual com IA (producao.html) ---------- */
/* Capítulos dos concept projects */
.chapters { display: grid; gap: clamp(100px, 13vw, 190px); margin-top: clamp(64px, 8vw, 110px); }
.chapter { display: grid; gap: clamp(28px, 3.5vw, 52px); }
.chapter__stage { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 21 / 9; background: var(--surface); }
.chapter__stage > img, .chapter__stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 55%); }
.chapter__stage > video { opacity: 0; transition: opacity 1.2s ease; }
.chapter__stage > video.is-playing { opacity: 1; }
.chapter__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--black) 88%, transparent) 0%, transparent 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--black) 50%, transparent) 0%, transparent 45%);
}
.chapter__overlay { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 44px); z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.chapter__index { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.chapter__index b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; letter-spacing: .08em; color: var(--orange); }
.chapter__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(34px, 6.2vw, 104px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.chapter__type {
  flex: none; padding: 10px 14px; white-space: nowrap;
  font: 500 11.5px/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text);
  border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--black) 45%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.chapter__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.chapter--flip .chapter__body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.chapter--flip .chapter__detail { order: -1; justify-self: start; }
.chapter__text { display: grid; gap: 28px; align-content: start; }
.chapter__lead { max-width: 640px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; color: var(--text); }
.chapter__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.chapter__facts div { padding: 18px 20px; background: var(--black); }
.chapter__facts .is-wide { grid-column: 1 / -1; }
.chapter__facts dt { margin-bottom: 10px; font: 500 11px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-hi); }
.chapter__facts dd { margin: 0; font-size: 15px; line-height: 1.5; }
.chapter__detail { position: relative; justify-self: end; width: 100%; max-width: 440px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.chapter__detail img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transition: transform 1.6s var(--ease); }
.chapter__detail:hover img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
.chapter__detail figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: 8px 10px;
  font: 500 10.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase;
  background: color-mix(in srgb, var(--black) 60%, transparent); border: 1px solid var(--line-strong);
}

/* Método em quatro etapas */
.method { display: grid; gap: clamp(70px, 9vw, 130px); margin-top: clamp(64px, 8vw, 110px); }
.method__step { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 100px); align-items: center; }
.method__step:nth-child(even) .method__visual { order: -1; }
.method__num { display: block; margin-bottom: 18px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(56px, 8vw, 120px); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--line-strong); }
.method__who { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 500 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.method__who::before { content: ""; width: 18px; height: 7px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.method__who--ai::before { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-hi); clip-path: none; box-shadow: 0 0 12px var(--blue); }
.method__title { margin-bottom: 18px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(26px, 3vw, 46px); line-height: 1.02; text-transform: uppercase; }
.method__text { max-width: 480px; color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); }
.method__visual { position: relative; aspect-ratio: 4 / 3; }

.mood { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 100%; }
.mood figure { position: relative; margin: 0; overflow: hidden; background: var(--surface-2); }
.mood figure:first-child { grid-row: 1 / 3; }
.mood img { width: 100%; height: 100%; object-fit: cover; }
.mood__tag, .variants__tag {
  position: absolute; left: 10px; top: 10px; padding: 7px 9px;
  font: 500 10px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase;
  background: color-mix(in srgb, var(--black) 62%, transparent); border: 1px solid var(--line-strong);
}
.mood__palette { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; padding: 8px; background: color-mix(in srgb, var(--black) 70%, transparent); border: 1px solid var(--line-strong); }
.mood__palette i { width: 22px; height: 22px; }
.mood__palette i:nth-child(1) { background: var(--black); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mood__palette i:nth-child(2) { background: var(--blue); }
.mood__palette i:nth-child(3) { background: var(--grad-orange); }
.mood__palette i:nth-child(4) { background: var(--text); }

.variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; height: 100%; }
.variants figure { position: relative; margin: 0; overflow: hidden; background: var(--surface-2); }
.variants img { width: 100%; height: 100%; object-fit: cover; transition: opacity .6s, filter .6s, transform 1.4s var(--ease); }
.variants figure:hover img { transform: scale(1.05); }
.variants--curated figure:not(.is-picked) img { opacity: .24; filter: grayscale(.8); }
.variants--curated .is-picked { box-shadow: inset 0 0 0 2px var(--blue-hi); }
.variants--curated .is-picked img { transform: scale(1.02); }
.variants__badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px;
  font: 600 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--black); background: var(--text);
}
.variants__badge::before { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: rotate(-45deg) translateY(-1px); }

.grade { position: relative; height: 100%; overflow: hidden; background: var(--surface-2); }
.grade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grade__raw { filter: saturate(.2) contrast(.78) brightness(1.2); clip-path: inset(0 50% 0 0); }
.grade::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--text); }
.grade__tag { position: absolute; bottom: 12px; padding: 7px 10px; font: 500 10.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; background: color-mix(in srgb, var(--black) 62%, transparent); border: 1px solid var(--line-strong); }
.grade__tag--raw { left: 12px; }
.grade__tag--final { right: 12px; border-color: var(--blue); }

/* Comparador de fidelidade */
.compare { --pos: 50%; margin-top: clamp(56px, 7vw, 100px); }
.compare__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); cursor: ew-resize; user-select: none; touch-action: pan-y; }
.compare__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare__after { clip-path: inset(0 0 0 var(--pos)); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--text); box-shadow: 0 0 24px color-mix(in srgb, var(--blue) 70%, transparent); pointer-events: none; }
.compare__knob {
  position: absolute; top: 50%; left: var(--pos); width: 58px; height: 58px; margin: -29px 0 0 -29px;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--black) 55%, transparent); border: 1px solid var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.compare__knob svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.6; }
.compare__tag {
  position: absolute; top: clamp(12px, 2vw, 22px); padding: 9px 12px; pointer-events: none;
  font: 500 11px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase;
  background: color-mix(in srgb, var(--black) 58%, transparent); border: 1px solid var(--line-strong);
}
.compare__tag--left { left: clamp(12px, 2vw, 22px); }
.compare__tag--right { right: clamp(12px, 2vw, 22px); border-color: var(--blue); }
.compare__control { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.compare__label { flex: none; font: 500 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.compare__range {
  flex: 1; min-width: 0; height: 28px; margin: 0; cursor: pointer; appearance: none; background: transparent;
}
.compare__range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--text) var(--pos), var(--line-strong) var(--pos)); }
.compare__range::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--text) var(--pos), var(--line-strong) var(--pos)); }
.compare__range::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--text); border: 5px solid var(--black); box-shadow: 0 0 0 1px var(--text); }
.compare__range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 5px solid var(--black); box-shadow: 0 0 0 1px var(--text); }
.compare__range:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 6px; }
.compare__note { margin-top: 14px; font-size: 13px; color: var(--muted); }

.checks__title { margin-top: clamp(64px, 8vw, 110px); font: 500 12px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: 28px; }
.checks li { display: flex; align-items: baseline; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); font-size: clamp(15px, 1.2vw, 17px); }
.checks li::before { content: ""; flex: none; width: 13px; height: 7px; border-left: 2px solid var(--blue-hi); border-bottom: 2px solid var(--blue-hi); transform: rotate(-45deg) translateY(-4px); }
.checks__note { margin-top: 24px; padding-left: 36px; position: relative; color: var(--muted); }
.checks__note::before { content: ""; position: absolute; left: 0; top: .8em; width: 22px; height: 2px; background: var(--orange); }

/* Possibilidades */
.possib { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(56px, 7vw, 100px); }
.possib__item {
  position: relative; overflow: hidden; isolation: isolate; grid-column: span 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(420px, 40vw, 600px); padding: clamp(22px, 2.6vw, 36px);
  background: var(--black); border: 1px solid var(--line);
}
.possib__item:nth-child(1) { grid-column: span 7; }
.possib__item:nth-child(2) { grid-column: span 5; }
.possib__item > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.possib__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--black) 10%, transparent) 0%, color-mix(in srgb, var(--black) 35%, transparent) 40%, color-mix(in srgb, var(--black) 94%, transparent) 100%); }
.possib__item::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.possib__item:hover > img { transform: scale(1.05); }
.possib__item:hover::after { transform: scaleX(1); }
.possib__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }
.possib__title { margin: 14px 0 12px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.04; text-transform: uppercase; }
.possib__text { max-width: 460px; color: var(--muted); }
.possib__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.possib__tags li { padding: 7px 10px; font: 500 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; background: color-mix(in srgb, var(--black) 50%, transparent); border: 1px solid var(--line-strong); }

/* Desdobramentos: troca de formato */
.formats { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 90px); align-items: center; margin-top: clamp(56px, 7vw, 100px); }
.formats__options { display: grid; gap: 10px; }
.formats__btn {
  display: grid; grid-template-columns: 36px 64px 1fr; align-items: center; gap: 14px; width: 100%;
  padding: 18px 20px; text-align: left; color: var(--muted); border: 1px solid var(--line);
  transition: color .3s, border-color .3s, background-color .3s;
}
.formats__btn:hover { color: var(--text); border-color: var(--line-strong); }
.formats__btn[aria-pressed="true"] { color: var(--text); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.formats__shape { display: grid; place-items: center; width: 36px; height: 30px; }
.formats__shape i { display: block; border: 1.5px solid currentColor; }
.formats__ratio { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 18px; }
.formats__use { font-size: 14.5px; }
.formats__stage { position: relative; height: min(62vh, 600px); display: grid; place-items: center; }
.formats__frame {
  position: relative; overflow: hidden; width: 100%; max-height: 100%; aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px var(--line-strong), 0 50px 120px -50px color-mix(in srgb, var(--blue) 55%, transparent);
  transition: width .9s var(--ease), height .9s var(--ease);
}
.formats__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; }
.formats__badge { position: absolute; left: 14px; top: 14px; padding: 8px 10px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 13px; letter-spacing: .06em; background: color-mix(in srgb, var(--black) 60%, transparent); border: 1px solid var(--line-strong); }
.formats__corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--text); }
.formats__corner--tl { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.formats__corner--tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; }
.formats__corner--bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; }
.formats__corner--br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }
.formats__caption { margin-top: 18px; text-align: center; font: 500 11.5px/1.4 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.formats__caption span { color: var(--text); }

/* Produção: responsivo */
@media (max-width: 1100px) {
  .chapter__stage { aspect-ratio: 16 / 9; }
  .chapter__body, .chapter--flip .chapter__body, .method__step, .formats { grid-template-columns: 1fr; }
  .chapter--flip .chapter__detail, .method__step:nth-child(even) .method__visual { order: 0; }
  .chapter__detail, .chapter--flip .chapter__detail { justify-self: start; max-width: 520px; }
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .possib__item, .possib__item:nth-child(2) { grid-column: span 6; }
  .possib__item:nth-child(1) { grid-column: span 12; }
}
@media (max-width: 767px) {
  .chapter__stage { aspect-ratio: 4 / 5; }
  .chapter__overlay { flex-direction: column; align-items: flex-start; }
  .chapter__facts { grid-template-columns: 1fr; }
  .method__visual { aspect-ratio: 1 / 1; }
  .checks { grid-template-columns: 1fr; }
  .possib__item, .possib__item:nth-child(n) { grid-column: span 12; min-height: 440px; }
  .compare__frame { aspect-ratio: 4 / 3; }
  .compare__tag { padding: 7px 9px; font-size: 9.5px; letter-spacing: .12em; }
  .compare__tag--right { top: auto; bottom: 12px; }
  .compare__control { flex-direction: column; align-items: stretch; gap: 8px; }
  .formats { gap: 28px; }
  .formats__stage { height: auto; aspect-ratio: 1 / 1; }
  .page-cta::before { background: linear-gradient(0deg, var(--black) 10%, color-mix(in srgb, var(--black) 78%, transparent) 55%, color-mix(in srgb, var(--black) 40%, transparent) 100%); }
}

/* ---------- Página: Soluções de IA (solucoes.html) ---------- */
/* Jornada: reaproveita os cards de .possib em grade uniforme */
.possib--even .possib__item, .possib--even .possib__item:nth-child(n) { grid-column: span 4; min-height: clamp(420px, 36vw, 540px); }

/* Fluxo WhatsApp → IA → CRM → vendedor */
.flowmap { margin-top: clamp(56px, 7vw, 100px); border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 10%, transparent) 0%, transparent 55%), var(--black); }
.flowmap__nodes { display: flex; align-items: center; padding: clamp(16px, 2.4vw, 32px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.flowmap__nodes::-webkit-scrollbar { display: none; }
.flowmap__node {
  position: relative; flex: none; overflow: hidden;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center;
  min-height: 64px; padding: 12px 18px 12px 12px; text-align: left;
  color: var(--muted); background: var(--black); border: 1px solid var(--line);
  transition: color .4s, border-color .4s, background-color .4s;
}
.flowmap__node:hover { color: var(--text); }
.flowmap__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color .4s, border-color .4s, color .4s; }
.flowmap__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flowmap__step { font: 500 10.5px/1 var(--f-body); letter-spacing: .2em; color: var(--muted); }
.flowmap__name { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 14px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.flowmap__node[aria-selected="true"] { color: var(--text); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.flowmap__node[aria-selected="true"] .flowmap__icon { color: var(--text); background: var(--blue); border-color: var(--blue-hi); }
.flowmap__node.is-done { color: var(--text); border-color: var(--line-strong); }
.flowmap__node.is-done .flowmap__icon { color: var(--blue-hi); border-color: var(--blue-hi); }
.flowmap__progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--blue-hi); transform: scaleX(0); transform-origin: left; }
.flowmap.is-timing .flowmap__node[aria-selected="true"] .flowmap__progress { animation: afx-progress var(--flow-duration, 5.2s) linear forwards; }
@keyframes afx-progress { to { transform: scaleX(1); } }
.flowmap__link { position: relative; flex: 1 0 28px; min-width: 28px; height: 1px; background: var(--line-strong); overflow: hidden; }
.flowmap__link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: var(--blue-hi); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.flowmap__link.is-lit::before { transform: scaleX(1); }
.flowmap__link::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, var(--text), transparent); animation: flow 2.4s linear infinite; }

.flowmap__panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: clamp(400px, 34vw, 480px); padding: clamp(28px, 4vw, 64px); }
.flowmap__panel[hidden] { display: none; }
.flowmap__kicker { margin-bottom: 16px; font: 500 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-hi); }
.flowmap__title { margin-bottom: 18px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.04; text-transform: uppercase; }
.flowmap__text { max-width: 440px; color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); }
.flowmap__note { padding: 0 clamp(28px, 4vw, 64px) clamp(18px, 2.4vw, 28px); text-align: right; font: 500 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.mock {
  position: relative; display: grid; gap: 10px; justify-self: center; width: min(100%, 440px); padding: 20px;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: 0 50px 120px -50px color-mix(in srgb, var(--blue) 55%, transparent);
}
.flowmap__panel:not([hidden]) .mock > * { animation: afx-rise .6s var(--ease) both; animation-delay: calc(var(--k, 0) * 140ms + 80ms); }
@keyframes afx-rise { from { opacity: 0; transform: translateY(12px); } }
.mock__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.mock__avatar { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--text) 18%, transparent); }
.mock__time { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mock__msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; font-weight: 400; }
.mock__msg--in { justify-self: start; background: color-mix(in srgb, var(--text) 8%, transparent); border-bottom-left-radius: 4px; }
.mock__msg--out { justify-self: end; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 70%, transparent); border-bottom-right-radius: 4px; }
.mock__label { font: 500 10.5px/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mock__fields { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.mock__fields li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 14px; background: var(--surface); }
.mock__fields span { color: var(--muted); }
.mock__fields b { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.mock__fields b::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--blue-hi); border-bottom: 2px solid var(--blue-hi); transform: rotate(-45deg) translateY(-2px); }
.mock__meter { display: grid; gap: 8px; margin-top: 6px; }
.mock__meter i { display: block; height: 6px; background: var(--line); overflow: hidden; }
.mock__meter b { display: block; width: 82%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-hi)); transform-origin: left; }
.flowmap__panel:not([hidden]) .mock__meter b { animation: afx-grow 1.2s var(--ease) 1s both; }
@keyframes afx-grow { from { transform: scaleX(0); } }
.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mock__status { padding: 6px 10px; font: 600 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--black); background: var(--blue-hi); }
.mock__name { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 17px; line-height: 1.2; text-transform: uppercase; }
.mock__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.mock__grid div { padding: 10px 12px; background: var(--surface); }
.mock__grid dt { margin-bottom: 6px; font: 500 10px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mock__grid dd { margin: 0; font-size: 14px; }
.mock__timeline { display: grid; gap: 8px; margin-top: 4px; }
.mock__timeline li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--muted); }
.mock__timeline li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-hi); }
.mock__notify { display: flex; gap: 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 8%, transparent); }
.mock__notify .mock__name { margin: 6px 0 4px; }
.mock__dot { flex: none; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.mock__small { font-size: 13px; color: var(--muted); }
.mock__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mock__btn { padding: 10px 14px; font: 600 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line-strong); }
.mock__btn--primary { color: var(--black); background: var(--grad-orange); border-color: transparent; }

/* Sistemas sob medida */
.systems { overflow: hidden; isolation: isolate; }
.systems__bg { position: absolute; inset: 0; z-index: -2; }
.systems__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.systems::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--black) 0%, color-mix(in srgb, var(--black) 55%, transparent) 42%, color-mix(in srgb, var(--black) 85%, transparent) 100%); }
.systems__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(56px, 7vw, 100px); }
.systems__card {
  display: grid; align-content: start; gap: 18px; min-height: 300px; padding: clamp(26px, 3vw, 44px);
  background: color-mix(in srgb, var(--black) 62%, transparent); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: border-color .4s;
}
.systems__card:hover { border-color: var(--blue-hi); }
.systems__icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line-strong); }
.systems__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--blue-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.systems__card h3 { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.08; text-transform: uppercase; }
.systems__card p { color: var(--muted); }

/* Objeções */
.answers { display: grid; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(56px, 7vw, 100px); }
.answer {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 90px); align-items: center;
  padding: clamp(28px, 4vw, 64px); border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent);
}
.answer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--grad-orange); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease); }
.answer:hover::before { transform: scaleY(1); }
.answer__label { font: 500 11px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.answer__q { margin: 18px 0 22px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.8vw, 44px); line-height: 1.08; text-transform: uppercase; }
.answer__no { margin-bottom: 16px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(40px, 5vw, 76px); line-height: .9; text-transform: uppercase; color: var(--orange); }
.answer__text { max-width: 560px; color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); }

@keyframes afx-dash { to { stroke-dashoffset: -4.8; } }

.versus { display: grid; gap: 10px; }
.versus__row { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 6px 16px; align-items: center; padding: 22px; border: 1px solid var(--line); }
.versus__row::before { content: ""; grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); font: 600 16px/34px var(--f-body); text-align: center; }
.versus__row--no::before { content: "✕"; color: var(--muted); }
.versus__row--yes { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.versus__row--yes::before { content: "✓"; color: var(--black); background: var(--blue-hi); border-color: var(--blue-hi); }
.versus__who { font: 500 11px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.versus__what { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.2; text-transform: uppercase; }
.versus__row--no .versus__what { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; }

/* Como começa um projeto */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(64px, 8vw, 110px); padding-top: 38px; }
.steps__track { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--line-strong); }
.steps__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue), var(--blue-hi)); transform-origin: left; }
.steps__item { position: relative; display: grid; align-content: start; gap: 14px; }
.steps__item::before { content: ""; position: absolute; top: -32px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue-hi); }
.steps__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .2em; color: var(--orange); }
.steps__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 2vw, 30px); line-height: 1.06; text-transform: uppercase; }
.steps__text { color: var(--muted); }
.steps__get { display: grid; gap: 6px; margin-top: 8px; padding: 14px 16px; background: var(--black); border: 1px solid var(--line); font-size: 14.5px; }
.steps__get span { font: 500 10.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue-hi); }

/* Soluções: responsivo */
@media (max-width: 1100px) {
  .possib--even .possib__item, .possib--even .possib__item:nth-child(n) { grid-column: span 6; }
  .flowmap__panel, .answer { grid-template-columns: 1fr; }
  .systems__grid { grid-template-columns: 1fr; }
  .systems__card { min-height: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 64px; }
  .steps__track { display: none; }
}
@media (max-width: 767px) {
  .possib--even .possib__item, .possib--even .possib__item:nth-child(n) { grid-column: span 12; min-height: 420px; }
  .flowmap__node { padding: 10px 14px 10px 10px; column-gap: 10px; }
  .flowmap__icon { width: 32px; height: 32px; }
  .flowmap__panel { min-height: 0; }
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 32px; }
  .steps__item::before { top: 2px; left: -32px; }
}

/* ---------- Página: Sobre (sobre.html) ---------- */
/* Hero tipográfico: sem mídia, só marca d'água do símbolo */
.page-hero--type {
  min-height: 88vh; min-height: 88svh;
  background: radial-gradient(90% 70% at 85% 18%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 62%), var(--black);
}
.page-hero--type .page-hero__title { font-size: clamp(34px, 7.4vw, 124px); }
.page-hero__mark { position: absolute; z-index: -1; top: 46%; right: -6vw; width: min(78vw, 1100px); opacity: .05; transform: translateY(-50%); pointer-events: none; }
.page-hero__mark img { width: 100%; height: auto; }

/* Origem */
.origin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(64px, 8vw, 120px); }
.origin__step { position: relative; padding-top: 34px; border-top: 1px solid var(--line-strong); }
.origin__step::before { content: ""; position: absolute; top: -5px; left: 0; width: 22px; height: 9px; background: var(--line-strong); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.origin__step--now { border-top-color: var(--orange); }
.origin__step--now::before { background: var(--grad-orange); }
.origin__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; font-variant-numeric: tabular-nums; color: var(--muted); }
.origin__title { margin: 18px 0 14px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 2vw, 30px); line-height: 1.08; text-transform: uppercase; }
.origin__step p { max-width: 380px; color: var(--muted); }

/* O nome: AUT(o) + (art)IFEX = AUTIFEX */
.name__equation {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(14px, 2vw, 32px); margin-top: clamp(64px, 8vw, 120px);
  font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(40px, 7.2vw, 120px); line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase;
}
.name__word { color: transparent; -webkit-text-stroke: 1px var(--line-strong); }
.name__word b { font-weight: inherit; color: var(--text); -webkit-text-stroke: 0; }
.name__op { font-weight: 500; color: var(--orange); }
.name__result { display: flex; flex-basis: 100%; align-items: baseline; gap: inherit; margin-top: clamp(6px, 1vw, 16px); }
.name__defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(56px, 7vw, 96px); }
.name__def { padding-top: 26px; border-top: 1px solid var(--line-strong); }
.name__def dt { display: flex; align-items: baseline; gap: 14px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.1; text-transform: uppercase; }
.name__def dt span { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }
.name__def dd { max-width: 460px; margin: 14px 0 0; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }

/* Posicionamento */
.position__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(56px, 7vw, 100px); }
.position__col { padding: clamp(26px, 3vw, 44px); background: var(--surface); border: 1px solid var(--line); }
.position__col--not { background: transparent; }
.position__h { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; font: 500 12px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--blue-hi); }
.position__h::before { content: ""; width: 22px; height: 9px; flex: none; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.position__col--not .position__h { color: var(--muted); }
.position__col--not .position__h::before { background: var(--line-strong); }
.position__list li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px 24px; padding-block: 20px; border-top: 1px solid var(--line); }
.position__list li:first-child { padding-top: 0; border-top: 0; }
.position__list strong { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.15; text-transform: uppercase; }
.position__list span { color: var(--muted); }
.position__list--not li { display: flex; align-items: center; gap: 14px; font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.15; text-transform: uppercase; color: var(--muted); }
.position__list--not li::before { content: ""; width: 14px; height: 1px; flex: none; background: var(--muted); }
.scale { margin-top: clamp(56px, 7vw, 96px); }
.scale__label { margin-bottom: 22px; font: 500 12px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.scale__bar { height: 8px; background: linear-gradient(90deg, var(--line-strong), var(--blue) 55%, var(--orange)); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); }
.scale__ends { display: flex; justify-content: space-between; gap: 24px; margin-top: 22px; }
.scale__ends p { max-width: 360px; color: var(--muted); font-size: 15px; }
.scale__ends p:last-child { text-align: right; }
.scale__ends strong { display: block; margin-bottom: 8px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); text-transform: uppercase; color: var(--text); }

/* Sob medida: título fixo à esquerda, princípios à direita */
.principles__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(40px, 7vw, 130px); align-items: start; }
.principles__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.principles__intro { max-width: 400px; margin-top: 28px; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }
.principle { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 20px; padding-block: clamp(34px, 4vw, 56px); border-top: 1px solid var(--line); }
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle__num { grid-row: span 2; padding-top: .6em; font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; font-variant-numeric: tabular-nums; color: var(--orange); }
.principle__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.08; text-transform: uppercase; }
.principle p { max-width: 520px; margin-top: 12px; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }

/* Grupo Nexus Unlimited */
.group__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
.group__text > p:not(.label) { max-width: 520px; margin-top: 22px; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }
.group__text .h2 { margin-bottom: 12px; }
.group__text .link-arrow { margin-top: 36px; }
.group__outer { padding: clamp(24px, 3vw, 40px); border: 1px dashed var(--line-strong); }
.group__tag { display: block; font: 500 11px/1.3 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.group__name { display: block; margin: 12px 0 clamp(28px, 4vw, 56px); font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 2vw, 30px); line-height: 1.05; text-transform: uppercase; color: var(--muted); }
.group__inner { position: relative; padding: clamp(26px, 3.4vw, 48px); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--blue) 60%, transparent); }
.group__inner::before { content: ""; position: absolute; top: -1px; left: -1px; width: 64px; height: 3px; background: var(--grad-orange); }
.group__inner img { display: block; width: 88px; height: auto; margin-top: 26px; }
.group__name--afx { margin: 14px 0 26px; font-size: clamp(34px, 4vw, 60px); color: var(--text); }
.group__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.group__chips li { padding: 8px 12px; font: 500 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--line-strong); }

/* ---------- Página: Cases (cases.html) ---------- */
/* Como ler um case */
.reading__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(56px, 7vw, 100px); background: var(--line); border: 1px solid var(--line); }
.reading__steps li { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 32px); background: var(--black); color: var(--muted); font-size: 15px; }
.reading__steps span { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }
.reading__steps strong { margin-top: 8px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.1; text-transform: uppercase; color: var(--text); }

/* Índice automático (JS monta a partir de 3 cases) */
.cases-index { margin-bottom: clamp(56px, 7vw, 100px); }
.cases-index__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cases-index__list a { display: grid; align-content: start; gap: 10px; height: 100%; padding: 24px; background: var(--black); transition: background .4s; }
.cases-index__list a:hover { background: var(--surface); }
.cases-index__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }
.cases-index__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 18px; line-height: 1.15; text-transform: uppercase; }
.cases-index__meta { color: var(--muted); font-size: 14px; }

/* Entrada de case (padrão documentado em cases.html) */
.cases { display: grid; gap: clamp(110px, 14vw, 200px); }
.case-entry__head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: end; }
.case-entry__intro .label { align-items: baseline; line-height: 1.7; }
.case-entry__client { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--muted); font-size: 14px; }
.case-entry__client svg { width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 1.5; }
.case-entry__facts { border-top: 1px solid var(--line-strong); }
.case-entry__facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.case-entry__facts dt { font: 500 11px/1.6 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.case-entry__facts dd { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--orange); }
@media all { /* animações ativas em todos os dispositivos */
  .live { animation: afx-live 2.2s ease-out infinite; }
}
@keyframes afx-live {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 55%, transparent); }
  to { box-shadow: 0 0 0 10px transparent; }
}
.case-entry__cover { position: relative; margin: clamp(48px, 6vw, 88px) 0 0; overflow: hidden; background: var(--surface); }
.case-entry__cover img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; }
.case-entry__cover figcaption { position: absolute; left: 0; bottom: 0; padding: 12px 16px; font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--black) 72%, transparent); }

.case-entry__story { margin-top: clamp(56px, 7vw, 100px); }
.case-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(20px, 5vw, 90px); padding-block: clamp(44px, 5.5vw, 80px); border-top: 1px solid var(--line); }
.case-part__title {
  position: sticky; top: calc(var(--nav-h) + 32px); align-self: start;
  display: flex; align-items: center; gap: 14px; font: 500 12px/1.3 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--blue-hi);
}
.case-part__title span { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; letter-spacing: .08em; color: var(--orange); }
.case-part__lead { font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.16; letter-spacing: -.01em; }
.case-part__lead + p { max-width: 640px; margin-top: 22px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }

.built { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(32px, 4vw, 52px); }
.built__group { padding: clamp(22px, 2.4vw, 32px); background: var(--surface); border: 1px solid var(--line); }
.built__h { margin-bottom: 18px; font: 500 11.5px/1.3 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.built__list li { display: flex; align-items: center; gap: 14px; padding-block: 12px; border-top: 1px solid var(--line); font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.2; text-transform: uppercase; }
.built__list li::before { content: ""; width: 14px; height: 6px; flex: none; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }

.case-gallery { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 52px); }
.case-gallery__item { position: relative; margin: 0; overflow: hidden; background: var(--surface); }
.case-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.case-gallery__item--wide img { aspect-ratio: 16 / 9; }
.case-gallery__item--tall { grid-column: 2; grid-row: 1 / span 2; }
.case-gallery__item--tall img { position: absolute; inset: 0; }
.case-gallery__note, .impact__note { margin-top: 14px; color: var(--muted); font-size: 12.5px; }
@media (hover: hover) and (pointer: fine) {
  .case-gallery__item:hover img { transform: scale(1.04); }
}

.impact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(32px, 4vw, 52px); background: var(--line); border: 1px solid var(--line); }
.impact__item { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.8vw, 40px); background: var(--black); }
.impact__value { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.5vw, 38px); line-height: 1; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.impact__item:first-child .impact__value { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
.impact__text { max-width: 340px; color: var(--muted); font-size: 15px; }

/* A partir de 3 cases a lista compacta sozinha (sem classe extra) */
.cases:has(> .case-entry:nth-child(3)) { gap: clamp(80px, 10vw, 140px); }
.cases:has(> .case-entry:nth-child(3)) .case-entry__cover img { aspect-ratio: 3 / 1; }
.cases:has(> .case-entry:nth-child(3)) .case-entry__story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.cases:has(> .case-entry:nth-child(3)) .case-part { grid-template-columns: 1fr; gap: 18px; }
.cases:has(> .case-entry:nth-child(3)) .case-part__title { position: static; }
.cases:has(> .case-entry:nth-child(3)) .case-part__lead { font-size: clamp(19px, 1.8vw, 26px); }
.cases:has(> .case-entry:nth-child(3)) .case-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cases:has(> .case-entry:nth-child(3)) .case-gallery__item--tall { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; }

/* Frentes envolvidas */
.case-fronts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(56px, 7vw, 100px); }
.case-fronts__card {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 10px;
  min-height: clamp(320px, 30vw, 440px); padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line);
}
.case-fronts__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.case-fronts__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--black) 8%, color-mix(in srgb, var(--black) 55%, transparent) 62%, color-mix(in srgb, var(--black) 25%, transparent)); }
.case-fronts__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }
.case-fronts__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.04; text-transform: uppercase; }
.case-fronts__text { max-width: 380px; color: var(--muted); }
.case-fronts__go { position: absolute; top: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); transition: border-color .4s, color .4s; }
.case-fronts__go .i-arrow { transform: rotate(-45deg); }
.case-fronts__card:hover .case-fronts__go { border-color: var(--orange); color: var(--orange); }
.case-fronts__card:hover .case-fronts__go .i-arrow { transform: rotate(0); }
@media (hover: hover) and (pointer: fine) {
  .case-fronts__card:hover img { transform: scale(1.05); }
}

/* Sobre e Cases: responsivo */
@media (max-width: 1100px) {
  .position__grid, .principles__grid, .group__grid { grid-template-columns: 1fr; }
  .principles__head { position: static; }
  .reading__steps, .cases-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-entry__head { grid-template-columns: 1fr; align-items: start; }
  .case-part { grid-template-columns: 1fr; gap: 22px; }
  .case-part__title { position: static; }
}
@media (max-width: 767px) {
  .page-hero__mark { right: -40vw; width: 140vw; opacity: .04; }
  .origin, .name__defs, .built, .impact, .reading__steps, .cases-index__list, .case-fronts__list,
  .cases:has(> .case-entry:nth-child(3)) .case-entry__story { grid-template-columns: 1fr; }
  .origin { gap: 36px; }
  .position__list li { grid-template-columns: 1fr; }
  .scale__ends { flex-direction: column; }
  .scale__ends p:last-child { text-align: left; }
  .case-entry__facts div { grid-template-columns: 100px minmax(0, 1fr); }
  .case-entry__cover img { aspect-ratio: 4 / 3; }
  .case-entry__cover figcaption { position: static; padding: 12px 0 0; color: var(--muted); background: none; }
  .case-gallery { grid-template-columns: 1fr; }
  .case-gallery__item--tall { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .case-fronts__go { width: 44px; height: 44px; }
}

/* ---------- Página: Blog (blog.html) ---------- */
/* Hero do blog: altura mínima maior que o conteúdo, para a troca de fonte não empurrar a lista */
.page-hero--compact { min-height: 76vh; min-height: 76svh; }
.page-hero--compact .page-hero__title { font-size: clamp(32px, 5.6vw, 92px); }
.blog__empty[hidden], .share[hidden], .share__list li[hidden], .article-toc[hidden] { display: none; }

/* Barra de filtro: o JS monta os botões a partir das categorias dos cards.
   A linha de temas tem altura fixa e rola na horizontal quando não cabe: nada pula quando os botões aparecem. */
.blog__bar { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); padding-block: 18px; border-block: 1px solid var(--line); }
.blog__bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.blog__filters-label { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
html:not(.js) .blog__filters-label, html:not(.js) .blog__chips { display: none; }
.blog__chips { display: flex; gap: 8px; min-height: 52px; margin: -6px; padding: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.blog__chips::-webkit-scrollbar { display: none; }
.blog__chips.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  font: 500 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: transparent; border: 1px solid var(--line-strong); cursor: pointer; transition: color .3s, border-color .3s, background .3s;
}
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip[aria-pressed="true"] { color: var(--black); background: var(--text); border-color: var(--text); }
.chip__count { font-variant-numeric: tabular-nums; }
.blog__count { font: 500 12px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--muted); }
.blog__empty { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-block: 40px; color: var(--muted); }

/* Lista de posts: o primeiro visível vira destaque (.is-lead) */
.posts, .post-card__cats, .article-head__cats, .share__list, .article-toc ol { margin: 0; padding: 0; list-style: none; }
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.posts__item.is-lead { grid-column: 1 / -1; }
.post-card { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--surface); border: 1px solid var(--line); transition: border-color .4s; }
.post-card__media { position: relative; margin: 0; overflow: hidden; background: var(--surface-2); }
.post-card__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.6s var(--ease); }
.post-card__body { display: grid; align-content: start; gap: 14px; padding: clamp(22px, 2.4vw, 34px); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 500 11px/1.5 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.post-card__cats { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--blue-hi); }
.post-card__sep { width: 4px; height: 4px; background: var(--line-strong); }
.post-card__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.16; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__title a:focus-visible { outline: none; }
.post-card:has(.post-card__title a:focus-visible) { outline: 2px solid var(--blue-hi); outline-offset: 4px; }
.post-card__excerpt { max-width: 60ch; color: var(--muted); }
.post-card__flag { justify-self: start; margin-top: 4px; padding: 6px 10px; font: 500 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); border: 1px dashed var(--orange); }
.posts__item.is-lead .post-card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: none; }
.posts__item.is-lead .post-card__media { min-height: clamp(300px, 34vw, 480px); }
.posts__item.is-lead .post-card__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.posts__item.is-lead .post-card__body { align-content: center; padding: clamp(28px, 4vw, 56px); }
.posts__item.is-lead .post-card__title { font-size: clamp(26px, 2.8vw, 42px); }
@media (hover: hover) and (pointer: fine) {
  .post-card:hover { border-color: var(--line-strong); }
  .post-card:hover .post-card__media img { transform: scale(1.04); }
}
@media all { /* animações ativas em todos os dispositivos */
  .posts__item.is-shown { animation: afx-post-in .7s var(--ease) both; }
}
@keyframes afx-post-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Página: Post do blog (blog-post.html e blog-*.html) ---------- */
.reading-progress { position: fixed; inset: 0 0 auto 0; z-index: 61; height: 3px; background: var(--grad-orange); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.placeholder-note { display: flex; gap: 12px; align-items: baseline; max-width: 760px; margin-bottom: 30px; padding: 14px 18px; font-size: 14px; line-height: 1.5; border: 1px dashed var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); }
.placeholder-note b { flex: none; font: 600 11px/1.5 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }

.article-head { padding-top: calc(var(--nav-h) + clamp(44px, 6vw, 88px)); }
.article-head .breadcrumb { margin-bottom: clamp(22px, 3vw, 34px); }
.article-head__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.article-head__cats a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; font: 500 11px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-hi); border: 1px solid var(--line-strong); transition: border-color .3s; }
.article-head__cats a:hover { border-color: var(--blue-hi); }
.article-head__title { max-width: 1040px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -.01em; }
.article-head__dek { max-width: 720px; margin-top: 24px; color: var(--muted); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(32px, 4vw, 48px); padding-block: 14px; border-block: 1px solid var(--line); }
.article-meta__info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--muted); font-size: 14px; }
.article-meta__author { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; color: var(--text); }
.article-meta__author img { width: 34px; height: auto; }
.article-meta__sep { width: 4px; height: 4px; background: var(--line-strong); }
.article-cover { margin: clamp(36px, 5vw, 64px) 0 0; }
.article-cover img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; background: var(--surface); }
.article-cover figcaption, .prose figcaption { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.article-cover figcaption::before, .prose figcaption::before { content: ""; flex: none; width: 14px; height: 6px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }

/* Corpo: sumário fixo à esquerda e texto com medida de leitura (~70 caracteres) */
.article-body { padding-block: clamp(56px, 7vw, 110px) clamp(80px, 9vw, 140px); }
.article-layout { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 720px); gap: clamp(40px, 6vw, 110px); align-items: start; }
.article-toc { position: sticky; top: calc(var(--nav-h) + 40px); }
.article-toc__title { margin-bottom: 14px; font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.article-toc a { display: block; padding: 9px 0 9px 16px; border-left: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.4; transition: color .3s, border-color .3s; }
.article-toc a:hover { color: var(--text); }
.article-toc a[aria-current="true"] { color: var(--text); border-left-color: var(--orange); }

.prose { max-width: 70ch; color: var(--text); font-size: clamp(17px, 1.2vw, 19px); font-weight: 400; line-height: 1.8; }
.prose > * + * { margin-top: 1.4em; }
.prose > .prose__lead { font-size: 1.16em; line-height: 1.7; }
.prose h2 { margin-top: 2.4em; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(23px, 2.1vw, 31px); line-height: 1.2; scroll-margin-top: calc(var(--nav-h) + 32px); }
.prose h3 { margin-top: 2em; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; }
.prose h2 + *, .prose h3 + * { margin-top: .75em; }
.prose a { color: var(--blue-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { display: grid; gap: .55em; padding: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 30px; }
.prose ul li::before { content: ""; position: absolute; top: .72em; left: 0; width: 14px; height: 6px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.prose ol { counter-reset: prose; }
.prose ol li { position: relative; padding-left: 40px; counter-increment: prose; }
.prose ol li::before { content: counter(prose, decimal-leading-zero); position: absolute; left: 0; top: .22em; font: 600 .78em/1.6 var(--f-display); font-stretch: 125%; color: var(--orange); }
.prose blockquote { margin-block: 2.2em; padding: 4px 0 4px clamp(22px, 3vw, 36px); border-left: 2px solid var(--orange); }
.prose blockquote p { font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.32; }
.prose blockquote footer { margin-top: 16px; font: 500 11.5px/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.prose figure { margin-block: 2.4em; }
.prose figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }
.prose .callout { margin-block: 2.4em; padding: clamp(22px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); }
.prose .callout__title { margin-bottom: 14px; font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--blue-hi); }
.prose hr { height: 1px; margin-block: 2.6em; background: var(--line); border: 0; }

/* Fim do artigo: compartilhar, autoria e leitura relacionada */
.article-end { display: grid; gap: 28px; margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); }
.article-author { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(20px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--line); }
.article-author img { width: 64px; height: auto; margin-top: 6px; }
.article-author__name { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 18px; text-transform: uppercase; }
.article-author p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.article-author .link-arrow { margin-top: 14px; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.share__label { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.share__list { display: flex; flex-wrap: wrap; gap: 8px; }
.share__btn { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text); background: transparent; border: 1px solid var(--line-strong); cursor: pointer; transition: color .3s, border-color .3s; }
.share__btn svg { width: 18px; height: 18px; }
.share__btn .i-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.share__btn .i-solid { fill: currentColor; }
.share__btn:hover { color: var(--orange); border-color: var(--orange); }
.share__status { min-height: 1.4em; color: var(--blue-hi); font-size: 13px; }
.related .posts { margin-top: clamp(40px, 5vw, 64px); }

/* Blog e posts: responsivo */
@media (max-width: 1100px) {
  .posts__item.is-lead .post-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .posts__item.is-lead .post-card__media { min-height: 0; }
  .posts__item.is-lead .post-card__media img { position: static; height: auto; aspect-ratio: 16 / 10; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-toc { display: none; }
}
@media (max-width: 767px) {
  .posts { grid-template-columns: 1fr; }
  .blog__bar-top { flex-wrap: wrap; }
  .article-cover img { aspect-ratio: 16 / 10; }
  .article-meta { align-items: flex-start; flex-direction: column; }
  .article-author { grid-template-columns: 1fr; }
}

/* =========================================================
   ===== EQUIPE =====
   Teaser na home (.team-teaser) e seção "Quem constrói" em sobre.html (.team / .member).
   O card funciona sem foto (monograma + barra .slash + grão) e com foto:
   o <img> entra dentro de .member__portrait e cobre o monograma, sem mudar este CSS.
   ========================================================= */

/* Teaser na home */
.team-teaser { padding-block: clamp(56px, 6vw, 96px); border-top: 1px solid var(--line); }
.team-teaser__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.team-teaser__title { margin-bottom: 28px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.1; text-transform: uppercase; }
.team-teaser__count { color: var(--blue-hi); }
.team-teaser__fronts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.team-teaser__fronts li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 18px; padding: 14px clamp(18px, 2vw, 26px); background: var(--black); }
.team-teaser__num { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; font-variant-numeric: tabular-nums; }
.team-teaser__name { font: 500 11.5px/1.35 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* Seção de equipe (sobre.html) */
.team { border-top: 1px solid var(--line); }
.team__note { font-size: 13.5px; }
.team__group { margin-top: clamp(56px, 7vw, 96px); }
.team__group + .team__group { margin-top: clamp(48px, 6vw, 80px); }
/* Rótulo da frente: tipografia do .label; aqui só o layout de linha */
.team__front { display: flex; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.team__count { margin-left: auto; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.team__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }

.member {
  position: relative; display: grid; align-content: start;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .6s var(--ease), border-color .4s, box-shadow .6s var(--ease);
}
/* Durante a entrada (GSAP) a transição de transform fica desligada para não brigar com o tween */
html.has-gsap .member:not(.is-in) { transition: none; }
.member__portrait {
  position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 55%), var(--surface-2);
}
.member__portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .12; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px;
}
.member__portrait::after {
  content: ""; position: absolute; left: 18px; bottom: 18px; z-index: 2; width: 44px; height: 16px;
  background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
  transition: width .6s var(--ease);
}
.member__mono {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(44px, 5vw, 84px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
}
.member__portrait img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); }
.member__body { display: grid; align-content: start; gap: 8px; padding: 18px 20px 22px; }
.member__index { font: 500 11px/1 var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: .2em; color: var(--muted); transition: color .4s; }
.member__name { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.15; text-transform: uppercase; }
.member__role { font-size: 14.5px; font-weight: 300; line-height: 1.45; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .member:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--black) 90%, transparent); }
  .member:hover .member__index { color: var(--orange); }
  .member:hover .member__portrait::after { width: 64px; }
}

/* Liderança: card largo, retrato à esquerda */
.team__list--lead .member { grid-column: span 2; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
.team__list--lead .member__body { align-content: end; gap: 12px; padding: clamp(22px, 2.6vw, 36px); }
.team__list--lead .member__name { font-size: clamp(22px, 2.2vw, 34px); }
.team__list--lead .member__role { font-size: clamp(15px, 1.2vw, 17px); }

/* Equipe: responsivo */
@media (max-width: 1100px) {
  .team-teaser__grid { grid-template-columns: 1fr; }
  .team__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__list--lead .member { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .team__list { grid-template-columns: 1fr; gap: 10px; }
  .member, .team__list--lead .member { grid-column: auto; grid-template-columns: 92px minmax(0, 1fr); align-items: center; }
  .member__portrait::after { left: 8px; bottom: 8px; width: 22px; height: 8px; }
  .member__mono { font-size: 26px; }
  .member__body, .team__list--lead .member__body { align-content: center; gap: 5px; padding: 12px 16px; }
  .member__name, .team__list--lead .member__name { font-size: 15px; }
  .member__role, .team__list--lead .member__role { font-size: 13.5px; }
}

/* ---------- Assistente guiado (widget flutuante) ---------- */
.afx-bot { --afx-bot-gap: clamp(16px, 2.4vw, 32px); --afx-bot-trigger-h: 56px; }
.afx-bot__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.afx-bot-lock { overflow: hidden; }

.afx-bot__trigger {
  position: fixed; z-index: 320;
  right: calc(var(--afx-bot-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--afx-bot-gap) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 14px;
  min-width: var(--afx-bot-trigger-h); height: var(--afx-bot-trigger-h); padding: 0 18px 0 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--black) 90%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .8s var(--ease), visibility 0s linear .8s, border-color .4s;
}
.afx-bot__trigger.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .8s var(--ease), visibility 0s, border-color .4s; }
html.intro-running .afx-bot__trigger, html.menu-open .afx-bot__trigger { opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.afx-bot__trigger:hover, .afx-bot.is-open .afx-bot__trigger { border-color: var(--blue-hi); }
.afx-bot__trigger:focus-visible { outline-offset: 3px; }
.afx-bot__trigger-mark { position: relative; display: block; }
.afx-bot__trigger-mark img { width: 34px; height: auto; }
.afx-bot__dot { position: absolute; top: -7px; right: -8px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-hi); animation: afx-bot-pulse 2s infinite; }
@keyframes afx-bot-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-hi) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--blue-hi) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-hi) 0%, transparent); }
}
.afx-bot__trigger-label { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.afx-bot__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--grad-orange); color: var(--black); font: 600 11px/1 var(--f-body); }
.afx-bot__badge[hidden] { display: none; }

.afx-bot__panel {
  position: fixed; z-index: 320;
  right: calc(var(--afx-bot-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--afx-bot-gap) + var(--afx-bot-trigger-h) + 12px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 2 * var(--afx-bot-gap)));
  height: min(620px, 78dvh, calc(100dvh - var(--nav-h) - var(--afx-bot-gap) - var(--afx-bot-trigger-h) - 28px));
  display: flex; flex-direction: column;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 50px 120px -30px color-mix(in srgb, var(--black) 92%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transform-origin: bottom right;
  transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s;
}
.afx-bot.is-open .afx-bot__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s; }
.afx-bot__panel::before { content: ""; position: absolute; inset: 12% -10% -6%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 28%, transparent), transparent); filter: blur(30px); }
.afx-bot__panel:focus { outline: none; }

.afx-bot__head { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 18px; border-bottom: 1px solid var(--line); }
.afx-bot__avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blue); }
.afx-bot__avatar img { width: 21px; height: auto; }
.afx-bot__who { display: grid; gap: 4px; min-width: 0; margin-right: auto; }
.afx-bot__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afx-bot__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.2; color: var(--muted); }
.afx-bot__status i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--blue-hi); animation: afx-bot-pulse 2s infinite; }
.afx-bot__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--muted); transition: color .3s, background-color .3s; }
.afx-bot__icon:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.afx-bot__icon:focus-visible { outline-offset: -2px; }
.afx-bot__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.afx-bot__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 14px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.afx-bot__scroll:focus { outline: none; }
.afx-bot__empty { display: grid; justify-items: start; gap: 6px; padding: 4px 2px 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.afx-bot__empty img { width: 48px; height: auto; margin-bottom: 8px; }
.afx-bot__empty-label { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.afx-bot__empty-text { font-size: 14px; color: var(--muted); }
.afx-bot__log { display: flex; flex-direction: column; gap: 10px; }

.afx-bot__msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.afx-bot__msg--bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; box-shadow: inset 2px 0 0 var(--blue); }
.afx-bot__msg--user { align-self: flex-end; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--line-strong); border-bottom-right-radius: 4px; }
.afx-bot__w { display: inline-block; animation: afx-bot-word .5s var(--ease) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes afx-bot-word { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } }
.afx-bot__in { animation: afx-bot-in .45s var(--ease) both; }
@keyframes afx-bot-in { from { opacity: 0; transform: translateY(10px); } }

.afx-bot__typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--surface-2); box-shadow: inset 2px 0 0 var(--blue); }
.afx-bot__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-hi); animation: afx-bot-typing 1s infinite ease-in-out; }
.afx-bot__typing i:nth-child(2) { animation-delay: .15s; }
.afx-bot__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes afx-bot-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.afx-bot__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.afx-bot__chip {
  min-height: 40px; padding: 9px 14px; text-align: left;
  font: 500 13px/1.35 var(--f-body); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--blue) 55%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  transition: background-color .3s, border-color .3s;
}
.afx-bot__chip:hover { background: color-mix(in srgb, var(--blue) 22%, transparent); border-color: var(--blue-hi); }
.afx-bot__chip:focus-visible { outline-offset: 2px; }

.afx-bot__media { align-self: flex-start; width: 88%; margin: 0; }
.afx-bot__media--portrait { width: min(62%, 230px); }
.afx-bot__frame { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 16 / 9); border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.afx-bot__frame img, .afx-bot__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.afx-bot__frame video { opacity: 0; }
.afx-bot__frame video.is-playing { opacity: 1; }
.afx-bot__media.is-loading img { opacity: 0; }
.afx-bot__media.is-loading .afx-bot__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--text) 7%, transparent) 50%, transparent 80%);
  transform: translateX(-100%); animation: afx-bot-shimmer 1.3s infinite;
}
@keyframes afx-bot-shimmer { to { transform: translateX(100%); } }
.afx-bot__caption { margin-top: 8px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.afx-bot__card { align-self: stretch; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); transition: border-color .3s; }
.afx-bot__card:hover { border-color: var(--blue-hi); }
.afx-bot__card:focus-visible { outline-offset: 2px; }
.afx-bot__card-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--surface); }
.afx-bot__card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.afx-bot__card-body { display: grid; gap: 5px; min-width: 0; }
.afx-bot__card-label { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 10px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-hi); }
.afx-bot__card-title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 14px; line-height: 1.2; text-transform: uppercase; }
.afx-bot__card .i-arrow { transform: rotate(-45deg); color: var(--muted); }
.afx-bot__card:hover .i-arrow { transform: rotate(0); color: var(--text); }

.afx-bot__handoff { align-self: stretch; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.afx-bot__handoff-label { margin-bottom: 2px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.afx-bot__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px; font: 600 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text); transition: border-color .3s; }
.afx-bot__cta:hover { border-color: var(--orange); }
.afx-bot__cta:hover .i-arrow { transform: translateX(4px); }
.afx-bot__cta:focus-visible { outline-offset: 2px; }
.afx-bot__cta--primary { background: var(--grad-orange); border-color: transparent; color: var(--black); }
.afx-bot__cta--primary:hover { border-color: transparent; }

.afx-bot__form { display: flex; gap: 8px; padding: 12px 14px 8px; border-top: 1px solid var(--line); }
.afx-bot__input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font: 300 15px/1 var(--f-body); color: var(--text); background: color-mix(in srgb, var(--black) 60%, transparent); border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color .3s, box-shadow .3s; }
.afx-bot__input::placeholder { color: var(--muted); }
.afx-bot__input:focus-visible { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.afx-bot__send { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--grad-orange); color: var(--black); }
.afx-bot__send:focus-visible { outline-offset: 2px; }
.afx-bot__note { padding: 0 14px 12px; font-size: 11px; line-height: 1.45; color: var(--muted); }

@media (max-width: 720px) {
  .afx-bot { --afx-bot-gap: 16px; }
  .afx-bot__trigger { gap: 10px; padding: 0 14px; }
  .afx-bot__trigger-label { display: none; }
  .afx-bot__panel {
    top: var(--afx-bot-vvt, 0px); right: 0; bottom: auto; left: 0;
    width: 100%; height: var(--afx-bot-vvh, 100dvh);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
    background: var(--surface); border: 0; border-radius: 0;
    transform-origin: bottom center;
  }
  .afx-bot__panel::before { display: none; }
  .afx-bot__note { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .afx-bot__input { font-size: 16px; }
  .afx-bot__chip { min-height: 44px; }
}

/* =========================================================
   ===== CONTEÚDO 2026-10 (copy nova: Home e Produção) =====
   Concept projects, simulador de produção física, ecossistema, leitura estratégica,
   formulário embutido e blocos novos da página de Produção.
   ========================================================= */

/* Frentes: CTA em texto dentro do card */
.front__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 500 12px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.front__cta::before { content: ""; width: 22px; height: 9px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.manifesto .fronts { margin-top: clamp(56px, 7vw, 100px); }

/* Ecossistema */
.eco { border-top: 1px solid var(--line); }
.eco__head { padding-block: 34px 20px; }
.eco__title { display: flex; align-items: center; gap: 14px; font: 500 12px/1.4 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.eco .marquee { border-top: 0; }
.eco .marquee span { color: var(--text); opacity: .82; }

/* Concept projects: destaque com vídeo */
.concept-feature { margin-top: clamp(56px, 7vw, 100px); }
.concept-feature__stage { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 21 / 9; background: var(--surface); }
.concept-feature__stage > img, .concept-feature__stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.concept-feature__stage > video { opacity: 0; transition: opacity 1.2s ease; }
.concept-feature__stage > video.is-playing { opacity: 1; }
.concept-feature__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--black) 88%, transparent) 0%, transparent 50%), linear-gradient(90deg, color-mix(in srgb, var(--black) 55%, transparent) 0%, transparent 45%);
}
.concept-feature__overlay { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 44px); z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.concept-feature__index, .reel__index { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.concept-feature__index b, .reel__index b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; letter-spacing: .08em; color: var(--orange); }
.concept-feature__title, .reel__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(32px, 5.6vw, 92px); line-height: .92; letter-spacing: -.01em; text-transform: uppercase; }
.concept-feature__type {
  flex: none; padding: 10px 14px; white-space: nowrap; font: 500 11.5px/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--black) 45%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Concept projects: lista dos demais (cards tipográficos até a mídia chegar) */
.concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(18px, 2vw, 28px); padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.concepts__item { position: relative; display: grid; align-content: start; gap: 10px; min-height: 170px; padding: clamp(20px, 2.4vw, 32px); background: var(--black); transition: background .4s; }
.section--surface .concepts__item { background: var(--surface); }
.concepts__item::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .concepts__item:hover { background: var(--surface-2); }
  .concepts__item:hover::after { transform: scaleX(1); }
}
.concepts__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; font-variant-numeric: tabular-nums; color: var(--orange); }
.concepts__name { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.1; text-transform: uppercase; }
.concepts__seg { color: var(--muted); font-size: 14.5px; }
.concepts__soon { justify-self: start; margin-top: 6px; padding: 6px 9px; font: 500 10px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); }
.concepts__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px clamp(32px, 5vw, 80px); margin-top: clamp(32px, 4vw, 48px); }
.concepts__note { max-width: 760px; font-size: 13px; font-style: italic; line-height: 1.6; color: var(--muted); }
.concepts__note--solo { margin-top: 28px; }

/* Simulador de produção física */
.sim { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1px; margin-top: clamp(48px, 6vw, 88px); background: var(--line); border: 1px solid var(--line); }
.sim__controls { display: grid; gap: 34px; align-content: start; padding: clamp(24px, 3vw, 44px); background: var(--black); }
.sim__intro { max-width: 560px; color: var(--muted); }
.sim__group { gap: 4px; }
.sim__ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.sim__range { display: grid; gap: 16px; }
.sim__range output { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 22px; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--text); }
.sim__range input[type="range"] { width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sim__range input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--orange) var(--fill, 50%), var(--line-strong) var(--fill, 50%)); }
.sim__range input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); }
.sim__range input[type="range"]::-moz-range-progress { height: 2px; background: var(--orange); }
.sim__range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border: 2px solid var(--orange); border-radius: 50%; background: var(--black); }
.sim__range input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--orange); border-radius: 50%; background: var(--black); }
.sim__range input[type="range"]:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 6px; }
.choice--check span::before { border-radius: 2px; }
.choice--check input:checked + span::before { box-shadow: inset 0 0 0 2px var(--surface); }
.sim__result { position: relative; display: grid; align-content: start; gap: 18px; padding: clamp(24px, 3vw, 44px); background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 60%), var(--surface); }
.sim__result-label { font: 500 12px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.sim__price { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(26px, 3vw, 44px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.sim__price.is-pending { font-size: clamp(18px, 1.7vw, 24px); color: var(--muted); }
.sim__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 8px 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.sim__stats li { display: grid; align-content: start; gap: 8px; padding: 18px; background: var(--black); }
.sim__stats b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(28px, 2.8vw, 42px); line-height: 1; font-variant-numeric: tabular-nums; }
.sim__stats span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.sim__note { font-size: 13px; font-style: italic; line-height: 1.6; color: var(--muted); }
.sim-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: start; margin-top: clamp(72px, 9vw, 130px); }
.sim-after__lead { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(26px, 3.4vw, 52px); line-height: 1.06; text-transform: uppercase; }
.sim-after__body { display: grid; justify-items: start; gap: 22px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }
.sim-after__strong { color: var(--text); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; }

/* Produção com IA (home): caps em 2 colunas */
.caps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A tecnologia não é o ponto de partida */
.starting__title { max-width: 900px; font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(24px, 3vw, 44px); line-height: 1.16; }
.starting__words { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 48px); margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
.starting__words li { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(34px, 6.4vw, 108px); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--line-strong); transition: color .6s, -webkit-text-stroke-color .6s; }
.starting__words li:nth-child(even) { color: var(--text); -webkit-text-stroke: 0; }
@media (hover: hover) and (pointer: fine) {
  .starting__words li:hover { color: var(--orange); -webkit-text-stroke-color: transparent; }
}
.starting__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 110px); align-items: end; margin-top: clamp(56px, 7vw, 96px); padding-top: 32px; border-top: 1px solid var(--line); }
.starting__copy { display: grid; gap: 14px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }
.starting__quote { margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.15; text-transform: uppercase; }

/* Case na home: duas frentes */
.case__intro { max-width: 640px; margin-top: 26px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }
.case__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case__close { max-width: 760px; margin-top: 36px; font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.25; }

/* Soluções na home: fechamento */
.build { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: end; margin-top: clamp(64px, 8vw, 110px); padding-top: 36px; border-top: 1px solid var(--line); }
.build__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.12; text-transform: uppercase; }
.build__side { display: grid; justify-items: start; gap: 24px; color: var(--muted); }

/* Autifex construída para o automotivo */
.audience--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.audience--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why__link { margin-top: clamp(40px, 5vw, 64px); }

/* CTA com formulário embutido */
.cta-form { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 100px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.cta-form__intro { display: grid; gap: 26px; position: sticky; top: calc(var(--nav-h) + 32px); }
.cta-form__strong { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.2; text-transform: uppercase; }
.cta-form__panel { padding: clamp(22px, 3vw, 44px); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cta-form__ideas { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }
.cta-form__ideas li { position: relative; padding-left: 30px; }
.cta-form__ideas li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 6px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }

/* Footer: título da coluna como link */
.footer__h a { color: inherit; transition: color .3s; }
.footer__h a:hover { color: var(--text); }

/* ---------- Produção (copy nova) ---------- */
.page-hero--film .page-hero__shade {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--black) 88%, transparent) 0%, color-mix(in srgb, var(--black) 45%, transparent) 40%, transparent 70%),
    linear-gradient(0deg, var(--black) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--black) 70%, transparent) 0%, transparent 22%);
}
.page-hero__eyebrow { margin-top: 22px; }
.page-hero--film .page-hero__title { font-size: clamp(30px, 4.6vw, 74px); }
.page-hero__claim { max-width: 560px; margin-top: 18px; padding-left: 36px; position: relative; font-size: clamp(15px, 1.2vw, 18px); color: var(--text); }
.page-hero__claim::before { content: ""; position: absolute; left: 0; top: .8em; width: 22px; height: 2px; background: var(--orange); }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 32px; }
.page-hero__credit { font: 500 11px/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.possib--four .possib__item, .possib--four .possib__item:nth-child(n) { grid-column: span 6; min-height: clamp(400px, 34vw, 520px); }

/* Reel do concept (várias câmeras) */
.reel { margin-top: clamp(56px, 7vw, 100px); }
.reel__head { margin-bottom: clamp(24px, 3vw, 40px); }
.reel__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.reel__shot { position: relative; margin: 0; overflow: hidden; isolation: isolate; grid-column: span 4; aspect-ratio: 16 / 9; background: var(--surface-2); }
.reel__shot--main { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.reel__shot--tall { grid-column: span 3; grid-row: span 2; aspect-ratio: auto; }
.reel__shot--wide { grid-column: span 9; grid-row: span 2; aspect-ratio: auto; min-height: 320px; }
.reel__shot > img, .reel__shot > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--obj, 50% 50%); }
.reel__shot > video { opacity: 0; transition: opacity 1.2s ease; }
.reel__shot > video.is-playing { opacity: 1; }
.reel__shot figcaption {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 7px 10px;
  font: 500 10.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase;
  background: color-mix(in srgb, var(--black) 60%, transparent); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Leitura estratégica em cinco pontos */
.reading-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.reading-five li { display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2.2vw, 30px); background: var(--black); }
.reading-five span { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }
.reading-five h3 { margin-top: 6px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.7vw, 26px); text-transform: uppercase; }
.reading-five p { color: var(--muted); font-size: 15px; }
.statement { margin: clamp(48px, 6vw, 88px) 0 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(24px, 3vw, 46px); line-height: 1.1; text-transform: uppercase; }
.statement--single { max-width: 1000px; }

/* Pessoas por trás da tecnologia */
.people__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.people__copy { display: grid; gap: 18px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }
.people__strong { margin-top: 8px; color: var(--text); font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.2; text-transform: uppercase; }
.people__team { display: inline-flex; align-items: center; gap: 18px; justify-self: start; margin-top: 18px; padding: 10px 18px 10px 10px; color: var(--text); border: 1px solid var(--line-strong); transition: border-color .4s; }
.people__team:hover { border-color: var(--orange); }
.people__faces { display: flex; }
.people__faces img { width: 44px; height: 44px; object-fit: cover; object-position: 50% 22%; border-radius: 50%; border: 2px solid var(--surface); }
.people__faces img + img { margin-left: -12px; }
.people__team-text { font: 500 12px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; }

/* Fidelidade: referência x produção */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(48px, 6vw, 88px); }
.pair__item { margin: 0; }
.pair__item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); }
.pair__item figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
.pair__tag { padding: 7px 10px; font: 500 10.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--line-strong); }
.pair__tag--afx { border-color: var(--orange); color: var(--orange); }
.pair__credit { font-size: 12.5px; color: var(--muted); }
.pair__credit a { text-decoration: underline; text-underline-offset: .2em; }
.fidelity-rules { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.fidelity-rules .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fidelity-rules__copy { display: grid; gap: 16px; margin-top: clamp(64px, 8vw, 110px); color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); }
.fidelity-rules__strong { margin-top: 6px; color: var(--text); font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.25; text-transform: uppercase; }

/* Processo em seis etapas */
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; counter-reset: none; }
.process li { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px 0 40px; border-top: 1px solid var(--line-strong); }
.process li::before { content: ""; position: absolute; top: -5px; left: 0; width: 22px; height: 9px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.process__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--muted); }
.process h3 { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.8vw, 27px); line-height: 1.1; text-transform: uppercase; }
.process p { max-width: 380px; color: var(--muted); }

/* Desdobramentos */
.unfold { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 90px); align-items: start; margin-top: clamp(48px, 6vw, 88px); }
.unfold__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.unfold__list li { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.unfold__list h3 { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); text-transform: uppercase; }
.unfold__list p { color: var(--muted); font-size: 15px; }
.unfold .formats { grid-template-columns: 1fr; gap: 24px; }

@media (max-width: 1100px) {
  .concepts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concepts__foot { grid-template-columns: 1fr; }
  .sim, .sim-after, .starting__grid, .build, .cta-form, .people__grid, .fidelity-rules, .unfold { grid-template-columns: minmax(0, 1fr); }
  .cta-form__panel .choice span { white-space: normal; }
  .cta-form__intro { position: static; }
  .fidelity-rules__copy { margin-top: 0; }
  .audience--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel__shot { grid-column: span 6; }
  .reel__shot--main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .reel__shot--tall { grid-column: span 4; grid-row: span 1; aspect-ratio: 9 / 16; }
  .reel__shot--wide { grid-column: span 8; grid-row: span 1; min-height: 0; }
  .concept-feature__stage { aspect-ratio: 16 / 9; }
  .possib--four .possib__item, .possib--four .possib__item:nth-child(n) { grid-column: span 6; }
}
@media (max-width: 767px) {
  .concepts, .sim__ranges, .reading-five, .process, .pair, .fidelity-rules .checks, .audience--two, .audience--four, .case__grid--two, .caps--four { grid-template-columns: 1fr; }
  .concepts__item { min-height: 0; }
  .concept-feature__stage { aspect-ratio: 4 / 5; }
  .concept-feature__stage > img, .concept-feature__stage > video { object-position: 62% 50%; }
  .concept-feature__overlay { flex-direction: column; align-items: flex-start; }
  .sim__stats b { font-size: 30px; }
  .reel__shot, .reel__shot--wide { grid-column: 1 / -1; }
  .reel__shot--tall { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .reel__shot--main { aspect-ratio: 4 / 5; }
  .possib--four .possib__item, .possib--four .possib__item:nth-child(n) { grid-column: span 12; min-height: 400px; }
  .starting__words li { font-size: clamp(30px, 10vw, 52px); }
  .people__faces img { width: 36px; height: 36px; }
}

/* =========================================================
   ===== SOLUÇÕES + CASES (copy 2026-10) =====
   Kit de interfaces ilustrativas (.ui*), explorador de áreas, fluxo "humano no controle",
   camadas de sistemas, órbita de aplicações, jornada do case, KPIs e mockups do case.
   Todas as telas são representações em HTML: troque por prints reais quando existirem.
   ========================================================= */

/* ---------- Kit de interfaces ---------- */
.ui { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--black) 90%, transparent); }
.ui__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ui__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ui__bar span { margin-left: 8px; }
.ui__bar em { margin-left: auto; font-style: normal; }
.ui__body { display: grid; align-content: start; gap: 12px; padding: clamp(16px, 2vw, 24px); }
.areas__panel:not([hidden]) .ui__body > * { animation: afx-rise .6s var(--ease) both; animation-delay: calc(var(--k, 0) * 130ms + 60ms); }

.bubble { max-width: 86%; margin: 0; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.bubble--in { justify-self: start; background: color-mix(in srgb, var(--text) 9%, transparent); border-bottom-left-radius: 4px; }
.bubble--out { justify-self: end; background: color-mix(in srgb, var(--blue) 22%, var(--surface)); border-bottom-right-radius: 4px; }
.bubble--tag, .bubble--sys { justify-self: center; max-width: 100%; padding: 7px 12px; border-radius: 999px; font: 500 11px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-hi); border: 1px dashed color-mix(in srgb, var(--blue-hi) 60%, transparent); background: transparent; }
.bubble--sys { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 60%, transparent); }
.bubble--human { justify-self: end; background: color-mix(in srgb, var(--orange) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); border-bottom-right-radius: 4px; }
.bubble__audio { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-variant-numeric: tabular-nums; color: var(--muted); }
.bubble__audio i { width: 46px; height: 12px; background: repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(0deg, #000 30%, transparent 30%, transparent 70%, #000 70%); }
.bubble__photo { display: block; width: 120px; height: 72px; margin-bottom: 8px; border-radius: 8px; background: radial-gradient(circle at 50% 50%, var(--surface-2) 22%, color-mix(in srgb, var(--text) 55%, var(--black)) 23%, color-mix(in srgb, var(--text) 30%, var(--black)) 40%, var(--surface-2) 41%); }

.ui-fields { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.ui-fields li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 13px; font-size: 13.5px; background: var(--surface); }
.ui-fields span { color: var(--muted); }
.ui-fields b { font-weight: 500; }
.is-ok { color: var(--blue-hi); }
.is-warn { color: var(--orange); }
.is-bad, .is-low { color: var(--orange-2); }
.ui-assign, .ui-confirm, .ui-alert, .ui-wa { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 13px; font-size: 13.5px; border: 1px solid var(--line-strong); }
.ui-assign__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 25%, transparent); }
.ui-confirm::before { content: ""; width: 12px; height: 6px; border-left: 2px solid var(--blue-hi); border-bottom: 2px solid var(--blue-hi); transform: rotate(-45deg) translateY(-2px); }
.ui-confirm { border-color: color-mix(in srgb, var(--blue-hi) 50%, transparent); }
.ui-alert { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.ui-wa { justify-content: center; color: var(--text); background: color-mix(in srgb, var(--blue) 24%, transparent); border-color: var(--blue); }
.ui-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ui-slots span { padding: 8px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong); }
.ui-slots .is-busy { color: var(--dim); text-decoration: line-through; border-color: var(--line); }
.ui-slots .is-picked { color: var(--black); background: var(--text); border-color: var(--text); font-weight: 600; }
.ui-search { display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px; font-size: 13.5px; border: 1px solid var(--line-strong); background: var(--black); }
.ui-search span { color: var(--muted); }
.ui-products { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-products li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; border: 1px solid var(--line); }
.ui-products i { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, var(--surface) 30%, color-mix(in srgb, var(--text) 40%, var(--black)) 31% 58%, var(--surface-2) 59%); }
.ui-products b { font-weight: 500; font-size: 12px; color: var(--blue-hi); }
.ui-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.ui-bars i { flex: 1; height: var(--h); background: linear-gradient(0deg, color-mix(in srgb, var(--blue) 45%, transparent), var(--blue-hi)); transform-origin: bottom; }
.ui-bars i:last-child { background: var(--grad-orange); }
.ui-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ui-tiles span { display: grid; gap: 4px; padding: 10px; font: 600 15px/1.1 var(--f-display); font-stretch: 125%; border: 1px solid var(--line); }
.ui-tiles small { font: 500 10px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ui-line { width: 100%; height: 90px; }
.ui-line path { fill: none; stroke: var(--blue-hi); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- Soluções: tríade ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.trio__item { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 3vw, 44px); background: var(--black); }
.trio__verb { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 1.9vw, 30px); line-height: 1; text-transform: uppercase; white-space: nowrap; background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trio__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.6vw, 24px); text-transform: uppercase; }
.trio__item p { color: var(--muted); }

/* ---------- Soluções: explorador de áreas ---------- */
.areas { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); margin-top: clamp(48px, 6vw, 88px); border: 1px solid var(--line); background: var(--black); }
.areas__tabs { display: grid; align-content: start; border-right: 1px solid var(--line); }
.areas__tab { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 64px; padding: 14px 20px; text-align: left; font: 500 14.5px/1.3 var(--f-body); color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; transition: color .3s, background .3s; }
.areas__tab span { font-size: 11px; letter-spacing: .18em; color: var(--dim); font-variant-numeric: tabular-nums; }
.areas__tab:hover { color: var(--text); }
.areas__tab[aria-selected="true"] { color: var(--text); background: var(--surface); }
.areas__tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-orange); }
.areas__tab[aria-selected="true"] span { color: var(--orange); }
.areas__tab:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: -2px; }
.areas__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 56px); min-height: 460px; }
.areas__panel[hidden] { display: none; }
.areas__panel:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: -2px; }
.areas__copy { display: grid; gap: 14px; color: var(--muted); font-size: clamp(15px, 1.1vw, 16.5px); }
.areas__title { margin-bottom: 4px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.08; text-transform: uppercase; color: var(--text); }
.areas__strong { margin-top: 6px; color: var(--text); font-weight: 500; }
.areas__note { grid-column: 1 / -1; padding: 0 20px 14px; text-align: right; font: 500 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Humano no controle ---------- */
.guard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.guard-copy { display: grid; gap: 14px; margin-top: 28px; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }
.guard-side { display: grid; gap: 32px; position: sticky; top: calc(var(--nav-h) + 32px); }
.guard { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.guard::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 1px; background: var(--line-strong); }
.guard__step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 16px 18px 16px 0; background: var(--black); border: 1px solid var(--line); transition: border-color .5s, background .5s; }
.section--surface .guard__step { background: var(--surface); }
.guard__num { grid-row: span 2; justify-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 11px/1 var(--f-body); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-strong); transition: background .5s, color .5s, border-color .5s; }
.guard__step b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); text-transform: uppercase; }
.guard__step small { color: var(--muted); font-size: 14px; }
.guard__step.is-lit { border-color: color-mix(in srgb, var(--blue-hi) 60%, transparent); }
.guard__step.is-lit .guard__num { color: var(--text); background: var(--blue); border-color: var(--blue-hi); }
.guard__step--human.is-lit { border-color: var(--orange); }
.guard__step--human.is-lit .guard__num { background: var(--orange); border-color: var(--orange); color: var(--black); }
.guard--tall .guard__step { padding-block: 24px; }
.statement--side { margin-top: 0; font-size: clamp(20px, 2vw, 30px); }
.statement--inline { margin: 0; font-size: clamp(20px, 2.2vw, 32px); }

/* ---------- Camadas de sistemas ---------- */
.layers { display: grid; justify-items: center; margin-top: clamp(48px, 6vw, 88px); }
.layers__top, .layers__base { width: 100%; display: grid; gap: 14px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line-strong); }
.layers__top { max-width: 760px; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--orange) 16%, transparent), transparent 60%), var(--black); border-color: color-mix(in srgb, var(--orange) 60%, transparent); }
.layers__base { background: var(--black); }
.layers__tag { font: 500 11px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.layers__name { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.4vw, 34px); text-transform: uppercase; }
.layers ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.layers li { padding: 9px 14px; font: 500 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line-strong); }
.layers li.is-key { color: var(--black); background: var(--text); border-color: var(--text); }
.layers__links { display: flex; justify-content: space-around; width: min(760px, 100%); height: 56px; }
.layers__links i { position: relative; width: 1px; height: 100%; background: var(--line-strong); overflow: hidden; }
.layers__links i::after { content: ""; position: absolute; left: 0; width: 1px; height: 40%; background: linear-gradient(180deg, transparent, var(--orange), transparent); animation: afx-drop 1.8s linear infinite; animation-delay: calc(var(--d, 0) * 1s); }
.layers__links i:nth-child(2)::after { animation-delay: .5s; } .layers__links i:nth-child(3)::after { animation-delay: .9s; } .layers__links i:nth-child(4)::after { animation-delay: 1.3s; }
@keyframes afx-drop { from { top: -40%; } to { top: 100%; } }

/* ---------- Seis formas ---------- */
.forms6 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
.forms6 li { display: flex; align-items: baseline; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.2; text-transform: uppercase; }
.forms6 span { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }

/* ---------- Órbita de aplicações ---------- */
@keyframes afx-dash { to { stroke-dashoffset: -20; } }

/* ---------- Aplicações do case e acompanhamento ---------- */
.apps4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; }
.apps4 li { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 55%); }
.apps4__num { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }
.apps4 h3 { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.8vw, 26px); text-transform: uppercase; }
.apps4 p { color: var(--muted); }
.apps4__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: clamp(40px, 5vw, 64px); }
.care { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
.care li { display: grid; align-content: start; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.care span { font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--orange); }
.care h3 { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.6vw, 24px); text-transform: uppercase; }
.care p { color: var(--muted); font-size: 15px; }

/* ---------- Cases: hero vivo ---------- */
.cs-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 clamp(48px, 6vw, 80px); }
.cs-hero__bg { position: absolute; inset: 0; z-index: -2; }
.cs-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.cs-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--black) 10%, color-mix(in srgb, var(--black) 70%, transparent) 50%, color-mix(in srgb, var(--black) 40%, transparent)), linear-gradient(0deg, var(--black) 0%, transparent 30%); }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cs-hero__eyebrow { margin-top: 22px; }
.cs-hero__title { margin: 24px 0 22px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(30px, 4.2vw, 68px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.cs-hero__lead { max-width: 520px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; }
@media all { /* animações ativas em todos os dispositivos */
  html.js .cs-hero .line > span { transform: translateY(110%); }
  html.js .cs-hero [data-hero-fade] { opacity: 0; transform: translateY(22px); }
  html.is-ready .cs-hero .line > span { transform: none; transition: transform 1.3s var(--ease) calc(var(--i, 0) * 100ms + 120ms); }
  html.is-ready .cs-hero [data-hero-fade] { opacity: 1; transform: none; transition: opacity .9s ease calc(var(--d, 0) * 1ms + 120ms), transform 1.2s var(--ease) calc(var(--d, 0) * 1ms + 120ms); }
}
.cs-hero .line { display: block; overflow: hidden; padding-bottom: .04em; }
.cs-hero .line > span { display: inline-block; }
.cs-hero__collage { position: relative; height: clamp(440px, 46vw, 620px); }
.cs-card { position: absolute; overflow: hidden; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -40px var(--black); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media all { /* animações ativas em todos os dispositivos */ .cs-card { animation: afx-float 7s ease-in-out infinite alternate; } .cs-card:nth-child(2) { animation-delay: -2s; } .cs-card:nth-child(3) { animation-delay: -4s; } .cs-card:nth-child(4) { animation-delay: -1s; } .cs-card:nth-child(5) { animation-delay: -5s; } }
@keyframes afx-float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
.cs-card__tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 9px; font: 500 10px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; background: color-mix(in srgb, var(--black) 60%, transparent); border: 1px solid var(--line-strong); }
.cs-card__label { display: block; font: 500 10.5px/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cs-card--film { left: 0; top: 4%; width: 62%; aspect-ratio: 16 / 9; }
.cs-card--film img, .cs-card--film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-card--film video { z-index: 1; opacity: 0; transition: opacity 1s; }
.cs-card--film video.is-playing { opacity: 1; }
.cs-card--chat { right: 0; top: 0; width: 44%; height: 66%; display: grid; grid-template-rows: auto 1fr; }
.cs-live { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; overflow: hidden; }
.cs-live .bubble { font-size: 12.5px; animation: afx-rise .5s var(--ease) both; }
.cs-card--kpi { left: 6%; bottom: 6%; width: 36%; padding: 18px; }
.cs-card--kpi b { display: block; margin-top: 8px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(36px, 4vw, 60px); line-height: 1; background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-card--media { left: 46%; bottom: 0; width: 30%; padding: 16px; display: grid; gap: 12px; }
.cs-card--media .ui-bars { height: 70px; }
.ui-bars--live i { animation: afx-bar 2.6s ease-in-out infinite alternate; }
.ui-bars--live i:nth-child(odd) { animation-delay: -1.3s; }
@keyframes afx-bar { from { transform: scaleY(.7); } to { transform: scaleY(1); } }
.cs-card--sap { right: 0; bottom: 14%; width: 24%; padding: 14px; display: grid; gap: 10px; }
.cs-sap { display: inline-flex; align-items: center; gap: 8px; font: 600 10px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.cs-sap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-hi) 25%, transparent); }
.cs-mini-rows { display: grid; gap: 6px; }
.cs-mini-rows i { height: 8px; background: linear-gradient(90deg, var(--line-strong) 60%, var(--blue-hi) 60% 72%, var(--line) 72%); }
.cs-mini-rows i:nth-child(2) { background: linear-gradient(90deg, var(--line-strong) 40%, var(--orange) 40% 52%, var(--line) 52%); }

/* ---------- Cases: jornada ---------- */
.journey-wrap { margin-top: clamp(48px, 6vw, 88px); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.journey-wrap::-webkit-scrollbar { display: none; }
.journey { position: relative; display: grid; grid-template-columns: repeat(9, minmax(110px, 1fr)); min-width: 990px; margin: 0; padding: 0; list-style: none; }
.journey::before { content: ""; position: absolute; left: 5%; right: 5%; top: 27px; height: 1px; background: var(--line-strong); }
.journey::after { content: ""; position: absolute; left: 5%; right: 5%; top: 27px; height: 1px; background: var(--grad-orange); transform: scaleX(0); transform-origin: left; transition: transform 2.4s var(--ease); }
.journey.is-in::after { transform: scaleX(1); }
.journey__step { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; }
.journey__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--black); border: 1px solid var(--line-strong); transition: border-color .5s, background .5s; transition-delay: calc(var(--j) * 220ms); }
.section--surface .journey__icon { background: var(--surface); }
.journey__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; transition-delay: calc(var(--j) * 220ms); }
.journey.is-in .journey__icon { border-color: var(--orange); }
.journey.is-in .journey__icon svg { stroke: var(--text); }
.journey__step b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; }
.journey__sol { padding: 8px 10px; font-size: 12.5px; line-height: 1.35; color: var(--text); background: color-mix(in srgb, var(--blue) 16%, transparent); border: 1px solid color-mix(in srgb, var(--blue-hi) 45%, transparent); opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s var(--ease); transition-delay: calc(var(--j) * 220ms + 400ms); }
.journey.is-in .journey__sol { opacity: 1; transform: none; }

/* ---------- Cases: KPIs ---------- */
.cs-results { background: radial-gradient(70% 60% at 80% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 70%), var(--black); border-block: 1px solid var(--line); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 110px); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; }
.kpi { display: grid; align-content: start; gap: 14px; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--line-strong); }
.kpi__num { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(56px, 7vw, 112px); line-height: .92; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi__num small { font-size: .32em; letter-spacing: 0; vertical-align: middle; }
.kpi--hero .kpi__num { font-size: clamp(72px, 10vw, 168px); background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi__text { max-width: 420px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }

/* ---------- Cases: blocos ---------- */
.cs-title { max-width: 1040px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(28px, 3.8vw, 58px); line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase; }
.cs-intro { max-width: 680px; margin-top: 24px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }
.cs-strong { margin-top: clamp(28px, 3vw, 40px); font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.25; text-transform: uppercase; }
.cs-note { margin-top: 12px; font: 500 10.5px/1.4 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin: clamp(40px, 5vw, 64px) 0 0; }
.cs-facts div { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.cs-facts dt { margin-bottom: 12px; font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.cs-facts dd { margin: 0; color: var(--muted); font-size: 15.5px; }
.cs-facts--stack { grid-template-columns: 1fr; gap: 22px; }
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }

/* Mosaico de criativos */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(110px, 11vw, 180px)) clamp(150px, 12vw, 190px); grid-template-areas: 'h h h h h h t t t f f f' 'h h h h h h t t t f f f' 'h h h h h h t t t e e e' 'u u u u u u u u u e e e'; gap: clamp(8px, 1vw, 14px); margin-top: clamp(40px, 5vw, 64px); }
.mosaic__item { position: relative; margin: 0; overflow: hidden; background: var(--surface); }
.mosaic__item--hero { grid-area: h; }
.mosaic__item--tall { grid-area: t; }
.mosaic__item--feed { grid-area: f; }
.mosaic__item--edit { grid-area: e; }
.mosaic__item--ui { grid-area: u; }
.mosaic__item > img, .mosaic__item > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mosaic__item > video { opacity: 0; transition: opacity 1s; }
.mosaic__item > video.is-playing { opacity: 1; }
.mosaic__item figcaption { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 6px 9px; font: 500 10px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; background: color-mix(in srgb, var(--black) 60%, transparent); border: 1px solid var(--line-strong); }
.mosaic__item--ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto 1fr; border: 1px solid var(--line-strong); }
.mosaic__item--ui .ui__bar { grid-column: 1 / -1; }
.mosaic__item--ui .ab { align-content: center; }
.ab { display: grid; gap: 10px; padding: 14px; }
.ab__col { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.ab__col i { height: 10px; width: var(--w); background: var(--line-strong); }
.ab__col.is-win { color: var(--text); }
.ab__col.is-win i { background: var(--grad-orange); }
.mosaic__item--ui .ui-line { height: 100%; min-height: 60px; padding: 12px 14px; }
@media (hover: hover) and (pointer: fine) { .mosaic__item:hover > img { transform: scale(1.04); } }
.chain { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.chain li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(15px, 1.4vw, 20px); text-transform: uppercase; }
.chain li + li::before { content: ""; width: 28px; height: 9px; background: var(--grad-orange); clip-path: polygon(0 40%, 70% 40%, 70% 0, 100% 50%, 70% 100%, 70% 60%, 0 60%); }

/* Conversa anotada */
.convo { display: grid; gap: 12px; padding: clamp(20px, 3vw, 36px); background: var(--black); border: 1px solid var(--line-strong); }
.convo__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 14px; }
.convo__row .bubble { max-width: 100%; justify-self: stretch; }
.convo__step { font: 500 10.5px/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-left: 14px; border-left: 2px solid var(--blue-hi); }
.convo__step--human { border-left-color: var(--orange); }
.convo__note { margin-top: 6px; text-align: right; font: 500 10px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Dashboard de estoque */
.dash { margin-top: clamp(40px, 5vw, 64px); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 50px 100px -60px var(--black); }
.dash .ui__bar em.cs-sap { margin-left: auto; }
.dash__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; padding: clamp(16px, 2.4vw, 28px); }
.dash__tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dash__tiles span { display: grid; gap: 8px; padding: 14px 16px; background: var(--black); border: 1px solid var(--line); }
.dash__tiles small { font: 500 10.5px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dash__tiles b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 2.2vw, 32px); font-variant-numeric: tabular-nums; }
.dash__table { display: grid; background: var(--black); border: 1px solid var(--line); }
.dash__row { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 8px; padding: 11px 14px; font-size: 13.5px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.dash__row--head { border-top: 0; font: 500 10.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dash__row.is-focus { background: color-mix(in srgb, var(--orange) 9%, transparent); box-shadow: inset 3px 0 0 var(--orange); }
.dash__chart { display: grid; align-content: start; gap: 14px; padding: 14px; background: var(--black); border: 1px solid var(--line); }
.dash__chart small { font: 500 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dash__chart .ui-bars { height: 140px; }
.zooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin: clamp(14px, 1.6vw, 22px) 0 0; padding: 0; list-style: none; }
.zooms li { display: grid; gap: 8px; padding: clamp(18px, 2.4vw, 30px); background: var(--black); border: 1px solid var(--line-strong); }
.zooms small { font: 500 10.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.zooms b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; }
.zooms span { color: var(--muted); font-size: 14px; }

/* Pneus */
.tire { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .6fr) minmax(0, .8fr); gap: clamp(12px, 1.6vw, 22px); align-items: stretch; margin-top: clamp(40px, 5vw, 64px); }
.tire__panel { display: grid; grid-template-rows: auto 1fr auto; background: var(--surface); border: 1px solid var(--line-strong); }
.truck { width: 100%; height: auto; padding: clamp(14px, 2vw, 28px); }
.truck__body { fill: var(--surface-2); stroke: var(--line-strong); }
.t-ok { fill: color-mix(in srgb, var(--blue-hi) 70%, transparent); }
.t-warn { fill: var(--orange); }
.t-bad { fill: var(--orange-2); }
@media all { /* animações ativas em todos os dispositivos */ .t-bad { animation: afx-blink 1.4s ease-in-out infinite; } }
@keyframes afx-blink { 50% { opacity: .35; } }
.tire__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0 20px 18px; list-style: none; font-size: 13px; color: var(--muted); }
.tire__legend li { display: inline-flex; align-items: center; gap: 8px; fill: none; }
.tire__legend li::before { content: ""; width: 14px; height: 8px; border-radius: 3px; }
.tire__legend .t-ok::before { background: color-mix(in srgb, var(--blue-hi) 70%, transparent); }
.tire__legend .t-warn::before { background: var(--orange); }
.tire__legend .t-bad::before { background: var(--orange-2); }
.tire__orders { display: grid; align-content: start; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line-strong); }
.tire__h { font: 500 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tire__orders ul { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.tire__orders li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; background: var(--black); border: 1px solid var(--line); }
.tire__orders li i { width: 8px; height: 8px; border-radius: 50%; }
.tire__orders i.t-ok { background: var(--blue-hi); } .tire__orders i.t-warn { background: var(--orange); } .tire__orders i.t-bad { background: var(--orange-2); }
.tire__access { font-size: 14px; }

/* Celulares */
.phone { width: 100%; max-width: 260px; justify-self: center; aspect-ratio: 9 / 18; padding: 10px; border-radius: 30px; background: var(--black); border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -40px var(--black); }
.phone__screen { display: grid; align-content: start; gap: 10px; height: 100%; padding: 26px 12px 14px; overflow: hidden; border-radius: 22px; background: var(--surface); font-size: 13px; }
.phone__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 14px; text-transform: uppercase; }
.phone__btn { display: block; margin-top: 4px; padding: 11px; text-align: center; font: 600 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--black); background: var(--grad-orange); border-radius: 8px; }
.phone__btn--wa { color: var(--text); background: var(--blue); }
.phone__product { height: 110px; border-radius: 12px; background: radial-gradient(circle at 50% 55%, var(--surface) 18%, color-mix(in srgb, var(--text) 45%, var(--black)) 19% 46%, var(--black) 47% 60%, var(--surface-2) 61%); }
.phone .ui-fields li { padding: 8px 10px; font-size: 12px; }
.phone .ui-products li { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 6px 8px; }
.phone .ui-products i { width: 28px; height: 28px; }
.phone .bubble { max-width: 92%; font-size: 12.5px; }
.phone--tire { max-width: 220px; align-self: center; }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 56px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.phones > li { position: relative; display: grid; justify-items: center; gap: 18px; }
.phones > li + li::before { content: ""; position: absolute; left: calc(clamp(16px, 3vw, 56px) * -1 - 4px); top: 52%; width: calc(clamp(16px, 3vw, 56px) + 8px); height: 9px; background: var(--grad-orange); clip-path: polygon(0 40%, 70% 40%, 70% 0, 100% 50%, 70% 100%, 70% 60%, 0 60%); }
.phones__step { font: 500 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--orange); }

/* Agendamento: revezamento */
.relay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.relay li { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.relay li + li::before { content: ""; position: absolute; top: 34px; right: 50%; width: 100%; height: 1px; background: var(--line-strong); z-index: -1; }
.relay li + li::after { content: ""; position: absolute; top: 34px; right: 50%; width: 100%; height: 1px; background: var(--grad-orange); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); transition-delay: calc(var(--r, 0) * 450ms); z-index: -1; }
.relay.is-in li + li::after { transform: scaleX(1); }
.relay li:nth-child(2) { --r: 1; } .relay li:nth-child(3) { --r: 2; } .relay li:nth-child(4) { --r: 3; }
.relay__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--black); border: 1px solid var(--line-strong); transition: border-color .5s, background .5s; transition-delay: calc(var(--r, 0) * 450ms + 300ms); }
.relay__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.relay.is-in .relay__icon { border-color: var(--blue-hi); }
.relay.is-in .relay__end .relay__icon { background: var(--orange); border-color: var(--orange); }
.relay.is-in .relay__end .relay__icon svg { stroke: var(--black); }
.relay b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(15px, 1.4vw, 20px); text-transform: uppercase; }
.relay small { color: var(--muted); font-size: 13.5px; }

/* Conexão: necessidades */
.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.needs li { padding: 16px 0 16px 30px; position: relative; border-top: 1px solid var(--line); color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); }
.needs li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: 14px; height: 6px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.needs__close { margin-top: 28px; color: var(--text); font-size: clamp(16px, 1.3vw, 19px); }
.journey--map .journey__step { gap: 14px; }

/* Relacionamento: time */
.crew { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.crew img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.25); transition: filter .6s; }
@media (hover: hover) and (pointer: fine) { .crew li:hover img { filter: none; } }

/* Fechamento */
.cs-close { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(120px, 15vw, 220px); border-top: 1px solid var(--line); }
.cs-close__media { position: absolute; inset: 0; z-index: -2; }
.cs-close__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--black) 15%, color-mix(in srgb, var(--black) 75%, transparent) 55%, color-mix(in srgb, var(--black) 45%, transparent)); }
.cs-close__title { max-width: 980px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(30px, 4.6vw, 72px); line-height: 1.02; text-transform: uppercase; }
.cs-close__body { display: grid; gap: 14px; max-width: 600px; margin-top: 32px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }
.cs-close__strong { margin-top: 10px; color: var(--text); font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 2vw, 30px); line-height: 1.2; text-transform: uppercase; }

@media (max-width: 1100px) {
  .areas { grid-template-columns: minmax(0, 1fr); }
  .areas__tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .areas__tabs::-webkit-scrollbar { display: none; }
  .areas__tab { flex: none; grid-template-columns: auto auto; min-height: 56px; border-bottom: 0; border-right: 1px solid var(--line); white-space: nowrap; }
  .areas__tab[aria-selected="true"]::before { top: auto; right: 0; width: auto; height: 3px; }
  .areas__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .guard-grid, .eco-grid, .cs-split, .cs-hero__grid, .dash__body { grid-template-columns: minmax(0, 1fr); }
  .guard-side { position: static; }
  .care, .apps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tire { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tire__panel { grid-column: 1 / -1; }
  .cs-facts { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(200px, 40vw, 380px) clamp(160px, 30vw, 260px) clamp(160px, 30vw, 260px) auto; grid-template-areas: 'h h' 't f' 't e' 'u u'; }
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-hero__collage { height: clamp(380px, 70vw, 560px); }
}
@media (max-width: 767px) {
  .trio, .forms6, .care, .apps4, .kpis, .zooms, .needs, .phones, .relay { grid-template-columns: minmax(0, 1fr); }
  .relay { gap: 26px; }
  .relay li + li::before, .relay li + li::after, .phones > li + li::before { display: none; }
  .tire { grid-template-columns: minmax(0, 1fr); }
  .dash__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__row { grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr)); }
  .dash__row > :nth-child(3), .dash__row > :nth-child(4) { display: none; }
  .convo__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mosaic { grid-template-rows: 210px 150px 150px auto; }
  .mosaic__item--ui { grid-template-columns: minmax(0, 1fr); }
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-hero__collage { height: 420px; }
  .cs-card--film { width: 78%; }
  .cs-card--chat { width: 56%; top: 30%; height: 50%; }
  .cs-card--kpi { left: 0; bottom: 4%; width: 46%; padding: 14px; }
  .cs-card--media, .cs-card--sap { display: none; }
  .layers__links { height: 40px; }
}

/* =========================================================
   ===== DIAGRAMAÇÃO v2 (2026-10) =====
   Cabeçalhos centralizados, formulário largo e compacto, formatos de vídeo
   em proporção real, fluxos horizontais e linha do tempo vertical do case.
   ========================================================= */

/* ---------- Cabeçalhos centralizados ---------- */
.shead--center { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 26px; text-align: center; }
.shead--center > div:first-child { display: grid; justify-items: center; }
.shead--center .h2 { max-width: 1120px; font-size: clamp(30px, 3.9vw, 58px); }
.shead--center .shead__side { justify-items: center; max-width: 720px; padding-bottom: 0; }
.cs-head { display: grid; justify-items: center; max-width: 1000px; margin-inline: auto; text-align: center; }
.cs-head .cs-title { font-size: clamp(28px, 3.6vw, 56px); }
.cs-head .cs-intro { max-width: 720px; margin-inline: auto; }
.statement--center, .cs-strong--center { max-width: 1040px; margin-inline: auto; text-align: center; }
.cs-note--center { text-align: center; }
.apps4__foot--center { flex-direction: column; justify-content: center; text-align: center; }
.cs-results .kpi { justify-items: center; text-align: center; }
.cs-results .kpi__text { margin-inline: auto; }
.cs-block .cs-facts { margin-top: clamp(48px, 6vw, 80px); }

/* ---------- CTA centralizado com formulário largo ---------- */
.cta--center .container { display: grid; justify-items: center; text-align: center; }
.cta--center .cta__title { max-width: 1180px; font-size: clamp(34px, 4.8vw, 76px); }
.cta--center .cta-form { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(32px, 4vw, 48px); width: 100%; }
.cta--center .cta-form__intro { position: static; justify-items: center; max-width: 860px; gap: 20px; }
.cta--center .cta__lead { max-width: 680px; margin-inline: auto; }
.cta--center .cta-form__ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; max-width: 860px; text-align: left; font-size: 15px; }
.cta--center .cta-form__strong { max-width: 760px; }
.cta--center .cta-form__panel { width: 100%; max-width: 1060px; padding: clamp(24px, 3vw, 44px); text-align: left; }

/* Formulário: 3 campos por linha, temas em linha, área de texto baixa */
.form--wide { gap: 24px; }
.form__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 18px; }
.form__grid .field { grid-column: span 2; }
.form__grid .field--half { grid-column: span 3; }
.field__hint--below { margin-top: -2px; font-size: 12.5px; }
.form--wide .field__control { min-height: 50px; padding-block: 12px; }
.form--wide textarea.field__control { min-height: 0; }
.form--wide .choices legend { margin-bottom: 10px; }
.form--wide .choices__list { gap: 8px; }
.form--wide .choice span { min-height: 40px; padding: 9px 14px; font-size: 13px; gap: 10px; }
.form--wide .choice span::before { width: 10px; height: 10px; }
.form--wide .form__foot { padding-top: 22px; }

/* ---------- Formatos de vídeo em proporção real ----------
   As larguras seguem a proporção de cada formato, então as três peças têm a mesma altura. */
.formats-row { display: grid; grid-template-columns: 1.7778fr .5625fr .8fr; gap: clamp(10px, 1.2vw, 18px); align-items: start; margin-top: clamp(48px, 6vw, 80px); }
.fmt { position: relative; margin: 0; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.fmt--16x9 { aspect-ratio: 16 / 9; }
.fmt--9x16 { aspect-ratio: 9 / 16; }
.fmt--4x5 { aspect-ratio: 4 / 5; }
.fmt > img, .fmt > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fmt > video { opacity: 0; transition: opacity 1s; }
.fmt > video.is-playing { opacity: 1; }
.fmt figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 10.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.fmt figcaption b { padding: 5px 8px; font-weight: 600; color: var(--black); background: var(--text); }
.fmt figcaption { text-shadow: 0 1px 8px var(--black); }
.perf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: clamp(10px, 1.2vw, 18px); align-items: stretch; margin-top: clamp(10px, 1.2vw, 18px); }
.perf__card { display: grid; align-content: start; gap: 12px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); }
.perf__h { font: 500 10.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.perf .ab { padding: 0; }
.perf .ui-line { height: 70px; }
.perf .chain { align-self: center; margin: 0; padding: 0 clamp(8px, 2vw, 24px); }

/* ---------- Atendimento: fluxo em 5 etapas ---------- */
.flow5 { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; }
.flow5__step { position: relative; display: grid; align-content: start; gap: 14px; padding: 18px; background: var(--black); border: 1px solid var(--line); }
.flow5__step + .flow5__step::before { content: ""; position: absolute; top: 28px; left: calc(clamp(14px, 1.8vw, 28px) * -1); width: clamp(14px, 1.8vw, 28px); height: 9px; background: var(--grad-orange); clip-path: polygon(0 40%, 65% 40%, 65% 0, 100% 50%, 65% 100%, 65% 60%, 0 60%); }
.flow5__label { display: flex; align-items: baseline; gap: 10px; font: 500 10.5px/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.flow5__label b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; color: var(--blue-hi); }
.flow5__step .bubble { max-width: 100%; justify-self: stretch; font-size: 13.5px; }
.flow5__step .bubble--tag, .flow5__step .bubble--sys { justify-self: stretch; padding: 10px 13px; border-radius: 12px; border-style: solid; font: 400 13.5px/1.45 var(--f-body); letter-spacing: 0; text-transform: none; text-align: left; background: color-mix(in srgb, currentColor 7%, transparent); }
.flow5__step--human { border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.flow5__step--human .flow5__label b { color: var(--orange); }

/* ---------- Humano no controle: 4 passos em linha ---------- */
.guard--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); margin-top: clamp(48px, 6vw, 80px); }
.guard--row::before { display: none; }
.guard--row .guard__step { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 26px 18px; text-align: center; }
.guard--row .guard__step { align-content: start; }
.guard--row .guard__num { grid-row: auto; margin-bottom: 4px; }
.guard--row .guard__step + .guard__step::before { content: ""; position: absolute; top: 42px; left: calc(clamp(14px, 1.8vw, 28px) * -1); width: clamp(14px, 1.8vw, 28px); height: 9px; background: var(--grad-orange); clip-path: polygon(0 40%, 65% 40%, 65% 0, 100% 50%, 65% 100%, 65% 60%, 0 60%); }

/* ---------- Linha do tempo vertical (o que conecta os projetos) ---------- */
.spine { position: relative; display: grid; gap: clamp(14px, 1.6vw, 22px); max-width: 1000px; margin: clamp(48px, 6vw, 88px) auto 0; padding: 0; list-style: none; }
.spine::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%; width: 1px; transform: translateX(-50%); background: linear-gradient(180deg, var(--blue-hi), var(--orange)); opacity: .55; }
.spine__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; gap: clamp(14px, 2vw, 28px); }
.spine__stage { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(16px, 1.6vw, 22px); text-transform: uppercase; text-align: right; }
.spine__stage b { font: 500 11px/1 var(--f-body); letter-spacing: .2em; color: var(--orange); }
.spine__dot { justify-self: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue-hi); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue-hi) 14%, transparent); }
.spine__row:last-child .spine__dot { border-color: var(--orange); box-shadow: 0 0 0 6px color-mix(in srgb, var(--orange) 16%, transparent); }
.spine__card { display: grid; gap: 8px; padding: 16px 20px; background: var(--black); border: 1px solid var(--line); }
.spine__need { color: var(--muted); font-size: 14.5px; }
.spine__sol { font-weight: 500; color: var(--text); font-size: 15.5px; }
.spine__sol::before { content: ""; display: inline-block; width: 14px; height: 6px; margin-right: 10px; vertical-align: middle; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.spine.is-armed .spine__row { opacity: .35; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.spine.is-armed .spine__row.is-in { opacity: 1; transform: none; }
.spine.is-armed .spine__row:not(.is-in) .spine__dot { border-color: var(--line-strong); box-shadow: none; }
.spine__dot { transition: border-color .6s, box-shadow .6s; }
.spine__close { margin-top: clamp(32px, 4vw, 48px); text-align: center; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }

/* ---------- Produção: reel com 9:16 real ---------- */
.reel__shot--tall { grid-column: span 3; grid-row: auto; aspect-ratio: 9 / 16; }
.reel__shot--wide { grid-column: span 9; grid-row: auto; aspect-ratio: auto; min-height: 0; }

@media (max-width: 1100px) {
  .cta--center .cta-form__ideas { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__grid .field, .form__grid .field--half { grid-column: span 1; }
  .form__grid .field:nth-child(3) { grid-column: 1 / -1; }
  .flow5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow5__step:nth-child(4)::before { display: none; }
  .guard--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guard--row .guard__step:nth-child(3)::before { display: none; }
  .perf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .perf .chain { grid-column: 1 / -1; justify-content: center; padding: 8px 0 0; }
  .reel__shot--tall { grid-column: span 4; aspect-ratio: 9 / 16; }
  .reel__shot--wide { grid-column: span 8; }
}
@media (max-width: 767px) {
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .form__grid .field:nth-child(3) { grid-column: auto; }
  .form--wide .choices__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .form--wide .choice span { width: 100%; min-height: 44px; padding: 8px 10px; font-size: 12.5px; line-height: 1.25; white-space: normal; }
  .formats-row { grid-template-columns: .5625fr .8fr; }
  .fmt--16x9 { grid-column: 1 / -1; }
  .fmt figcaption { font-size: 9.5px; letter-spacing: .1em; }
  .perf { grid-template-columns: minmax(0, 1fr); }
  .flow5, .guard--row { grid-template-columns: minmax(0, 1fr); }
  .flow5__step + .flow5__step::before, .guard--row .guard__step + .guard__step::before { top: calc(clamp(14px, 1.8vw, 28px) * -1); left: 50%; width: 9px; height: clamp(14px, 1.8vw, 28px); transform: translateX(-50%); clip-path: polygon(40% 0, 60% 0, 60% 65%, 100% 65%, 50% 100%, 0 65%, 40% 65%); }
  .spine::before { left: 7px; transform: none; }
  .spine__row { grid-template-columns: 16px minmax(0, 1fr); gap: 6px 16px; }
  .spine__stage { grid-column: 2; grid-row: 1; justify-content: flex-start; text-align: left; font-size: 15px; }
  .spine__dot { grid-column: 1; grid-row: 1; }
  .spine__card { grid-column: 2; }
  .reel__shot--tall { grid-column: 1 / -1; justify-self: center; width: min(100%, 320px); }
  .reel__shot--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* =========================================================
   ===== RODADA 2026-10 (b) =====
   Hub de sistemas, ideias em sequência, reel em sequência, peças por formato
   e o teste de seções centralizadas (body.layout-center).
   ========================================================= */

/* ---------- Hub: sistemas centrais (solucoes.html#ecossistema) ---------- */
.hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.hub__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.hub__line { fill: none; stroke: color-mix(in srgb, var(--blue-hi) 50%, transparent); stroke-width: 1.2; stroke-dasharray: 3 5; }
.hub__packet { fill: var(--blue-hi); filter: drop-shadow(0 0 5px var(--blue-hi)); }
.hub__packet--out { fill: var(--orange); filter: drop-shadow(0 0 5px var(--orange)); }
.hub__side { position: relative; z-index: 1; display: grid; gap: 14px; }
.hub__side--left { justify-items: end; }
.hub__side--right { justify-items: start; }
.hub__group { margin: 0 0 4px; font: 500 10.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.hub__node { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 320px; padding: 14px 16px; text-align: left; background: var(--black); border: 1px solid var(--line); transition: border-color .4s; }
.hub__node:hover { border-color: color-mix(in srgb, var(--blue-hi) 55%, transparent); }
.hub__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 14%, transparent); border: 1px solid color-mix(in srgb, var(--blue-hi) 35%, transparent); }
.hub__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--blue-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hub__node b { display: block; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; }
.hub__node small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.hub__core { position: relative; z-index: 1; display: grid; place-items: center; aspect-ratio: 1; }
.hub__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--blue-hi) 32%, transparent); animation: afx-hub-spin 50s linear infinite; }
.hub__ring--2 { inset: 9%; border-style: solid; border-color: color-mix(in srgb, var(--orange) 20%, transparent); animation-duration: 70s; animation-direction: reverse; }
.hub__ring::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 12px var(--blue-hi); }
.hub__ring--2::before { background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.hub__core-card { position: relative; width: 80%; padding: 18px; background: linear-gradient(180deg, var(--surface-2), var(--black)); border: 1px solid color-mix(in srgb, var(--blue-hi) 45%, transparent); box-shadow: 0 0 70px color-mix(in srgb, var(--blue) 26%, transparent); }
.hub__core-label { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; }
.hub__core-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 10px var(--blue-hi); animation: afx-hub-pulse 2s ease-in-out infinite; }
.hub__stack { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hub__stack li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; background: color-mix(in srgb, var(--blue) 7%, var(--black)); border: 1px solid var(--line); }
.hub__stack b { min-width: 40px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 14px; color: var(--blue-hi); }
.hub__stack span { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.hub__note { margin-top: 22px; text-align: center; font: 500 10.5px/1.4 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
@keyframes afx-hub-spin { to { transform: rotate(360deg); } }
@keyframes afx-hub-pulse { 50% { opacity: .35; } }

/* ---------- Ideias do CTA, uma por vez ---------- */
.cta-form__ideas.is-rotating { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 820px; margin-inline: auto; text-align: center; }
.cta-form__ideas.is-rotating li { grid-area: 1 / 1; align-self: center; padding: 0; opacity: 0; transform: translateY(20px); filter: blur(8px); font-weight: 300; font-size: clamp(20px, 2.3vw, 32px); line-height: 1.3; color: var(--text); transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease); }
.cta-form__ideas.is-rotating li::before { display: none; }
.cta-form__ideas.is-rotating li.is-past { transform: translateY(-20px); }
.cta-form__ideas.is-rotating li.is-current { opacity: 1; transform: none; filter: none; }
.rotator__dots { display: flex; justify-content: center; gap: 8px; }
.rotator__dots i { width: 18px; height: 3px; background: var(--line-strong); transition: width .6s var(--ease), background-color .6s; }
.rotator__dots i.is-on { width: 40px; background: var(--orange); }

/* ---------- Reel em sequência ---------- */
.reel__grid.is-sequenced .reel__shot > img { filter: brightness(.5) saturate(.55); transition: filter 1.4s var(--ease); }
.reel__grid.is-sequenced .reel__shot.is-live > img { filter: none; }
.reel__grid.is-sequenced .reel__shot figcaption { opacity: .55; transition: opacity .8s; }
.reel__grid.is-sequenced .reel__shot.is-live figcaption { opacity: 1; }
.reel__grid.is-sequenced .reel__shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: var(--grad-orange); transform: scaleX(0); transform-origin: left; opacity: 0; }
.reel__grid.is-sequenced .reel__shot.is-live::after { opacity: 1; animation: afx-seq var(--dur, 6s) linear forwards; }
@keyframes afx-seq { to { transform: scaleX(1); } }

/* ---------- Peças por formato (producao.html#formatos) ---------- */
.formats__frame { container-type: size; max-width: 100%; }
.formats__view, .formats__stage { min-width: 0; }
.formats__stage { width: 100%; }
.ad { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }
.ad.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }
.formats__frame .ad img { object-position: 50% 50%; }
.ad::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ad__copy { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2.6cqmin; font-family: var(--f-display); font-stretch: 125%; color: var(--text); }
.ad__kicker { white-space: nowrap; font-weight: 500; font-size: max(9px, 2.3cqmin); letter-spacing: .34em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 78%, transparent); }
.ad__title { max-width: 16ch; font-weight: 600; font-size: 8cqmin; line-height: .98; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.ad__cta { margin-top: 1.4cqmin; padding: 2cqmin 3.6cqmin; font-weight: 600; font-size: max(9px, 2.3cqmin); letter-spacing: .16em; text-transform: uppercase; color: var(--black); background: var(--grad-orange); clip-path: polygon(0 0, 100% 0, 100% 72%, calc(100% - 1.6cqmin) 100%, 0 100%); }
/* 16:9 · branding: texto à esquerda, carro à direita */
.ad--16x9::after { background: linear-gradient(160deg, color-mix(in srgb, var(--black) 72%, transparent), transparent 48%); }
.ad--16x9 .ad__copy { left: 5.5%; top: 9%; max-width: 40%; }
.ad--16x9 .ad__title { font-size: 7.4cqmin; max-width: 13ch; }
/* 9:16 · alcance: título no topo, CTA na base */
.ad--9x16::after { background: linear-gradient(180deg, color-mix(in srgb, var(--black) 70%, transparent), transparent 38%, transparent 70%, color-mix(in srgb, var(--black) 75%, transparent)); }
.ad--9x16 .ad__copy { inset: 9% 8% 7%; align-items: center; text-align: center; }
.ad--9x16 .ad__title { font-size: 11cqmin; }
.ad--9x16 .ad__cta { margin-top: auto; }
/* 1:1 · produto: bloco no canto superior esquerdo */
.ad--1x1::after { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--black) 75%, transparent), transparent 60%); }
.ad--1x1 .ad__copy { left: 6%; top: 6%; max-width: 40%; }
.ad--1x1 .ad__title { font-size: 5.6cqmin; max-width: 12ch; }
.ad__cta { white-space: nowrap; }
/* Peças pequenas (celular): o nome do carro pode quebrar em vez de vazar da peça */
.ad--1x1 .ad__kicker, .ad--16x9 .ad__kicker { white-space: normal; letter-spacing: .22em; line-height: 1.3; }
.formats__frame .formats__badge { left: auto; right: 14px; z-index: 2; }
/* 4:5 · conversão: proposta no topo, CTA forte na base */
.ad--4x5::after { background: linear-gradient(180deg, color-mix(in srgb, var(--black) 72%, transparent), transparent 34%, transparent 66%, color-mix(in srgb, var(--black) 80%, transparent)); }
.ad--4x5 .ad__copy { inset: 7% 7% 7%; align-items: center; text-align: center; }
.ad--4x5 .ad__title { font-size: 8.4cqmin; }
.ad--4x5 .ad__cta { margin-top: auto; padding: 2.6cqmin 6cqmin; font-size: max(10px, 2.6cqmin); }
.formats__caption b { color: var(--orange); font-weight: 600; }
.formats__note { margin-top: 6px; text-align: center; font: 500 10.5px/1.4 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* ---------- Teste: seções centralizadas (body.layout-center) ----------
   Não altera banners/heroes nem as seções com vídeo (#projetos e .production).
   Para voltar ao layout anterior, remova a classe layout-center do <body>. */
.layout-center .section:not(#projetos) .shead,
.layout-center .solutions .shead,
.layout-center .why .shead { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 26px; text-align: center; }
.layout-center .section:not(#projetos) .shead > div:first-child,
.layout-center .solutions .shead,
.layout-center .why .shead > div:first-child { display: grid; justify-items: center; }
.layout-center .section:not(#projetos) .shead .h2,
.layout-center .solutions .shead,
.layout-center .why .shead .h2 { max-width: 1120px; font-size: clamp(30px, 3.9vw, 58px); }
.layout-center .section:not(#projetos) .shead__side,
.layout-center .solutions .shead,
.layout-center .why .shead__side { justify-items: center; max-width: 720px; padding-bottom: 0; }
.layout-center .statement { max-width: 1000px; margin-inline: auto; text-align: center; font-size: clamp(22px, 2.5vw, 38px); text-wrap: balance; }

/* Home */
.layout-center .manifesto .container > .label { display: flex; justify-content: center; }
.layout-center .manifesto__text { max-width: 1100px; margin-inline: auto; text-align: center; }
.layout-center .starting .container > .label { display: flex; justify-content: center; }
.layout-center .starting__title { max-width: 1000px; margin-inline: auto; text-align: center; }
.layout-center .starting__words { justify-content: center; }
.layout-center .starting__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; text-align: center; }
.layout-center .starting__copy { max-width: 680px; }
.layout-center .starting__quote { max-width: 820px; text-align: center; }
.layout-center .case__head { max-width: 900px; margin-inline: auto; text-align: center; }
.layout-center .case__head .label { display: flex; justify-content: center; }
.layout-center .case__intro { margin-inline: auto; }
.layout-center .case__close { margin-inline: auto; text-align: center; }
.layout-center .case__link { display: flex; width: max-content; margin-inline: auto; }
.layout-center .why__link { display: flex; width: max-content; margin-inline: auto; }
.layout-center .team-teaser__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.layout-center .team-teaser__intro { justify-items: center; }
.layout-center .team-teaser__intro .label { display: flex; justify-content: center; }
.layout-center .team-teaser__fronts { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 980px); }
.layout-center .team-teaser__fronts li { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 22px 12px; text-align: center; }

/* Produção */
.layout-center #formatos .unfold { grid-template-columns: minmax(0, 1fr); }
.layout-center #formatos .unfold__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); border-top: 0; text-align: center; }
.layout-center #formatos .unfold__list li { align-content: start; padding: 22px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
.layout-center #formatos .formats { grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); margin-top: clamp(40px, 5vw, 72px); }
.layout-center #formatos .formats__stage { height: min(74vh, 680px); }

/* Títulos centralizados: quebras manuais saem, o texto se equilibra sozinho */
.layout-center .section:not(#projetos) .shead .h2 br,
.layout-center .solutions .shead .h2 br,
.layout-center .why .shead .h2 br,
.layout-center .people__grid .h2 br,
.layout-center .guard-grid .h2 br,
.shead--center .h2 br { display: none; }
.layout-center .section:not(#projetos) .shead .h2,
.layout-center .solutions .shead .h2,
.layout-center .why .shead .h2,
.layout-center .people__grid .h2,
.layout-center .guard-grid .h2,
.shead--center .h2 { max-width: 980px; text-wrap: balance; }

/* Produção: pessoas */
.layout-center .people__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; text-align: center; }
.layout-center .people__grid > div:first-child { display: grid; justify-items: center; }
.layout-center .people__grid .h2 { max-width: 1120px; font-size: clamp(30px, 3.9vw, 58px); }
.layout-center .people__copy { max-width: 760px; justify-items: center; }
.layout-center .people__team { justify-self: center; }

/* Sobre */
.layout-center .about-origin .container > .label { display: flex; justify-content: center; }
.layout-center .page-intro__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; text-align: center; }
.layout-center .page-intro__statement { max-width: 1000px; text-wrap: balance; }
.layout-center .page-intro__aside { max-width: 720px; }
.layout-center .name__equation { justify-content: center; text-align: center; }
.layout-center .name__result { justify-content: center; }
.layout-center .name__defs { text-align: center; }
.layout-center .name__def dt { justify-content: center; }
.layout-center .name__def dd { margin-inline: auto; }
.layout-center .principles__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); }
.layout-center .principles__head { position: static; display: grid; justify-items: center; max-width: 900px; margin-inline: auto; text-align: center; }
.layout-center .principles__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.layout-center .group__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(40px, 5vw, 64px); }
.layout-center .group__text { display: grid; justify-items: center; max-width: 760px; text-align: center; }
.layout-center .group__diagram { width: min(100%, 560px); }

/* Soluções */
.layout-center .guard-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(40px, 5vw, 64px); text-align: center; }
.layout-center .guard-grid > div:first-child { display: grid; justify-items: center; max-width: 1000px; }
.layout-center .guard-grid .h2 { font-size: clamp(30px, 3.9vw, 58px); }
.layout-center .guard-copy { max-width: 760px; }
.layout-center .guard-side { width: 100%; }

@media (max-width: 1100px) {
  .layout-center #formatos .unfold__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
  .layout-center #formatos .formats { grid-template-columns: minmax(0, 1fr); }
  .layout-center #formatos .formats__options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .layout-center #formatos .formats__btn { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 10px; padding: 14px; }
  .layout-center #formatos .formats__shape { grid-row: span 2; width: 30px; }
  .layout-center #formatos .formats__use { font-size: 12.5px; line-height: 1.3; }
}
@media (max-width: 900px) {
  .hub { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hub__side--left, .hub__side--right { justify-items: stretch; }
  .hub__node { max-width: none; }
  .hub__core { order: 0; aspect-ratio: auto; width: min(100%, 400px); justify-self: center; }
  .hub__side--left { order: -1; }
  .hub__side--right { order: 1; }
  .hub__ring { display: none; }
  .hub__core-card { width: 100%; }
}
@media (max-width: 767px) {
  .layout-center #formatos .unfold__list { grid-template-columns: minmax(0, 1fr); }
  .layout-center .team-teaser__fronts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-center .principles__list { grid-template-columns: minmax(0, 1fr); }
  .layout-center #formatos .formats__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-center #formatos .formats__stage { height: min(70vh, 520px); }
}

/* =========================================================
   ===== RODADA 2026-10 (c) =====
   ========================================================= */

/* ---------- Linha do tempo em zigue-zague (cases.html#conexao) ----------
   Ímpares: etapa à esquerda, card à direita. Pares: o inverso. O número fica sempre colado à linha. */
.spine__stage { flex-direction: row-reverse; }
.spine__stage b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px var(--orange); }
.spine__row:nth-child(even) .spine__stage { grid-column: 3; grid-row: 1; flex-direction: row; justify-content: flex-start; text-align: left; }
.spine__row:nth-child(even) .spine__card { grid-column: 1; grid-row: 1; }
.spine__row:nth-child(even) .spine__dot { grid-column: 2; grid-row: 1; }
.spine__card { position: relative; transition: border-color .6s var(--ease); }
.spine__card::before { content: ""; position: absolute; top: 50%; left: calc(clamp(14px, 2vw, 28px) * -1); width: clamp(14px, 2vw, 28px); height: 1px; background: var(--line-strong); }
.spine__row:nth-child(even) .spine__card::before { left: auto; right: calc(clamp(14px, 2vw, 28px) * -1); }
.spine__row.is-in .spine__card { border-color: color-mix(in srgb, var(--blue-hi) 35%, transparent); }
.spine__row.is-in .spine__stage b { color: var(--orange); -webkit-text-stroke: 0; transition: color .8s var(--ease); }
.spine.is-armed .spine__row:nth-child(odd) { transform: translateX(-24px); }
.spine.is-armed .spine__row:nth-child(even) { transform: translateX(24px); }
.spine.is-armed .spine__row.is-in { transform: none; }

@media (max-width: 767px) {
  .spine__stage, .spine__row:nth-child(even) .spine__stage { grid-column: 2; grid-row: 1; flex-direction: row; justify-content: flex-start; text-align: left; }
  .spine__row:nth-child(even) .spine__card { grid-column: 2; grid-row: auto; }
  .spine__row:nth-child(even) .spine__dot { grid-column: 1; grid-row: 1; }
  .spine__stage b { font-size: 24px; }
  .spine__card::before { display: none; }
  .spine.is-armed .spine__row:nth-child(odd), .spine.is-armed .spine__row:nth-child(even) { transform: translateY(14px); }
  .spine.is-armed .spine__row.is-in { transform: none; }
}

/* ---------- Camadas (solucoes.html#sistemas): tudo centralizado ---------- */
.layers__top, .layers__base { justify-items: center; text-align: center; }
.layers__base { max-width: 1000px; }
.layers ul { justify-content: center; }

/* ---------- Jornada do case em 3 fases (cases.html#visao-geral) ---------- */
.trail { position: relative; margin-top: clamp(48px, 6vw, 88px); }
.trail__track { position: relative; height: 2px; margin-bottom: 22px; background: var(--line); overflow: hidden; }
.trail__track i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue-hi), var(--blue), var(--orange)); transform: scaleX(0); transform-origin: left; transition: transform 2.8s var(--ease) .2s; }
.trail.is-in .trail__track i, .trail:not(.is-armed) .trail__track i { transform: none; }
.trail__track::after { content: ""; position: absolute; top: -3px; width: 120px; height: 8px; background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 80%, transparent), transparent); animation: afx-trail-run 3.6s linear infinite; }
@keyframes afx-trail-run { from { left: -120px; } to { left: 100%; } }
.trail__phases { display: grid; grid-template-columns: 2fr 4fr 3fr; gap: clamp(18px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
.trail__phase { --pc: var(--blue-hi); position: relative; display: grid; align-content: start; gap: 18px; padding: clamp(16px, 1.6vw, 22px); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 11%, transparent), transparent 55%), var(--black); border: 1px solid var(--line); border-top: 2px solid var(--pc); }
.trail__phase:nth-child(2) { --pc: var(--blue); }
.trail__phase:nth-child(3) { --pc: var(--orange); }
.trail__phase + .trail__phase::before { content: ""; position: absolute; top: 50%; left: calc(clamp(18px, 2vw, 30px) * -1); width: clamp(18px, 2vw, 30px); height: 10px; transform: translateY(-50%); background: var(--grad-orange); clip-path: polygon(0 40%, 65% 40%, 65% 0, 100% 50%, 65% 100%, 65% 60%, 0 60%); }
.trail__head { display: grid; gap: 5px; margin: 0; }
.trail__pnum { font: 500 10.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--pc); }
.trail__head b { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.15; text-transform: uppercase; }
.trail__head small { color: var(--muted); font-size: 13px; }
.trail__steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.trail__step { display: grid; justify-items: center; align-content: start; gap: 12px; padding: 18px 10px 20px; text-align: center; background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .7s var(--ease), background-color .4s; transition-delay: calc(var(--j) * 150ms + 250ms); }
.trail__step:hover { background: color-mix(in srgb, var(--pc) 10%, var(--surface)); }
.trail.is-armed .trail__step { opacity: .3; transform: translateY(12px); border-color: var(--line); }
.trail.is-armed.is-in .trail__step { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--pc) 30%, transparent); }
.trail__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); }
.trail.is-in .trail__icon { animation: afx-trail-pulse 1.4s var(--ease) both; animation-delay: calc(var(--j) * 150ms + 250ms); }
@keyframes afx-trail-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 65%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
.trail__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--pc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trail__txt { display: grid; gap: 7px; }
.trail__txt b { display: grid; justify-items: center; gap: 6px; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 14.5px; letter-spacing: .03em; text-transform: uppercase; }
.trail__txt b i { font: 500 10.5px/1 var(--f-body); font-style: normal; letter-spacing: .2em; color: var(--muted); }
.trail__txt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

.trail__phases { grid-template-columns: 2.15fr 4fr 3fr; }
.trail__phase { gap: 22px; padding: clamp(18px, 1.8vw, 26px); }
.trail__head b { font-size: clamp(18px, 1.6vw, 24px); }
.trail__head small { font-size: 14px; }
.trail__step { gap: 14px; min-height: 220px; padding: 24px 10px 22px; }
.trail__icon { width: 64px; height: 64px; }
.trail__icon svg { width: 28px; height: 28px; }
.trail__txt b { font-size: clamp(12px, .98vw, 14.5px); letter-spacing: 0; }
.trail__step { padding-inline: 8px; }
.trail__txt b i { font-size: 11px; }
.trail__txt small { font-size: 13px; }

@media (max-width: 1439px) {
  .trail__phases { grid-template-columns: minmax(0, 1fr); }
  .trail__phase + .trail__phase::before { top: calc(clamp(18px, 2vw, 30px) * -1); left: 50%; width: 10px; height: clamp(18px, 2vw, 30px); transform: translateX(-50%); clip-path: polygon(40% 0, 60% 0, 60% 65%, 100% 65%, 50% 100%, 0 65%, 40% 65%); }
  .trail__track { display: none; }
}
@media (max-width: 767px) {
  .trail__steps { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Telas ilustrativas das áreas (solucoes.html#areas) ----------
   Componente .scr: janela de app com topo, corpo e peças internas. Tudo escopado em .scr. */
.areas__visual { display: grid; justify-items: center; }
.scr { position: relative; width: 100%; max-width: 440px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 9%, var(--surface)) 0%, var(--surface) 38%); border: 1px solid color-mix(in srgb, var(--blue-hi) 22%, var(--line-strong)); box-shadow: 0 50px 90px -50px color-mix(in srgb, var(--blue) 70%, transparent), 0 0 0 6px color-mix(in srgb, var(--text) 3%, transparent); }
.scr::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue-hi) 70%, transparent), transparent); }
.areas__panel:not([hidden]) .scr [style*="--k"] { animation: afx-rise .6s var(--ease) both; animation-delay: calc(var(--k, 0) * 140ms + 80ms); }
.scr__top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.scr__top b { font: 600 12.5px/1.2 var(--f-body); letter-spacing: .02em; }
.scr__logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font: 700 10px/1 var(--f-display); font-stretch: 125%; color: var(--black); background: var(--grad-orange); }
.scr__pill { margin-left: auto; padding: 5px 9px; border-radius: 999px; font: 600 10px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
.scr__pill--blue { color: var(--blue-hi); background: color-mix(in srgb, var(--blue) 16%, transparent); border-color: color-mix(in srgb, var(--blue-hi) 40%, transparent); }
.scr__pill--warn { color: #f5b544; background: color-mix(in srgb, #f5b544 12%, transparent); border-color: color-mix(in srgb, #f5b544 40%, transparent); }
.scr__pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: afx-hub-pulse 1.8s ease-in-out infinite; }
.scr__body { display: grid; gap: 12px; padding: 16px; }
.scr small { color: var(--muted); }

/* Telefone (atendimento) */
.scr--phone { max-width: 330px; border-radius: 34px; padding: 10px; background: #05080d; border-color: color-mix(in srgb, var(--text) 16%, transparent); }
.scr--phone::after { content: ""; position: absolute; top: 16px; left: 50%; width: 76px; height: 20px; border-radius: 999px; transform: translateX(-50%); background: #000; }
.scr__chathead { display: flex; align-items: center; gap: 10px; padding: 40px 14px 12px; border-radius: 26px 26px 0 0; background: color-mix(in srgb, var(--surface-2) 80%, var(--black)); }
.scr__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 11px/1 var(--f-display); font-stretch: 125%; color: var(--black); background: var(--grad-orange); }
.scr__who { display: grid; gap: 3px; }
.scr__who b { font: 600 13px/1.2 var(--f-body); }
.scr__who small { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.scr__who small i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; }
.scr__chat { display: grid; align-content: start; gap: 8px; min-height: 330px; padding: 14px 12px; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 70%), #0a0f16; }
.scr-msg { position: relative; max-width: 84%; margin: 0; padding: 9px 12px 18px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.scr-msg em { position: absolute; right: 10px; bottom: 5px; font: 500 9.5px/1 var(--f-body); font-style: normal; color: var(--muted); }
.scr-msg em b { color: var(--blue-hi); font-weight: 600; letter-spacing: -.15em; }
.scr-msg--in { justify-self: start; background: #1a222d; border-bottom-left-radius: 4px; }
.scr-msg--out { justify-self: end; background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 55%, #0b2236), color-mix(in srgb, var(--blue) 30%, #0b1a2a)); border-bottom-right-radius: 4px; }
.scr-msg--ai { justify-self: center; display: flex; align-items: center; gap: 7px; max-width: none; padding: 6px 11px; border-radius: 999px; font: 600 10.5px/1.2 var(--f-body); letter-spacing: .06em; color: var(--blue-hi); background: color-mix(in srgb, var(--blue) 14%, transparent); border: 1px solid color-mix(in srgb, var(--blue-hi) 35%, transparent); }
.scr-msg--ai svg { width: 13px; height: 13px; fill: var(--blue-hi); }
.scr-msg--in:first-child { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; }
.scr-msg--in:first-child em { position: static; }
.scr-msg__play { width: 0; height: 0; border-left: 9px solid var(--text); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.scr-msg__wave { display: flex; align-items: center; gap: 2px; height: 20px; }
.scr-msg__wave i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text) 70%, transparent); height: 40%; }
.scr-msg__wave i:nth-child(3n) { height: 90%; } .scr-msg__wave i:nth-child(4n+1) { height: 60%; } .scr-msg__wave i:nth-child(5n+2) { height: 75%; }
.scr-msg--typing { display: flex; gap: 4px; padding: 11px 12px; justify-self: start; background: #1a222d; border-bottom-left-radius: 4px; }
.scr-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: afx-typing 1.2s infinite; }
.scr-msg--typing i:nth-child(2) { animation-delay: .15s; } .scr-msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes afx-typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.scr__compose { display: flex; align-items: center; gap: 10px; padding: 10px 12px 14px; border-radius: 0 0 26px 26px; background: color-mix(in srgb, var(--surface-2) 80%, var(--black)); }
.scr__compose span { flex: 1; padding: 9px 14px; border-radius: 999px; font-size: 12px; color: var(--muted); background: #0a0f16; }
.scr__compose i { width: 34px; height: 34px; border-radius: 50%; background: var(--grad-orange); }

/* CRM (vendas) */
.scr .lead { display: grid; grid-template-columns: 40px minmax(0, 1fr) 46px; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--black) 60%, transparent); border: 1px solid var(--line); }
.scr .lead__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 600 12px/1 var(--f-body); background: color-mix(in srgb, var(--blue) 35%, var(--surface-2)); }
.scr .lead__who { display: grid; gap: 3px; } .scr .lead__who b { font-size: 13.5px; font-weight: 600; } .scr .lead__who small { font-size: 11.5px; }
.scr .ring { position: relative; display: grid; place-items: center; width: 46px; height: 46px; }
.scr .ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.scr .ring circle { fill: none; stroke: var(--line-strong); stroke-width: 3; }
.scr .ring .ring__val { stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; }
.areas__panel:not([hidden]) .scr .ring__val { animation: afx-ring 1.4s var(--ease) .5s forwards; }
@keyframes afx-ring { to { stroke-dashoffset: 18; } }
.scr .ring b { font: 600 15px/1 var(--f-display); font-stretch: 125%; }
.scr .stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.scr .stages li { position: relative; padding: 18px 2px 0; text-align: center; font: 500 10.5px/1.2 var(--f-body); color: var(--muted); }
.scr .stages li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--line-strong); }
.scr .stages li.is-done::before { background: var(--blue-hi); }
.scr .stages li.is-on { color: var(--text); }
.scr .stages li.is-on::before { background: linear-gradient(90deg, var(--blue-hi), var(--orange)); box-shadow: 0 0 12px color-mix(in srgb, var(--orange) 50%, transparent); }
.scr .kv { display: grid; gap: 1px; margin: 0; border-radius: 10px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.scr .kv div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 12.5px; background: var(--surface); }
.scr .kv dt { color: var(--muted); } .scr .kv dd { margin: 0; font-weight: 500; }
.scr .toast { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.35; background: color-mix(in srgb, var(--orange) 10%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 38%, transparent); }
.scr .toast__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); }
.scr .toast--ok { background: color-mix(in srgb, var(--blue) 12%, transparent); border-color: color-mix(in srgb, var(--blue-hi) 40%, transparent); }
.scr .toast__check { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-hi); position: relative; }
.scr .toast__check::after { content: ""; position: absolute; left: 5px; top: 5px; width: 7px; height: 4px; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: rotate(-45deg); }
.scr .toast--alert { color: #f5b544; background: color-mix(in srgb, #f5b544 9%, transparent); border-color: color-mix(in srgb, #f5b544 35%, transparent); }
.scr .toast--alert .toast__dot { background: #f5b544; box-shadow: 0 0 0 4px color-mix(in srgb, #f5b544 22%, transparent); }

/* Agenda */
.scr .week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.scr .week span { display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; font: 600 15px/1 var(--f-display); font-stretch: 125%; border: 1px solid var(--line); }
.scr .week small { font: 500 9.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.scr .week .is-on { color: var(--black); background: var(--text); border-color: var(--text); }
.scr .week .is-on small { color: var(--black); }
.scr .slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.scr .slots span { padding: 8px 0; border-radius: 8px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong); }
.scr .slots .is-busy { color: var(--dim); text-decoration: line-through; border-color: var(--line); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text) 4%, transparent) 5px 10px); }
.scr .slots .is-picked { color: var(--black); font-weight: 700; background: var(--grad-orange); border-color: transparent; box-shadow: 0 0 18px color-mix(in srgb, var(--orange) 45%, transparent); }
.scr .vehicle { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: color-mix(in srgb, var(--black) 60%, transparent); border: 1px solid var(--line); }
.scr .vehicle__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 16%, transparent); border: 1px solid color-mix(in srgb, var(--blue-hi) 35%, transparent); }
.scr .vehicle__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--blue-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scr .vehicle__txt { display: grid; gap: 3px; } .scr .vehicle__txt b { font-size: 13px; font-weight: 600; } .scr .vehicle__txt small { font-size: 11.5px; }

/* Catálogo */
.scr .search { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--black) 70%, transparent); border: 1px solid var(--line-strong); }
.scr .search svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.scr .search b { font-weight: 500; }
.scr .search__chip { margin-left: auto; padding: 4px 8px; border-radius: 999px; font-size: 10.5px; color: var(--blue-hi); border: 1px solid color-mix(in srgb, var(--blue-hi) 40%, transparent); }
.scr .products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.scr .products li { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 12px; text-align: center; background: color-mix(in srgb, var(--black) 55%, transparent); border: 1px solid var(--line); }
.scr .products b { font-size: 12.5px; font-weight: 600; } .scr .products small { font-size: 10.5px; }
.scr .products em { margin-top: 4px; padding: 3px 7px; border-radius: 999px; font: 600 9.5px/1.2 var(--f-body); font-style: normal; letter-spacing: .04em; }
.scr .products em.ok { color: #3ddc84; background: color-mix(in srgb, #3ddc84 12%, transparent); }
.scr .products em.low { color: #f5b544; background: color-mix(in srgb, #f5b544 12%, transparent); }
.scr .scr-tire { width: 62px; height: 62px; margin-bottom: 4px; border-radius: 50%; background: radial-gradient(circle closest-side, #e3e8ee 0 13%, #2a323c 14% 18%, transparent 19% 50%, #c6cdd5 51% 56%, #161b22 57% 84%, transparent 85%), repeating-conic-gradient(from 0deg, #8d97a2 0 14deg, #2a323c 14deg 36deg) , #0b0f14; box-shadow: inset 0 0 0 4px #05080c, 0 10px 20px -8px #000; }
.scr .scr-tire { -webkit-mask: radial-gradient(circle closest-side, #000 99%, transparent 100%); mask: radial-gradient(circle closest-side, #000 99%, transparent 100%); }
.scr .scr-tire { background-blend-mode: normal; }
.areas__panel:not([hidden]) .scr .scr-tire { animation: afx-hub-spin 9s linear infinite; }
.scr .wa { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 12px; border-radius: 12px; font: 600 12.5px/1.2 var(--f-body); color: #04140a; background: linear-gradient(180deg, #3ddc84, #25b866); box-shadow: 0 12px 26px -14px #3ddc84; }
.scr .wa svg { width: 18px; height: 18px; fill: none; stroke: #04140a; stroke-width: 2; stroke-linejoin: round; }

/* Estoque */
.scr .kpis3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.scr .kpis3 span { display: grid; gap: 5px; padding: 10px; border-radius: 10px; font: 600 13px/1.1 var(--f-display); font-stretch: 125%; background: color-mix(in srgb, var(--black) 55%, transparent); border: 1px solid var(--line); }
.scr .kpis3 small { font: 500 9.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.scr .kpis3--spark svg { width: 100%; height: 16px; margin-top: 2px; }
.scr .kpis3--spark path { fill: none; stroke: var(--blue-hi); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.scr .kpis3--spark span:last-child path { stroke: var(--orange); }
.scr .chart { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--black) 55%, transparent); border: 1px solid var(--line); }
.scr .chart__h { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; font: 600 11px/1.2 var(--f-body); }
.scr .chart__h span { display: flex; align-items: center; gap: 5px; font-weight: 500; color: var(--muted); font-size: 10px; }
.scr .chart__h i { width: 8px; height: 8px; border-radius: 2px; margin-left: 6px; }
.scr .chart__h i.is-real { background: var(--blue-hi); } .scr .chart__h i.is-fore { background: var(--orange); }
.scr .chart__bars { display: flex; align-items: flex-end; gap: 6px; height: 84px; border-bottom: 1px solid var(--line-strong); }
.scr .chart__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(0deg, color-mix(in srgb, var(--blue) 40%, transparent), var(--blue-hi)); transform-origin: bottom; }
.scr .chart__bars i.is-fore { background: repeating-linear-gradient(135deg, var(--orange) 0 4px, color-mix(in srgb, var(--orange) 55%, transparent) 4px 8px); }
.areas__panel:not([hidden]) .scr .chart__bars i { animation: afx-grow .9s var(--ease) both; animation-delay: calc(var(--k, 1) * 140ms + 200ms); }
@keyframes afx-grow { from { transform: scaleY(0); } }
.scr .order { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.scr .order li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 58px; align-items: center; gap: 10px; font-size: 12px; }
.scr .order b { font-weight: 500; }
.scr .order__bar { position: relative; height: 6px; border-radius: 3px; background: var(--line); }
.scr .order__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--blue-hi); }
.scr .order em { justify-self: end; padding: 3px 8px; border-radius: 999px; font: 600 10px/1.2 var(--f-body); font-style: normal; color: var(--muted); border: 1px solid var(--line-strong); }
.scr .order em.up { color: var(--black); background: var(--orange); border-color: var(--orange); }

/* Inspeção (tablet) */
.scr--tablet { max-width: 460px; border-radius: 22px; border-width: 8px; border-color: #0a0d12; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent), 0 50px 90px -50px color-mix(in srgb, var(--blue) 70%, transparent); }
.scr .inspect { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--black) 55%, transparent); border: 1px solid var(--line); }
.scr .scr-checks { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.scr .scr-checks li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.scr .scr-checks li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--black); background: var(--blue-hi); }
.scr .scr-checks li.is-warn { color: #f5b544; }
.scr .scr-checks li.is-warn::before { content: "!"; background: #f5b544; }
.scr .gauge { display: grid; justify-items: center; gap: 2px; }
.scr .gauge svg { width: 128px; height: 74px; overflow: visible; }
.scr .gauge path { fill: none; stroke-width: 9; stroke-linecap: round; }
.scr .gauge__track { stroke: var(--line-strong); }
.scr .gauge__ok { stroke: #f5b544; stroke-dasharray: 157; stroke-dashoffset: 157; }
.areas__panel:not([hidden]) .scr .gauge__ok { animation: afx-gauge 1.2s var(--ease) .5s forwards; }
@keyframes afx-gauge { to { stroke-dashoffset: 108; } }
.scr .gauge__needle { stroke: var(--text) !important; stroke-width: 2.5 !important; }
.scr .gauge circle { fill: var(--text); }
.scr .gauge b { font: 600 12px/1 var(--f-display); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; color: #f5b544; }

/* Painel de dados */
.scr .area-chart { padding: 10px 10px 4px; border-radius: 12px; background: color-mix(in srgb, var(--black) 55%, transparent); border: 1px solid var(--line); }
.scr .area-chart svg { display: block; width: 100%; height: 96px; }
.scr .area-chart__grid { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scr .area-chart__fill { fill: url(#ac-fill); }
.scr .area-chart__line { fill: none; stroke: var(--blue-hi); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; }
.areas__panel:not([hidden]) .scr .area-chart__line { animation: afx-draw 1.6s var(--ease) .4s forwards; }
@keyframes afx-draw { to { stroke-dashoffset: 0; } }
.scr .split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; }
.scr .donut { display: flex; align-items: center; gap: 10px; }
.scr .donut svg { flex: none; width: 58px; height: 58px; transform: rotate(-90deg); }
.scr .donut circle { fill: none; stroke-width: 6; stroke: #f5b544; }
.scr .donut .donut__a { stroke: var(--blue-hi); stroke-dasharray: 48 88; }
.scr .donut .donut__b { stroke: var(--orange); stroke-dasharray: 24 88; stroke-dashoffset: -48; }
.scr .donut ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 11px; color: var(--muted); }
.scr .donut li { display: flex; align-items: center; gap: 6px; }
.scr .donut i { width: 8px; height: 8px; border-radius: 2px; }
.scr .donut i.a { background: var(--blue-hi); } .scr .donut i.b { background: var(--orange); } .scr .donut i.c { background: #f5b544; }

/* ---------- Abas com cronômetro ---------- */
.areas__tab { position: relative; overflow: hidden; }
.areas__clock { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; pointer-events: none; }
.areas__clock::after { content: ""; position: absolute; inset: 0; background: var(--grad-orange); transform: scaleX(0); transform-origin: left; }
.areas.is-auto .areas__tab[aria-selected="true"] .areas__clock::after { animation: afx-seq var(--area-dur, 9s) linear forwards; }
.areas.is-auto .areas__tab[aria-selected="true"] .areas__clock { background: var(--line); }
.areas.is-auto.is-paused .areas__tab[aria-selected="true"] .areas__clock::after { animation-play-state: paused; }
.areas__secs { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 600 11px/1 var(--f-body); letter-spacing: .06em; color: var(--orange); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; }
.areas.is-auto .areas__tab[aria-selected="true"] .areas__secs { opacity: 1; }
.areas.is-auto .areas__tab[aria-selected="true"] { padding-right: 46px; }

@media (max-width: 767px) {
  .scr .products { gap: 6px; }
  .scr .scr-tire { width: 46px; height: 46px; }
  .scr .inspect { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .scr .split2 { grid-template-columns: minmax(0, 1fr); }
  .areas__secs { display: none; }
}

/* Segundo concept em destaque (RAM Rampage) e lista com 5 itens em uma linha */
.concept-feature--second { margin-top: clamp(10px, 1.2vw, 18px); }
@media (min-width: 1101px) {
  .concepts:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =========================================================
   ===== SOBRE + BLOG (briefing 2026-10) =====
   ========================================================= */

/* ---------- Sobre: nasceu da prática ---------- */
.birth { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; }
.birth::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--line-strong), var(--blue-hi) 45%, var(--orange)); }
.birth__step { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px clamp(18px, 2vw, 28px) clamp(22px, 2.4vw, 32px); background: var(--black); border: 1px solid var(--line); border-top: 0; }
.birth__step::before { content: ""; position: absolute; z-index: 2; top: -6px; left: clamp(18px, 2vw, 28px); width: 12px; height: 12px; border-radius: 50%; background: var(--black); border: 2px solid var(--blue-hi); }
.birth__step--now::before { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 6px color-mix(in srgb, var(--orange) 18%, transparent); }
.birth__num { font: 500 11px/1 var(--f-body); letter-spacing: .22em; color: var(--muted); }
.birth__tag { font: 500 10.5px/1.3 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-hi); }
.birth__step--now .birth__tag { color: var(--orange); }
.birth__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.8vw, 27px); line-height: 1.1; text-transform: uppercase; }
.birth__step > p:last-child { color: var(--muted); font-size: 15px; }
.birth__areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.birth__areas li { padding: 8px 12px; font: 500 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--blue-hi) 35%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.birth__copy { display: grid; gap: 14px; max-width: 760px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }

/* ---------- Sobre: entender antes de construir ---------- */
.understand { display: grid; justify-items: center; gap: 22px; max-width: 980px; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; }
.understand__lead, .understand__then { max-width: 720px; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }
.understand__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.understand__list li { padding: 22px 6px; font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: clamp(12.5px, 1.05vw, 16px); white-space: nowrap; text-transform: uppercase; }
.understand__list li + li { border-left: 1px solid var(--line); }
.understand__list li:last-child { color: var(--orange); }


/* ---------- Sobre: grupo Nexus ---------- */
.group__chips--nexus { margin: 16px 0 22px; }

/* ---------- Sobre: conhecimento de mercado ---------- */
.market__ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
.market__ends li { padding: clamp(22px, 2.4vw, 32px); font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.25; text-align: center; background: var(--black); border: 1px solid var(--line); }
.market__ends b { display: block; margin-bottom: 6px; font-weight: 600; color: var(--orange); text-transform: uppercase; }
.market__chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 26px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; list-style: none; max-width: 1000px; }
.market__chain li { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 10px; font: 500 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); transition: color .5s, border-color .5s, background-color .5s; }
.market__chain li:nth-child(5n+1)::before { display: none; }
.market__chain li + li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 18px; height: 8px; transform: translateY(-50%); background: var(--line-strong); clip-path: polygon(0 40%, 65% 40%, 65% 0, 100% 50%, 65% 100%, 65% 60%, 0 60%); transition: background .5s; }
.market__chain li.is-lit { color: var(--text); border-color: var(--blue-hi); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.market__chain li.is-lit::before { background: var(--grad-orange); }
@media (min-width: 768px) and (max-width: 1100px) { .market__chain li { padding-inline: 6px; font-size: 11px; letter-spacing: .06em; } }
.market__copy { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; text-align: center; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }

/* ---------- Sobre: títulos longos do briefing ---------- */
.h2.h2--long, .layout-center .section:not(#projetos) .shead .h2.h2--long, .layout-center .group__text .h2.h2--long { max-width: 1060px; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.08; }

.layout-center .group__text { max-width: 980px; }
.layout-center .group__text > p { max-width: 720px; }

/* ---------- Sobre: depois da entrega e fechamento ---------- */
.after__note { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; text-align: center; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }
.page-cta__lead--soft { margin-top: 12px; font-size: clamp(14px, 1.05vw, 16px); opacity: .8; }

@media (max-width: 1100px) {
  .birth { grid-template-columns: minmax(0, 1fr); }
  .birth::before { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--line-strong), var(--blue-hi) 45%, var(--orange)); }
  .birth__step { border-top: 1px solid var(--line); border-left: 0; }
  .birth__step::before { top: 30px; left: -6px; }
  .understand__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .understand__list li:nth-child(4) { border-left: 0; }
  .understand__list li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .market__ends { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .understand__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .understand__list li:nth-child(odd) { border-left: 0; }
  .understand__list li:nth-child(4) { border-left: 1px solid var(--line); }
  .understand__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .market__chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
  .market__chain li { padding: 12px 8px; font-size: 10.5px; }
  .market__chain li:nth-child(5n+1)::before { display: block; }
  .market__chain li:nth-child(odd)::before { display: none; }
  .market__chain li + li::before { left: -19px; width: 14px; }
}

/* ---------- Blog: hero editorial ---------- */
.mag-hero { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 96px)); }
.mag-hero__grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: end; margin-top: clamp(28px, 4vw, 56px); }
.mag-hero__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(34px, 5.2vw, 88px); line-height: .98; letter-spacing: -.012em; text-transform: uppercase; text-wrap: balance; }
.mag-hero__lead { max-width: 420px; padding-bottom: 8px; color: var(--muted); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; }
.mag-hero__media { position: relative; margin: clamp(40px, 5vw, 72px) 0 0; overflow: hidden; }
.mag-hero__media img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 58%; background: var(--surface); }
.mag-hero__media figcaption { position: absolute; left: 16px; bottom: 14px; padding: 7px 10px; font: 500 10.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--text); background: color-mix(in srgb, var(--black) 55%, transparent); }

/* ---------- Blog: artigo em destaque ---------- */
.feature-wrap .label { margin-bottom: 22px; }
.feature-post { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.feature-post__media { display: block; overflow: hidden; }
.feature-post__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.feature-post:hover .feature-post__media img { transform: scale(1.035); }
.feature-post__body { display: grid; align-content: start; justify-items: start; gap: 18px; }
.feature-post__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(26px, 3vw, 46px); line-height: 1.04; text-transform: uppercase; text-wrap: balance; }
.feature-post__title a { color: inherit; }
.feature-post__title a:hover { color: var(--blue-hi); }
.feature-post__excerpt { color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; }

/* ---------- Blog: abas de categoria ---------- */
.mag-tabs { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mag-tabs__list { grid-column: 1 / -1; grid-row: 2; }
.mag-tabs__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); text-transform: uppercase; }
.mag-tabs__list { display: flex; gap: 4px clamp(14px, 2vw, 28px); overflow-x: auto; scrollbar-width: none; }
.mag-tabs__list::-webkit-scrollbar { display: none; }
.mag-tabs__btn { position: relative; flex: none; padding: 10px 0; font: 500 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.mag-tabs__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -19px; height: 2px; background: var(--grad-orange); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.mag-tabs__btn:hover { color: var(--text); }
.mag-tabs__btn[aria-pressed="true"] { color: var(--text); }
.mag-tabs__btn[aria-pressed="true"]::after { transform: none; }
.mag-tabs__btn:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 4px; }
.mag-tabs__count { font: 500 11px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }

/* ---------- Blog: grade editorial ---------- */
.mag { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(36px, 4vw, 56px) clamp(20px, 2.4vw, 36px); margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.mag__item { grid-column: span 6; }
.mag__item[data-size="l"] { grid-column: span 7; grid-row: span 2; }
.mag__item[data-size="s"] { grid-column: span 5; }
.mag__item[data-size="m"] { grid-column: span 6; }
.mag__item[hidden] { display: none; }
.mag__item.is-shown { animation: afx-rise .7s var(--ease) both; }
.mag-card { display: grid; align-content: start; gap: 18px; }
.mag-card__media { display: block; overflow: hidden; background: var(--surface); }
.mag-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; }
.mag__item[data-size="l"] .mag-card__media img { aspect-ratio: 4 / 3.4; }
.mag__item[data-size="s"] .mag-card__media img { aspect-ratio: 16 / 9; }
.mag-card:hover .mag-card__media img { transform: scale(1.04); }
.mag-card__body { display: grid; justify-items: start; gap: 10px; }
.mag-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 10.5px/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mag-card__cat { color: var(--orange); }
.mag-card__time::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 14px; border-radius: 50%; background: var(--dim); vertical-align: middle; }
.mag-card__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.12; text-transform: uppercase; text-wrap: balance; }
.mag__item[data-size="l"] .mag-card__title { font-size: clamp(24px, 2.6vw, 40px); }
.mag-card__title a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.mag-card__title a:hover { color: var(--text); background-size: 100% 1px; }
.mag-card__excerpt { color: var(--muted); font-size: 15px; line-height: 1.6; }
.mag__item[data-size="s"] .mag-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag--related { margin-top: clamp(28px, 3vw, 40px); }
.mag--related .mag__item { grid-column: span 4; }
.mag--related .mag-card__title { font-size: clamp(17px, 1.4vw, 21px); }
.mag--related .mag-card__excerpt, .mag--related .post-card__flag { display: none; }

/* ---------- Post: leitura ---------- */
.article-head__inner { max-width: 1040px; }
.article-head__title { font-size: clamp(32px, 5vw, 76px); line-height: 1; text-wrap: balance; }
.prose figure.prose__wide { width: calc(100% + clamp(0px, 14vw, 240px)); max-width: none; }
.prose figure.prose__wide img { aspect-ratio: 21 / 10; }
@media (max-width: 1439px) { .prose figure.prose__wide { width: 100%; margin-left: 0; } }
.related { border-top: 1px solid var(--line); }
.related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.related__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(24px, 2.6vw, 40px); text-transform: uppercase; }

/* ---------- CTA institucional discreto ---------- */
.post-cta { padding-block: clamp(48px, 6vw, 96px); }
.post-cta__box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 44px); padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--orange); }
.post-cta__title { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.15; text-transform: uppercase; }
.post-cta__text p { margin-top: 8px; color: var(--muted); font-size: 15px; }

@media (max-width: 1100px) {
  .mag-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .feature-post { grid-template-columns: minmax(0, 1fr); }
  .mag__item, .mag__item[data-size] { grid-column: span 6; grid-row: auto; }
  .mag__item[data-size="l"] { grid-column: 1 / -1; }
  .mag__item[data-size="l"] .mag-card__media img { aspect-ratio: 16 / 9; }
  .mag--related .mag__item { grid-column: span 6; }
  .mag--related .mag__item:nth-child(3) { display: none; }
}
@media (max-width: 767px) {
  .mag__item, .mag__item[data-size], .mag--related .mag__item { grid-column: 1 / -1; }
  .mag--related .mag__item:nth-child(3) { display: block; }
  .post-cta__box { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .prose figure.prose__wide { width: 100%; margin-left: 0; }
}

/* =========================================================
   ===== SEGMENTOS + IDIOMAS (2026-10-19) =====
   Menu "Segmentos", seletor de idioma, rodapé com 4 colunas e as páginas por segmento
   (gerar-segmentos.py). Cada segmento tem a própria apresentação e cor de destaque:
   .seg-dealer (concessionárias, laranja) · .seg-dist (distribuidores, azul) · .seg-oem (fabricantes, ciano).
   ========================================================= */

/* ---------- Menu: dropdown Segmentos ---------- */
.nav__drop { position: relative; display: flex; align-items: center; }
.nav__drop-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 500 12.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 8px 0; transition: color .3s;
}
.nav__drop-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--grad-orange); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav__drop-btn:hover, .nav__drop-btn[aria-expanded="true"], .nav__drop-btn[aria-current="true"] { color: var(--text); }
.nav__drop-btn[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.i-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .4s var(--ease); }
.nav__drop-btn[aria-expanded="true"] .i-chev { transform: rotate(180deg); }
.nav__drop-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 5; width: min(380px, calc(100vw - 40px));
  display: grid; gap: 2px; padding: 10px;
  background: rgba(7, 11, 18, .97); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity .3s, transform .4s var(--ease), visibility 0s .4s;
}
.nav__drop-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }
.nav__drop-btn[aria-expanded="true"] + .nav__drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .nav__drop:hover .nav__drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .4s var(--ease); }
  .nav__drop:hover .nav__drop-btn { color: var(--text); }
  .nav__drop:hover .i-chev { transform: rotate(180deg); }
}
.nav__links .nav__drop-panel a {
  display: grid; gap: 6px; padding: 14px 16px; text-transform: none; letter-spacing: 0; white-space: normal;
  border-left: 2px solid transparent; transition: background-color .3s, border-color .3s, color .3s;
}
.nav__links .nav__drop-panel a::after { display: none; }
.nav__drop-panel b { font: 600 13px/1.25 var(--f-display); font-stretch: 125%; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.nav__drop-panel small { font: 400 13px/1.45 var(--f-body); color: var(--muted); }
.nav__links .nav__drop-panel a:hover, .nav__links .nav__drop-panel a:focus-visible { background: rgba(0, 124, 234, .1); border-left-color: var(--blue); }
.nav__links .nav__drop-panel a[aria-current="page"] { border-left-color: var(--orange); background: rgba(255, 126, 57, .06); }
.nav__links > a { white-space: nowrap; }

/* ---------- Seletor de idioma (cabeçalho e menu móvel) ---------- */
.lang { display: flex; align-items: center; flex: none; border: 1px solid var(--line-strong); }
.lang a { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 10px; font: 500 11.5px/1 var(--f-body); letter-spacing: .14em; color: var(--dim); white-space: nowrap; transition: color .3s, background-color .3s; }
.lang a + a { border-left: 1px solid var(--line); }
.lang a b { font-weight: 600; }
.lang a small { display: none; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.lang a:hover { color: var(--text); }
.lang a[aria-current="page"] { color: var(--text); background: rgba(255, 126, 57, .1); }
.lang a[aria-current="page"] b { color: var(--orange); }
.lang a[aria-current="page"] small { display: inline; color: var(--muted); }
.nav__bar:has(.lang) { gap: clamp(16px, 2vw, 36px); }
.menu .lang { align-self: stretch; }
.menu .lang a { flex: 1; justify-content: center; padding: 14px 10px; font-size: 12.5px; }
.menu .lang a small { display: inline; }

/* ---------- Menu móvel: grupo Segmentos ---------- */
.menu { overflow-y: auto; }
.menu__group { display: grid; }
.menu__link--head { margin: 0; border-bottom: 0; padding-bottom: 6px; }
.menu__sub { display: grid; margin: 0; padding: 0 0 12px 34px; list-style: none; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .8s var(--ease); }
.menu-open .menu__sub { opacity: 1; transform: none; transition-delay: .1s; }
.menu__sub a { display: flex; align-items: center; gap: 12px; padding: 9px 0; font: 500 14px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu__sub a::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--orange); }
.menu__sub a[aria-current="page"] { color: var(--text); }

/* ---------- Rodapé com coluna Segmentos ---------- */
.footer__top:has(> div:nth-child(5)) { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }

/* ---------- Página de segmento: base ---------- */
.seg-dealer { --seg-accent: #ff7e39; --seg-rgb: 255, 126, 57; --seg-grad: linear-gradient(95deg, #ffe7d8 0%, #ffad7c 46%, #ff7e39 100%); }
.seg-dist { --seg-accent: #2f95f0; --seg-rgb: 0, 124, 234; --seg-grad: linear-gradient(95deg, #d6ebff 0%, #74b8ff 46%, #007cea 100%); }
.seg-oem { --seg-accent: #7fd0ff; --seg-rgb: 127, 208, 255; --seg-grad: linear-gradient(95deg, #f2fbff 0%, #b4e5ff 46%, #63c2fb 100%); }
.seg-page .grad-text { background-image: var(--seg-grad); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.seg-page main .label b { color: var(--seg-accent); }
.seg-page .trio__verb { background: var(--seg-grad); -webkit-background-clip: text; background-clip: text; }
.seg-page .shead__side { display: grid; gap: 14px; }
.seg-page .shead__side p { margin: 0; }
.seg-lead, .seg-page .shead__side .seg-lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--text); }
.seg-after { display: grid; gap: 14px; max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; text-align: center; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }
.seg-after p { margin: 0; }
.seg-close { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: clamp(48px, 6vw, 80px); text-align: center; }
.seg-close .statement--inline { max-width: 960px; text-wrap: balance; }
.seg-qs__outro { max-width: 760px; margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; text-transform: uppercase; color: var(--text); text-wrap: balance; }

/* ---------- Herói ---------- */
.seg-hero .page-hero__title.seg-hero__title { max-width: 1080px; font-size: clamp(28px, 3.5vw, 58px); line-height: 1.06; }
.seg-hero .page-hero__title.seg-hero__title--long { font-size: clamp(26px, 2.9vw, 48px); }
.seg-hero .page-hero__lead { max-width: 620px; }
.seg-hero__country { display: inline-flex; align-items: center; gap: 10px; }
.seg-hero__country::before { content: ""; width: 6px; height: 6px; background: var(--seg-accent); transform: skewX(-20deg); }
.seg-hero .page-hero__shade {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--black) 94%, transparent) 0%, color-mix(in srgb, var(--black) 78%, transparent) 38%, color-mix(in srgb, var(--black) 20%, transparent) 70%, transparent 88%),
    linear-gradient(0deg, var(--black) 0%, transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--black) 72%, transparent) 0%, transparent 24%);
}
/* Fabricantes: centralizado, com linha de varredura */
.seg-hero--center .page-hero__content { display: grid; justify-items: center; text-align: center; }
.seg-hero--center .breadcrumb ol { justify-content: center; }
.seg-hero--center .page-hero__title.seg-hero__title { max-width: 1120px; }
.seg-hero--center .page-hero__lead { margin-inline: auto; }
.seg-hero--center .page-hero__actions { justify-content: center; }
.seg-hero--center .page-hero__shade {
  background:
    radial-gradient(ellipse 70% 60% at 50% 58%, color-mix(in srgb, var(--black) 78%, transparent) 0%, color-mix(in srgb, var(--black) 45%, transparent) 70%),
    linear-gradient(0deg, var(--black) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--black) 75%, transparent) 0%, transparent 26%);
}
.seg-scan { position: absolute; left: 0; right: 0; top: 18%; z-index: -1; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--seg-rgb), .9) 30%, rgba(var(--seg-rgb), .9) 70%, transparent); box-shadow: 0 0 18px rgba(var(--seg-rgb), .8); opacity: .55; }
@media all { /* animações ativas em todos os dispositivos */
  .seg-scan { animation: segScan 7s cubic-bezier(.45, 0, .55, 1) infinite; }
  @keyframes segScan { 0% { top: 16%; opacity: 0; } 12% { opacity: .55; } 88% { opacity: .55; } 100% { top: 84%; opacity: 0; } }
}
/* Distribuidores: dividido, com a cadeia sobre a imagem */
.seg-hero--split { min-height: auto; justify-content: center; padding-bottom: clamp(48px, 6vw, 96px); }
.seg-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 4.5vw, 80px); align-items: center; }
.seg-hero--split .page-hero__title.seg-hero__title { font-size: clamp(28px, 3.1vw, 52px); }
.seg-hero--split .page-hero__title.seg-hero__title--long { font-size: clamp(26px, 2.6vw, 44px); }
.seg-split__media { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 76svh; width: 100%; overflow: hidden; border: 1px solid var(--line-strong); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 7%); }
.seg-split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2, 4, 7, .92) 0%, rgba(2, 4, 7, .1) 45%, transparent 70%); }
.seg-split__img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.seg-flow { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.seg-flow li { position: relative; display: grid; gap: 6px; padding: 12px 12px 14px; background: rgba(7, 11, 18, .78); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 11.5px/1.25 var(--f-display); font-stretch: 125%; letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.seg-flow li span { font: 500 10.5px/1 var(--f-body); letter-spacing: .18em; color: var(--dim); }
.seg-flow li.is-key { border-color: var(--seg-accent); background: rgba(0, 124, 234, .28); box-shadow: 0 10px 30px -10px rgba(0, 124, 234, .7); }
.seg-flow li + li::before { content: ""; position: absolute; left: -8px; top: 50%; width: 8px; height: 1px; background: var(--seg-accent); }

/* ---------- 1. Desafio ---------- */
/* Concessionárias: estrada com paradas */
.seg-road { --n: 5; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; }
.seg-road--4 { --n: 4; }
.seg-road--6 { --n: 6; }
.seg-road::before, .seg-road::after { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; }
.seg-road::before { background: var(--line-strong); }
.seg-road::after { background: linear-gradient(90deg, var(--seg-accent), rgba(var(--seg-rgb), .2)); transform-origin: left; transition: transform 2.6s var(--ease); }
.seg-road.is-armed::after { transform: scaleX(0); }
.seg-road.is-armed.is-in::after { transform: scaleX(1); }
.seg-road__stop { position: relative; display: grid; align-content: start; gap: 12px; padding-top: 42px; }
.seg-road__pin { position: absolute; top: 0; left: 0; width: 24px; height: 24px; border: 1px solid rgba(var(--seg-rgb), .6); border-radius: 50%; background: var(--black); }
.seg-road__pin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--seg-accent); box-shadow: 0 0 14px var(--seg-accent); }
.seg-road__n { font: 600 13px/1 var(--f-display); font-stretch: 125%; letter-spacing: .08em; color: var(--seg-accent); }
.seg-road__stop p { margin: 0; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.55; color: var(--text); }
.seg-road.is-armed > li { opacity: .14; transform: translateY(10px); transition: opacity .7s ease calc(var(--k) * 420ms + 200ms), transform .9s var(--ease) calc(var(--k) * 420ms + 200ms); }
.seg-road.is-armed.is-in > li { opacity: 1; transform: none; }

/* Distribuidores: cadeia fabricante → cliente e responsabilidades */
.seg-chain { margin: clamp(48px, 6vw, 88px) auto 0; max-width: 1180px; }
.seg-chain__nodes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; }
.seg-chain__nodes::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, rgba(var(--seg-rgb), .8) 0 8px, transparent 8px 16px); }
.seg-chain__node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; padding: clamp(18px, 2vw, 28px) 12px; text-align: center; border: 1px solid var(--line-strong); background: var(--black); }
.seg-chain__node b { font: 600 clamp(14px, 1.3vw, 18px)/1.2 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-chain__i { font: 500 11px/1 var(--f-body); letter-spacing: .2em; color: var(--dim); }
.seg-chain__node.is-key { border-color: var(--seg-accent); background: linear-gradient(160deg, rgba(var(--seg-rgb), .26), transparent 75%), var(--surface); box-shadow: 0 24px 60px -24px rgba(var(--seg-rgb), .8); }
.seg-chain__node.is-key .seg-chain__i { color: var(--seg-accent); }
.seg-chain__roles { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; padding: clamp(22px, 2.6vw, 34px); list-style: none; border: 1px dashed rgba(var(--seg-rgb), .5); background: rgba(var(--seg-rgb), .04); }
.seg-chain__roles::before { content: ""; position: absolute; left: 37.5%; bottom: 100%; width: 1px; height: 30px; background: var(--seg-accent); }
.seg-chain__roles li { padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--black); font-size: 14px; line-height: 1.3; }
.seg-chain.is-armed li { opacity: .14; transform: translateY(10px); transition: opacity .7s ease calc(var(--k, 0) * 160ms + 150ms), transform .9s var(--ease) calc(var(--k, 0) * 160ms + 150ms); }
.seg-chain.is-armed .seg-chain__roles li { transition-delay: calc(var(--k, 0) * 90ms + 800ms); }
.seg-chain.is-armed.is-in li { opacity: 1; transform: none; }

/* Fabricantes: sinal da marca até a rede */
.seg-signal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.seg-signal__viz { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; min-height: clamp(300px, 30vw, 440px); padding: clamp(28px, 3.4vw, 52px) clamp(20px, 3vw, 48px); border: 1px solid var(--line); background: radial-gradient(ellipse at 18% 50%, rgba(var(--seg-rgb), .14), transparent 60%), var(--black); }
.seg-signal__brand { display: grid; place-items: center; align-content: center; gap: 8px; width: clamp(96px, 10vw, 150px); aspect-ratio: 1; border: 1px solid var(--seg-accent); border-radius: 50%; box-shadow: 0 0 40px rgba(var(--seg-rgb), .35), inset 0 0 30px rgba(var(--seg-rgb), .12); }
.seg-signal__brand img { width: clamp(36px, 3.4vw, 52px); height: auto; }
.seg-signal__brand span, .seg-signal__net span { font: 500 10.5px/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: center; }
.seg-signal__beam { position: relative; height: 1px; overflow: hidden; background: linear-gradient(90deg, var(--seg-accent), rgba(var(--seg-rgb), .08)); }
.seg-signal__beam i { position: absolute; top: -2px; left: 0; width: 18px; height: 5px; border-radius: 3px; background: var(--seg-accent); box-shadow: 0 0 10px var(--seg-accent); opacity: 0; }
.seg-signal__net { display: grid; justify-items: center; gap: 14px; }
.seg-signal__grid { display: grid; grid-template-columns: repeat(8, clamp(10px, 1.15vw, 18px)); gap: clamp(8px, .95vw, 15px); }
.seg-signal__grid i { aspect-ratio: 1; border-radius: 2px; background: rgba(240, 240, 240, .12); }
.seg-signal__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.seg-signal__list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.seg-signal__list span { font: 600 13px/1.5 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-signal__list p { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: var(--text); }
@media all { /* animações ativas em todos os dispositivos */
  .seg-signal.is-in .seg-signal__beam i { animation: segBeam 2.8s linear infinite; }
  .seg-signal.is-in .seg-signal__beam i:nth-child(2) { animation-delay: .93s; }
  .seg-signal.is-in .seg-signal__beam i:nth-child(3) { animation-delay: 1.86s; }
  .seg-signal.is-in .seg-signal__grid i { animation: segDot 5.2s ease-in-out infinite; animation-delay: calc(var(--d) * -.23s); }
  @keyframes segBeam { 0% { left: -20px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  @keyframes segDot { 0%, 62%, 100% { background: rgba(240, 240, 240, .1); box-shadow: none; } 70%, 78% { background: var(--seg-accent); box-shadow: 0 0 10px rgba(var(--seg-rgb), .9); } }
}
.seg-signal.is-armed .seg-signal__list li { opacity: .14; transform: translateY(10px); transition: opacity .7s ease calc(var(--k) * 220ms + 300ms), transform .9s var(--ease) calc(var(--k) * 220ms + 300ms); }
.seg-signal.is-armed.is-in .seg-signal__list li { opacity: 1; transform: none; }

/* ---------- 2. Gargalos ---------- */
/* Concessionárias: painel de alertas */
.seg-alerts { margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.seg-alerts__row { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(16px, 3vw, 56px); align-items: start; padding: clamp(24px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--line); }
.seg-alerts__row::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--seg-accent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.seg-alerts__row:hover::before { transform: scaleX(1); }
.seg-alerts__n { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1.6 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-alerts__n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--seg-accent); box-shadow: 0 0 0 4px rgba(var(--seg-rgb), .18); }
.seg-alerts__title { margin: 0; font: 600 clamp(17px, 1.45vw, 22px)/1.28 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-alerts__row p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.72; }
@media all { /* animações ativas em todos os dispositivos */
  .seg-alerts__row:hover .seg-alerts__n::before { animation: segPulse 1.2s ease-out infinite; }
  @keyframes segPulse { from { box-shadow: 0 0 0 0 rgba(var(--seg-rgb), .6); } to { box-shadow: 0 0 0 10px rgba(var(--seg-rgb), 0); } }
}

/* Distribuidores: livro-razão em duas colunas */
.seg-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.seg-ledger__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 2.2vw, 36px); row-gap: 12px; align-content: start; padding: clamp(28px, 3.2vw, 48px) clamp(0px, 2.4vw, 40px) clamp(28px, 3.2vw, 48px) 0; border-bottom: 1px solid var(--line); }
.seg-ledger__item:nth-child(even) { padding-left: clamp(0px, 2.4vw, 40px); padding-right: 0; border-left: 1px solid var(--line); }
.seg-ledger__n { grid-row: span 2; font: 600 clamp(44px, 4.6vw, 76px)/.86 var(--f-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1px rgba(var(--seg-rgb), .75); }
.seg-ledger__title { margin: 0; font: 600 clamp(16px, 1.35vw, 20px)/1.3 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-ledger__item p { grid-column: 2; margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.72; }

/* Fabricantes: trilho horizontal */
.seg-rail { margin-top: clamp(40px, 5vw, 64px); }
.seg-rail__ctrl { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.seg-rail__bar { position: relative; flex: 1; height: 2px; background: var(--line); }
.seg-rail__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--seg-accent); transform-origin: left; transform: scaleX(var(--p, .2)); transition: transform .4s var(--ease); }
.seg-rail__btn { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid var(--line-strong); color: var(--text); transition: border-color .3s, background-color .3s, opacity .3s; }
.seg-rail__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.seg-rail__btn:hover:not(:disabled) { border-color: var(--seg-accent); background: rgba(var(--seg-rgb), .1); }
.seg-rail__btn:disabled { opacity: .3; cursor: default; }
.seg-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(290px, 31%, 440px); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.seg-rail__track::-webkit-scrollbar { display: none; }
.seg-rail__track:focus-visible { outline: 2px solid var(--seg-accent); outline-offset: 4px; }
.seg-rail__card { scroll-snap-align: start; display: grid; align-content: start; gap: 16px; min-height: 400px; padding: clamp(26px, 2.8vw, 40px); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--seg-rgb), .08), transparent 42%), var(--black); }
.seg-rail__n { font: 600 clamp(36px, 3.4vw, 52px)/1 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-rail__n small { margin-left: 4px; font-size: 14px; color: var(--dim); }
.seg-rail__title { margin: 0; font: 600 clamp(17px, 1.4vw, 21px)/1.28 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-rail__card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.72; }

/* ---------- 3. O que construímos ---------- */
/* Concessionárias: perguntas em fita + abas */
.seg-ticker { display: grid; gap: 12px; margin-top: clamp(40px, 5vw, 64px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.seg-ticker__row { display: flex; width: max-content; }
.seg-ticker__row ul { display: flex; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }
.seg-ticker li { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px 13px 13px; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(var(--seg-rgb), .06); font-size: 15px; }
.seg-ticker li::before { content: "?"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--seg-accent); font: 600 13px/1 var(--f-display); color: var(--black); }
@media all { /* animações ativas em todos os dispositivos */
  .seg-ticker__row { animation: segTick 70s linear infinite; }
  .seg-ticker__row--rev { animation-direction: reverse; animation-duration: 80s; }
  .seg-ticker:hover .seg-ticker__row { animation-play-state: paused; }
  @keyframes segTick { to { transform: translateX(-50%); } }
}
@media not all { /* desativado: animações iguais em todos os dispositivos */
  .seg-ticker { -webkit-mask-image: none; mask-image: none; }
  .seg-ticker__row { width: auto; justify-content: center; }
  .seg-ticker__row ul { flex-wrap: wrap; justify-content: center; }
  .seg-ticker__row ul + ul { display: none; }
  .seg-ticker li { white-space: normal; }
}
.seg-tabs { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; margin-top: clamp(48px, 6vw, 80px); }
.seg-tabs__list { display: grid; border-top: 1px solid var(--line); }
.seg-tabs__tab { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 18px 8px 18px 0; border-bottom: 1px solid var(--line); text-align: left; font: 600 clamp(13.5px, 1.05vw, 15.5px)/1.35 var(--f-display); font-stretch: 125%; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.seg-tabs__tab span { font: 500 11.5px/1 var(--f-body); letter-spacing: .16em; color: var(--dim); }
.seg-tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--seg-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.seg-tabs__tab:hover { color: var(--text); }
.seg-tabs__tab[aria-selected="true"] { color: var(--text); }
.seg-tabs__tab[aria-selected="true"] span { color: var(--seg-accent); }
.seg-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.seg-tabs__tab:focus-visible { outline: 2px solid var(--seg-accent); outline-offset: -2px; }
.seg-tabs__panels { display: grid; gap: 16px; }
.seg-tabs__panel { display: grid; border: 1px solid var(--line); background: var(--surface); }
.seg-tabs__panel[hidden] { display: none; }
.seg-tabs__panel:focus-visible { outline: 2px solid var(--seg-accent); outline-offset: 3px; }
.seg-tabs__media { position: relative; margin: 0; aspect-ratio: 16 / 8; overflow: hidden; }
.seg-tabs__media img { width: 100%; height: 100%; object-fit: cover; }
.seg-tabs__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--surface) 0%, transparent 50%); }
.seg-tabs__copy { display: grid; gap: 12px; padding: 0 clamp(24px, 3vw, 44px) clamp(26px, 3vw, 44px); margin-top: -12px; position: relative; }
.seg-tabs__n { font: 500 11.5px/1 var(--f-body); letter-spacing: .2em; color: var(--seg-accent); }
.seg-tabs__copy h3 { margin: 0; font: 600 clamp(20px, 2vw, 30px)/1.15 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-tabs__copy p { margin: 0; max-width: 720px; color: var(--muted); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.72; }
@media all { /* animações ativas em todos os dispositivos */
  .seg-tabs.is-ready .seg-tabs__panel:not([hidden]) { animation: segFade .6s var(--ease); }
  @keyframes segFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Distribuidores: perguntas numeradas + cartões empilhados */
.seg-qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3.4vw, 56px); max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; list-style: none; }
.seg-qgrid li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; }
.seg-qgrid li span { font: 600 13px/1 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-stackwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.4vw, 72px); align-items: start; margin-top: clamp(56px, 7vw, 104px); }
.seg-stackwrap__side { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 28px; }
.seg-qs__outro--left { margin: 0; max-width: none; text-align: left; }
.seg-stackwrap__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); }
.seg-stackwrap__media img { width: 100%; height: 100%; object-fit: cover; }
.seg-stack { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.seg-stack__card { position: sticky; top: calc(var(--nav-h) + 32px + var(--k) * 16px); display: grid; align-content: start; gap: 14px; min-height: 230px; padding: clamp(26px, 2.8vw, 40px); border: 1px solid var(--line-strong); background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 16%, var(--surface-2)) 0%, var(--surface) 70%); box-shadow: 0 -24px 48px -28px rgba(0, 0, 0, .9); }
.seg-stack__head { display: flex; align-items: baseline; gap: 16px; }
.seg-stack__head span { font: 600 14px/1 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-stack__head h3 { margin: 0; font: 600 clamp(18px, 1.7vw, 25px)/1.2 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-stack__card p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.72; }

/* Fabricantes: perguntas em lista tipográfica + grade bento */
.seg-ask { display: grid; gap: 28px; max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto 0; }
.seg-ask__list { margin: 0; padding: 0; list-style: none; counter-reset: q; border-top: 1px solid var(--line); }
.seg-ask__list li { counter-increment: q; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--line); font: 600 clamp(17px, 1.8vw, 27px)/1.22 var(--f-display); font-stretch: 125%; text-transform: uppercase; color: rgba(240, 240, 240, .82); transition: color .3s; }
.seg-ask__list li::before { content: counter(q, decimal-leading-zero); font: 500 12px/1 var(--f-body); letter-spacing: .2em; color: var(--seg-accent); }
.seg-ask__list li:hover { color: var(--text); }
.seg-ask__outro { margin: 0; text-align: center; font-size: clamp(16px, 1.25vw, 19px); color: var(--muted); text-wrap: balance; }
.seg-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; }
.seg-bento__card { position: relative; grid-column: span 2; display: grid; align-content: end; gap: 12px; min-height: 280px; padding: clamp(24px, 2.6vw, 38px); overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--seg-rgb), .07), transparent 55%), var(--black); }
.seg-bento__card:first-child { grid-column: span 4; grid-row: span 2; min-height: 540px; }
.seg-bento--5 .seg-bento__card:nth-child(n+4), .seg-bento--4 .seg-bento__card:nth-child(n+4) { grid-column: span 3; }
.seg-bento__media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.seg-bento__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.seg-bento__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--black) 8%, rgba(2, 4, 7, .55) 55%, rgba(2, 4, 7, .2)); }
.seg-bento__n { font: 600 13px/1 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-bento__card h3 { margin: 0; font: 600 clamp(17px, 1.5vw, 23px)/1.22 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-bento__card:first-child h3 { font-size: clamp(22px, 2.3vw, 34px); }
.seg-bento__card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.seg-bento__card:first-child p { max-width: 560px; font-size: clamp(15px, 1.15vw, 17px); color: rgba(240, 240, 240, .8); }

/* ---------- 4. Produção visual ---------- */
.seg-prod .possib__title { font-size: clamp(18px, 1.7vw, 26px); line-height: 1.15; }
/* Distribuidores: imagem + lista */
.seg-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); align-items: stretch; margin-top: clamp(48px, 6vw, 80px); }
.seg-feature__media { position: relative; min-height: 460px; margin: 0; overflow: hidden; border: 1px solid var(--line); }
.seg-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seg-feature__list { display: grid; align-content: center; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.seg-feature__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--line); }
.seg-feature__list span { font: 600 14px/1.5 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-feature__list h3 { margin: 0 0 8px; font: 600 clamp(16px, 1.35vw, 20px)/1.25 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-feature__list p { margin: 0; color: var(--muted); line-height: 1.7; }
/* Fabricantes: faixa de cinema com cartões */
.seg-band { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.seg-band__media { position: relative; margin: 0; aspect-ratio: 21 / 9; overflow: hidden; border: 1px solid var(--line); }
.seg-band__media img { width: 100%; height: 100%; object-fit: cover; }
.seg-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2, 4, 7, .9) 0%, transparent 55%); }
.seg-band__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin: clamp(-150px, -9vw, -64px) clamp(12px, 3vw, 48px) 0; padding: 0; list-style: none; }
.seg-band__card { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--line-strong); background: rgba(7, 11, 18, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.seg-band__card span { font: 600 13px/1 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-band__card h3 { margin: 0; font: 600 clamp(14.5px, 1.15vw, 17px)/1.3 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-band__card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }

/* ---------- 5. Sistemas, nota, case ---------- */
.trio--compact .trio__item { justify-items: center; text-align: center; padding-block: clamp(28px, 3.4vw, 52px); }
.trio--compact .trio__verb { white-space: normal; }
.seg-note__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.seg-note--flip .seg-note__media { order: 2; }
.seg-note__media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); }
.seg-note__media img { width: 100%; height: 100%; object-fit: cover; }
.seg-note__text { display: grid; justify-items: start; }
.seg-note__text .h2.h2--long { margin: 0; font-size: clamp(26px, 2.8vw, 42px); }
.seg-note__copy { display: grid; gap: 14px; margin-top: 26px; color: var(--muted); line-height: 1.7; }
.seg-note__copy p { margin: 0; }
.seg-note__strong { margin: 30px 0 32px; font: 600 clamp(19px, 1.8vw, 26px)/1.2 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-case__media { position: relative; margin: clamp(44px, 5vw, 72px) 0 0; aspect-ratio: 21 / 8; overflow: hidden; border: 1px solid var(--line); }
.seg-case__media img { width: 100%; height: 100%; object-fit: cover; }
.seg-case__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--surface) 0%, transparent 55%); }
.seg-case .apps4 { position: relative; z-index: 1; margin-top: clamp(-80px, -5vw, -40px); padding-inline: clamp(0px, 2vw, 32px); }
.seg-case .apps4 li { background: linear-gradient(160deg, rgba(var(--seg-rgb), .1), var(--surface) 60%), var(--surface); }
.section:not(.section--surface).seg-case .seg-case__media::after { background: linear-gradient(0deg, var(--black) 0%, transparent 55%); }

/* ---------- 6. Como trabalhamos ---------- */
.care--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.seg-page .care span { color: var(--seg-accent); }
/* Distribuidores: linha do tempo vertical */
.seg-vsteps { position: relative; max-width: 900px; margin: clamp(48px, 6vw, 80px) auto 0; padding: 0; list-style: none; }
.seg-vsteps::before { content: ""; position: absolute; left: 31px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, var(--seg-accent), rgba(var(--seg-rgb), .1)); }
.seg-vsteps__step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: clamp(16px, 2.6vw, 36px); padding-bottom: clamp(28px, 3.4vw, 48px); }
.seg-vsteps__step:last-child { padding-bottom: 0; }
.seg-vsteps__n { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--seg-accent); background: var(--black); font: 600 18px/1 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-vsteps__step h3 { margin: 6px 0 10px; font: 600 clamp(18px, 1.7vw, 24px)/1.22 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-vsteps__step p { margin: 0; color: var(--muted); line-height: 1.72; }
/* Fabricantes: grade 2 × 2 com numerais grandes */
.seg-gsteps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.seg-gsteps__step { display: grid; align-content: start; gap: 14px; padding: clamp(28px, 3.6vw, 56px); background: var(--black); }
.section--surface .seg-gsteps__step { background: var(--surface); }
.seg-gsteps__n { font: 600 clamp(60px, 7vw, 112px)/.85 var(--f-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1px rgba(var(--seg-rgb), .6); }
.seg-gsteps__step h3 { margin: 0; font: 600 clamp(18px, 1.7vw, 24px)/1.22 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-gsteps__step p { margin: 0; color: var(--muted); line-height: 1.72; }

/* ---------- Responsivo (segmentos e idiomas) ---------- */
/* Menu completo só a partir de 1200 px: abaixo disso (inclusive 1101–1199) entra o menu móvel,
   porque cinco itens + seletor de idioma + botão não cabem com folga. */
@media (max-width: 1199px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}
/* Cabeçalho entre 1200 e 1499 px: os rótulos em espanhol são ~35% mais longos que em português.
   Marca, seletor e botão mantêm o tamanho; o menu fica mais compacto; o país aparece só a partir de 1500 px. */
.nav__bar > .brand, .nav__bar > .lang, .nav__bar > .nav__cta { flex: none; }
@media (max-width: 1599px) {
  .nav__bar .lang a[aria-current="page"] small { display: none; }
}
@media (min-width: 1200px) {
  .nav__links { gap: clamp(14px, 1.4vw, 24px); }
  .nav__links > a, .nav__drop-btn { font-size: 12px; letter-spacing: .07em; }
}
/* "Tecnologia e automações" é o rótulo mais longo do menu: abaixo de 1400 px o espaço entre blocos diminui */
@media (min-width: 1200px) and (max-width: 1399px) {
  .nav__bar { gap: 22px; }
  .nav__links { gap: 14px; }
  .nav__links > a, .nav__drop-btn { font-size: 11.5px; letter-spacing: .05em; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .nav__bar { gap: 16px; }
  .nav__links { gap: 11px; }
  .nav__links > a, .nav__drop-btn { letter-spacing: .03em; }
}
@media (max-width: 1240px) {
  .nav__cta { padding-inline: 18px; }
  .nav__cta .i-arrow { display: none; }
}
@media (max-width: 1100px) {
  .footer__top:has(> div:nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seg-split { grid-template-columns: minmax(0, 1fr); }
  .seg-split__media { aspect-ratio: 16 / 10; max-height: none; clip-path: none; }
  .seg-road { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 720px; margin-inline: auto; }
  .seg-road::before, .seg-road::after { left: 11px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
  .seg-road::after { background: linear-gradient(180deg, var(--seg-accent), rgba(var(--seg-rgb), .2)); transform-origin: top; }
  .seg-road.is-armed::after { transform: scaleY(0); }
  .seg-road.is-armed.is-in::after { transform: scaleY(1); }
  .seg-road__stop { padding: 0 0 26px 48px; gap: 6px; }
  .seg-road__stop:last-child { padding-bottom: 0; }
  .seg-signal { grid-template-columns: minmax(0, 1fr); }
  .seg-alerts__row { grid-template-columns: 64px minmax(0, 1fr); row-gap: 10px; }
  .seg-alerts__row p { grid-column: 2; }
  .seg-tabs { grid-template-columns: minmax(0, 1fr); }
  .seg-tabs__list { display: flex; gap: 8px; margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 4px; overflow-x: auto; border-top: 0; scrollbar-width: none; scroll-snap-type: x proximity; }
  .seg-tabs__list::-webkit-scrollbar { display: none; }
  .seg-tabs__tab { flex: none; display: inline-flex; gap: 8px; max-width: 78vw; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; scroll-snap-align: start; }
  .seg-tabs__tab::after { display: none; }
  .seg-tabs__tab[aria-selected="true"] { border-color: var(--seg-accent); background: rgba(var(--seg-rgb), .14); }
  .seg-stackwrap { grid-template-columns: minmax(0, 1fr); }
  .seg-stackwrap__side { position: static; }
  .seg-stackwrap__media { aspect-ratio: 16 / 9; }
  .seg-stack__card { position: relative; top: auto; min-height: 0; box-shadow: none; }
  .seg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-bento__card, .seg-bento--5 .seg-bento__card:nth-child(n+4), .seg-bento--4 .seg-bento__card:nth-child(n+4) { grid-column: span 1; }
  .seg-bento__card:first-child { grid-column: 1 / -1; grid-row: auto; min-height: 420px; }
  .seg-feature { grid-template-columns: minmax(0, 1fr); }
  .seg-feature__media { min-height: 0; aspect-ratio: 16 / 9; }
  .seg-band__media { aspect-ratio: 16 / 9; }
  .seg-band__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -56px; }
  .care--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-note__grid { grid-template-columns: minmax(0, 1fr); }
  .seg-note--flip .seg-note__media { order: 0; }
  .seg-note__media { aspect-ratio: 16 / 9; }
  .seg-rail__track { grid-auto-columns: clamp(280px, 46%, 420px); }
}
@media (max-width: 767px) {
  .footer__top:has(> div:nth-child(5)) { grid-template-columns: 1fr 1fr; }
  .nav__bar .lang { display: none; }
  .menu__foot { align-items: stretch; }
  .btn:not(.btn--sm) { max-width: 100%; height: auto; min-height: 56px; padding-block: 14px; white-space: normal; text-align: center; line-height: 1.35; }
  .cta__title { overflow-wrap: break-word; }
  .seg-page .cta__title { font-size: clamp(24px, 7.2vw, 34px); }
  .seg-hero .breadcrumb { display: none; }
  .seg-hero--center .page-hero__eyebrow { justify-content: center; text-align: center; }
  .seg-hero--center .page-hero__eyebrow .slash { display: none; }
  .seg-hero .page-hero__title.seg-hero__title { font-size: clamp(25px, 7.4vw, 32px); }
  .seg-hero .page-hero__title.seg-hero__title--long { font-size: clamp(22px, 6.2vw, 27px); }
  /* abas viram cartões empilhados: no celular, ler tudo rolando é melhor do que abrir uma aba por vez */
  .seg-tabs__list { display: none; }
  .seg-tabs__panel[hidden] { display: grid; }
  .seg-tabs.is-ready .seg-tabs__panel { animation: none; }
  .seg-flow { left: 10px; right: 10px; bottom: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .seg-flow li + li::before { display: none; }
  .seg-split__media { aspect-ratio: 4 / 5; }
  .seg-chain__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-chain__nodes::before { display: none; }
  .seg-chain__roles { justify-content: flex-start; }
  .seg-chain__roles::before { left: 75%; }
  .seg-chain__roles li { font-size: 13.5px; }
  .seg-signal__viz { grid-template-columns: auto minmax(24px, 1fr) auto; padding: 24px 16px; }
  .seg-signal__brand { width: 72px; }
  .seg-signal__grid { grid-template-columns: repeat(6, 9px); gap: 7px; }
  .seg-signal__grid i:nth-child(n+43) { display: none; }
  .seg-alerts__row { grid-template-columns: minmax(0, 1fr); }
  .seg-alerts__row p { grid-column: auto; }
  .seg-ledger { grid-template-columns: minmax(0, 1fr); }
  .seg-ledger__item, .seg-ledger__item:nth-child(even) { padding: 26px 0; border-left: 0; }
  .seg-ledger__n { font-size: 40px; }
  .seg-rail__track { grid-auto-columns: 86%; }
  .seg-rail__card { min-height: 0; }
  .seg-ticker li { font-size: 14px; padding: 11px 18px 11px 11px; }
  .seg-tabs__media { aspect-ratio: 16 / 10; }
  .seg-qgrid { grid-template-columns: minmax(0, 1fr); }
  .seg-ask__list li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .seg-bento { grid-template-columns: minmax(0, 1fr); }
  .seg-bento__card:first-child { min-height: 380px; }
  .seg-bento--5 .seg-bento__card:last-child { min-height: 0; }
  .seg-bento__card { min-height: 0; }
  .seg-band__media { aspect-ratio: 4 / 3; }
  .seg-band__cards { grid-template-columns: minmax(0, 1fr); margin: 14px 0 0; }
  .care--five { grid-template-columns: minmax(0, 1fr); }
  .seg-vsteps::before { left: 23px; }
  .seg-vsteps__step { grid-template-columns: 48px minmax(0, 1fr); }
  .seg-vsteps__n { width: 48px; height: 48px; font-size: 15px; }
  .seg-gsteps { grid-template-columns: minmax(0, 1fr); }
  .seg-case__media { aspect-ratio: 16 / 10; }
  .seg-case .apps4 { margin-top: 20px; padding-inline: 0; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .menu .lang { display: flex; }
}
.seg-stack, .seg-feature__list, .seg-signal__list, .seg-tabs__panels, .seg-chain__roles { min-width: 0; }
@media (min-width: 768px) and (max-width: 960px) {
  .seg-chain__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-chain__nodes::before { display: none; }
  .seg-chain__roles::before { left: 75%; }
}
.seg-stack, .seg-feature__list, .seg-signal__list, .seg-tabs__panels { grid-template-columns: minmax(0, 1fr); }
.shead > div, .shead__side { min-width: 0; }

/* ---------- Palavras longas em títulos (fonte de exibição larga: cada maiúscula ~1em) ----------
   Ajustes medidos na auditoria de 48 páginas × 8 larguras (PT/ES/EN). */
@media (min-width: 1440px) {
  .trail__step { padding-inline: 6px; }
  .trail__txt b { font-size: 11.5px; }
}
.care h3 { font-size: clamp(16px, 1.3vw, 20px); overflow-wrap: break-word; }
.audience--four h3 { font-size: clamp(16px, 1.35vw, 21px); overflow-wrap: break-word; }
.sim-after__lead { font-size: clamp(26px, 3vw, 44px); }
html:not([lang="pt-BR"]) #projetos .shead .h2 { font-size: clamp(30px, 3.5vw, 54px); }
@media (min-width: 1101px) and (max-width: 1279px) {
  .care:not(.care--five), .audience--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Telas muito estreitas (até 380 px) ----------
   Palavras longas em caixa alta ("CONSTRUCCIÓN", "DESAPARECEMOS", "COMMUNICATION") não cabem em 280 px
   com os tamanhos mínimos dos títulos. Aqui os títulos acompanham a largura da tela e podem hifenizar.
   O !important é intencional: vários títulos têm seletores muito específicos (ex.: .layout-center ... :not(#projetos)). */
@media (max-width: 380px) {
  h1, h2, h3, .statement, .cta__title { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .h2, .page-cta__title, .page-hero__title, .hero__title { font-size: clamp(22px, 7.5vw, 28px) !important; }
  .cs-title { font-size: clamp(21px, 7vw, 27px) !important; }
  .cta__title { font-size: clamp(22px, 7.2vw, 28px) !important; }
  .statement { font-size: clamp(18px, 6vw, 22px) !important; }
  .label { letter-spacing: .16em; }
  .form--wide .choices__list { grid-template-columns: minmax(0, 1fr); }
  .seg-chain__node { padding-inline: 6px; }
  .seg-chain__node b { font-size: 11px; letter-spacing: 0; }
  .seg-stack__head { flex-wrap: wrap; gap: 8px; }
  .seg-stack__head h3 { font-size: 16px; }
  .prose blockquote p { font-size: 17px; }
  .sim-after__lead { font-size: clamp(20px, 6.6vw, 24px); }
  .front__title { font-size: clamp(20px, 6.8vw, 24px); }
  .team-teaser__fronts li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .layout-center .team-teaser__fronts { grid-template-columns: minmax(0, 1fr); }
  .hub__stack b { font-size: 12px; letter-spacing: 0; }
  .placeholder-note { flex-wrap: wrap; }
}
/* Trio entre 768 e 1100 px: o verbo (sem quebra) precisa caber na coluna também em espanhol ("Automatizamos") */
@media (min-width: 768px) and (max-width: 1100px) {
  .trio__verb { font-size: clamp(15px, 2vw, 20px); }
}
/* Peças de anúncio no celular: o texto da peça 1:1 e 16:9 ganha mais largura e o botão pode quebrar */
@media (max-width: 767px) {
  .ad--1x1 .ad__copy, .ad--16x9 .ad__copy { max-width: 60%; }
  .ad__cta { white-space: normal; }
}


/* =========================================================
   ===== REVISÃO CLIENTE (quadro "Verificação site", 2026-10-21) =====
   Ajustes pedidos no quadro de revisão: Home, Produção visual, Soluções e Cases.
   ========================================================= */

/* ---------- Globais ---------- */
/* Sem traço antes da frase de apoio dos banners (o cliente pediu para tirar os "hífens" do site) */
.page-hero__claim { padding-left: 0; }
.page-hero__claim::before { display: none; }
/* Título (label) sem número: o texto ocupa o lugar, com a barra laranja como marcador */
.label:not(:has(b)):not(:has(.slash))::before { content: ""; flex: none; width: 14px; height: 6px; background: var(--grad-orange); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }

/* ---------- Home ---------- */
/* Película escura sobre o vídeo do banner */
.hero__shade::before { content: ""; position: absolute; inset: 0; background: rgba(2, 4, 7, .34); }
/* Frentes: imagem inteira do carro e painel tecnológico */
.front__img { object-position: 50% 55%; }
/* Simulador: instrução em destaque, fora da caixa */
.sim-lead { display: flex; align-items: flex-start; gap: 16px; max-width: 860px; margin: clamp(44px, 5vw, 72px) auto 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.3; text-transform: uppercase; color: var(--text); text-wrap: balance; }
.sim-lead__icon { flex: none; width: 34px; height: 34px; margin-top: 2px; border-radius: 50%; background: var(--grad-orange); box-shadow: 0 0 0 6px rgba(255, 126, 57, .16); position: relative; }
.sim-lead__icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-right: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: translateY(-2px) rotate(45deg); }
.layout-center .sim-lead { justify-content: center; text-align: left; }
.sim-lead + .sim { margin-top: clamp(24px, 3vw, 36px); }
/* Produção (home): CTA depois dos quatro itens */
.caps__cta { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 56px); }
/* "Marca. Produto. Público…": menor, para não destoar do texto seguinte */
.starting__words li { font-size: clamp(28px, 4.2vw, 68px); }
/* Case: subtítulo com mais leitura sobre a foto */
.case__intro { color: var(--text); font-size: clamp(16px, 1.3vw, 19px); text-shadow: 0 2px 18px rgba(2, 4, 7, .9), 0 0 2px rgba(2, 4, 7, .8); }
.layout-center .case__intro { max-width: 700px; }
/* Soluções (home): título centralizado em menos linhas */
.solutions__head .h2 { max-width: 900px; text-wrap: balance; }
.layout-center .solutions .solutions__head { justify-items: center; text-align: center; }
/* "Tecnologia entende melhor…": três linhas */
.layout-center .section:not(#projetos) .shead .h2.why__title, .why__title { max-width: none; }
/* Autifex + Nexus: linhagem visual */
/* Cada marca fica sobre o seu cartão; o feixe sai da Nexus (direita) e chega à Autifex (esquerda) */
.lineage { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(20px, 3vw, 48px); margin: clamp(48px, 6vw, 80px) 0 0; }
.lineage__node { position: relative; z-index: 1; display: grid; align-content: center; justify-items: center; justify-self: center; gap: 6px; padding: 20px 26px; min-width: 260px; min-height: 108px; text-align: center; border: 1px solid var(--line-strong); background: var(--surface); }
.lineage__node--nexus { border-color: rgba(61, 157, 245, .5); }
.lineage__node b { font: 600 clamp(15px, 1.3vw, 19px)/1.1 var(--f-display); font-stretch: 125%; letter-spacing: .04em; text-transform: uppercase; }
.lineage__node small { font: 500 10.5px/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lineage__node--afx { border-color: rgba(255, 126, 57, .55); background: linear-gradient(160deg, rgba(255, 126, 57, .14), transparent 70%), var(--surface); box-shadow: 0 24px 60px -30px rgba(255, 126, 57, .6); }
.lineage__node--afx img { width: 54px; height: auto; }
.lineage__beam { position: absolute; left: 25%; right: 25%; top: 50%; z-index: 0; height: 1px; overflow: hidden; background: linear-gradient(90deg, var(--orange), var(--blue)); }
.lineage__beam i { position: absolute; top: -2px; left: 100%; width: 18px; height: 5px; border-radius: 3px; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
@media all { /* animações ativas em todos os dispositivos */
  .lineage__beam i { animation: lineageBeam 2.6s linear infinite; }
  .lineage__beam i:nth-child(2) { animation-delay: .87s; }
  .lineage__beam i:nth-child(3) { animation-delay: 1.74s; }
  @keyframes lineageBeam { from { left: 100%; } to { left: -20px; } }
}
.layout-center .why .shead .h2.why__title { max-width: none; text-wrap: wrap; }
.layout-center .why .shead .h2.why__title br { display: inline; }
.audience--brands .aud { padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--line); border-top-width: 2px; background: linear-gradient(170deg, var(--surface-2), var(--black) 75%); }
.audience--brands .aud--afx { border-top-color: var(--orange); }
.audience--brands .aud--nexus { border-top-color: var(--blue); }
.layout-center .audience--brands { margin-top: clamp(28px, 3vw, 40px); }

/* Demonstração (home): painel animado na aba "Dados, automação e sistemas" */
.chat__body.is-dash { -webkit-mask-image: none; mask-image: none; padding: 18px; gap: 0; }
.chat__body.is-dash > :first-child { margin-top: 0; }
.dsh { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; height: 100%; }
.dsh__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dsh__kpi { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.dsh__kpi span { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.dsh__kpi b { font: 600 clamp(20px, 1.8vw, 26px)/1 var(--f-display); font-stretch: 125%; font-variant-numeric: tabular-nums; color: var(--text); }
.dsh__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.dsh__card { display: grid; grid-template-rows: auto 1fr; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.dsh__label { margin: 0 0 10px; font: 500 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dsh__bars, .dsh__funnel { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dsh__bars li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dsh__bars i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-hi)); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease) calc(var(--i) * 140ms + 200ms); width: calc(var(--v) * 100%); }
.dsh__funnel li { position: relative; display: grid; align-items: center; height: 24px; }
.dsh__funnel i { position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: 6px; background: linear-gradient(90deg, rgba(255, 126, 57, .85), rgba(232, 93, 28, .7)); transform: translateX(-50%) scaleX(0); transition: transform 1s var(--ease) calc(var(--i) * 160ms + 400ms); }
.dsh__funnel span { position: relative; z-index: 1; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--text); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.dsh__card--trend .dsh__label { margin-bottom: 6px; }
.dsh__trend { display: block; width: 100%; height: 100%; min-height: 44px; overflow: visible; clip-path: inset(-4px 100% -4px 0); transition: clip-path 1.6s var(--ease) .5s; }
.dsh__area { fill: rgba(61, 157, 245, .16); opacity: 0; transition: opacity 1s ease .9s; }
.dsh__line { fill: none; stroke: var(--blue-hi); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dsh.is-on .dsh__area { opacity: 1; }
.dsh.is-on .dsh__trend { clip-path: inset(-4px 0 -4px 0); }
.dsh.is-on .dsh__bars i { transform: scaleX(1); }
.dsh.is-on .dsh__funnel i { transform: translateX(-50%) scaleX(1); }
.dsh__sync { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dsh__sync span { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; color: var(--muted); }
.dsh__sync b { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--f-body); color: var(--text); }
.dsh__sync b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2bd47d; box-shadow: 0 0 0 3px rgba(43, 212, 125, .2); }

@media (max-width: 767px) {
  .lineage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
  .lineage__node--afx { order: 3; }
  .lineage__beam { position: relative; inset: auto; order: 2; width: 1px; height: 40px; background: linear-gradient(180deg, var(--blue), var(--orange)); }
  .why__title br { display: none !important; }
  .lineage__beam i { display: none; }
  .lineage__node { min-width: 0; width: 100%; }
  .sim-lead { font-size: 17px; }
  .dsh__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dsh__kpi { padding: 10px; }
  .dsh__kpi b { font-size: 18px; }
  .dsh__row { grid-template-columns: minmax(0, 1fr); }
  .dsh { grid-template-rows: auto auto auto; }
  .dsh__card--funnel, .dsh__card--trend { display: none; }
}

/* ---------- Produção visual ---------- */
/* Banner: subtexto em duas linhas */
.page-hero__lead--wide { max-width: 880px; }
/* "O veículo não precisa…": três linhas fixas */
.layout-center .section:not(#projetos) .shead .h2.h2--three { max-width: none; font-size: clamp(28px, 3.5vw, 54px); text-wrap: wrap; }
.layout-center .section:not(#projetos) .shead .h2.h2--three br { display: inline; }
/* Projetos: título centralizado em duas linhas */
#projetos .projetos__head .h2 { max-width: none; font-size: clamp(26px, 2.85vw, 44px); text-wrap: wrap; }
#projetos .projetos__head .h2 br { display: inline; }
#projetos .projetos__head { margin-bottom: clamp(8px, 1vw, 16px); }
/* "Cada produção passa por decisões…": três etapas em cartões e fechamento */
.layout-center .section.people--v2:not(#projetos) .shead .h2 { max-width: none; font-size: clamp(28px, 3.2vw, 48px); text-wrap: wrap; }
.layout-center .section.people--v2:not(#projetos) .shead .h2 br { display: inline; }
.people__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; counter-reset: step; }
.people__steps li { position: relative; display: grid; align-content: start; gap: 14px; padding: clamp(26px, 2.6vw, 38px); border: 1px solid var(--line); background: linear-gradient(165deg, var(--surface-2), var(--black) 80%); text-align: left; counter-increment: step; }
.people__steps li::after { content: "0" counter(step); position: absolute; top: clamp(22px, 2.4vw, 34px); right: clamp(22px, 2.4vw, 34px); font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; color: var(--dim); }
.people__steps li:nth-child(2) { border-color: rgba(255, 126, 57, .45); background: linear-gradient(165deg, rgba(255, 126, 57, .12), var(--black) 75%); }
.people__icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; }
.people__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.people__steps h3 { font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.15; text-transform: uppercase; }
.people__steps p { color: var(--muted); font-size: clamp(15px, 1.1vw, 17px); }
.people__close { display: grid; justify-items: center; gap: 26px; max-width: 900px; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; }
.people__close .people__strong { margin: 0; text-wrap: balance; }
.people__close .people__team { justify-self: center; margin-top: 0; }
/* Fidelidade: imagens menores, prontas para mais exemplos */
.pair--compact { max-width: 1080px; margin-inline: auto; }
.pair--compact .pair__item img { aspect-ratio: 16 / 9; }
/* Para quem: imagem em cada segmento */
.audience--visual .aud { display: grid; align-content: start; gap: 0; padding-top: 0; border-top: 0; }
.audience--visual .aud__media { position: relative; margin: 0 0 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.audience--visual .aud__media::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--grad-orange); transform: scaleX(.18); transform-origin: left; transition: transform .9s var(--ease); }
.audience--visual .aud__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.audience--visual .aud:hover .aud__media img { transform: scale(1.05); }
.audience--visual .aud:hover .aud__media::after { transform: scaleX(1); }

/* CTA final: mesmo corpo dos títulos de seção; frases que trocam mais rápido (main.js) */
.cta--center .cta__title { max-width: 1120px; font-size: clamp(30px, 3.9vw, 58px); }

@media (max-width: 1099px) {
  .people__steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .layout-center .section:not(#projetos) .shead .h2.h2--three br, #projetos .projetos__head .h2 br, .layout-center .section.people--v2:not(#projetos) .shead .h2 br { display: none; }
}

/* ---------- Tecnologia e automações ---------- */
/* Frase de apoio de cada seção com mais destaque, como abertura do título */
.label--lead { gap: 12px; padding: 11px 16px; font-size: clamp(12.5px, 1vw, 14.5px); font-weight: 600; letter-spacing: .18em; line-height: 1.35; color: var(--text); border: 1px solid rgba(255, 126, 57, .42); background: linear-gradient(90deg, rgba(255, 126, 57, .14), rgba(255, 126, 57, .03)); text-wrap: balance; }
.label--lead b { font-size: 1.05em; }
/* "Ela precisa saber…": leitura escaneável em três pontos */
.layout-center .guard-copy--scan { max-width: 1060px; }
.guard-copy__lead { color: var(--text); font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.25; text-transform: uppercase; }
.guard-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: 14px 0 0; padding: 0; list-style: none; text-align: left; }
.guard-points li { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--line); border-top: 2px solid var(--orange); background: var(--surface); }
.guard-points b { font: 600 clamp(14px, 1.15vw, 16px)/1.2 var(--f-display); font-stretch: 125%; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.guard-points span { font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.55; color: var(--muted); }
/* 04 · Três caminhos por segmento */
.segcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
.segcard { display: grid; height: 100%; grid-template-rows: auto 1fr; text-align: left; border: 1px solid var(--line); background: var(--black); transition: border-color .4s; }
.segcard__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); }
.segcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(2, 4, 7, .75)); }
.segcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.segcard__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: clamp(22px, 2.2vw, 32px); }
.segcard__kicker { font: 500 11px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.segcard__title { font: 600 clamp(19px, 1.7vw, 25px)/1.12 var(--f-display); font-stretch: 125%; text-transform: uppercase; color: var(--text); }
.segcard__text { color: var(--muted); }
.segcard__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font: 500 12px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.segcard__cta .i-arrow { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.segcard:hover, .segcard:focus-visible { border-color: var(--orange); }
.segcard:hover .segcard__media img { transform: scale(1.05); }
.segcard:hover .segcard__cta .i-arrow { transform: translateX(4px); }
/* 05 · Camadas: inteligência Autifex sobre os sistemas que a empresa já usa */
.stack { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 5vw, 80px); max-width: 1120px; margin: clamp(48px, 6vw, 88px) auto 0; text-align: left; }
.stack__visual { position: relative; height: 420px; }
.stack__plate { position: absolute; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-45deg); }
.stack__plate--top { top: 96px; z-index: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 26px; border: 1px solid rgba(255, 126, 57, .9); background: linear-gradient(135deg, rgba(255, 126, 57, .34), rgba(232, 93, 28, .1)); box-shadow: 0 0 60px rgba(255, 126, 57, .35); }
.stack__plate--top i { border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 126, 57, .28); }
.stack__plate--mid { top: 212px; z-index: 2; border: 1px solid rgba(61, 157, 245, .75); background-color: rgba(0, 124, 234, .1); background-image: repeating-linear-gradient(90deg, rgba(61, 157, 245, .45) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(61, 157, 245, .45) 0 1px, transparent 1px 28px); }
.stack__plate--base { top: 328px; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; padding: 22px; border: 1px solid var(--line-strong); background: var(--surface-2); }
.stack__plate--base i { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .04); }
.stack__plate--base i:nth-child(4) { background: var(--text); border-color: var(--text); }
.stack__beam { position: absolute; left: 50%; z-index: 0; width: 1px; overflow: hidden; background: var(--line-strong); }
.stack__beam--1 { top: 96px; height: 116px; }
.stack__beam--2 { top: 212px; height: 116px; }
.stack__beam::after { content: ""; position: absolute; left: 0; width: 1px; height: 40%; background: linear-gradient(180deg, transparent, var(--orange), transparent); }
.stack__legend { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.stack__row { display: grid; gap: 10px; padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px); border: 1px solid var(--line); border-left: 2px solid var(--line-strong); background: var(--surface); }
.stack__row--top { border-left-color: var(--orange); background: linear-gradient(90deg, rgba(255, 126, 57, .1), transparent 70%), var(--surface); }
.stack__row--mid { border-left-color: var(--blue-hi); }
.stack__tag { font: 500 10.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.stack__name { font: 600 clamp(18px, 1.7vw, 24px)/1.1 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.stack__row ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.stack__row ul li { padding: 8px 12px; font: 500 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line-strong); }
.stack__row ul li.is-key { color: var(--black); background: var(--text); border-color: var(--text); }
@media all { /* animações ativas em todos os dispositivos */
  .stack__plate--top { animation: stackFloat 5s var(--ease) infinite; }
  .stack__plate--mid { animation: stackFloat 5s var(--ease) .6s infinite; }
  .stack__beam::after { animation: afx-drop 1.8s linear infinite; }
  .stack__beam--2::after { animation-delay: .9s; }
  @keyframes stackFloat { 50% { margin-top: -9px; } }
}
/* 07 · Selo de case real */
.badge-real { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 9px 14px; font: 600 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--black); background: var(--grad-orange); }
.badge-real i { width: 8px; height: 8px; border-radius: 50%; background: var(--black); box-shadow: 0 0 0 3px rgba(2, 4, 7, .25); }

@media (max-width: 1099px) {
  .segcards { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .stack { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 899px) {
  .guard-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .stack__visual { height: 340px; }
  .stack__plate { width: 170px; height: 170px; }
  .stack__plate--top { top: 78px; padding: 20px; gap: 12px; }
  .stack__plate--mid { top: 170px; }
  .stack__plate--base { top: 262px; padding: 16px; gap: 8px; }
  .stack__beam--1 { top: 78px; height: 92px; }
  .stack__beam--2 { top: 170px; height: 92px; }
  .label--lead { padding: 9px 12px; letter-spacing: .14em; }
  .segcard__title { font-size: clamp(16px, 5.2vw, 19px); overflow-wrap: anywhere; }
}
/* Menu móvel: "Tecnología y automatización" tem a palavra mais longa do menu; o corpo acompanha a largura da tela */
@media (max-width: 767px) {
  .menu__link { font-size: clamp(21px, 6.6vw, 44px); }
  html[lang^="es"] .menu__link { font-size: min(clamp(21px, 6.6vw, 44px), calc((100vw - 118px) / 12.6)); }
}

/* ---------- Cases ---------- */
/* Banner: título em três linhas na largura toda; imagens e telas organizadas numa faixa logo abaixo */
.cs-hero__grid--stack { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); }
.cs-hero__grid--stack .cs-hero__title { margin: 0 0 22px; font-size: clamp(30px, 4vw, 60px); }
.cs-hero__grid--stack .cs-hero__title .line > span { white-space: nowrap; }
.cs-hero__grid--stack .cs-hero__lead { max-width: 640px; }
.cs-hero__collage--grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, .85fr); grid-template-rows: repeat(3, minmax(0, auto)); gap: 12px; height: auto; }
.cs-hero__collage--grid .cs-card { position: relative; inset: auto; width: auto; height: auto; animation: none; }
.cs-hero__collage--grid .cs-card--film { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: 300px; }
.cs-hero__collage--grid .cs-card--chat { grid-column: 2; grid-row: 1 / -1; }
.cs-hero__collage--grid .cs-live { min-height: 0; }
.cs-hero__collage--grid .cs-card--kpi { grid-column: 3; grid-row: 1; padding: 16px; }
.cs-hero__collage--grid .cs-card--kpi b { font-size: clamp(30px, 2.6vw, 42px); }
.cs-hero__collage--grid .cs-card--media { grid-column: 3; grid-row: 2; padding: 14px 16px; gap: 10px; }
.cs-hero__collage--grid .cs-card--media .ui-bars { height: 40px; }
.cs-hero__collage--grid .cs-card--sap { grid-column: 3; grid-row: 3; padding: 14px 16px; }

@media (max-width: 1099px) {
  .cs-hero__grid--stack .cs-hero__title .line > span { white-space: normal; }
  .cs-hero__collage--grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto repeat(3, auto); }
  .cs-hero__collage--grid .cs-card--film { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; min-height: 0; }
  .cs-hero__collage--grid .cs-card--chat { grid-column: 1; grid-row: 2 / span 3; min-height: 250px; }
  .cs-hero__collage--grid .cs-card--kpi { grid-column: 2; grid-row: 2; }
  .cs-hero__collage--grid .cs-card--media { grid-column: 2; grid-row: 3; }
  .cs-hero__collage--grid .cs-card--sap { grid-column: 2; grid-row: 4; }
}
@media (max-width: 767px) {
  .cs-hero__collage--grid { height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-hero__collage--grid .cs-card--film { width: auto; }
  .cs-hero__collage--grid .cs-card--chat { grid-column: 1 / -1; grid-row: 2; width: auto; top: auto; height: 230px; min-height: 0; }
  .cs-hero__collage--grid .cs-card--kpi { grid-column: 1; grid-row: 3; left: auto; bottom: auto; width: auto; }
  .cs-hero__collage--grid .cs-card--media { display: grid; grid-column: 2; grid-row: 3; }
  .cs-hero__collage--grid .cs-card--sap { display: none; }
}

/* =========================================================
   ===== REVISÃO CLIENTE 2 (quadro "Verificação site", 2026-10-21, rodada 2) =====
   Cabeçalho com a fonte do logo, assistente novo, filmes da Bonanza, Cases, Sobre,
   efeito do filme institucional (órbita) e páginas por segmento.
   ========================================================= */

/* ---------- Cabeçalho: palavra AUTIFEX com o desenho do logo ---------- */
.brand .brand__word--logo { display: block; width: 108px; height: auto; }
@media (max-width: 380px) { .brand .brand__word--logo { width: 92px; } }

/* ---------- Assistente: campo só ativo quando o roteiro pede uma resposta aberta ---------- */
.afx-bot__input:disabled { opacity: .55; cursor: not-allowed; }
.afx-bot__send:disabled { opacity: .35; pointer-events: none; }
.afx-bot__chips--skip .afx-bot__chip { background: transparent; border-style: dashed; color: var(--muted); }
.afx-bot__chips--skip .afx-bot__chip:hover { color: var(--text); }

/* ---------- Filmes reais para concessionária (Home e Produção) ---------- */
.reels4 { margin-top: clamp(40px, 5vw, 72px); }
.reels4__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; text-align: left; }
.reels4__label { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.3 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.reels4__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 126, 57, .2); }
.reels4__note { color: var(--muted); font-size: 14px; }
.reels4__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); margin: 0; padding: 0; list-style: none; }
.reels4__frame { position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.reels4__frame img, .reels4__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reels4__frame video { opacity: 0; transition: opacity .8s; }
.reels4__frame video.is-playing { opacity: 1; }
.reels4__frame::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(0deg, rgba(2, 4, 7, .85), transparent); pointer-events: none; }
.reels4__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: grid; gap: 6px; font: 600 13px/1.2 var(--f-display); font-stretch: 125%; text-transform: uppercase; text-align: left; }
.reels4__cap b { font: 500 10px/1 var(--f-body); letter-spacing: .2em; color: var(--orange); }
@media (max-width: 899px) { .reels4__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Cases ---------- */
/* Time em carrossel contínuo (lista repetida, cópia oculta) */
.crew-marquee { display: flex; overflow: hidden; margin: clamp(40px, 5vw, 64px) 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.crew-marquee__track { flex: none; display: flex; gap: clamp(10px, 1.2vw, 16px); margin: 0; padding: 0 clamp(5px, .6vw, 8px); list-style: none; }
.crew-marquee__track li { flex: none; width: clamp(150px, 15vw, 220px); text-align: left; }
.crew-marquee__track img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.2); }
.crew__name { display: grid; gap: 4px; margin-top: 10px; font: 600 13px/1.2 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.crew__name small { font: 300 12.5px/1.3 var(--f-body); color: var(--muted); text-transform: none; }
@media all { /* animações ativas em todos os dispositivos */
  .crew-marquee__track { animation: crewMarquee 46s linear infinite; }
  .crew-marquee:hover .crew-marquee__track { animation-play-state: paused; }
  @keyframes crewMarquee { to { transform: translateX(-100%); } }
}
@media not all { /* desativado: animações iguais em todos os dispositivos */
  .crew-marquee { overflow-x: auto; }
  .crew-marquee__track[aria-hidden="true"] { display: none; }
}
/* Fechamento: título menor */
.cs-close__title { font-size: clamp(26px, 3.3vw, 52px); }

/* ---------- Efeito do filme institucional: emblema 3D com ícones em órbita ---------- */
.orbit { position: relative; container-type: inline-size; width: min(100%, 640px); aspect-ratio: 16 / 10; margin: clamp(32px, 4vw, 56px) auto clamp(4px, 1vw, 12px); }
.orbit__glow { position: absolute; inset: 8% 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 124, 234, .42), transparent); filter: blur(18px); }
.orbit__ring { position: absolute; left: 5%; right: 5%; top: 54%; height: 36%; border: 1px solid rgba(61, 157, 245, .32); border-radius: 50%; transform: translateY(-50%); box-shadow: inset 0 0 40px rgba(0, 124, 234, .12); }
.orbit__emblem { position: absolute; left: 50%; top: 50%; z-index: 2; width: 46%; height: auto; transform: translate(-50%, -56%); filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .65)); }
.orbit__icon { position: absolute; left: 50%; top: 54%; z-index: 1; width: 12%; margin: -6% 0 0 -6%; transform: translateX(calc(cos(var(--k) * 60deg) * 43cqi)); }
.orbit__icon > span { display: block; transform: translateY(calc(sin(var(--k) * 60deg) * 9cqi)); }
.orbit__icon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
@media all { /* animações ativas em todos os dispositivos */
  .orbit__emblem { animation: orbitFloat 6s ease-in-out infinite; }
  .orbit__icon { animation: orbitX 6s ease-in-out calc(var(--k) * -2s) infinite alternate, orbitZ 12s step-end calc(var(--k) * -2s) infinite; }
  .orbit__icon > span { animation: orbitY 6s ease-in-out calc(-3s - var(--k) * 2s) infinite alternate; }
  @keyframes orbitFloat { 0%, 100% { transform: translate(-50%, -56%); } 50% { transform: translate(-50%, -60%); } }
  @keyframes orbitX { from { transform: translateX(-43cqi); } to { transform: translateX(43cqi); } }
  @keyframes orbitY { from { transform: translateY(-9cqi) scale(.72); opacity: .55; } to { transform: translateY(9cqi) scale(1.08); opacity: 1; } }
  @keyframes orbitZ { 0% { z-index: 3; } 50% { z-index: 1; } }
}

/* ---------- Sobre ---------- */
/* Banner: pattern animado + emblema 3D */
.about-hero__emblem { position: absolute; right: clamp(16px, 6vw, 120px); top: 50%; z-index: 1; width: clamp(240px, 30vw, 520px); transform: translateY(-44%); pointer-events: none; filter: drop-shadow(0 30px 70px rgba(0, 124, 234, .45)); }
.about-hero__emblem img { display: block; width: 100%; height: auto; }
@media all { /* animações ativas em todos os dispositivos */
  .about-hero__emblem img { animation: emblemFloat 6s ease-in-out infinite; }
  @keyframes emblemFloat { 50% { transform: translateY(-14px); } }
}
@media (max-width: 1099px) { .about-hero__emblem { opacity: .35; right: -6%; } }
@media (max-width: 767px) { .about-hero__emblem { display: none; } }
/* Nexus com brilho; Autifex com o logo completo */
.group__outer .group__nexus { display: block; width: clamp(170px, 17vw, 250px); height: auto; margin: 16px 0 clamp(22px, 3vw, 38px); filter: drop-shadow(0 0 16px rgba(255, 126, 57, .5)) drop-shadow(0 0 40px rgba(255, 126, 57, .22)); }
@media all { /* animações ativas em todos os dispositivos */
  .group__outer .group__nexus { animation: nexusGlow 4.5s ease-in-out infinite; }
  @keyframes nexusGlow { 50% { filter: drop-shadow(0 0 24px rgba(255, 126, 57, .78)) drop-shadow(0 0 60px rgba(255, 126, 57, .34)); } }
}
.group__inner .group__afx-logo { width: clamp(170px, 19vw, 250px); height: auto; margin-top: 22px; }
/* Mercado: foto ao fundo */
.market--photo { position: relative; isolation: isolate; overflow: hidden; }
.market__bg { position: absolute; inset: 0; z-index: -1; }
.market__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.market__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface) 0%, rgba(7, 11, 18, .5) 26%, rgba(7, 11, 18, .58) 72%, var(--surface) 100%); }
/* Equipe: grupos com cartões do mesmo tamanho, linhas centralizadas */
@media (min-width: 1101px) {
  .team__list { display: flex; flex-wrap: wrap; justify-content: center; }
  .team__list .member { flex: 0 0 calc((100% - 4 * clamp(14px, 1.6vw, 24px)) / 5); }
  .team__list--lead .member { flex-basis: calc((100% - 4 * clamp(14px, 1.6vw, 24px)) / 5 * 2 + clamp(14px, 1.6vw, 24px)); }
  .team__group .team__front { display: flex; justify-content: center; }
}

/* ---------- Páginas por segmento ---------- */
.seg-hero__em { color: var(--text); font-weight: 600; }
.seg-hero .page-hero__title.seg-hero__title--lines { max-width: none; font-size: clamp(28px, 3.5vw, 56px); }
.seg-flow.seg-flow--hero { position: static; max-width: 720px; margin-top: clamp(26px, 3vw, 40px); }
.seg-hero--port .page-hero__shade { background: linear-gradient(90deg, rgba(2, 4, 7, .92) 0%, rgba(2, 4, 7, .7) 42%, rgba(2, 4, 7, .2) 75%), linear-gradient(0deg, var(--black) 0%, transparent 32%); }

/* Concessionárias: uma imagem por gargalo */
.seg-alerts__row.seg-alerts__row--media { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "media ." "media n" "media title" "media text" "media ."; column-gap: clamp(24px, 4vw, 72px); row-gap: 12px; align-items: start; text-align: left; }
.seg-alerts__row--media:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: ". media" "n media" "title media" "text media" ". media"; }
.seg-alerts__media { grid-area: media; position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); }
.seg-alerts__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.seg-alerts__row--media:hover .seg-alerts__media img { transform: scale(1.04); }
.seg-alerts__row--media .seg-alerts__n { grid-area: n; }
.seg-alerts__row--media .seg-alerts__title { grid-area: title; }
.seg-alerts__row--media p { grid-area: text; }

/* Telas reais das soluções (abas e case) */
.seg-ui { position: relative; margin: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(110% 90% at 50% 0%, rgba(0, 124, 234, .3), transparent 62%), linear-gradient(160deg, #0b1424, #05080e); }
.seg-ui img { position: relative; z-index: 1; width: auto; height: auto; max-width: 86%; max-height: 84%; object-fit: contain; border-radius: 10px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
.seg-ui--tall img { max-height: 90%; }
.seg-tabs__media.seg-ui img { width: auto; height: auto; max-width: 86%; max-height: 84%; object-fit: contain; }
.seg-tabs__media.seg-ui--tall img { max-height: 92%; }

/* Produção (concessionárias): primeiro cartão com filme real */
.possib__item > video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.possib__item > video.is-playing { opacity: 1; }

/* Parágrafo longo quebrado em pontos curtos */
.seg-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1000px; margin: clamp(24px, 3vw, 36px) auto 0; padding: 0; list-style: none; }
.seg-points li { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border: 1px solid var(--line-strong); background: rgba(7, 11, 18, .55); font-size: 14.5px; line-height: 1.45; color: var(--text); text-align: left; }
.seg-points li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--seg-accent, var(--orange)); transform: skewX(-20deg); }
.seg-points__after { max-width: 760px; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); }

/* Distribuidores: produção sobre um filme real */
.seg-prod--film { position: relative; isolation: isolate; overflow: hidden; }
.seg-film-bg { position: absolute; inset: 0; z-index: -1; }
.seg-film-bg img, .seg-film-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seg-film-bg video { opacity: 0; transition: opacity 1s; }
.seg-film-bg video.is-playing { opacity: 1; }
.seg-film-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 4, 7, .94) 0%, rgba(2, 4, 7, .7) 34%, rgba(2, 4, 7, .74) 70%, rgba(2, 4, 7, .96) 100%); }
.seg-prod--film .shead__side p { color: var(--text); }
.seg-glass { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.seg-glass__card { display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2vw, 28px); text-align: left; background: rgba(7, 11, 18, .6); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.seg-glass__card span { font: 600 13px/1 var(--f-display); font-stretch: 125%; color: var(--seg-accent); }
.seg-glass__card h3 { font: 600 clamp(15px, 1.25vw, 18px)/1.25 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.seg-glass__card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1099px) { .seg-glass { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .seg-glass { grid-template-columns: minmax(0, 1fr); } }

/* Fabricantes: trilho com seta e dica mais visíveis */
.seg-rail__hint { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--seg-accent); }
.seg-rail__hint::after { content: "\2192"; font-size: 15px; letter-spacing: 0; }
.seg-rail__btn.seg-rail__btn--next:not(:disabled) { width: 56px; height: 56px; color: var(--black); background: var(--seg-accent); border-color: var(--seg-accent); }
.seg-rail__btn.seg-rail__btn--next:not(:disabled):hover { background: var(--text); border-color: var(--text); }
@media all { /* animações ativas em todos os dispositivos */
  .seg-rail__hint::after { animation: railHint 1.4s ease-in-out infinite; }
  .seg-rail__btn.seg-rail__btn--next:not(:disabled) { animation: railPulse 2.2s ease-out infinite; }
  @keyframes railHint { 50% { transform: translateX(6px); } }
  @keyframes railPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--seg-rgb), .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(var(--seg-rgb), 0); } }
}
@media (max-width: 600px) { .seg-rail__hint { display: none; } }

/* Fabricantes: perguntas como partes conectadas a um mesmo eixo */
.seg-net { --gap: 120px; position: relative; margin-top: clamp(40px, 5vw, 72px); }
.seg-net__list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap) 16px; margin: 0; padding: 0; list-style: none; }
.seg-net__node { position: relative; grid-column: span 2; padding: 20px 20px 22px; text-align: left; background: var(--surface-2); border: 1px solid var(--line-strong); }
.seg-net__node:nth-child(5) { grid-column: 2 / span 2; }
.seg-net__node::after { content: ""; position: absolute; left: 50%; width: 1px; height: calc(var(--gap) / 2); background: linear-gradient(180deg, rgba(var(--seg-rgb), .7), rgba(var(--seg-rgb), .25)); }
.seg-net__node:nth-child(-n + 4)::after { top: 100%; }
.seg-net__node:nth-child(n + 5)::after { bottom: 100%; background: linear-gradient(0deg, rgba(var(--seg-rgb), .7), rgba(var(--seg-rgb), .25)); }
.seg-net__dot { position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--seg-accent); box-shadow: 0 0 0 4px rgba(var(--seg-rgb), .18); }
.seg-net__node:nth-child(-n + 4) .seg-net__dot { top: calc(100% + var(--gap) / 2 - 5px); }
.seg-net__node:nth-child(n + 5) .seg-net__dot { bottom: calc(100% + var(--gap) / 2 - 5px); }
.seg-net__n { font: 600 12px/1 var(--f-display); font-stretch: 125%; letter-spacing: .06em; color: var(--seg-accent); }
.seg-net__node p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.seg-net__bus { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; overflow: hidden; background: linear-gradient(90deg, rgba(var(--seg-rgb), .1), rgba(var(--seg-rgb), .65) 20%, rgba(var(--seg-rgb), .65) 80%, rgba(var(--seg-rgb), .1)); }
.seg-net__bus i { position: absolute; top: -2px; left: -12%; width: 12%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff, transparent); }
.seg-net__hub { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--black); border: 1px solid rgba(var(--seg-rgb), .7); box-shadow: 0 0 0 8px rgba(var(--seg-rgb), .08), 0 0 44px rgba(var(--seg-rgb), .45); }
.seg-net__hub img { width: 38px; height: auto; }
.seg-net__outro { margin-top: clamp(28px, 3vw, 40px); }
@media all { /* animações ativas em todos os dispositivos */
  .seg-net__bus i { animation: netBus 3.6s linear infinite; }
  .seg-net__bus i + i { animation-delay: 1.8s; animation-direction: reverse; }
  .seg-net__dot { animation: netDot 3.2s ease-in-out calc(var(--k) * .4s) infinite; }
  @keyframes netBus { to { left: 100%; } }
  @keyframes netDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--seg-rgb), .18); } 50% { box-shadow: 0 0 0 9px rgba(var(--seg-rgb), 0), 0 0 18px rgba(var(--seg-rgb), .9); } }
}
@media (max-width: 1099px) {
  .seg-net { --gap: 14px; }
  .seg-net__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 28px; }
  .seg-net__node, .seg-net__node:nth-child(5) { grid-column: auto; }
  .seg-net__bus { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(var(--seg-rgb), .1), rgba(var(--seg-rgb), .6) 10%, rgba(var(--seg-rgb), .6) 90%, rgba(var(--seg-rgb), .1)); }
  .seg-net__bus i { display: none; }
  .seg-net__hub, .seg-net__node::after { display: none; }
  .seg-net__node .seg-net__dot, .seg-net__node:nth-child(n) .seg-net__dot { top: 26px; bottom: auto; left: -27px; margin: 0; }
}
@media (max-width: 600px) { .seg-net__list { grid-template-columns: minmax(0, 1fr); } }

/* Case: o visual da página Cases (criativos e telas reais) */
.seg-case__collage { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, .72fr) minmax(0, 1.15fr) minmax(0, .8fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; height: clamp(300px, 30vw, 440px); margin: clamp(40px, 5vw, 64px) 0; }
.seg-case__tile { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.seg-case__tile--film, .seg-case__tile--reel { grid-row: 1 / span 2; }
.seg-case__tile:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.seg-case__tile:nth-child(3) { grid-column: 3; grid-row: 1; }
.seg-case__tile:nth-child(4) { grid-column: 3; grid-row: 2; }
.seg-case__tile--film > img, .seg-case__tile--film > video, .seg-case__tile--reel > img, .seg-case__tile--reel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seg-case__tile video { opacity: 0; transition: opacity .8s; }
.seg-case__tile video.is-playing { opacity: 1; }
@media (max-width: 1099px) {
  .seg-case__collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; height: auto; }
  .seg-case__tile--film { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .seg-case__tile:nth-child(2), .seg-case__tile--reel { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .seg-case__tile:nth-child(3), .seg-case__tile:nth-child(4) { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 11; }
}

.seg-case .seg-case__collage + .apps4 { margin-top: 0; padding-inline: 0; }
/* Páginas por segmento: o título do CTA final acompanha o tamanho dos títulos de seção dessas páginas */
.seg-page .cta--center .cta__title { max-width: 1060px; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.08; }
/* Sobre: emblema do banner sem encostar no título; fechamento no mesmo corpo dos títulos */
.about-hero__emblem { width: clamp(220px, 26vw, 460px); right: clamp(16px, 5vw, 96px); }
.page-cta--about .page-cta__title { font-size: clamp(30px, 4.2vw, 66px); }

@media (max-width: 899px) {
  .seg-alerts__row.seg-alerts__row--media, .seg-alerts__row--media:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "media" "n" "title" "text"; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .demo { grid-template-columns: 1fr; }
  .tabs { flex-direction: row; overflow-x: auto; gap: 8px; border-top: 0; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; grid-template-columns: auto; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; }
  .tab__num, .tab__desc, .tab__progress { display: none; }
  .tab__title { font-size: 12px; white-space: nowrap; }
  .tab[aria-selected="true"] { border-color: var(--blue); background: rgba(0, 124, 234, .14); }
  .case__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root { --nav-h: 66px; }
  .hud { display: none; }
  .hero { justify-content: flex-end; }
  .hero__img, .hero__video { object-position: 70% 40%; }
  .hero__shade {
    background:
      linear-gradient(0deg, var(--black) 8%, rgba(2, 4, 7, .82) 42%, rgba(2, 4, 7, .1) 72%),
      linear-gradient(180deg, rgba(2, 4, 7, .7) 0%, rgba(2, 4, 7, 0) 20%);
  }
  .hero__title { font-size: clamp(24px, 7.8vw, 52px); } /* cada linha do título cabe inteira (PT/ES/EN) */
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__foot { margin-top: 36px; }
  .hero__pillars li:nth-child(n+2) { display: none; }
  .shead { grid-template-columns: 1fr; }
  .fronts, .objections, .audience, .caps, .case__grid { grid-template-columns: 1fr; }
  .front { min-height: 400px; }
  .pillar { grid-template-columns: 44px 1fr; }
  .pillar__desc { grid-column: 2; }
  .flow { gap: 6px; }
  .flow__node { font-size: 9.5px; padding: 7px 8px; letter-spacing: .02em; }
  .flow__link { min-width: 6px; }
  .chat__chip { display: none; }
  .explore__list a { grid-template-columns: 40px 1fr auto; gap: 14px; }
  .explore__go { width: 42px; height: 42px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .cta__row .btn { width: 100%; }
  .eyebrow { font-size: 10.5px; letter-spacing: .12em; gap: 10px; }
  .fidelity__media { height: 72vh; height: 72svh; }
}

/* ---------- Movimento reduzido ---------- */
@media not all { /* desativado: animações iguais em todos os dispositivos */
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  body::after { display: none; }
}