/* Une Empresas. Identidade da Une: petróleo escuro, marfim e ouro; Newsreader nos títulos, Outfit na marca, Inter no texto.
   A assinatura é a conexão: o fio de ouro com nós de luz que sempre liga uma coisa a outra. */

:root {
  --noite: #07171A;
  --noite-2: #0A1F23;
  --petroleo: #00343D;
  --marfim: #F7F3EA;
  --marfim-2: #EEE7D8;
  --preto: #0B0F10;
  --ouro: #C9A55F;
  --champ: #E5C781;
  --ouro-escuro: #AE8A4B;
  --ouro-tinta: #8C6A2E;
  --luz: #FFF4D6;
  --grad-ouro: linear-gradient(100deg, #E8CC8D 0%, #D6B26C 28%, #C49E57 58%, #B99450 76%, #DCBE7E 100%);

  --m: clamp(20px, 4.2vw, 72px);
  --col-gap: clamp(16px, 2vw, 28px);
  --raio: 22px;
  --raio-g: 30px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --serifa: "Newsreader", "Times New Roman", serif;
  --marca: "Outfit", "Inter", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fundo: var(--noite);
  --tinta: var(--marfim);
  --tinta-2: rgba(247, 243, 234, .68);
  --tinta-3: rgba(247, 243, 234, .36);
  --linha: rgba(247, 243, 234, .11);
  --ouro-texto: linear-gradient(95deg, #F1DCA8 0%, #D9B670 50%, #EED49B 100%);
  --vidro-bg: linear-gradient(180deg, rgba(247, 243, 234, .085), rgba(247, 243, 234, .025));
  --vidro-borda: rgba(247, 243, 234, .12);
  --vidro-sombra: 0 40px 90px -40px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
html[data-tema="claro"] {
  --fundo: var(--marfim);
  --tinta: var(--preto);
  --tinta-2: rgba(11, 15, 16, .66);
  --tinta-3: rgba(11, 15, 16, .32);
  --linha: rgba(11, 15, 16, .11);
  --ouro-texto: linear-gradient(95deg, #A9843F 0%, #C9A55F 45%, #B08C49 100%);
  --vidro-bg: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4));
  --vidro-borda: rgba(11, 15, 16, .08);
  --vidro-sombra: 0 40px 80px -40px rgba(60, 46, 20, .35);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .9s var(--ease), color .9s var(--ease);
}
/* o brilho petróleo de cima e o calor de ouro de baixo, só no escuro */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70vw 60vh at 78% -8%, rgba(0, 72, 84, .5), rgba(0, 52, 61, 0) 70%),
    radial-gradient(60vw 50vh at 6% 108%, rgba(201, 165, 95, .09), rgba(201, 165, 95, 0) 70%);
  transition: opacity .9s var(--ease);
}
html[data-tema="claro"] body::before { opacity: 0; }

img, video, svg { display: block; max-width: 100%; }
svg { fill: currentColor; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }
::selection { background: var(--ouro); color: var(--preto); }
:focus-visible { outline: 1.5px solid var(--champ); outline-offset: 4px; border-radius: 6px; }

/* ---------- marca: Une forte, Empresas leve, traço de ouro ---------- */
.marca { display: inline-flex; align-items: baseline; font-family: var(--marca); font-size: 25px; line-height: 1; letter-spacing: -.012em; white-space: nowrap; color: var(--tinta); transition: color .9s var(--ease); }
.marca b { font-weight: 600; }
.marca span { font-weight: 300; margin-left: .2em; }
.marca i { display: inline-block; width: .4em; height: .07em; margin-left: .07em; background: var(--grad-ouro); border-radius: 1px; }

/* ---------- peças comuns ---------- */
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-inline: var(--m); }

.rotulo, .sec-rotulo { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2); }
.rotulo { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.rotulo-no, .ponto-ouro { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 0 3px rgba(229, 199, 129, .18), 0 0 14px 2px rgba(229, 199, 129, .55); }
.sec-rotulo { grid-column: 1 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; align-self: start; padding-top: .9em; }
.sec-num { font-family: var(--serifa); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; background: var(--ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.etiqueta { display: inline-flex; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--linha); letter-spacing: .16em; font-size: 10.5px; }

.titulo-sec, .titulo-mega, .hero-titulo { font-family: var(--serifa); font-weight: 400; margin: 0; letter-spacing: -.035em; line-height: .96; font-optical-sizing: auto; }
.titulo-sec { grid-column: 4 / 13; font-size: clamp(42px, 5.4vw, 96px); }
.titulo-sec--g { font-size: clamp(44px, 6.6vw, 118px); }
.titulo-mega { font-size: clamp(64px, 14vw, 250px); line-height: .86; letter-spacing: -.05em; }
.titulo-sec em, .titulo-mega em, .hero-titulo em, .manifesto-texto em, .filme-legenda em, .menu-rodape em, .rodape-base em {
  font-style: italic;
  background: var(--ouro-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
}
.sec-texto { grid-column: 7 / 12; margin: clamp(26px, 3vw, 44px) 0 0; font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.6; color: var(--tinta-2); max-width: 520px; }

/* linhas do SplitText */
.linha-mask { padding-bottom: .1em; margin-bottom: -.1em; padding-right: .1em; margin-right: -.1em; }

/* vidro: fosco, com o filete de ouro em cima */
.vidro {
  position: relative;
  background: var(--vidro-bg);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--vidro-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--vidro-sombra);
}
.vidro::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(229, 199, 129, 0), rgba(240, 214, 152, .95) 50%, rgba(229, 199, 129, 0));
  pointer-events: none;
}

/* botões */
.botao { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px; border-radius: 99px; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: color .5s var(--ease), border-color .5s var(--ease); }
.botao svg { width: 18px; height: 18px; transition: transform .6s var(--ease); }
.botao:hover svg { transform: translateX(4px); }
.botao span, .botao svg { position: relative; z-index: 1; }
.botao::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease); }
.botao:hover::after { transform: translateY(0); }
.botao--ouro { background: var(--grad-ouro); color: var(--preto); box-shadow: 0 10px 40px -12px rgba(201, 165, 95, .65), inset 0 1px 0 rgba(255, 255, 255, .5); }
.botao--ouro::after { background: var(--marfim); }
.botao--vidro { color: var(--tinta); background: rgba(247, 243, 234, .06); border: 1px solid var(--vidro-borda); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.botao--vidro::after { background: var(--marfim); }
.botao--vidro:hover { color: var(--preto); }
.botao--escuro { background: var(--preto); color: var(--marfim); }
.botao--escuro::after { background: var(--ouro); }
.botao--escuro:hover { color: var(--preto); }
.botao--p { height: 44px; padding: 0 18px; font-size: 14px; gap: 9px; }
.botao--p svg { width: 16px; height: 16px; }
.botao--cheio { width: 100%; justify-content: center; }

/* ---------- abertura ---------- */
.loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: all; }
.loader-placa { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--noite); }
.loader-placa--cima { top: 0; }
.loader-placa--baixo { bottom: 0; }
.loader-centro { position: relative; display: grid; justify-items: center; gap: 26px; }
.loader-marca { display: flex; align-items: baseline; font-family: var(--marca); font-size: clamp(38px, 6vw, 84px); line-height: 1; letter-spacing: -.012em; color: var(--marfim); }
.loader-mascara { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.loader-texto { display: inline-block; transform: translateY(110%); }
.loader-texto b { font-weight: 600; }
.loader-texto span { font-weight: 300; }
.loader-traco { display: inline-block; width: .4em; height: .07em; margin-left: .07em; background: var(--grad-ouro); border-radius: 1px; transform: scaleX(0); transform-origin: left; }
.loader-fio { position: relative; width: min(56vw, 520px); height: 1px; background: linear-gradient(90deg, rgba(229, 199, 129, 0), rgba(229, 199, 129, .8) 50%, rgba(229, 199, 129, 0)); transform: scaleX(0); }
.loader-no { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 0 4px rgba(229, 199, 129, .2), 0 0 18px 4px rgba(229, 199, 129, .6); }
.loader-no--a { left: 0; }
.loader-no--b { right: 0; }
.loader-rodape { position: absolute; left: var(--m); right: var(--m); bottom: 32px; display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(247, 243, 234, .5); }
.loader-conta { font-variant-numeric: tabular-nums; color: var(--champ); }
html:not(.js) .loader { display: none; }
.carregado .loader { pointer-events: none; }

/* grão de filme por cima de tudo */
.grao { position: fixed; inset: -60%; z-index: 999; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grao 1s steps(6) infinite; }
html[data-tema="claro"] .grao { opacity: .07; mix-blend-mode: multiply; filter: invert(1); }
@keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(-2%, 6%); } }

/* cursor */
.cursor { position: fixed; left: 0; top: 0; z-index: 1001; pointer-events: none; display: none; opacity: 0; transition: opacity .4s; }
.cursor.vivo { opacity: 1; }
.tem-cursor .cursor { display: block; }
.cursor-ponto, .cursor-anel { position: absolute; left: 0; top: 0; border-radius: 50%; }
.cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--champ); box-shadow: 0 0 10px rgba(229, 199, 129, .8); }
.cursor-anel { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(229, 199, 129, .5); display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease); }
.cursor-texto { font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--preto); opacity: 0; transition: opacity .3s; }
.cursor--link .cursor-anel { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(229, 199, 129, .85); background: rgba(229, 199, 129, .08); }
.cursor--ver .cursor-anel { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-color: transparent; background: var(--grad-ouro); }
.cursor--ver .cursor-texto { opacity: 1; }
.cursor--ver .cursor-ponto, .cursor--oculto .cursor-ponto, .cursor--oculto .cursor-anel { opacity: 0; }
.tem-cursor, .tem-cursor a, .tem-cursor button, .tem-cursor label { cursor: none; }
.tem-cursor input, .tem-cursor textarea { cursor: text; }

/* ---------- topo ---------- */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px var(--m) 0; transition: transform .7s var(--ease); pointer-events: none; }
.topo.escondido { transform: translateY(-120%); }
.topo-in { pointer-events: all; display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 10px 0 24px; border-radius: 99px; background: rgba(7, 23, 26, .32); transition: background-color .9s var(--ease); }
html[data-tema="claro"] .topo-in { background: rgba(247, 243, 234, .55); }
.topo-in.vidro { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 50px -30px rgba(0, 0, 0, .55); }
.topo-nav { display: flex; gap: 6px; margin: 0 auto; }
.topo-nav a { position: relative; padding: 10px 14px; font-size: 14px; color: var(--tinta-2); transition: color .4s; }
.topo-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px; background: var(--ouro); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.topo-nav a:hover, .topo-nav a.ativo { color: var(--tinta); }
.topo-nav a:hover::after, .topo-nav a.ativo::after { transform: scaleX(1); transform-origin: left; }
.topo-menu { display: none; width: 44px; height: 44px; border-radius: 50%; position: relative; }
.topo-menu span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--tinta); border-radius: 2px; transition: transform .6s var(--ease), top .6s var(--ease); }
.topo-menu span:first-child { top: 18px; }
.topo-menu span:last-child { top: 25px; }
.menu-aberto .topo-menu span:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-aberto .topo-menu span:last-child { top: 21.5px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center; padding: 110px var(--m) 40px; background: rgba(7, 23, 26, .9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .9s var(--ease-io), visibility 0s .9s; }
.menu-aberto .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease-io), visibility 0s 0s; }
.menu-nav { display: grid; gap: 4px; }
.menu-nav a { display: flex; align-items: baseline; gap: 16px; font-family: var(--serifa); font-size: clamp(38px, 9vw, 64px); line-height: 1.1; letter-spacing: -.03em; color: var(--marfim); }
.menu-nav small { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--champ); }
.menu-rodape { margin: auto 0 0; font-family: var(--serifa); font-size: 22px; color: rgba(247, 243, 234, .7); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 150px var(--m) 34px; overflow: hidden; isolation: isolate; }
.hero-video { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-video video { position: absolute; top: 50%; left: 70%; height: 122%; width: auto; aspect-ratio: 16 / 9; max-width: none; transform: translate(-50%, -50%); object-fit: cover; }
.hero-veu { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--noite) 0%, rgba(7, 23, 26, .88) 22%, rgba(7, 23, 26, .2) 52%, rgba(7, 23, 26, 0) 70%), linear-gradient(0deg, var(--noite) 0%, rgba(7, 23, 26, 0) 30%), linear-gradient(180deg, rgba(7, 23, 26, .6) 0%, rgba(7, 23, 26, 0) 22%); }
.hero-in { position: relative; max-width: 1500px; }
.hero-rotulo { margin-bottom: clamp(22px, 3vw, 40px); }
.hero-titulo { font-size: clamp(46px, 10.2vw, 184px); line-height: .9; letter-spacing: -.045em; }
.hero-base { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 64px; margin-top: clamp(30px, 4vw, 56px); }
.hero-texto { margin: 0; max-width: 470px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: var(--tinta-2); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-pe { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 7vh, 90px); padding-top: 22px; border-top: 1px solid var(--linha); }
.rolar { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2); }
.rolar-fio { position: relative; width: 1px; height: 46px; background: rgba(247, 243, 234, .16); overflow: hidden; }
.rolar-fio i { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 10px 2px rgba(229, 199, 129, .7); animation: rolar 2.4s var(--ease-io) infinite; }
@keyframes rolar { 0% { transform: translateY(-10px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(48px); opacity: 0; } }
.hero-conta { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.hero-conta b { font-family: var(--serifa); font-weight: 400; font-style: italic; font-size: 26px; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.selo-gira { position: relative; width: 108px; height: 108px; flex: none; }
.selo-gira svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 22s linear infinite; }
.selo-gira text { font-family: var(--sans); font-size: 9.6px; letter-spacing: .26em; text-transform: uppercase; fill: rgba(247, 243, 234, .62); }
.selo-mono { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 34px; font-family: var(--marca); font-weight: 600; font-size: 34px; line-height: 1; color: var(--marfim); }
.selo-mono i, .disco-mono i { display: inline-block; width: .4em; height: .07em; margin-left: .07em; background: var(--grad-ouro); border-radius: 1px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- faixa ---------- */
.faixa { position: relative; padding: clamp(40px, 6vw, 90px) 0; border-bottom: 1px solid var(--linha); overflow: hidden; }
.faixa-linha { display: flex; white-space: nowrap; }
.faixa-linha--2 { margin-top: 6px; opacity: .32; }
.faixa-trilho { display: flex; align-items: center; flex: none; gap: clamp(22px, 2.6vw, 44px); padding-right: clamp(22px, 2.6vw, 44px); font-family: var(--serifa); font-size: clamp(46px, 7vw, 124px); line-height: 1.12; letter-spacing: -.035em; will-change: transform; }
.faixa-linha--2 .faixa-trilho { font-size: clamp(28px, 3.6vw, 62px); }
.faixa-trilho em { font-style: italic; background: var(--ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.faixa-trilho i { flex: none; width: .16em; height: .16em; border-radius: 50%; background: var(--luz); box-shadow: 0 0 0 .06em rgba(229, 199, 129, .2), 0 0 .3em .05em rgba(229, 199, 129, .6); }

/* ---------- manifesto ---------- */
.manifesto { position: relative; padding: clamp(110px, 14vw, 220px) 0 clamp(90px, 11vw, 170px); }
.manifesto-texto { grid-column: 4 / 13; margin: 0; font-family: var(--serifa); font-weight: 400; font-size: clamp(30px, 3.9vw, 68px); line-height: 1.1; letter-spacing: -.028em; text-wrap: pretty; }
.manifesto-texto .palavra { opacity: .13; }
.manifesto-texto em .palavra { padding-top: .14em; margin-top: -.14em; background: var(--ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.manifesto-lado { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); margin-top: clamp(60px, 8vw, 120px); }
.manifesto-item { padding-top: 22px; border-top: 1px solid var(--linha); }
.manifesto-n { display: block; font-family: var(--serifa); font-style: italic; font-size: clamp(36px, 3.4vw, 56px); line-height: 1; letter-spacing: -.03em; background: var(--ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
.manifesto-item p { margin: 12px 0 0; color: var(--tinta-2); max-width: 300px; }

/* ---------- hub 360 ---------- */
.hub { position: relative; }
.hub-fixo { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: center; padding: 104px var(--m) 40px; }
.hub-esq { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(20px, 3vh, 36px); }
.hub-esq .sec-rotulo { padding-top: 0; }
.hub .titulo-sec { font-size: clamp(40px, 4.4vw, 80px); }
.hub-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.hub-lista li { position: relative; display: flex; align-items: baseline; gap: 18px; padding: clamp(6px, 1.05vh, 11px) 0; font-family: var(--serifa); font-size: clamp(19px, 1.7vw, 29px); line-height: 1.15; letter-spacing: -.02em; color: var(--tinta-3); cursor: pointer; transition: color .6s var(--ease), transform .6s var(--ease); }
.hub-lista li span { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; color: var(--tinta-3); transition: color .6s; }
.hub-lista li small { font-family: var(--sans); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; border: 1px solid rgba(229, 199, 129, .3); color: var(--champ); align-self: center; }
.hub-lista li.ativo { color: var(--tinta); transform: translateX(10px); }
.hub-lista li.ativo span { color: var(--champ); }
.hub-dir { position: relative; height: 100%; display: grid; place-items: center; }
.orbita { position: relative; width: min(100%, 80vh); aspect-ratio: 1; }
.disco.vidro::before { display: none; }
.orbita-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita-anel { fill: none; stroke: rgba(229, 199, 129, .42); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; }
.orbita-anel--2 { stroke: rgba(229, 199, 129, .14); stroke-dasharray: 1 9; }
.orbita-fios path { fill: none; stroke: rgba(229, 199, 129, .2); stroke-width: 1.2; }
.orbita-fios path.ativo { stroke: url(#g-fio); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(229, 199, 129, .6)); }
.orbita-fios circle { fill: var(--luz); filter: drop-shadow(0 0 6px rgba(229, 199, 129, .95)); }
.orbita-nos { position: absolute; inset: 0; }
.no-orb { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; will-change: transform, opacity; }
.no-orb-bola { position: relative; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF8E6 0%, #E5C781 45%, #9A773A 100%); box-shadow: 0 0 0 5px rgba(229, 199, 129, .12), 0 0 22px 4px rgba(229, 199, 129, .45); flex: none; transform: translateX(-50%); }
.no-orb-rot { padding: 7px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; color: var(--marfim); background: rgba(7, 23, 26, .5); border: 1px solid rgba(247, 243, 234, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateX(-4px); transition: background-color .5s, border-color .5s, color .5s; }
.no-orb.ativo .no-orb-rot { background: var(--grad-ouro); color: var(--preto); border-color: transparent; }
.no-orb.ativo .no-orb-bola { box-shadow: 0 0 0 7px rgba(229, 199, 129, .2), 0 0 34px 8px rgba(229, 199, 129, .7); }
.disco { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 5; display: grid; place-items: center; container-type: inline-size; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 46%), linear-gradient(160deg, rgba(247, 243, 234, .14), rgba(247, 243, 234, .02)); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 -18px 40px rgba(0, 52, 61, .45), 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 80px rgba(201, 165, 95, .14); }
.disco-mono { position: relative; z-index: 1; display: flex; align-items: baseline; font-family: var(--marca); font-weight: 600; font-size: 44cqi; line-height: 1; color: var(--marfim); padding-left: 8cqi; text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.disco-anel { position: absolute; inset: -1px; border-radius: 50%; padding: 1.5px; background: conic-gradient(from 0deg, rgba(229, 199, 129, 0) 0deg, rgba(240, 214, 152, .95) 50deg, rgba(229, 199, 129, 0) 120deg, rgba(229, 199, 129, 0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gira 6s linear infinite; }
.hub-cartao { position: absolute; right: 0; bottom: clamp(10px, 4vh, 40px); z-index: 6; display: flex; gap: 18px; width: min(380px, 80%); padding: 20px 22px; border-radius: var(--raio); }
.hub-cartao-n { font-family: var(--serifa); font-style: italic; font-size: 34px; line-height: 1; background: var(--ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hub-cartao-t { margin: 2px 0 6px; font-family: var(--serifa); font-weight: 400; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.hub-cartao-p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.hub-elo { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.hub-elo path { fill: none; stroke: rgba(229, 199, 129, .55); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.hub-elo circle { fill: var(--luz); filter: drop-shadow(0 0 5px rgba(229, 199, 129, .9)); }

/* ---------- CRM ---------- */
.crm { position: relative; padding: clamp(110px, 13vw, 200px) 0 clamp(90px, 10vw, 160px); }
.crm-topo .sec-texto, .sites-topo .sec-texto { grid-column: 4 / 10; }
.crm-cena { position: relative; margin-top: clamp(60px, 8vw, 120px); padding: 0 var(--m); perspective: 1800px; }
.crm-palco { position: relative; width: min(1180px, 100%); margin: 0 auto; aspect-ratio: 16 / 9.4; container-type: inline-size; transform-style: preserve-3d; transform-origin: 50% 80%; }
.painel { position: absolute; inset: 0; display: grid; grid-template-columns: 19% 1fr; border-radius: 1.8cqi; overflow: hidden; background: linear-gradient(170deg, rgba(14, 38, 43, .92), rgba(7, 23, 26, .96)); font-size: 1cqi; color: var(--marfim); }
.painel-lado { display: flex; flex-direction: column; gap: 2.2em; padding: 2.4em 1.8em; border-right: 1px solid rgba(247, 243, 234, .07); background: rgba(0, 0, 0, .14); }
.painel-marca { display: flex; align-items: center; gap: .9em; }
.painel-ini { display: grid; place-items: center; width: 3em; height: 3em; border-radius: .9em; background: var(--grad-ouro); color: var(--preto); font-family: var(--marca); font-weight: 600; font-size: 1.05em; flex: none; transition: transform .5s var(--ease); }
.painel-ini--p { width: 2.6em; height: 2.6em; font-size: .9em; }
.painel-nome { font-family: var(--marca); font-weight: 600; font-size: 1.35em; letter-spacing: -.01em; white-space: nowrap; }
.painel-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; font-size: 1.1em; color: rgba(247, 243, 234, .55); }
.painel-menu li { display: flex; align-items: center; gap: .9em; padding: .75em .9em; border-radius: .7em; }
.painel-menu li i { width: .9em; height: .9em; border-radius: .25em; border: 1.5px solid currentColor; opacity: .7; }
.painel-menu li.ativo { background: rgba(229, 199, 129, .1); color: var(--champ); }
.painel-dominio { margin-top: auto; display: flex; align-items: center; gap: .7em; padding: .8em 1em; border-radius: .7em; background: rgba(247, 243, 234, .05); font-size: .95em; color: rgba(247, 243, 234, .6); white-space: nowrap; overflow: hidden; }
.painel-cadeado { width: .8em; height: .7em; border-radius: .15em; background: var(--champ); position: relative; flex: none; }
.painel-cadeado::before { content: ""; position: absolute; left: .15em; right: .15em; top: -.4em; height: .5em; border: .12em solid var(--champ); border-bottom: 0; border-radius: .4em .4em 0 0; }
.painel-corpo { display: flex; flex-direction: column; gap: 2em; padding: 2.4em 2.6em; min-width: 0; }
.painel-cab { display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.painel-cab small { display: block; font-size: 1.05em; color: rgba(247, 243, 234, .5); }
.painel-cab strong { font-family: var(--serifa); font-weight: 400; font-size: 2.5em; letter-spacing: -.02em; }
.painel-busca { display: flex; align-items: center; gap: .8em; padding: .9em 1.3em; border-radius: 99px; background: rgba(247, 243, 234, .05); border: 1px solid rgba(247, 243, 234, .07); font-size: 1.05em; color: rgba(247, 243, 234, .4); white-space: nowrap; }
.painel-busca span { width: .9em; height: .9em; border-radius: 50%; border: 1.5px solid currentColor; }
.painel-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3em; }
.kpi { display: flex; flex-direction: column; gap: .3em; padding: 1.4em 1.5em; border-radius: 1.1em; background: rgba(247, 243, 234, .04); border: 1px solid rgba(247, 243, 234, .06); }
.kpi small { font-size: 1em; color: rgba(247, 243, 234, .52); }
.kpi strong { font-family: var(--serifa); font-weight: 400; font-size: 3em; line-height: 1.05; letter-spacing: -.03em; }
.kpi em { font-style: normal; font-size: .95em; color: rgba(247, 243, 234, .45); }
.kpi-sobe { color: var(--champ) !important; }
.kpi--ouro { background: linear-gradient(160deg, rgba(229, 199, 129, .16), rgba(229, 199, 129, .04)); border-color: rgba(229, 199, 129, .22); }
.kpi-barra { height: .45em; border-radius: 99px; background: rgba(247, 243, 234, .08); overflow: hidden; margin-top: .5em; }
.kpi-barra i { display: block; height: 100%; width: 82%; border-radius: inherit; background: var(--grad-ouro); transform-origin: left; }
.painel-meio { flex: 1; display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.3em; min-height: 0; }
.funil, .grafico { display: flex; flex-direction: column; gap: 1.2em; padding: 1.5em; border-radius: 1.1em; background: rgba(247, 243, 234, .035); border: 1px solid rgba(247, 243, 234, .06); min-height: 0; }
.funil-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.15em; }
.funil-cab strong { font-weight: 500; }
.funil-cab small { font-size: .85em; color: rgba(247, 243, 234, .4); }
.funil-cols { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; }
.funil-col { display: flex; flex-direction: column; gap: .7em; padding: .9em; border-radius: .8em; background: rgba(0, 0, 0, .14); }
.funil-col small { font-size: .95em; color: rgba(247, 243, 234, .5); margin-bottom: .2em; }
.funil-col--ouro { background: rgba(229, 199, 129, .07); }
.card-lead { display: flex; flex-direction: column; gap: .2em; padding: .85em .9em; border-radius: .6em; background: rgba(247, 243, 234, .07); border: 1px solid rgba(247, 243, 234, .06); }
.card-lead b { font-weight: 500; font-size: 1.05em; white-space: nowrap; }
.card-lead i { font-style: normal; font-size: .88em; color: rgba(247, 243, 234, .45); }
.card-lead--fraco { height: 3.6em; opacity: .4; }
.card-lead--ouro { background: linear-gradient(160deg, rgba(229, 199, 129, .26), rgba(229, 199, 129, .08)); border-color: rgba(229, 199, 129, .3); }
.card-lead--ouro i { color: var(--champ); }
.card-lead--move { box-shadow: 0 1.4em 2.4em -1em rgba(0, 0, 0, .6); border-color: rgba(229, 199, 129, .4); }
.grafico-svg { flex: 1; width: 100%; min-height: 0; }
.grafico-dias { display: flex; justify-content: space-between; font-size: .9em; color: rgba(247, 243, 234, .35); }
.crm-cel { position: absolute; right: -3%; bottom: -12%; width: 18.5%; transform: translateZ(80px); }
.cel { position: relative; aspect-ratio: 9 / 19.2; border-radius: 3.6cqi; padding: .55cqi; background: linear-gradient(140deg, #F0D9A2, #B99450 40%, #E5C781 60%, #9A773A); box-shadow: 0 4cqi 8cqi -2cqi rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .3); }
.cel-tela { height: 100%; border-radius: 3.1cqi; background: #0B0F10; overflow: hidden; display: flex; flex-direction: column; font-size: .95cqi; color: var(--marfim); }
.cel-cab { display: flex; align-items: center; gap: .8em; padding: 3.4em 1.3em 1.1em; background: rgba(247, 243, 234, .05); border-bottom: 1px solid rgba(247, 243, 234, .06); }
.cel-cab b { display: block; font-size: 1.15em; font-weight: 600; }
.cel-cab small { font-size: .9em; color: var(--champ); }
.cel-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .8em; padding: 1.3em; }
.bolha { margin: 0; max-width: 84%; padding: .8em 1em; border-radius: 1.1em; font-size: 1.05em; line-height: 1.35; }
.bolha--ela { align-self: flex-start; background: rgba(247, 243, 234, .09); border-bottom-left-radius: .3em; }
.bolha--nos { align-self: flex-end; background: linear-gradient(160deg, rgba(229, 199, 129, .32), rgba(229, 199, 129, .16)); border-bottom-right-radius: .3em; }
.bolha-ia { display: inline-block; margin-right: .5em; padding: .1em .45em; border-radius: .4em; background: var(--champ); color: var(--preto); font-size: .8em; font-weight: 700; letter-spacing: .06em; }
.aviso { position: absolute; display: flex; align-items: center; gap: 1.1cqi; padding: 1.2cqi 1.6cqi 1.2cqi 1.2cqi; border-radius: 1.6cqi; font-size: 1.05cqi; color: var(--marfim); transform: translateZ(120px); white-space: nowrap; }
.aviso b { display: block; font-size: 1.25em; font-weight: 600; }
.aviso small { color: rgba(247, 243, 234, .6); font-size: 1em; }
.aviso-ic { display: grid; place-items: center; width: 3.4cqi; height: 3.4cqi; border-radius: 1cqi; background: rgba(247, 243, 234, .1); flex: none; }
.aviso-ic svg { width: 55%; height: 55%; }
.aviso-ic--ouro { background: var(--grad-ouro); color: var(--preto); }
.aviso--1 { left: -4%; top: 22%; }
.aviso--2 { left: 30%; bottom: -5%; }
.crm-recursos { margin-top: clamp(90px, 10vw, 150px); row-gap: 40px; }
.recurso { grid-column: span 3; padding-top: 24px; border-top: 1px solid var(--linha); }
.recurso-n { font-size: 11px; letter-spacing: .14em; color: var(--champ); }
.recurso h3, .linha-item span { margin: 16px 0 10px; font-family: var(--serifa); font-weight: 400; font-size: clamp(24px, 2vw, 32px); letter-spacing: -.02em; line-height: 1.1; }
.recurso p { margin: 0; color: var(--tinta-2); max-width: 300px; }
.crm-cta, .sites-cta { grid-column: 1 / -1; justify-self: start; margin-top: 20px; }

/* ---------- websites ---------- */
.sites { position: relative; padding: clamp(110px, 13vw, 200px) 0 clamp(90px, 10vw, 160px); }
.sites-cena { position: relative; width: min(1320px, calc(100% - 2 * var(--m))); margin: clamp(60px, 8vw, 110px) auto 0; aspect-ratio: 16 / 10; container-type: inline-size; }
.navegador { position: absolute; border-radius: 1.4cqi; overflow: hidden; background: #FFFDF8; box-shadow: 0 0 0 1px rgba(11, 15, 16, .07), 0 5cqi 9cqi -4cqi rgba(60, 46, 20, .45); }
.navegador--frente { left: 14%; top: 4%; width: 68%; aspect-ratio: 16 / 10.4; z-index: 2; display: flex; flex-direction: column; }
.navegador--tras { left: 0; top: 22%; width: 40%; aspect-ratio: 4 / 3; z-index: 1; opacity: .9; display: flex; flex-direction: column; }
.navegador--cel { right: 2%; top: 26%; width: 19%; aspect-ratio: 9 / 19; z-index: 3; border-radius: 3cqi; padding: .5cqi; background: var(--preto); }
.navegador--cel .nav-tela { height: 100%; border-radius: 2.6cqi; }
.nav-barra { display: flex; align-items: center; gap: .6cqi; height: 3.2cqi; padding: 0 1.4cqi; background: #EFE9DC; flex: none; }
.nav-barra i { width: .85cqi; height: .85cqi; border-radius: 50%; background: rgba(11, 15, 16, .18); }
.nav-barra span { margin: 0 auto; padding: .35cqi 2cqi; border-radius: 99px; background: rgba(255, 255, 255, .8); font-size: .95cqi; color: rgba(11, 15, 16, .55); }
.nav-tela { position: relative; flex: 1; overflow: hidden; background: #0E1C1F; font-size: 1cqi; }
.nav-rola { will-change: transform; }
.ts-hero { position: relative; height: 60cqi; padding: 2.6em 3.6em; display: flex; flex-direction: column; color: var(--marfim); background: radial-gradient(60% 70% at 85% 10%, rgba(0, 72, 84, .7), rgba(0, 52, 61, 0)), #0E1C1F; overflow: hidden; }
.ts-menu { display: flex; align-items: center; gap: 2.4em; font-size: 1.1em; color: rgba(247, 243, 234, .6); }
.ts-menu b { margin-right: auto; font-family: var(--serifa); font-size: 1.8em; font-weight: 500; color: var(--marfim); letter-spacing: -.02em; }
.ts-menu b em { color: var(--champ); font-style: normal; }
.ts-titulo { margin: 4.6em 0 0; max-width: 58%; font-family: var(--serifa); font-size: 5.4em; line-height: .98; letter-spacing: -.035em; }
.ts-titulo em { color: var(--champ); }
.ts-botao { align-self: flex-start; margin-top: 2.4em; padding: 1em 2em; border-radius: 99px; background: var(--grad-ouro); color: var(--preto); font-size: 1.1em; font-weight: 600; }
.ts-foto { position: absolute; right: 3.6em; bottom: 0; width: 34%; height: 76%; border-radius: 99em 99em 0 0; background: linear-gradient(180deg, #D9C7A4 0%, #B89A6A 60%, #7E6440 100%); overflow: hidden; }
.ts-foto::before { content: ""; position: absolute; left: 18%; right: 18%; top: 14%; bottom: 0; border-radius: 99em 99em 0 0; background: linear-gradient(180deg, #F4EAD6, #D7C29B); box-shadow: inset 0 -2em 4em rgba(126, 100, 64, .35); }
.ts-foto::after { content: ""; position: absolute; left: 38%; right: 38%; top: 36%; bottom: 0; border-radius: 99em 99em 0 0; background: #2A3A3C; }
.ts-bloco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; padding: 4em 3.6em; background: #F7F3EA; color: var(--preto); }
.ts-col { display: flex; flex-direction: column; gap: .8em; }
.ts-n { font-size: .9em; color: var(--ouro-escuro); letter-spacing: .1em; }
.ts-col b { font-family: var(--serifa); font-weight: 400; font-size: 2.2em; letter-spacing: -.02em; }
.ts-col s, .tl-prod s, .tl-prod b { display: block; height: .7em; border-radius: 99px; background: rgba(11, 15, 16, .1); text-decoration: none; }
.ts-col s:last-child { width: 70%; }
.ts-galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.2em; height: 26cqi; padding: 0 3.6em 4em; background: #F7F3EA; }
.ts-galeria div { border-radius: 1em; background: linear-gradient(160deg, #CDB993, #8E7650); }
.ts-galeria div:nth-child(2) { background: linear-gradient(160deg, #20393D, #0E1C1F); }
.ts-galeria div:nth-child(3) { background: linear-gradient(160deg, #EADFC9, #C9A55F); }
.ts-form { display: flex; flex-direction: column; gap: 1.2em; padding: 4em 3.6em 6em; background: #0E1C1F; color: var(--marfim); }
.ts-form p { margin: 0; font-family: var(--serifa); font-size: 3em; letter-spacing: -.03em; }
.ts-form span:not(.ts-botao) { height: 3.4em; border-radius: .8em; border: 1px solid rgba(247, 243, 234, .14); }
.ts-hero--cel { height: 100%; padding: 2em 1.6em; font-size: .62cqi; }
.ts-hero--cel .ts-titulo { max-width: 100%; margin-top: 3.4em; font-size: 4.6em; }
.ts-hero--cel .ts-foto { left: 1.6em; right: 1.6em; width: auto; height: 46%; }
.ts-hamb { width: 2.2em; height: 1em; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.tela-loja { background: #F7F3EA; padding: 2.2em 2.6em; color: var(--preto); font-size: .95cqi; }
.tl-topo { display: flex; align-items: center; gap: 1.6em; margin-bottom: 2.4em; }
.tl-topo b { margin-right: auto; font-family: var(--serifa); font-weight: 500; font-size: 2em; font-style: italic; }
.tl-topo span { width: 4em; height: .6em; border-radius: 99px; background: rgba(11, 15, 16, .12); }
.tl-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; }
.tl-prod { display: flex; flex-direction: column; gap: .8em; }
.tl-prod i { aspect-ratio: 3 / 4; border-radius: 1em; background: radial-gradient(circle at 50% 42%, #E5C781 0 22%, transparent 23%), linear-gradient(180deg, #EADFC9, #D8C8A8); }
.tl-prod:nth-child(2) i { background: radial-gradient(circle at 50% 42%, #0E1C1F 0 22%, transparent 23%), linear-gradient(180deg, #E4DCCB, #CBBFA6); }
.tl-prod:nth-child(3) i { background: radial-gradient(circle at 50% 42%, #AE8A4B 0 22%, transparent 23%), linear-gradient(180deg, #EADFC9, #D8C8A8); }
.tl-prod b { width: 70%; }
.tl-prod s { width: 40%; background: rgba(174, 138, 75, .4); }
.chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .8cqi; padding: 1cqi 1.6cqi; border-radius: 99px; font-size: clamp(11px, 1.15cqi, 15px); font-weight: 500; white-space: nowrap; color: var(--tinta); }
.chip i { width: .8cqi; height: .8cqi; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 3px rgba(201, 165, 95, .2); }
.chip--1 { left: 6%; top: 8%; }
.chip--2 { left: 74%; top: 6%; }
.chip--3 { left: 8%; bottom: 10%; }
.chip--4 { right: 6%; bottom: 4%; }
.sites-lista { margin-top: clamp(80px, 9vw, 140px); }
.linha-item { grid-column: 4 / 13; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: baseline; padding: 26px 0; border-top: 1px solid var(--linha); }
.linha-item span { margin: 0; }
.linha-item p { margin: 0; color: var(--tinta-2); }
.sites-cta { grid-column: 4 / 13; margin-top: 30px; }

/* ---------- outras frentes ---------- */
.frentes { position: relative; }
.frentes-fixo { position: relative; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 5vh, 56px); padding: 100px 0 40px; overflow: hidden; }
.frentes-cab { align-items: end; }
.frentes-cab .titulo-sec { grid-column: 4 / 10; font-size: clamp(40px, 4.6vw, 84px); }
.frentes-dica { grid-column: 10 / 13; justify-self: end; display: flex; align-items: center; gap: 16px; margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--tinta-2); }
.frentes-barra { position: relative; width: 120px; height: 1px; background: var(--linha); }
.frentes-barra i { position: absolute; inset: 0; background: var(--grad-ouro); transform: scaleX(0); transform-origin: left; }
.frentes-pos { font-variant-numeric: tabular-nums; }
.frentes-trilho { display: flex; gap: var(--col-gap); padding: 0 var(--m); width: max-content; will-change: transform; }
.frente { width: clamp(300px, 29vw, 440px); height: min(60vh, 560px); min-height: 440px; border-radius: var(--raio-g); display: flex; flex-direction: column; overflow: hidden; transform-style: preserve-3d; transition: border-color .5s; }
.frente::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(229, 199, 129, .14), transparent 45%); opacity: 0; transition: opacity .5s; }
.frente:hover::after { opacity: 1; }
.frente:hover { border-color: rgba(229, 199, 129, .28); }
.frente-arte { position: relative; flex: 1; min-height: 0; margin: 10px 10px 0; border-radius: calc(var(--raio-g) - 10px); background: radial-gradient(80% 90% at 50% 100%, rgba(0, 72, 84, .55), rgba(0, 52, 61, 0)), rgba(0, 0, 0, .18); overflow: hidden; display: grid; place-items: center; container-type: size; }
.frente-txt { min-height: 196px; padding: 22px 26px 28px; }
.frente-n { font-size: 11px; letter-spacing: .14em; color: var(--champ); }
.frente h3 { margin: 10px 0 10px; font-family: var(--serifa); font-weight: 400; font-size: clamp(25px, 2vw, 32px); letter-spacing: -.02em; line-height: 1.05; }
.frente p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); }

/* arte: aplicativos */
.aa-cel { position: relative; width: 38cqh; height: 78cqh; margin-top: 18cqh; border-radius: 6cqh; border: 1.5px solid rgba(229, 199, 129, .55); background: linear-gradient(180deg, rgba(247, 243, 234, .06), rgba(247, 243, 234, .01)); display: flex; flex-direction: column; gap: 3cqh; padding: 9cqh 4cqh 4cqh; transition: transform .8s var(--ease); }
.frente:hover .aa-cel { transform: translateY(-6cqh); }
.aa-ilha { position: absolute; top: 3cqh; left: 50%; width: 12cqh; height: 3cqh; margin-left: -6cqh; border-radius: 9px; background: rgba(247, 243, 234, .18); }
.aa-l { height: 2.6cqh; border-radius: 99px; background: rgba(247, 243, 234, .14); }
.aa-l1 { width: 60%; background: rgba(247, 243, 234, .3); }
.aa-l2 { width: 85%; }
.aa-l3 { width: 50%; }
.aa-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqh; }
.aa-cards i { height: 16cqh; border-radius: 3cqh; background: rgba(247, 243, 234, .08); }
.aa-cards i:first-child { background: linear-gradient(160deg, rgba(229, 199, 129, .5), rgba(229, 199, 129, .15)); }
.aa-bt { margin-top: auto; height: 7cqh; border-radius: 99px; background: var(--grad-ouro); }
.aa-icone { position: absolute; right: 16%; top: 16%; width: 20cqh; height: 20cqh; border-radius: 5cqh; display: grid; place-items: center; background: var(--grad-ouro); color: var(--preto); font-family: var(--marca); font-weight: 600; font-size: 11cqh; box-shadow: 0 3cqh 6cqh -2cqh rgba(0, 0, 0, .6); transform: rotate(10deg); transition: transform .8s var(--ease); }
.frente:hover .aa-icone { transform: rotate(-4deg) translateY(-3cqh) scale(1.06); }

/* arte: whatsapp */
.arte-zap { display: flex; flex-direction: column; justify-content: flex-end; gap: 4cqh; padding: 0 9% 9%; place-items: stretch; }
.az-b { margin: 0; max-width: 78%; padding: 3.6cqh 5cqh; border-radius: 4cqh 4cqh 4cqh 1cqh; font-size: max(12px, 5.2cqh); line-height: 1.3; background: rgba(247, 243, 234, .08); color: var(--marfim); }
.az-b span { margin-left: 2.4cqh; color: var(--champ); font-size: .85em; letter-spacing: -.2em; }
.az-b--ela { align-self: flex-end; border-radius: 4cqh 4cqh 1cqh 4cqh; background: linear-gradient(160deg, rgba(229, 199, 129, .3), rgba(229, 199, 129, .14)); }
.az-selo { position: absolute; right: 7%; top: 8%; display: inline-flex; align-items: center; gap: 2cqh; padding: 2.4cqh 4cqh; border-radius: 99px; font-size: max(10px, 4.4cqh); letter-spacing: .12em; text-transform: uppercase; color: var(--champ); border: 1px solid rgba(229, 199, 129, .35); }
.az-selo svg { width: 6cqh; height: 6cqh; }

/* arte: identidade */
.arte-id svg { width: 82%; color: rgba(247, 243, 234, .2); }
.ai-letra { stroke-dasharray: 340; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.frente:hover .ai-letra { animation: tracar 1.6s var(--ease) both; }
@keyframes tracar { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
.ai-cores { position: absolute; left: 9%; bottom: 9%; display: flex; gap: 2cqh; }
.ai-cores i { width: 8cqh; height: 8cqh; border-radius: 50%; border: 1px solid rgba(247, 243, 234, .2); }
.ai-cores i:nth-child(1) { background: #07171A; }
.ai-cores i:nth-child(2) { background: #00343D; }
.ai-cores i:nth-child(3) { background: #C9A55F; }
.ai-cores i:nth-child(4) { background: #F7F3EA; }

/* arte: social */
.as-grade { display: grid; grid-template-columns: repeat(3, 20cqh); gap: 2.4cqh; transform: rotate(-8deg); }
.as-grade i { aspect-ratio: 1; border-radius: 2.4cqh; background: rgba(247, 243, 234, .08); transition: transform .7s var(--ease), background-color .7s; }
.as-grade i:nth-child(2), .as-grade i:nth-child(6) { background: linear-gradient(160deg, rgba(229, 199, 129, .55), rgba(229, 199, 129, .18)); }
.as-grade i:nth-child(4) { background: rgba(0, 72, 84, .8); }
.as-grade i:nth-child(8) { background: var(--grad-ouro); }
.frente:hover .as-grade i:nth-child(odd) { transform: translateY(-2.4cqh); }
.frente:hover .as-grade i:nth-child(even) { transform: translateY(2.4cqh); }
.as-cora { position: absolute; right: 9%; top: 10%; padding: 2.4cqh 4cqh; border-radius: 99px; background: var(--grad-ouro); color: var(--preto); font-weight: 600; font-size: max(11px, 5cqh); box-shadow: 0 2cqh 5cqh -1cqh rgba(0, 0, 0, .5); }

/* arte: tráfego */
.arte-trafego svg { width: 84%; }
.at-barras rect { fill: rgba(247, 243, 234, .1); transform-box: fill-box; transform-origin: bottom; transition: transform .9s var(--ease); }
.frente:hover .at-barras rect { transform: scaleY(1.12); }
.at-linha { stroke-dasharray: 260; }

/* arte: curadoria */
.ac-carta { position: absolute; width: 40cqh; height: 54cqh; padding: 4cqh; border-radius: 4cqh; display: flex; flex-direction: column; justify-content: space-between; background: rgba(247, 243, 234, .06); border: 1px solid rgba(247, 243, 234, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .9s var(--ease); }
.ac-carta small { font-size: max(10px, 4cqh); letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 243, 234, .55); }
.ac-carta b { font-family: var(--serifa); font-weight: 400; font-style: italic; font-size: max(18px, 10cqh); color: var(--marfim); }
.ac-c1 { transform: translateX(-30cqh) rotate(-12deg); }
.ac-c2 { transform: translateY(-2cqh); z-index: 2; background: linear-gradient(160deg, rgba(229, 199, 129, .32), rgba(229, 199, 129, .1)); border-color: rgba(229, 199, 129, .4); }
.ac-c3 { transform: translateX(30cqh) rotate(12deg); }
.frente:hover .ac-c1 { transform: translateX(-38cqh) rotate(-16deg); }
.frente:hover .ac-c3 { transform: translateX(38cqh) rotate(16deg); }
.frente:hover .ac-c2 { transform: translateY(-6cqh); }

/* arte: eventos */
.arte-evento { background: radial-gradient(60% 60% at 50% 55%, rgba(229, 199, 129, .22), rgba(229, 199, 129, 0) 70%), radial-gradient(80% 90% at 50% 100%, rgba(0, 72, 84, .55), rgba(0, 52, 61, 0)), rgba(0, 0, 0, .25); }
.ae-canto { position: absolute; width: 12cqh; height: 12cqh; border: 0 solid rgba(247, 243, 234, .75); }
.ae-c1 { left: 9%; top: 11%; border-top-width: 1.5px; border-left-width: 1.5px; }
.ae-c2 { right: 9%; top: 11%; border-top-width: 1.5px; border-right-width: 1.5px; }
.ae-c3 { left: 9%; bottom: 11%; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.ae-c4 { right: 9%; bottom: 11%; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.ae-rec { position: absolute; left: calc(9% + 5cqh); top: calc(11% + 5cqh); display: inline-flex; align-items: center; gap: 2cqh; font-size: max(10px, 4.4cqh); letter-spacing: .2em; color: var(--marfim); }
.ae-rec i { width: 3.6cqh; height: 3.6cqh; border-radius: 50%; background: var(--champ); box-shadow: 0 0 2cqh var(--champ); animation: piscar 1.2s steps(2) infinite; }
@keyframes piscar { 50% { opacity: .15; } }
.ae-tc { position: absolute; right: calc(9% + 5cqh); bottom: calc(11% + 5cqh); font-size: max(10px, 4.4cqh); letter-spacing: .14em; font-variant-numeric: tabular-nums; color: rgba(247, 243, 234, .7); }
.ae-foco { width: 22cqh; height: 22cqh; border-radius: 50%; border: 1.5px solid rgba(229, 199, 129, .7); box-shadow: 0 0 0 9cqh rgba(229, 199, 129, .05); position: relative; }
.ae-foco::before, .ae-foco::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(229, 199, 129, .8); }
.ae-foco::before { width: 8cqh; height: 1.5px; margin: -.75px 0 0 -4cqh; }
.ae-foco::after { height: 8cqh; width: 1.5px; margin: -4cqh 0 0 -.75px; }

/* ---------- filme ---------- */
.filme { position: relative; padding: clamp(40px, 6vw, 90px) 0 clamp(90px, 10vw, 150px); }
.filme-moldura { position: relative; margin: 0 auto; width: 100%; aspect-ratio: 16 / 9; max-height: 100vh; overflow: hidden; background: var(--noite); will-change: clip-path; }
.filme-video { width: 100%; height: 100%; object-fit: cover; }
.filme-rever { position: absolute; right: var(--m); bottom: 28px; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: 99px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .6s; }
.filme-rever svg { width: 16px; height: 16px; color: var(--champ); }
.filme-rever.visivel { opacity: 1; pointer-events: all; }
.filme-legenda { margin-top: clamp(30px, 4vw, 56px); }
.filme-legenda p { grid-column: 4 / 10; margin: 0; font-family: var(--serifa); font-size: clamp(22px, 2vw, 32px); line-height: 1.3; letter-spacing: -.015em; color: var(--tinta-2); }

/* ---------- método ---------- */
.metodo { position: relative; padding: clamp(110px, 13vw, 200px) 0 clamp(110px, 12vw, 190px); }
.metodo-passos { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); margin-top: clamp(70px, 9vw, 130px); padding: 0 var(--m); }
.metodo-fio { position: absolute; left: var(--m); right: var(--m); top: 6px; height: 1px; background: var(--linha); }
.metodo-fio-luz { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro), var(--champ)); transform: scaleX(0); transform-origin: left; }
.passo { position: relative; padding-top: 44px; }
.passo-no { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--marfim-2); border: 1px solid rgba(11, 15, 16, .2); transition: background-color .5s, box-shadow .5s, border-color .5s; }
.passo.aceso .passo-no { background: var(--luz); border-color: var(--ouro); box-shadow: 0 0 0 5px rgba(201, 165, 95, .2), 0 0 18px 4px rgba(201, 165, 95, .55); }
.passo-n { font-family: var(--serifa); font-style: italic; font-size: clamp(56px, 6vw, 104px); line-height: 1; letter-spacing: -.04em; background: var(--ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.passo h3 { margin: 18px 0 12px; font-family: var(--serifa); font-weight: 400; font-size: clamp(26px, 2.2vw, 36px); letter-spacing: -.02em; }
.passo p { margin: 0; color: var(--tinta-2); max-width: 290px; }

/* ---------- portfólio ---------- */
.portfolio { position: relative; padding: clamp(110px, 13vw, 200px) 0 clamp(90px, 10vw, 160px); }
.portfolio-cab { row-gap: 30px; align-items: end; }
.portfolio-cab .titulo-mega { grid-column: 1 / 13; }
.portfolio-cab .sec-texto { grid-column: 1 / 6; margin: 0; }
.filtros { grid-column: 6 / 13; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.filtro { height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--linha); font-size: 13.5px; color: var(--tinta-2); transition: background-color .5s, color .5s, border-color .5s; }
.filtro:hover { color: var(--tinta); border-color: rgba(229, 199, 129, .4); }
.filtro.ativo { background: var(--grad-ouro); color: var(--preto); border-color: transparent; }
.filtro sup { margin-left: 4px; font-size: 10px; opacity: .6; }
.portfolio-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(70px, 7.2vw, 130px); grid-auto-flow: dense; gap: var(--col-gap); margin-top: clamp(50px, 6vw, 90px); padding: 0 var(--m); }
.projeto { position: relative; grid-column: span 4; grid-row: span 4; border-radius: var(--raio-g); overflow: hidden; background: var(--noite-2); isolation: isolate; cursor: pointer; }
.projeto-midia { position: absolute; inset: 0; z-index: -1; }
.projeto-midia img, .projeto-midia video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease), opacity .6s; }
.projeto-midia video { position: absolute; inset: 0; opacity: 0; }
.projeto:hover .projeto-midia img, .projeto:hover .projeto-midia video { transform: scale(1.02); }
.projeto:hover .projeto-midia video { opacity: 1; }
.projeto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7, 23, 26, .92) 0%, rgba(7, 23, 26, .2) 42%, rgba(7, 23, 26, 0) 60%); }
.projeto-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: clamp(18px, 2vw, 30px); color: var(--marfim); }
.projeto-cat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--champ); }
.projeto-titulo { margin: 8px 0 6px; font-family: var(--serifa); font-weight: 400; font-size: clamp(22px, 2.1vw, 36px); line-height: 1.05; letter-spacing: -.025em; }
.projeto-meta { font-size: 13px; color: rgba(247, 243, 234, .6); }
.projeto-seta { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid rgba(247, 243, 234, .25); transition: background-color .5s, color .5s, transform .6s var(--ease), border-color .5s; }
.projeto-seta svg { width: 18px; height: 18px; }
.projeto:hover .projeto-seta { background: var(--grad-ouro); color: var(--preto); border-color: transparent; transform: rotate(45deg); }
.projeto-exemplo { position: absolute; left: 18px; top: 18px; padding: 6px 11px; border-radius: 99px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 243, 234, .8); background: rgba(7, 23, 26, .45); border: 1px solid rgba(247, 243, 234, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.projeto.some { display: none; }
.portfolio-vazio { display: none; margin: 40px var(--m) 0; color: var(--tinta-2); }
.portfolio-vazio.visivel { display: block; }

/* modal do projeto */
.modal { width: min(1180px, calc(100% - 2 * var(--m))); max-width: none; max-height: calc(100vh - 60px); padding: 0; border: 0; border-radius: var(--raio-g); background: var(--noite-2); color: var(--marfim); overflow: hidden; box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(247, 243, 234, .08); }
.modal::backdrop { background: rgba(4, 12, 14, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal[open] { animation: modal-entra .7s var(--ease); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(40px) scale(.98); } }
.modal-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); max-height: calc(100vh - 60px); }
.modal-midia { position: relative; overflow-y: auto; background: #050F11; display: grid; gap: 8px; align-content: start; }
.modal-midia img, .modal-midia video { width: 100%; height: auto; }
.modal-info { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3.4vw, 54px); overflow-y: auto; }
.modal-cat { color: var(--champ); }
.modal-titulo { margin: 0; font-family: var(--serifa); font-weight: 400; font-size: clamp(32px, 3vw, 52px); line-height: 1; letter-spacing: -.03em; }
.modal-ficha { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 6px 0 0; padding: 18px 0; border-top: 1px solid rgba(247, 243, 234, .1); border-bottom: 1px solid rgba(247, 243, 234, .1); font-size: 14px; }
.modal-ficha dt { color: rgba(247, 243, 234, .5); }
.modal-ficha dd { margin: 0; }
.modal-desc { margin: 0; color: rgba(247, 243, 234, .72); line-height: 1.65; }
.modal-link { align-self: flex-start; margin-top: auto; }
.modal-fechar { position: absolute; right: 18px; top: 18px; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; }
.modal-fechar svg { width: 18px; height: 18px; }

/* ---------- contato ---------- */
.contato { position: relative; padding: clamp(110px, 13vw, 200px) 0 clamp(90px, 10vw, 150px); overflow: hidden; isolation: isolate; }
.contato-video { position: absolute; right: -6%; top: 50%; z-index: -1; width: min(62vw, 900px); aspect-ratio: 1; transform: translateY(-50%); -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); opacity: .85; }
.contato-video video { width: 100%; height: 100%; object-fit: cover; }
.contato-in { align-items: start; row-gap: 60px; }
.contato-esq { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 30px; }
.contato-esq .sec-rotulo { padding-top: 0; }
.titulo-mega--c { font-size: clamp(54px, 7.4vw, 136px); line-height: .92; letter-spacing: -.045em; }
.contato-canais { display: grid; margin-top: 20px; border-top: 1px solid var(--linha); }
.canal { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--linha); transition: padding .6s var(--ease), color .4s; }
.canal > svg:first-child { width: 22px; height: 22px; color: var(--champ); flex: none; }
.canal span { flex: 1; display: flex; flex-direction: column; }
.canal b { font-weight: 500; font-size: 17px; }
.canal small { font-size: 13px; color: var(--tinta-2); }
.canal-seta { width: 20px; height: 20px; color: var(--tinta-3); transition: transform .6s var(--ease), color .4s; }
.canal:hover { padding-left: 12px; }
.canal:hover .canal-seta { transform: rotate(45deg); color: var(--champ); }
.canal.inativo { display: none; }
.form { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.6vw, 38px); border-radius: var(--raio-g); }
.form-t { margin: 0 0 4px; font-family: var(--serifa); font-size: 28px; letter-spacing: -.02em; }
.form-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { position: relative; display: block; }
.campo input, .campo textarea { width: 100%; padding: 24px 16px 10px; border-radius: 14px; border: 1px solid rgba(247, 243, 234, .12); background: rgba(7, 23, 26, .35); color: var(--marfim); font: inherit; font-size: 15px; resize: none; transition: border-color .4s, background-color .4s; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: rgba(229, 199, 129, .6); background: rgba(7, 23, 26, .55); }
.campo span { position: absolute; left: 17px; top: 17px; font-size: 15px; color: rgba(247, 243, 234, .5); pointer-events: none; transform-origin: left top; transition: transform .45s var(--ease), color .4s; }
.campo input:focus + span, .campo input:not(:placeholder-shown) + span, .campo textarea:focus + span, .campo textarea:not(:placeholder-shown) + span { transform: translateY(-9px) scale(.74); color: var(--champ); }
.campo.erro input { border-color: rgba(229, 199, 129, .9); }
.form-interesses { margin: 0; padding: 0; border: 0; }
.form-interesses legend { margin-bottom: 10px; font-size: 13px; color: rgba(247, 243, 234, .6); }
.interesses { display: flex; flex-wrap: wrap; gap: 8px; }
.interesse { position: relative; }
.interesse input { position: absolute; opacity: 0; pointer-events: none; }
.interesse span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(247, 243, 234, .14); font-size: 13px; color: rgba(247, 243, 234, .75); transition: background-color .4s, color .4s, border-color .4s; cursor: pointer; }
.interesse input:checked + span { background: var(--grad-ouro); border-color: transparent; color: var(--preto); }
.interesse input:focus-visible + span { outline: 1.5px solid var(--champ); outline-offset: 3px; }
.form-aviso { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--champ); }

/* ---------- rodapé ---------- */
.rodape { position: relative; padding: clamp(80px, 9vw, 130px) 0 30px; border-top: 1px solid var(--linha); overflow: hidden; }
.rodape-in { row-gap: 36px; }
.rodape-col { grid-column: span 3; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.rodape-col small { margin-bottom: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-3); }
.rodape-col a { color: var(--tinta-2); transition: color .4s; align-self: flex-start; }
.rodape-col a:hover { color: var(--champ); }
.rodape-col p { margin: 0; color: var(--tinta-2); max-width: 260px; }
.rodape-col p a { color: var(--tinta); text-decoration: underline; text-decoration-color: rgba(229, 199, 129, .5); text-underline-offset: 3px; }
.rodape-topo { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }
.rodape-topo svg { width: 16px; height: 16px; transform: rotate(-45deg); }
.rodape-marca { display: flex; align-items: baseline; justify-content: center; margin: clamp(60px, 8vw, 120px) 0 clamp(26px, 3vw, 40px); padding: 0 var(--m); font-family: var(--marca); font-size: clamp(56px, 15.6vw, 290px); line-height: .8; letter-spacing: -.035em; color: var(--marfim); white-space: nowrap; }
.rm-une { font-weight: 600; }
.rm-emp { font-weight: 300; margin-left: .16em; }
.rodape-marca .letra { display: inline-block; }
.rm-traco { display: inline-block; width: .4em; height: .07em; margin-left: .07em; background: var(--grad-ouro); border-radius: .01em; transform-origin: left; }
.rodape-base { row-gap: 10px; padding-top: 24px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-3); }
.rodape-base > span:first-child { grid-column: 1 / 7; }
.rodape-base > span:last-child { grid-column: 7 / 13; justify-self: end; font-family: var(--serifa); font-size: 16px; color: var(--tinta-2); }

/* ---------- estados iniciais das entradas (só com JS e com movimento) ---------- */
html.js.movimento [data-entra] { opacity: 0; transform: translateY(28px); }

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  .topo-nav a { padding: 10px 10px; }
  .crm-cel { width: 25%; }
}
@media (max-width: 980px) {
  .topo-nav, .topo-cta { display: none; }
  .topo-menu { display: block; margin-left: auto; }
  .topo-in { padding: 0 6px 0 20px; height: 58px; }
  .sec-rotulo { grid-column: 1 / -1; margin-bottom: 26px; padding-top: 0; }
  .titulo-sec, .titulo-sec--g, .sec-texto, .crm-topo .sec-texto, .sites-topo .sec-texto, .manifesto-texto, .manifesto-lado, .linha-item, .sites-cta, .filme-legenda p { grid-column: 1 / -1; }
  .manifesto-lado { grid-template-columns: 1fr; gap: 26px; }
  .hub-fixo { height: auto; grid-template-columns: 1fr; padding-top: 110px; padding-bottom: 80px; gap: 40px; }
  .hub-dir { height: auto; }
  .orbita { width: min(100%, 560px); }
  .hub-cartao { position: relative; right: auto; bottom: auto; width: 100%; margin-top: -10px; }
  .hub-lista li.ativo { transform: none; }
  .recurso { grid-column: span 6; }
  .frentes-fixo { height: auto; padding: 110px 0 60px; }
  .frentes-cab .titulo-sec { grid-column: 1 / -1; }
  .frentes-dica { display: none; }
  .frentes-trilho { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scrollbar-width: none; }
  .frentes-trilho::-webkit-scrollbar { display: none; }
  .frente { flex: none; width: min(82vw, 400px); height: auto; min-height: 0; scroll-snap-align: center; }
  .frente-arte { flex: none; height: 250px; }
  .metodo-passos { grid-template-columns: 1fr 1fr; row-gap: 60px; }
  .metodo-fio { display: none; }
  .passo-no { display: none; }
  .passo { padding-top: 24px; border-top: 1px solid var(--linha); }
  .portfolio-cab .sec-texto, .filtros { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; }
  .contato-esq, .form { grid-column: 1 / -1; }
  .contato-video { top: 18%; width: 100vw; right: -30%; opacity: .5; }
  .rodape-col { grid-column: span 6; }
  .modal-in { grid-template-columns: 1fr; overflow-y: auto; }
  .modal-midia { overflow: visible; }
}
@media (max-width: 820px) {
  .hero { padding-top: 120px; justify-content: flex-end; }
  .hero-video video { left: 50%; top: 34%; height: 78%; }
  .hero-veu { background: linear-gradient(0deg, var(--noite) 0%, rgba(7, 23, 26, .92) 38%, rgba(7, 23, 26, 0) 70%), linear-gradient(180deg, rgba(7, 23, 26, .7) 0%, rgba(7, 23, 26, 0) 25%); }
  .hero-pe .hero-conta { display: none; }
  .selo-gira { width: 88px; height: 88px; }
  .selo-mono { padding-top: 27px; font-size: 28px; }
  .crm-cena { padding: 0; overflow: hidden; }
  .crm-palco { width: 150%; margin-left: 4%; }
  .aviso--1 { left: 2%; top: 4%; }
  .aviso--2 { left: 14%; bottom: 2%; }
  .sites-cena { width: 140%; margin-left: -8%; }
  .linha-item { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .recurso { grid-column: 1 / -1; }
  .metodo-passos { grid-template-columns: 1fr; }
  .portfolio-grade { grid-auto-rows: 92px; }
  .projeto { grid-column: 1 / -1 !important; grid-row: span 4 !important; }
  .form-campos { grid-template-columns: 1fr; }
  .rodape-base > span:first-child, .rodape-base > span:last-child { grid-column: 1 / -1; justify-self: start; }
  .botao { height: 52px; padding: 0 22px; }
  .hero-acoes { width: 100%; }
  .hero-acoes .botao { flex: 1; justify-content: center; }
}
@media (max-height: 760px) and (min-width: 981px) {
  .hub-lista li { padding: 4px 0; font-size: clamp(17px, 1.5vw, 24px); }
  .hub .titulo-sec { font-size: clamp(36px, 3.6vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .grao { display: none; }
}

/* cenas mais largas que a tela (CRM e sites no celular) não podem alargar a página */
.hub, .crm, .sites { overflow-x: clip; }
@media (max-width: 640px) { .rodape-marca { font-size: 14.2vw; justify-content: flex-start; } }

/* vídeos no lugar (16/10): o disco do hub fica à direita do título, e o bloco do monograma aparece inteiro ao lado do título do contato */
.hero-titulo { font-size: clamp(46px, 9vw, 168px); }
.hero-video video { left: 80%; height: 112%; }
.contato-video { top: clamp(70px, 9vw, 140px); right: var(--m); width: min(34vw, 540px); transform: none; opacity: 1; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.form { margin-top: calc(min(34vw, 540px) - 40px); }
@media (max-width: 980px) {
  .contato { padding-top: 70px; }
  .contato-video { position: relative; top: auto; right: auto; width: min(82vw, 440px); margin: 0 auto 30px; }
  .form { margin-top: 0; }
}
@media (max-width: 820px) {
  .hero-video video { left: 50%; top: 18%; height: 54%; }
}