/* =========================================================
   VITOR TATAGIBA | sites, aplicativos e Google Maps
   v14 (v13 com a moldura da foto ajustada): identidade azul-noite e ouro (manual de marca 1.0), com mais branco: seções claras alternadas com faixas azul-noite.
   Precisa como uma planta técnica, elegante como um cartão premium.
   Fios retos, régua curta sob títulos, fio vertical ao lado do conteúdo, linhas isométricas, blocos diagonais a 45°.
   ========================================================= */

/* ---------- Fonte: Montserrat (hospedada aqui; latim, pesos 400 a 600) ---------- */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* tema escuro, padrão da marca */
  --navy-950: #08071C;
  --navy-900: #0A0827;
  --navy-800: #15133D;
  --gold-500: #C6A66B;
  --gold-300: #E1CE9C;
  --gold-600: #B4945A;
  --gold-700: #705D47;
  /* tema claro, para leitura longa (propostas, guias) */
  --ivory-50: #F7F3EA;
  --ivory-100: #ECE4D3;
  --bronze-700: #7A5F2E;
  --bronze-500: #9A7B45;
  --slate-600: #4D4A63;
  --white: #FFFFFF;

  --text: #E6DFD0;      /* marfim um pouco mais baixo, para texto corrido no escuro */
  --muted: #A8A29C;     /* texto de apoio no escuro */
  --line: rgba(198, 166, 107, .32);
  --line-soft: rgba(198, 166, 107, .18);
  --diag: #0D0B2E;      /* bloco diagonal sobre azul 900 */

  --font: "Montserrat", system-ui, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);

  --t-h1: clamp(2.15rem, 1.05rem + 3.3vw, 3.85rem);
  --t-h2: clamp(1.55rem, 1rem + 2.1vw, 2.7rem);
  --t3: 1.375rem;
  --t4: 1.1875rem;
  --t5: 1.0625rem;
  --t6: .9375rem;
  --t7: .8125rem;

  --max: 1280px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --header-h: 78px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: var(--ease);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--white); }
html.portal-on { overflow: hidden; }
body {
  margin: 0; font-family: var(--font); font-size: 1.0625rem; font-weight: 400; line-height: 1.7;
  color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
section[id] { scroll-margin-top: calc(var(--header-h) - 1px); }
a, button, input, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(198, 166, 107, .2); }
::selection { background: var(--gold-500); color: var(--navy-950); }
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
:is(.light, .section--ivory, .section--paper) :focus-visible { outline-color: var(--navy-950); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 300; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--gold-500); color: var(--navy-950); font: 600 var(--t7) var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- Tipografia e grafismos da marca ---------- */
.eyebrow { font: 500 .8125rem/1.4 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-500); }
.display { font: 500 var(--t-h2)/1.16 var(--font); letter-spacing: -.005em; color: var(--gold-300); text-wrap: balance; overflow-wrap: break-word; }
.lead { font-size: 1.125rem; line-height: 1.65; color: var(--text); max-width: 58ch; }
.ruler { display: block; width: 56px; height: 3px; background: var(--gold-500); }
.fio { position: relative; padding-left: clamp(22px, 3vw, 44px); border-left: 2px solid var(--gold-500); }
.sec-head { display: grid; gap: 18px; justify-items: start; max-width: 860px; margin-bottom: clamp(44px, 6vw, 80px); }
.sec-head .lead { margin-top: 4px; }

/* blocos diagonais a 45°, quase imperceptíveis */
.diag { position: absolute; z-index: 0; pointer-events: none; width: min(52vw, 720px); aspect-ratio: 1; background: var(--navy-900); }
.diag--tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.diag--tr { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.diag--br { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.section--n900 .diag { background: var(--diag); }

/* ---------- Seções ---------- */
.section { position: relative; isolation: isolate; background: var(--navy-950); color: var(--text); padding-block: clamp(80px, 10vw, 140px); overflow-x: clip; }
.section > .wrap { position: relative; z-index: 1; }
.section--n900, .section--ink { background: var(--navy-900); }
.light, .section--ivory, .section--paper {
  background: var(--white); color: var(--slate-600);
  --text: var(--slate-600); --muted: var(--slate-600); --line: rgba(122, 95, 46, .3); --line-soft: rgba(122, 95, 46, .16);
}
.section--ivory, .section--paper { background: var(--ivory-50); }
:is(.light, .section--ivory, .section--paper) .display { color: var(--navy-950); }
:is(.light, .section--ivory, .section--paper) .eyebrow { color: var(--bronze-700); }
:is(.light, .section--ivory, .section--paper) .ruler { background: var(--bronze-500); }
:is(.light, .section--ivory, .section--paper) .fio { border-left-color: var(--bronze-500); }
:is(.light, .section--ivory, .section--paper) .lead { color: var(--slate-600); }

/* ---------- Botões: retos, caixa-alta espaçada ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  font: 600 .8125rem/1.2 var(--font); letter-spacing: .18em; text-transform: uppercase; text-align: center; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--gold { background: var(--gold-500); color: var(--navy-950); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-300); }
.btn--line { background: transparent; color: var(--gold-300); border-color: var(--gold-500); }
.btn--line:hover, .btn--line:focus-visible { background: rgba(198, 166, 107, .12); }
.btn--navy { background: var(--navy-950); color: var(--gold-300); }
.btn--navy:hover, .btn--navy:focus-visible { background: var(--navy-800); }
:is(.light, .section--ivory, .section--paper) .btn--line { color: var(--navy-950); border-color: var(--bronze-700); }
:is(.light, .section--ivory, .section--paper) .btn--line:hover { background: var(--ivory-100); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .8125rem; letter-spacing: .14em; }
.btn--lg { min-height: 58px; padding: 0 34px; }
/* nomes antigos usados pelas páginas internas */
.btn--ink { background: var(--navy-950); color: var(--gold-300); }
.btn--ink:hover { background: var(--navy-800); }
.btn--white { background: var(--gold-500); color: var(--navy-950); }
.btn--white:hover { background: var(--gold-300); }
.btn--teal { background: var(--gold-500); color: var(--navy-950); }
.btn--teal:hover { background: var(--gold-300); }

.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px;
  font: 600 .8125rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--gold-300); border-bottom: 1px solid var(--gold-500); transition: color .2s ease, border-color .2s ease;
}
.link-arrow::before { content: ""; position: absolute; inset: -14px -4px -8px; }
.link-arrow:hover { color: var(--gold-500); }
.link-arrow svg { width: 15px; height: 15px; flex: none; }
:is(.light, .section--ivory, .section--paper) .link-arrow { color: var(--navy-950); border-color: var(--bronze-500); }
.link-arrow--light { color: var(--gold-300); }

.tick-list { display: grid; gap: 12px; }
.tick-list li { display: grid; grid-template-columns: 16px 1fr; gap: 14px; align-items: baseline; }
.tick-list li::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--gold-500); transform: translateY(-1px) rotate(45deg); }
:is(.light, .section--ivory, .section--paper) .tick-list li::before { border-color: var(--bronze-500); }
.ico { width: 22px; height: 22px; flex: none; color: var(--gold-500); }

/* =========================================================
   Portal: o cartão de visita se desenha e as portas se abrem a 45°
   ========================================================= */
.portal { display: none; }
html.portal-on .portal { display: block; position: fixed; inset: 0; z-index: 250; overflow: hidden; animation: portal-end .01s linear 3.75s forwards; }
.portal-door { position: absolute; inset: 0; background: var(--navy-950); will-change: transform; }
.portal-door--l { clip-path: polygon(0 0, calc(50% + 50vh) 0, calc(50% - 50vh) 100%, 0 100%); animation: door-l .95s cubic-bezier(.76, 0, .24, 1) 2.75s forwards; }
.portal-door--r { background: var(--navy-900); clip-path: polygon(calc(50% + 50vh) 0, 100% 0, 100% 100%, calc(50% - 50vh) 100%); animation: door-r .95s cubic-bezier(.76, 0, .24, 1) 2.75s forwards; }
.portal-inner { position: absolute; inset: 0; animation: portal-fade .45s ease 2.6s forwards; }
.portal-build { position: absolute; right: -4vw; bottom: -6vh; width: min(60vw, 820px); height: auto; overflow: visible; }
.pb { fill: none; stroke: var(--gold-500); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pd-draw .9s cubic-bezier(.6, 0, .3, 1) forwards; animation-delay: calc(.1s + var(--n) * .05s); }
.portal-sign { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 14px; padding: 24px; }
.portal-draw { width: min(44vw, 240px); height: auto; overflow: visible; margin-bottom: 14px; }
.pd { fill: url(#vt-gold); fill-opacity: 0; stroke: var(--gold-300); stroke-width: 3; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pd-draw 1.3s cubic-bezier(.6, 0, .3, 1) .2s forwards, pd-fill .55s ease 1.5s forwards; }
.pd.s2 { animation-duration: .8s, .55s; animation-delay: .8s, 1.55s; }
.pd.s3 { animation-duration: 1.3s, .55s; animation-delay: .5s, 1.6s; }
.portal-name { font: 400 clamp(1.45rem, .9rem + 2.4vw, 2.5rem)/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300); padding-left: .18em; clip-path: inset(0 100% 0 0); animation: name-in .8s var(--ease) 1.75s forwards; white-space: nowrap; }
.portal-tag { font: 500 .8rem/1 var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-500); padding-left: .3em; opacity: 0; animation: fade-up .5s ease 2.05s forwards; }
.portal-ruler { width: 56px; height: 3px; margin-top: 10px; background: var(--gold-500); transform: scaleX(0); animation: ruler-in .5s var(--ease) 2.2s forwards; }
html.portal-skip .portal { transition: opacity .25s ease; opacity: 0; }
@keyframes pd-draw { to { stroke-dashoffset: 0; } }
@keyframes pd-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes name-in { to { clip-path: inset(0 0 0 0); } }
@keyframes ruler-in { to { transform: scaleX(1); } }
@keyframes fade-up { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes portal-fade { to { opacity: 0; } }
@keyframes door-l { to { transform: translateX(calc(-50vw - 50vh - 20px)); } }
@keyframes door-r { to { transform: translateX(calc(50vw + 50vh + 20px)); } }
@keyframes portal-end { to { visibility: hidden; pointer-events: none; } }
@media (max-width: 700px) { .portal-sign { left: 50%; top: 46%; } .portal-tag { letter-spacing: .16em; padding-left: .16em; white-space: nowrap; } }

/* ---------- Cabeçalho ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: var(--white); color: var(--navy-950); transition: background .25s ease, height .25s ease, translate .4s var(--ease), border-color .25s ease; border-bottom: 1px solid transparent; }
.site-header.is-solid { background: rgba(255, 255, 255, .97); height: 66px; border-bottom-color: rgba(8, 7, 28, .1); }
.site-header :focus-visible { outline-color: var(--navy-950); }
.site-header .btn--line { color: var(--navy-950); border-color: var(--bronze-700); }
.site-header .btn--line:hover, .site-header .btn--line:focus-visible { background: var(--ivory-50); }
.site-header.is-hidden { translate: 0 -100%; }
.site-header.no-anim { transition: none; }
.site-header:focus-within { translate: none; }
.header-row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand::before { content: ""; position: absolute; inset: -12px -6px; }
.footer .brand::before { inset: -12px -6px -6px; }
.brand-mark { width: 38px; height: auto; flex: none; overflow: visible; }
.brand-mark path { fill: url(#vt-gold); transition: translate .45s var(--ease); }
.brand:hover .m-i, .brand:focus-visible .m-i { translate: 18px -14px; }
.brand-name { font: 500 .82rem/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--navy-950); white-space: nowrap; }
.footer .brand-name { color: var(--gold-300); }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); }
.nav a { position: relative; padding: 10px 0; text-decoration: none; white-space: nowrap; font: 500 .8125rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-950); transition: color .2s ease; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--bronze-500); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:hover { color: var(--bronze-700); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.header-tools { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; }
.sound { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 8px 4px; background: none; border: 0; cursor: pointer; font: 500 .8125rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--slate-600); }
.sound::before { content: ""; position: absolute; inset: -6px -3px; }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.sound-bars i { display: block; width: 2px; height: 7px; background: var(--bronze-500); }
.sound.is-on { color: var(--bronze-700); }
.sound.is-on .sound-bars i { animation: eq 1s ease-in-out infinite; }
.sound.is-on .sound-bars i:nth-child(2) { animation-delay: .2s; }
.sound.is-on .sound-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.menu-btn { display: none; position: relative; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--navy-950); }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .25s ease, top .25s ease, opacity .2s ease; }
.menu-btn span:nth-child(1) { top: 16px; } .menu-btn span:nth-child(2) { top: 21.5px; } .menu-btn span:nth-child(3) { top: 27px; }
body.menu-open .menu-btn span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { top: 21.5px; transform: rotate(-45deg); }
.langs { display: flex; align-items: center; gap: 12px; }
.lang-flag { position: relative; display: block; width: 28px; height: 19px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .7; transition: opacity .2s ease; }
.lang-flag::before { content: ""; position: absolute; inset: -12px -4px; }
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-flag:hover, .lang-flag:focus-visible, .lang-flag.is-on { opacity: 1; }
.lang-flag::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -8px; height: 2px; background: var(--bronze-500); transform: scaleX(0); transition: transform .3s var(--ease); }
.lang-flag.is-on::after { transform: scaleX(1); }
@media (max-width: 1180px) {
  :root { --header-h: 70px; }
  .menu-btn { display: block; }
  .header-tools .btn { display: none; }
  .nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
    padding: calc(var(--header-h) + 16px) var(--gutter) 48px; background: var(--white); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav::before { content: ""; position: absolute; top: 0; left: 0; width: 70vw; aspect-ratio: 1; background: var(--ivory-50); clip-path: polygon(0 0, 100% 0, 0 100%); z-index: -1; }
  .nav a { font: 400 clamp(1.4rem, 5.6vw, 2rem)/1.2 var(--font); letter-spacing: .14em; padding: 10px 0; color: var(--navy-950); }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav { visibility: visible; opacity: 1; transform: none; }
  body.menu-open .site-header { background: transparent; border-bottom-color: transparent; translate: none; }
  body.menu-open .wa-float { display: none; }
}
@media (max-width: 480px) {
  .brand { gap: 10px; } .brand-mark { width: 32px; } .brand-name { font-size: .8125rem; letter-spacing: .14em; }
  .header-tools { gap: 6px; } .langs { gap: 7px; } .lang-flag { width: 24px; height: 16px; } .lang-flag::before { inset: -14px -2px; }
  .sound-label { display: none; }
  /* o ícone do menu alinha com a margem; a área de toque continua com 44 px */
  .menu-btn { margin-right: -10px; }
}
@media (max-width: 370px) { .brand-name { font-size: .8125rem; letter-spacing: .12em; } .langs { gap: 5px; } .lang-flag { width: 22px; height: 15px; } .header-tools { gap: 4px; } }
/* telas muito estreitas: fica só o monograma (o link mantém o nome no aria-label) */
@media (max-width: 340px) { .brand-name { display: none; } }

/* ---------- Barra lateral própria ---------- */
html.has-rail { scrollbar-width: none; }
html.has-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rail { position: fixed; z-index: 55; right: 16px; top: 100px; bottom: 120px; width: 22px; pointer-events: none; transition: opacity .3s ease; }
.rail[hidden] { display: none; }
body.menu-open .rail, html.portal-on .rail { opacity: 0; visibility: hidden; }
.rail-track { position: relative; height: 100%; }
.rail-hit { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; }
.rail-tick { position: absolute; left: 0; right: 0; height: 28px; margin-top: -14px; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: auto; text-decoration: none; }
.rail-tick span { display: block; width: 8px; height: 1px; background: var(--gold-700); transition: width .35s var(--ease), background .2s ease; }
.rail-tick:hover span, .rail-tick:focus-visible span { width: 16px; background: var(--bronze-500); }
.rail-tick.is-on span { width: 18px; height: 2px; background: var(--bronze-500); }
.rail-thumb { position: absolute; left: 0; right: 0; top: 0; z-index: 2; pointer-events: auto; cursor: grab; touch-action: none; }
.rail-thumb::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--bronze-500); }
.rail.is-drag .rail-thumb { cursor: grabbing; }
.rail-label, .rail-tick::after { position: absolute; right: calc(100% + 8px); top: 50%; padding: 8px 12px; background: var(--navy-800); color: var(--gold-300); border: 1px solid var(--line); font: 500 .8125rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; visibility: hidden; translate: 10px -50%; transition: opacity .25s ease, translate .35s var(--ease), visibility .25s; pointer-events: none; }
.rail-tick::after { content: attr(data-label); }
.rail-tick:hover::after, .rail-tick:focus-visible::after { opacity: 1; visibility: visible; translate: 0 -50%; }
.rail.is-drag .rail-label, .rail-thumb:hover .rail-label { opacity: 1; visibility: visible; translate: 0 -50%; }
@media (max-width: 1100px) { .rail { right: 4px; width: 18px; } }
@media (max-width: 640px) { .rail { right: 2px; top: 86px; bottom: 100px; width: 14px; } .rail-tick span { width: 5px; } .rail-tick.is-on span { width: 10px; } .rail-tick::after { display: none; } }

/* =========================================================
   Capa: o que o Google mostra de você (fundo branco, celular em linhas sobre a faixa azul-noite)
   ========================================================= */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: min(100svh, 980px); padding-top: var(--header-h); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-title { font: 500 var(--t-h1)/1.08 var(--font); letter-spacing: -.015em; color: var(--navy-950); }
.hero-title .line { display: block; }
.hero-title .ask { color: var(--bronze-500); }
.hero .lead { max-width: 40ch; font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 4px; }
.hero-cta .btn { padding-inline: 28px; letter-spacing: .14em; }
.cta-note { font-size: var(--t6); color: var(--muted); }
.biz { display: grid; gap: 10px; width: min(100%, 520px); margin-top: 4px; }
.biz label { font: 600 .8125rem/1.3 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-700); }
.biz-field { position: relative; display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 0 20px; background: var(--white); border: 1px solid var(--navy-950); }
.biz-field:focus-within { outline: 2px solid var(--bronze-500); outline-offset: 3px; }
.biz-field .ico { width: 20px; height: 20px; color: var(--bronze-500); }
.biz-field input { flex: 1 1 auto; width: 0; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--navy-950); font: 500 var(--t4)/1.2 var(--font); letter-spacing: .01em; }
.biz-field input::placeholder { color: #6E6B80; opacity: 1; }
.biz-hint { font-size: var(--t6); color: var(--muted); }

.demo { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 18px; padding-top: 12px; }
/* faixa azul-noite com o canto cortado a 45°, sangrando pela direita da tela; o celular sai da faixa por baixo */
.demo::before { content: ""; position: absolute; z-index: -1; top: 3%; bottom: 21%; left: 10%; right: calc((min(100vw - 2 * var(--gutter), var(--max)) - 100vw) / 2 - 2px); background: var(--navy-900); clip-path: polygon(clamp(56px, 6vw, 110px) 0, 100% 0, 100% 100%, 0 100%, 0 clamp(56px, 6vw, 110px)); }
.phone-art { --text: #E6DFD0; --muted: #A8A29C; --pw: clamp(250px, min(23vw, 34svh), 326px); position: relative; width: var(--pw); aspect-ratio: 360 / 740; container-type: inline-size; }
.pa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pa-line { fill: none; stroke: var(--gold-500); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa-body { fill: var(--navy-950); stroke: none; }
.pa-edge { stroke: var(--gold-300); stroke-width: 2; }
.pa-street { stroke-opacity: .35; }
.pa-faint { stroke: rgba(225, 206, 156, .4); }
.pa-g { opacity: clamp(0, calc(var(--k, 1) * 14), 1); }
.pa-g .pa-line { stroke-dashoffset: calc(1 - var(--k, 1)); }
.pa-g.pa-pin, .pa-g.pa-stars { opacity: 1; }
.pa-pin .pa-line { stroke-dashoffset: 0; }
.pa-pin-line { stroke: color-mix(in srgb, var(--gold-300) calc(var(--k, 1) * 100%), #5C5870); }
.pa-pin-fill { fill: var(--gold-500); fill-opacity: var(--k, 1); stroke: none; }
.pa-stars { color: color-mix(in srgb, var(--gold-500) calc(var(--k, 1) * 100%), #5C5870); }
.pa-star-fill { color: var(--gold-500); opacity: var(--k, 1); }
.pa-g.pa-ghosts { opacity: calc(1 - var(--k, 1)); }
.pa-ghost { fill: none; stroke: #4D4A63; stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round; }
.pa-svg use { color: var(--gold-500); }
@keyframes pa-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pa-ov { position: absolute; inset: 0; pointer-events: none; }
.pa-t { position: absolute; left: calc(var(--x) / 360 * 100%); top: calc(var(--y) / 740 * 100%); width: calc(var(--w) / 360 * 100%); height: calc(var(--h) / 740 * 100%); margin: 0; display: flex; align-items: center; min-width: 0; font: 500 calc(var(--s) / 360 * 100cqw)/1.2 var(--font); color: var(--ivory-50); }
.pa-t > span:not(.v-hoje):not(.v-depois) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-t[data-t]:not(.pa-slot) { opacity: clamp(0, calc(var(--k, 1) * 14), 1); }
.pa-slot > span { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; }
.pa-slot .v-hoje { color: #8E8A8C; opacity: calc(1 - var(--k, 1)); }
.pa-slot .v-depois { opacity: var(--k, 1); }
.pa-photos, .pa-photos > span { justify-content: center; }
.pa-hours .v-depois { color: var(--gold-300); font-weight: 600; }
.pa-rate .v-depois { color: var(--text); }
.pa-q > span::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--gold-300); animation: caret 1s steps(1) infinite; }
.pa-name { font-weight: 600; }
.pa-act { justify-content: center; color: var(--text); font-weight: 600; }
.pa-nosite, .pa-noapp { color: #8E8A8C; font-weight: 600; }
.pa-t.pa-nosite[data-t], .pa-t.pa-noapp[data-t] { opacity: calc(1 - var(--k, 1)); }
.pa-url, .pa-appk { color: var(--muted); font-weight: 400; }
.pa-sitename, .pa-appn { font-weight: 600; }
.pa-cta, .pa-inst, .pa-ico { justify-content: center; font-weight: 600; color: var(--gold-300); }
@keyframes caret { 50% { opacity: 0; } }
.demo-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: min(100%, 420px); }
.demo-tab { min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; white-space: nowrap; font: 600 .8125rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .2s ease; }
.demo-tab:hover, .demo-tab[aria-pressed="true"] { color: var(--navy-950); }
.demo-tab[aria-pressed="true"]::after { content: ""; display: block; height: 1px; margin-top: 7px; background: var(--bronze-500); }
.vt-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: ew-resize; }
.vt-range::-webkit-slider-runnable-track { height: 1px; background: rgba(8, 7, 28, .35); }
.vt-range::-moz-range-track { height: 1px; background: rgba(8, 7, 28, .35); border: 0; }
.vt-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -12px; border: 0; background: var(--bronze-500); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.vt-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 0; background: var(--bronze-500); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.demo-note { font-size: var(--t7); letter-spacing: .04em; color: var(--muted); text-align: center; }

/* entrada da capa: depois do portal (ou na hora, se não houver portal) */
html.hero-pre .hero-copy > * { opacity: 0; translate: 0 18px; }
.hero-go .hero-copy > * { animation: fade-rise .9s var(--ease) both; }
.hero-go .hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-go .hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-go .hero-copy > :nth-child(4) { animation-delay: .22s; } .hero-go .hero-copy > :nth-child(5) { animation-delay: .3s; } .hero-go .hero-copy > :nth-child(6) { animation-delay: .38s; }
html.hero-pre .demo::before { opacity: 0; translate: 48px 0; }
.hero-go .demo::before { animation: band-in 1s var(--ease) .1s both; }
html.hero-pre .demo .pa-base .pa-line, html.hero-pre .demo .pa-pin .pa-line { stroke-dashoffset: 1; }
html.hero-pre .demo .pa-body, html.hero-pre .demo .pa-q, html.hero-pre .demo .pa-name { opacity: 0; }
/* o celular inteiro (desenho e textos) só aparece quando a capa começa, para os textos não surgirem soltos no branco */
html.hero-pre .demo :is(.phone-art, .demo-ctl, .demo-note) { opacity: 0; }
.hero-go .demo :is(.phone-art, .demo-ctl, .demo-note) { animation: fade-in .4s ease .2s both; }
.hero-go .demo .pa-base .pa-line, .hero-go .demo .pa-pin .pa-line { animation: pa-draw 1.2s var(--ease) both; animation-delay: calc(.35s + var(--dl, 0s)); }
.hero-go .demo .pa-body { animation: fade-in .6s ease .3s both; }
.hero-go .demo .pa-q, .hero-go .demo .pa-name { animation: fade-in .5s ease 1.2s both; }
@keyframes fade-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes band-in { from { opacity: 0; translate: 48px 0; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 920px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .biz-hint { display: none; }
  .demo { margin-inline: calc(var(--gutter) * -1); padding: 44px var(--gutter) 0; }
  .demo::before { top: 0; bottom: 150px; left: 0; right: 0; clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px); }
  .phone-art { --pw: min(72vw, 290px); }
}
@media (max-width: 560px) { .hero-cta .btn { width: 100%; } }
@media (max-width: 400px) { .hero-title { font-size: clamp(1.9rem, 8.6vw, 2.15rem); } }

/* =========================================================
   Serviços: escolha o que precisa e peça a proposta (tema claro)
   ========================================================= */
.quote { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 clamp(28px, 4vw, 56px); align-items: start; }
.quote-cols { grid-column: 1; display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) 180px; gap: 16px; padding: 0 16px 14px; border-bottom: 1px solid var(--navy-950); font: 600 .8125rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-700); }
.quote-cols span:first-child { grid-column: 3; }
.quote-cols span:last-child { text-align: right; }
.quote-list { grid-column: 1; display: grid; }
.qrow { position: relative; display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) 180px; gap: 16px; align-items: center; padding: 22px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s ease; }
.qrow:hover { background: var(--ivory-100); }
.qrow:has(input:checked) { background: var(--ivory-100); box-shadow: inset 2px 0 0 var(--bronze-700); } /* taste-skill-ignore */
.qrow input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qrow-box { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--bronze-700); transition: background .2s ease; }
.qrow-box svg { width: 15px; height: 15px; color: var(--gold-300); opacity: 0; transition: opacity .2s ease; }
.qrow input:checked ~ .qrow-box { background: var(--navy-950); border-color: var(--navy-950); }
.qrow input:checked ~ .qrow-box svg { opacity: 1; }
.qrow input:focus-visible ~ .qrow-box { outline: 2px solid var(--navy-950); outline-offset: 3px; }
.qrow-ico { width: 26px; height: 26px; color: var(--bronze-500); }
.qrow-main { display: grid; gap: 4px; min-width: 0; }
.qrow-name { font: 600 1.06rem/1.3 var(--font); color: var(--navy-950); }
.qrow-tag { justify-self: start; padding: 4px 8px; background: var(--navy-950); color: var(--gold-300); font: 600 .8125rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; }
.qrow-desc { font-size: .92rem; line-height: 1.55; color: var(--slate-600); }
.qrow-prazo { font: 500 .8125rem/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-950); text-align: right; }
.quote-sum { --text: #E6DFD0; --muted: #A8A29C; --line: rgba(198, 166, 107, .32); --line-soft: rgba(198, 166, 107, .18); grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; padding: 30px 28px 32px clamp(22px, 2.6vw, 34px); background: var(--navy-950); color: var(--text); border-left-color: var(--gold-500); }
.quote-total { display: grid; gap: 6px; }
.quote-count { font: 500 .8125rem/1.4 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-500); }
.quote-names { font: 500 var(--t4)/1.45 var(--font); color: var(--gold-300); }
.quote-names.is-empty { font-size: var(--t6); color: var(--muted); }
.quote-tip { padding: 14px 16px; border: 1px solid var(--line); font-size: .9rem; line-height: 1.55; color: var(--text); }
.quote-swap { margin-top: 10px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--gold-500); background: transparent; color: var(--gold-300); font: 600 .8125rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.quote-swap:hover { background: rgba(198, 166, 107, .12); }
.quote-sum .btn { width: 100%; }
.quote-note { font-size: .82rem; line-height: 1.55; color: var(--muted); }
.quote-err { color: var(--gold-300); font-size: .9rem; }
@media (max-width: 1100px) {
  .quote { grid-template-columns: minmax(0, 1fr); }
  .quote-sum { grid-column: 1; grid-row: auto; position: static; margin-top: 32px; }
}
@media (max-width: 760px) {
  .quote-cols { display: none; }
  .qrow { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "box main" "box prazo"; gap: 6px 14px; padding: 20px 10px; align-items: start; }
  .qrow-box { grid-area: box; margin-top: 2px; }
  .qrow-ico { display: none; }
  .qrow-main { grid-area: main; }
  .qrow-prazo { grid-area: prazo; font-size: .8125rem; text-align: left; }
}

/* =========================================================
   Caminho do cliente
   ========================================================= */
.path-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 80px); align-items: start; }
.path-head { grid-column: 1 / -1; }
.path-map { position: relative; }
.pm-stage { position: relative; aspect-ratio: 640 / 440; }
.pm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pm-base { fill: none; stroke: var(--gold-700); stroke-width: 1.5; stroke-dasharray: 2 8; }
.pm-draw { fill: none; stroke: var(--gold-500); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--prog, 0)); transition: stroke-dashoffset .8s var(--ease); }
.pm-disc { fill: var(--navy-900); stroke: var(--gold-600); stroke-width: 1.5; transition: fill .3s ease, stroke .3s ease; }
.pm-ico { color: var(--gold-300); transition: color .3s ease; }
.pm-stop.is-past .pm-disc { fill: var(--navy-800); stroke: var(--gold-500); }
.pm-stop.is-on .pm-disc { fill: var(--gold-500); stroke: var(--gold-500); }
.pm-stop.is-on .pm-ico { color: var(--navy-950); }
.pm-stops { position: absolute; inset: 0; }
.stop { position: absolute; left: var(--px); top: var(--py); width: calc(76 / 640 * 100%); min-width: 44px; aspect-ratio: 1; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--text); }
.stop-name { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; font: 500 .8125rem/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; transition: color .25s ease; pointer-events: none; }
.stop--low .stop-name { top: calc(100% + 8px); }
.stop--high .stop-name { bottom: calc(100% + 8px); }
.stop.is-on .stop-name { color: var(--gold-300); }
.stop.is-on::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gold-500); animation: ping 2.4s ease-out infinite; pointer-events: none; }
@keyframes ping { 0% { opacity: .9; scale: .92; } 100% { opacity: 0; scale: 1.45; } }
.pm-hint { margin-top: 16px; font-size: var(--t7); letter-spacing: .04em; color: var(--muted); }
.stop-panel { display: grid; gap: 16px; align-content: start; padding: clamp(26px, 3vw, 40px); background: var(--navy-900); border: 1px solid var(--line-soft); }
html.js .stop-panel:not(.is-on) { display: none; }
.stop-panel.is-on { animation: panel-in .5s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.stop-panel h3 { font: 500 var(--t3)/1.2 var(--font); color: var(--gold-300); }
.stop-panel h4 { font: 600 var(--t5)/1.3 var(--font); color: var(--ivory-50); }
.stop-panel p { color: var(--text); max-width: 46ch; }
.stop-two { display: grid; gap: 18px; }
.stop-two > div { display: grid; gap: 6px; }
.stop-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
html:not(.js) .stop-panel + .stop-panel { margin-top: 20px; }
html:not(.js) .pm-stops, html:not(.js) .pm-hint { display: none; }
@media (max-width: 920px) { .path-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .stop-name { font-size: .8125rem; letter-spacing: .12em; } }
@media (max-width: 560px) { .pm-stage { margin-inline: 12px; } }

/* =========================================================
   Google Meu Negócio: conferência + auditoria
   ========================================================= */
.maps-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.maps-grid .sec-head { margin-bottom: 0; }
.maps-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.maps-col { display: grid; gap: 16px; align-content: start; }
.maps-col h3 { font: 600 .8125rem/1.3 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-500); }
.maps-col .tick-list { color: var(--text); font-size: var(--t6); }
.audit { scroll-margin-top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(56px, 7vw, 96px); padding: clamp(30px, 5vw, 60px); background: var(--navy-950); border: 1px solid var(--line); }
.audit-head { grid-column: 1 / -1; display: grid; gap: 12px; max-width: 62ch; }
.audit-head h3 { font: 500 var(--t-h2)/1.15 var(--font); color: var(--gold-300); text-wrap: balance; }
.audit-head p { color: var(--text); }
.checks legend { margin-bottom: 16px; font: 600 .8125rem/1.4 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-500); }
.checks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.chk { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--line-soft); transition: background .2s ease, border-color .2s ease; }
.chk:hover { border-color: var(--line); }
.chk:has(input:checked) { background: rgba(198, 166, 107, .1); border-color: var(--gold-600); }
.chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chk-box { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--gold-600); }
.chk-box svg { width: 14px; height: 14px; color: var(--navy-950); opacity: 0; transition: opacity .2s ease; }
.chk input:checked ~ .chk-box { background: var(--gold-500); border-color: var(--gold-500); }
.chk input:checked ~ .chk-box svg { opacity: 1; }
.chk input:focus-visible ~ .chk-box { outline: 2px solid var(--gold-300); outline-offset: 3px; }
.chk-t { font: 500 var(--t6)/1.3 var(--font); color: var(--text); }
.audit-side { display: grid; gap: 26px; }
.gauge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.gauge-ring { position: relative; width: 112px; height: 112px; }
.gauge-ring svg { width: 100%; height: 100%; }
.gauge-track { fill: none; stroke: var(--line-soft); stroke-width: 4; }
.gauge-fill { fill: none; stroke: var(--gold-500); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--g, 0)); transition: stroke-dashoffset .6s var(--ease); }
.gauge-num { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; }
.gauge-num b { font: 500 2.2rem/1 var(--font); color: var(--gold-300); }
.gauge-num span { margin-top: 5px; font: 500 .8125rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.gauge-msg { font: 500 var(--t5)/1.45 var(--font); color: var(--ivory-50); max-width: 30ch; }
.audit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
.audit-field { display: grid; gap: 8px; }
.audit-field--wide { grid-column: 1 / -1; }
.audit-field span { font: 600 .8125rem/1.3 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-500); }
.audit-field input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 0; background: var(--navy-900); color: var(--ivory-50); font: 500 var(--t5)/1.2 var(--font); outline: 0; transition: border-color .2s ease; }
.audit-field input:focus { border-color: var(--gold-300); }
.audit-error { grid-column: 1 / -1; color: var(--gold-300); font-weight: 500; }
.audit-fields .btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.audit-note { grid-column: 1 / -1; font-size: var(--t7); color: var(--muted); max-width: 54ch; }
.maps-foot { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 12px clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(40px, 6vw, 72px); }
.maps-foot p { color: var(--text); max-width: 54ch; }
.maps-promise { font-size: var(--t6); color: var(--muted) !important; }
.maps-links { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 22px; justify-items: start; align-content: start; }
@media (max-width: 1000px) {
  .maps-grid, .audit, .maps-foot { grid-template-columns: minmax(0, 1fr); }
  .maps-grid { align-items: start; }
  .maps-links { grid-column: 1; grid-row: auto; margin-top: 8px; }
}
@media (max-width: 640px) {
  .maps-why, .checks-grid, .audit-fields { grid-template-columns: minmax(0, 1fr); }
  .audit-fields .btn { width: 100%; }
}

/* =========================================================
   Portfólio
   ========================================================= */
.works { overflow-x: clip; }
.cases { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(36px, 6vw, 96px); align-items: start; }
.case { display: contents; }
.case-head { grid-column: 1; position: relative; padding: 26px 0 18px; border-top: 1px solid var(--line-soft); }
.case:first-child .case-head { border-top-color: transparent; }
.case-num { font: 500 .8125rem/1 var(--font); letter-spacing: .2em; color: var(--gold-700); margin-bottom: 12px; transition: color .3s ease; }
.case.is-active .case-num { color: var(--gold-500); }
.case:not(.is-active) .case-meta { display: none; }
.case-title { font: 500 var(--t3)/1.25 var(--font); color: #8A8592; transition: color .3s ease; }
.case.is-active .case-title, .case-head:hover .case-title { color: var(--gold-300); }
.case-btn { position: relative; display: block; padding: 0; margin: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.case-btn::after { content: ""; position: absolute; inset: 0; }
.case-btn::before { content: ""; position: absolute; inset: -9px 0; }
.case-meta { margin-top: 10px; font: 500 .8125rem/1.5 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600); }
.case-body { grid-column: 1; display: none; gap: 18px; justify-items: start; padding-bottom: 30px; }
.case.is-active .case-body { display: grid; }
.case-body p { color: var(--text); max-width: 46ch; }
.case-link { position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; font: 500 .8125rem/1.2 var(--font); letter-spacing: .1em; text-decoration: none; color: var(--gold-300); border-bottom: 1px solid var(--gold-500); }
.case-link::before { content: ""; position: absolute; inset: -14px -4px -8px; }
.case-link:hover { color: var(--gold-500); }
.case-link svg { width: 15px; height: 15px; }
.case-media { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: calc(var(--header-h) + 36px); align-self: start; isolation: isolate; margin-bottom: 56px; opacity: 0; visibility: hidden; translate: calc(var(--dir, 1) * 56px) 0; transition: opacity .5s ease, visibility .5s, translate .8s var(--ease); }
.case.is-active .case-media { opacity: 1; visibility: visible; translate: 0 0; }
.case.is-out .case-media { opacity: 0; visibility: visible; translate: calc(var(--dir, 1) * -56px) 0; }
.case-media::before { content: ""; position: absolute; z-index: -1; inset: 12% -6% -8% 24%; background: var(--navy-800); clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); }
.browser { background: var(--navy-950); border: 1px solid var(--line); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 14px; background: var(--navy-900); border-bottom: 1px solid var(--line-soft); color: var(--muted); font: 500 .8125rem/1 var(--font); letter-spacing: .08em; }
.browser-bar::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--gold-500); transform: rotate(45deg); }
.browser-screen { position: relative; aspect-ratio: 16 / 10; background: var(--navy-900); }
.browser-screen img, .phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; translate: calc(var(--dir, 1) * 7%) 0; transition: opacity .6s ease, translate .8s var(--ease); }
.browser-screen img.is-on, .phone-screen img.is-on { opacity: 1; translate: 0 0; }
/* vídeo curto do site, por cima da imagem; aparece quando começa a tocar */
.work-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.work-video.is-on { opacity: 1; }
.phone { position: absolute; left: -48px; bottom: -44px; width: 128px; aspect-ratio: 9 / 19; padding: 5px; background: var(--navy-950); border: 1px solid var(--line); border-radius: 22px; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 17px; overflow: hidden; background: var(--navy-900); }
.case-media .browser { translate: var(--drag, 0px) 0; transition: translate .5s var(--ease); }
.case-media .phone { left: auto; right: -14px; bottom: -40px; width: 116px; translate: calc(var(--drag, 0px) * 1.35) 0; transition: translate .5s var(--ease); }
.case-media.is-dragging .browser, .case-media.is-dragging .phone { transition: none; }
.cases-dots { display: none; }
.works-foot { margin-top: clamp(48px, 7vw, 96px); padding-top: 32px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 36px; }
.works-foot p { font: 500 var(--t3)/1.3 var(--font); color: var(--gold-300); }
@media (max-width: 700px) {
  .cases { display: flex; align-items: stretch; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .cases::-webkit-scrollbar { display: none; }
  .case { display: flex; flex-direction: column; flex: 0 0 min(84%, 420px); scroll-snap-align: start; padding: 22px 18px 30px; background: var(--navy-900); border: 1px solid var(--line-soft); overflow: hidden; }
  .case:not(.is-active) .case-meta { display: block; }
  .case-head { padding: 0 0 10px; border: 0; }
  .case-btn::after { display: none; }
  .case-title { color: var(--gold-300); }
  .case-body { display: grid; padding-bottom: 0; gap: 16px; }
  .case-media { order: -1; position: relative; top: auto; opacity: 1; visibility: visible; translate: none; margin: 0 8px 52px 0; }
  .case.is-out .case-media { translate: none; opacity: 1; }
  .case-media.swipeable { touch-action: auto; cursor: auto; user-select: auto; -webkit-user-select: auto; }
  .case-media .phone { right: 4px; width: 92px; bottom: -34px; }
  .cases.js-cases .case { transition: opacity .35s ease, scale .35s ease; }
  .cases.js-cases .case:not(.is-center) { opacity: .5; scale: .96; }
  .cases-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
  .cases-dot { position: relative; width: 26px; height: 2px; padding: 0; border: 0; background: var(--gold-700); cursor: pointer; transition: background .2s ease, width .3s var(--ease); }
  .cases-dot::before { content: ""; position: absolute; inset: -20px -2px; }
  .cases-dot.is-on { width: 44px; background: var(--gold-300); }
}

/* =========================================================
   Método (trilha a 45°)
   ========================================================= */
#processo .sec-head { margin-bottom: 0; }
.trail { position: relative; --ax: 62px; --pitch: 232px; padding-top: 118px; padding-bottom: 24px; }
.trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail-base { fill: none; stroke: var(--gold-700); stroke-width: 1.5; stroke-dasharray: 2 8; }
.trail-draw { fill: none; stroke: var(--gold-500); stroke-width: 2; }
.trail-head { fill: var(--gold-300); transition: opacity .3s ease; }
.steps { position: relative; }
.step { position: relative; min-height: var(--pitch); }
.step:nth-child(odd) { --side: 1; }
.step:nth-child(even) { --side: -1; }
.node { position: absolute; top: 14px; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--navy-900); border: 1.5px solid var(--gold-700); transform: rotate(45deg); transition: background .35s ease, border-color .35s ease, scale .5s var(--ease); }
.node::after { content: ""; position: absolute; inset: -8px; border: 1px solid var(--gold-500); opacity: 0; }
.step:nth-child(odd) .node { left: calc(50% - var(--ax)); }
.step:nth-child(even) .node { left: calc(50% + var(--ax)); }
.step-body { position: absolute; top: 0; width: min(calc(50% - var(--ax) - 56px), 440px); display: grid; gap: 10px; }
.step:nth-child(odd) .step-body { right: calc(50% + var(--ax) + 44px); text-align: right; justify-items: end; }
.step:nth-child(even) .step-body { left: calc(50% + var(--ax) + 44px); }
.step-ico { width: 34px; height: 34px; fill: none; stroke: var(--gold-500); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { font: 500 var(--t3)/1.2 var(--font); color: var(--gold-300); }
.step p { color: var(--text); font-size: var(--t5); max-width: 34ch; }
.trail-js .step-body { opacity: 0; translate: calc(var(--side, 1) * 36px) 0; transition: opacity .7s ease, translate .9s var(--ease); }
.trail-js .step.is-on .step-body { opacity: 1; translate: 0 0; }
.trail-js .step.is-on .node { background: var(--gold-500); border-color: var(--gold-500); scale: 1.15; }
.trail-js .step.is-on .node::after { animation: node-ping 1.1s ease-out; }
@keyframes node-ping { 0% { opacity: .9; scale: .8; } 100% { opacity: 0; scale: 2.2; } }
@media (max-width: 860px) {
  .trail { --pitch: 216px; padding-top: 60px; }
  .step:last-child { min-height: 130px; }
  .step:nth-child(odd) .node { left: 14px; }
  .step:nth-child(even) .node { left: 36px; }
  .step-body, .step:nth-child(odd) .step-body, .step:nth-child(even) .step-body { position: static; width: auto; margin-left: 68px; right: auto; left: auto; text-align: left; justify-items: start; }
  .step p { max-width: 40ch; }
  /* no celular o texto entra a partir da linha (da esquerda), sem passar da borda da tela */
  .trail-js .step-body { translate: -24px 0; }
}

/* =========================================================
   Sobre
   ========================================================= */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.portrait { position: relative; aspect-ratio: 4 / 5; background: var(--navy-800); overflow: hidden; }
.about-visual { position: relative; display: grid; gap: 18px; padding: 12px; }
/* moldura fina em volta da foto, com a mesma folga dos quatro lados */
.portrait { outline: 1px solid var(--gold-600); outline-offset: 11px; }
.portrait, .thumbs { position: relative; z-index: 1; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: var(--origin, 50% 50%); translate: var(--sx, 0px) 0; transition: opacity .25s ease, translate .4s var(--ease), scale 1.6s var(--ease); }
.thumbs { display: flex; gap: 12px; margin-top: 22px; }
.thumb { position: relative; width: 72px; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; cursor: pointer; background: var(--navy-800); opacity: .5; transition: opacity .2s ease; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: var(--origin, 50% 50%); }
.thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .2s ease; }
.thumb:hover, .thumb:focus-visible, .thumb.is-on { opacity: 1; }
.thumb.is-on::after { border-color: var(--gold-500); }
.about-copy { display: grid; gap: 22px; justify-items: start; }
.about-copy .display { max-width: 16ch; }
.about-copy p { color: var(--text); max-width: 56ch; }
.about-copy .btn { margin-top: 8px; }
.why { margin-top: clamp(88px, 11vw, 144px); display: grid; gap: clamp(28px, 4vw, 48px); }
.why-head { display: grid; gap: 12px; max-width: 60ch; }
.why-title { font: 500 var(--t-h2)/1.16 var(--font); color: var(--gold-300); text-wrap: balance; max-width: 18ch; }
.why-head p { color: var(--text); font-size: 1.125rem; }
.why-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.why-item { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 24px; }
.why-item::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: var(--gold-500); transform-origin: left; transition: scale .8s var(--ease) .2s; }
.why-item h4 { font: 600 var(--t5)/1.35 var(--font); color: var(--ivory-50); max-width: 18ch; }
.why-item p { color: var(--text); font-size: var(--t6); max-width: 30ch; }
@media (max-width: 1100px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 920px) { .about-grid { grid-template-columns: minmax(0, 1fr); } .about-visual { max-width: 400px; } }
@media (max-width: 560px) { .why-list { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   Onde atendo
   ========================================================= */
.where-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 80px); row-gap: clamp(24px, 3vw, 40px); align-items: start; }
.where-head { grid-column: 1 / -1; }
.where-head .sec-head { margin-bottom: 0; }
.where-map { grid-column: 1; grid-row: 2 / span 2; position: relative; }
.wm-svg { width: 100%; height: auto; aspect-ratio: 640 / 480; overflow: visible; }
.wm-land { fill: var(--navy-800); stroke: var(--gold-700); stroke-width: 1.2; }
.wm-cont { fill: none; stroke: rgba(198, 166, 107, .16); stroke-width: 1.2; stroke-linecap: round; }
.wm-link { fill: none; stroke: var(--gold-600); stroke-width: 1.4; stroke-dasharray: 5 7; stroke-linecap: round; }
.wm-link--far { stroke-dasharray: 2 9; }
.wm-dot { fill: var(--navy-950); stroke: var(--gold-500); stroke-width: 2; transition: fill .25s ease; }
.wm-dot.is-on { fill: var(--gold-300); }
.wm-home circle { fill: var(--navy-950); stroke: var(--gold-300); stroke-width: 1.5; }
.wm-pts { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 640 / 480; }
.wpt { position: absolute; left: var(--px); top: var(--py); width: 44px; height: 44px; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--text); }
.wpt-name { position: absolute; left: calc(100% - 4px); top: 50%; translate: 0 -50%; white-space: nowrap; font: 500 .8125rem/1.2 var(--font); letter-spacing: .1em; color: var(--text); pointer-events: none; transition: color .2s ease; }
.wpt--home .wpt-name { left: calc(100% + 0px); top: auto; bottom: calc(100% - 8px); translate: 0 0; font-weight: 600; color: var(--gold-300); }
.wpt[data-c="bjn"] .wpt-name, .wpt[data-c="itaperuna"] .wpt-name, .wpt[data-c="campos"] .wpt-name { left: auto; right: calc(100% - 4px); }
.wpt.is-on .wpt-name { color: var(--gold-300); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wpt.is-on::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--gold-300); animation: ping 2.4s ease-out infinite; pointer-events: none; }
.wm-note { grid-column: 1; grid-row: 4; margin-top: -20px; font-size: var(--t7); color: var(--muted); }
.where-panel { grid-column: 2; grid-row: 2; display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 36px); background: var(--navy-950); border: 1px solid var(--line); }
.where-panel h3 { font: 500 var(--t3)/1.25 var(--font); color: var(--gold-300); }
.where-panel p { color: var(--text); }
.where-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.where-list { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; gap: 4px 20px; align-content: start; font-size: var(--t6); }
.where-list a { display: inline-block; padding-block: 9px; color: var(--text); text-decoration: underline; text-decoration-color: var(--gold-700); text-underline-offset: 5px; }
.where-list a:hover { color: var(--gold-300); text-decoration-color: var(--gold-500); }
@media (max-width: 920px) {
  .where-grid { grid-template-columns: minmax(0, 1fr); }
  .where-map, .where-panel, .where-list, .wm-note { grid-column: 1; grid-row: auto; }
  .wm-note { margin-top: 0; }
  .wpt-name { font-size: .8125rem; }
  .wpt--home .wpt-name { left: 50%; right: auto; top: calc(100% - 4px); bottom: auto; translate: -50% 0; padding: 0 5px; background: var(--navy-900); }
}
/* no celular, os dois nomes mais longos quebram em duas linhas para não encostar na borda da tela */
@media (max-width: 560px) {
  .wpt[data-c="bjn"] .wpt-name, .wpt[data-c="sjc"] .wpt-name { white-space: normal; width: 8em; text-wrap: balance; }
  .wpt[data-c="bjn"] .wpt-name { text-align: right; }
  .wpt[data-c="itaperuna"] .wpt-name { left: 50%; right: auto; top: calc(100% + 2px); translate: -50% 0; }
}

/* =========================================================
   Dúvidas (tema claro)
   ========================================================= */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 112px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 36px); }
.faq-head .sec-head { margin-bottom: 0; }
.faq-list { border-top: 1px solid var(--navy-950); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; font: 600 var(--t5)/1.4 var(--font); color: var(--navy-950); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--bronze-700); }
.faq-icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--bronze-700); transition: transform .3s ease; }
.faq-icon::before { left: 0; right: 0; top: 8.5px; height: 1.5px; }
.faq-icon::after { top: 0; bottom: 0; left: 8.5px; width: 1.5px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-item p { padding-bottom: 26px; color: var(--slate-600); max-width: 60ch; }
.faq-item p a { color: var(--navy-950); text-decoration: underline; text-decoration-color: var(--bronze-500); text-underline-offset: 3px; }
/* lista de dúvidas fora do tema claro (páginas internas escuras) */
.section:not(.light):not(.section--ivory):not(.section--paper) .faq-list { border-top-color: var(--line); }
.section:not(.light):not(.section--ivory):not(.section--paper) .faq-item summary { color: var(--gold-300); }
.section:not(.light):not(.section--ivory):not(.section--paper) .faq-item summary:hover { color: var(--gold-500); }
.section:not(.light):not(.section--ivory):not(.section--paper) .faq-icon::before, .section:not(.light):not(.section--ivory):not(.section--paper) .faq-icon::after { background: var(--gold-500); }
.section:not(.light):not(.section--ivory):not(.section--paper) .faq-item p { color: var(--text); }
.section:not(.light):not(.section--ivory):not(.section--paper) .faq-item p a { color: var(--gold-300); }
@media (max-width: 920px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-head { position: static; } }

/* =========================================================
   Contato
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.contact-copy { display: grid; gap: 22px; justify-items: start; }
.contact-cta { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 6px; }
.contact-list { display: grid; gap: 4px; margin-top: 12px; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.contact-list .ico { margin-top: 11px; }
.contact-list a { color: var(--text); text-decoration: none; padding-block: 9px; line-height: 1.5; }
.contact-list a:hover { color: var(--gold-300); }
.contact-sign { display: grid; justify-items: center; gap: 16px; padding: clamp(36px, 5vw, 64px); border: 1px solid var(--line-soft); }
.sign-mark { width: min(200px, 60%); height: auto; }
.sign-mark path { fill: url(#vt-gold); transition: translate 1.3s var(--ease), opacity 1s ease; }
.sign-name { font: 400 clamp(1.15rem, .9rem + 1vw, 1.7rem)/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300); padding-left: .18em; text-align: center; }
.sign-role { font: 500 .8125rem/1 var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-500); padding-left: .3em; }
.js-anim .contact-sign.is-pre .m-v { translate: -80px 60px; opacity: 0; }
.js-anim .contact-sign.is-pre .m-i { translate: 40px -60px; opacity: 0; }
.js-anim .contact-sign.is-pre .m-t { translate: 90px -40px; opacity: 0; }
.sign-mark .m-i { transition-delay: .15s; } .sign-mark .m-t { transition-delay: .3s; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .contact-sign { max-width: 420px; } }
@media (max-width: 560px) { .contact-cta .btn { width: 100%; } }

/* ---------- Rodapé ---------- */
.footer { position: relative; background: var(--navy-950); color: var(--muted); padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-soft); overflow-x: clip; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 5vw, 72px); padding-bottom: clamp(44px, 6vw, 80px); }
.footer-about { margin-top: 20px; max-width: 36ch; font-size: var(--t6); line-height: 1.65; }
.footer h2 { font: 600 .8125rem/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 18px; }
.footer-col { display: grid; gap: 8px; align-content: start; font-size: var(--t6); }
.footer-col a { text-decoration: none; width: fit-content; transition: color .2s ease; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--gold-300); }
@media (max-width: 860px), (pointer: coarse) { .footer-col { gap: 0; } .footer-col a { padding-block: 10px; } }
.footer-bottom { padding-block: 20px 32px; border-top: 1px solid var(--line-soft); font: 500 .8125rem/1.6 var(--font); letter-spacing: .12em; color: var(--muted); }
.footer-bottom a { display: inline-block; padding-block: 10px; color: inherit; text-underline-offset: 4px; }
.footer-bottom a:hover { color: var(--gold-300); }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; padding-right: 80px; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-bottom { padding-bottom: 88px; }
}

/* ---------- WhatsApp flutuante (ouro, sem verde, como pede o manual) ---------- */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 58px; height: 58px; display: grid; place-items: center; background: var(--gold-500); color: var(--navy-950); border-radius: 50%; transition: transform .2s ease, background .2s ease; }
.wa-float svg { width: 28px; height: 28px; }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold-500); opacity: 0; animation: ring 4s ease-out infinite; }
@keyframes ring { 0%, 70% { transform: scale(1); opacity: 0; } 72% { opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.wa-float:hover { background: var(--gold-300); transform: scale(1.06); }
.wa-float-tip { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(6px); padding: 10px 14px; background: var(--navy-800); color: var(--gold-300); border: 1px solid var(--line); white-space: nowrap; pointer-events: none; font: 500 .8125rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.wa-float:hover .wa-float-tip, .wa-float:focus-visible .wa-float-tip { opacity: 1; visibility: visible; transform: translateY(-50%); }
html.portal-on .wa-float { opacity: 0; }
@media (max-width: 640px) {
  .wa-float { width: 52px; height: 52px; right: 12px; bottom: 12px; transition: transform .35s var(--ease), opacity .25s ease, visibility .35s, background .2s ease; }
  .wa-float svg { width: 26px; height: 26px; }
  .wa-float-tip { display: none; }
  body.wa-away .wa-float { transform: translateX(calc(100% + 16px)); opacity: 0; visibility: hidden; }
}

/* ---------- Desempenho: o que está abaixo da capa só é desenhado perto de aparecer ---------- */
html.cv .section, html.cv .footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- Animações ao rolar a página ---------- */
.js-anim [data-fx] { transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: var(--d, 0s); }
.js-anim [data-fx].is-pre { opacity: 0; }
.js-anim [data-fx="up"].is-pre { translate: 0 34px; }
.js-anim [data-fx="left"].is-pre { translate: -56px 0; }
.js-anim [data-fx="right"].is-pre { translate: 56px 0; }
.js-anim .why-item.is-pre::before { scale: 0 1; }
.js-anim .portrait.is-pre img { scale: 1.2; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin: 0 -.06em -.14em 0; }
.w > span { display: inline-block; transition: translate 1s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
.js-anim .display.is-pre .w > span, .js-anim .why-title.is-pre .w > span { translate: 0 112%; }
.swipeable { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.swipeable.is-dragging { cursor: grabbing; }
.swipeable img { -webkit-user-drag: none; user-drag: none; }

/* ---------- Idiomas ---------- */
html[lang="zh-CN"] { --font: "Montserrat", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
html[lang="zh-CN"] body { line-height: 1.8; }
html[lang="zh-CN"] .display, html[lang="zh-CN"] .hero-title, html[lang="zh-CN"] .why-title, html[lang="zh-CN"] .audit-head h3 { letter-spacing: 0; line-height: 1.3; }
html[lang="zh-CN"] .eyebrow, html[lang="zh-CN"] .btn, html[lang="zh-CN"] .nav a, html[lang="zh-CN"] .hero-note { letter-spacing: .08em; }

/* ---------- Página 404 ---------- */
.page-lost { background: var(--white); }
.lost { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; align-items: center; background: var(--white); color: var(--text); padding-block: calc(var(--header-h) + 48px) 96px; }
.lost::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: min(52vw, 720px); aspect-ratio: 1; background: var(--ivory-50); clip-path: polygon(0 0, 100% 0, 0 100%); }
.lost .wrap { position: relative; }
.lost-inner { display: grid; gap: 24px; justify-items: start; max-width: 680px; padding-left: clamp(22px, 3vw, 44px); border-left: 2px solid var(--bronze-500); }
.lost .label { font: 500 .8125rem/1.4 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-700); }
.lost-title { font: 500 clamp(2.2rem, 1rem + 4vw, 3.8rem)/1.1 var(--font); color: var(--navy-950); }
.lost .lead { color: var(--text); }
.lost-path { max-width: 100%; overflow-wrap: anywhere; padding: 8px 14px; border: 1px solid var(--line); color: var(--navy-950); font: 500 var(--t6)/1.4 var(--font); }
.lost-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 8px; }
.lost-mark { position: absolute; z-index: -1; right: -2%; top: 50%; width: min(48%, 660px); translate: 0 -50%; }
.lost-mark path { fill: none; stroke: var(--bronze-500); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lost-mark .m-v { animation: lost-in 1.6s var(--ease) backwards; }
.lost-mark .m-t { animation: lost-in 1.6s var(--ease) .3s backwards; }
.lost-mark .m-i { animation: lost-in 1.6s var(--ease) .15s backwards, lost-drift 6s ease-in-out 1.8s infinite; }
@keyframes lost-in { from { stroke-dashoffset: 1; } }
@keyframes lost-drift { 0%, 100% { translate: 0 0; } 50% { translate: 26px -34px; } }
@media (max-width: 920px) {
  .lost { flex-direction: column; align-items: stretch; justify-content: center; }
  .lost .wrap { order: 1; }
  .lost-mark { order: 2; position: relative; right: auto; top: auto; translate: none; width: 70%; margin: 56px 0 0 auto; z-index: auto; }
}
@media (max-width: 560px) { .lost-actions .btn { width: 100%; } .page-lost .site-header .btn { display: none; } }

/* =========================================================
   Páginas internas (segmentos, cidades, guias, privacidade)
   ========================================================= */
.pg-hero { overflow: hidden; padding-block: calc(var(--header-h) + clamp(40px, 6vw, 88px)) clamp(56px, 7vw, 100px); }
.pg-hero::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; width: min(52vw, 720px); aspect-ratio: 1; background: var(--navy-900); clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none; }
.pg-hero .display { max-width: 24ch; font-size: clamp(1.9rem, 1rem + 2.6vw, 2.9rem); }
.pg-hero .lead { margin-top: 22px; max-width: 54ch; }
.pg-hero-copy { padding-left: clamp(22px, 3vw, 44px); border-left: 2px solid var(--gold-500); }
.pg-hero-copy .display::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 22px; background: var(--gold-500); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 30px; font: 500 .8125rem/1.4 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.crumbs a { position: relative; color: inherit; text-underline-offset: 3px; }
.crumbs a::before { content: ""; position: absolute; inset: -12px -4px; }
.crumbs a:hover { color: var(--gold-300); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 32px; }
.pg-actions .btn, .lost-actions .btn { padding-inline: 28px; letter-spacing: .14em; }
.pg-date { margin-top: 22px; font-size: var(--t6); color: var(--muted); }
.pg-h2 { max-width: 22ch; margin-bottom: clamp(28px, 4vw, 48px); }
.pg-h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 20px; background: var(--gold-500); }
:is(.light, .section--ivory, .section--paper) .pg-h2::after { background: var(--bronze-500); }
.pg-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.point { position: relative; display: grid; gap: 14px; align-content: start; justify-items: start; padding-top: 24px; }
.point::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: var(--gold-500); transform-origin: left; transition: scale .9s var(--ease) .15s; }
.js-anim .point.is-pre::before { scale: 0 1; }
.point h3 { font: 600 var(--t4)/1.3 var(--font); color: var(--gold-300); }
.point p { color: var(--text); max-width: 44ch; }
.pg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pg-list { display: grid; gap: 14px; }
.pg-list li { display: grid; grid-template-columns: 16px 1fr; gap: 14px; align-items: baseline; }
.pg-list li::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--gold-500); transform: translateY(-1px) rotate(45deg); }
:is(.light, .section--ivory, .section--paper) .pg-list li::before { border-color: var(--bronze-500); }
.pg-list a { color: var(--gold-300); font-weight: 600; }
:is(.light, .section--ivory, .section--paper) .pg-list a { color: var(--bronze-700); }
.pg-text { max-width: 54ch; margin-bottom: 22px; color: var(--text); }
.pg-case { display: grid; gap: 18px; justify-items: start; }
.pg-case h3 { font: 500 var(--t3)/1.25 var(--font); color: var(--gold-300); }
:is(.light, .section--ivory, .section--paper) .pg-case h3 { color: var(--navy-950); }
.pg-case p { color: var(--text); }
.pg-more { margin-top: 40px; color: var(--muted); }
.pg-links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.pg-links a { display: inline-block; padding-block: 8px; color: var(--gold-300); font-weight: 500; text-underline-offset: 4px; }
:is(.light, .section--ivory, .section--paper) .pg-links a { color: var(--bronze-700); }
.pg-cta-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.pg-cta-copy { display: grid; gap: 18px; justify-items: start; padding-left: clamp(22px, 3vw, 44px); border-left: 2px solid var(--gold-500); }
.pg-cta .display { max-width: 20ch; }
.pg-cta .pg-actions { margin-top: 0; }
.prose h2 { margin: 2.2em 0 .7em; font: 500 var(--t3)/1.25 var(--font); color: var(--navy-950); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.6em 0 .4em; font: 600 var(--t4)/1.3 var(--font); color: var(--navy-950); }
.prose p { max-width: 68ch; margin-bottom: 1em; color: var(--slate-600); }
.prose a { color: var(--bronze-700); text-underline-offset: 3px; }
.steps-list { counter-reset: s; display: grid; gap: 14px; margin: 0 0 1.4em; max-width: 68ch; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; color: var(--text); }
.steps-list li::before { content: counter(s, decimal-leading-zero); font: 500 .8rem/1 var(--font); letter-spacing: .12em; color: var(--gold-500); }
:is(.light, .section--ivory, .section--paper) .steps-list li { color: var(--slate-600); }
:is(.light, .section--ivory, .section--paper) .steps-list li::before { color: var(--bronze-700); }
.prose .pg-list { margin-bottom: 1.4em; max-width: 68ch; color: var(--slate-600); }
.check-list { display: grid; gap: 26px; }
.check-list li { display: grid; grid-template-columns: 16px 1fr; gap: 0 14px; align-items: baseline; }
.check-list li::before { content: ""; grid-row: 1 / span 2; width: 9px; height: 9px; border: 1.5px solid var(--bronze-500); transform: rotate(45deg); }
.check-list h3 { margin: 0; }
.check-list p { margin: .35em 0 0; }
.note { max-width: 68ch; margin: 1.6em 0; padding: 18px 22px; background: var(--ivory-100); border-left: 2px solid var(--bronze-500); color: var(--navy-950); }
.guide-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.guide-card { display: grid; gap: 10px; padding: 30px 32px; background: var(--navy-900); border: 1px solid var(--line-soft); color: inherit; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.guide-card:hover { border-color: var(--gold-600); background: var(--navy-800); }
.guide-card h2 { font: 500 var(--t4)/1.35 var(--font); color: var(--gold-300); overflow-wrap: anywhere; }
.guide-card p { color: var(--text); }
.maps-self-text { font: 600 .8125rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); }
.maps-self { position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; margin-top: 6px; font: 600 .8125rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--gold-300); border-bottom: 1px solid var(--gold-500); }
.maps-self::before { content: ""; position: absolute; inset: -14px -4px -8px; }
.maps-self:hover { color: var(--gold-500); }
.maps-self svg { width: 15px; height: 15px; flex: none; }
:is(.light, .section--ivory, .section--paper) .maps-self { color: var(--navy-950); border-color: var(--bronze-500); }
.pg-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pg-hero-copy { display: grid; justify-items: start; align-content: center; min-width: 0; }
.pg-hero-media { position: relative; min-width: 0; isolation: isolate; }
.pg-shot { position: relative; display: block; margin-bottom: 48px; animation: pg-in .9s var(--ease) .15s backwards; }
.pg-shot::before { content: ""; position: absolute; z-index: -1; inset: 12% -6% -8% 24%; background: var(--navy-800); clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); }
.pg-shot .phone { left: auto; right: -14px; bottom: -40px; width: 116px; }
.pg-hero-card { max-width: 440px; margin-left: auto; animation: pg-in .9s var(--ease) .15s backwards; }
@keyframes pg-in { from { opacity: 0; translate: 56px 0; } }
.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 112px); align-items: start; }
.pg-split-head { display: grid; gap: 22px; justify-items: start; }
.pg-split .pg-h2 { margin-bottom: 0; }
.pg-split .steps-list { margin: 0; max-width: none; }
.pg-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px; }
.pg-thumb { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.pg-thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 1px solid var(--line); transition: translate .3s var(--ease); }
.pg-thumb:hover img, .pg-thumb:focus-visible img { translate: 0 -6px; }
.pg-thumb span { font: 500 .8125rem/1.3 var(--font); letter-spacing: .04em; }
.pg-case-note { margin-top: 28px; }
.pg-price { margin-top: 24px; }
.pg-sum { display: grid; gap: 20px; max-width: 44ch; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); }
.pg-sum h2 { font: 500 var(--t3)/1.25 var(--font); color: var(--gold-300); }
.pg-sum .pg-list { color: var(--text); }
.pg-article { background: var(--ivory-50); color: var(--slate-600); --text: var(--slate-600); --muted: var(--slate-600); --line: rgba(122, 95, 46, .3); --line-soft: rgba(122, 95, 46, .16); }
.pg-article .pg-more { color: var(--slate-600); }
.pg-article .pg-links a { color: var(--bronze-700); }
.pg-article-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pg-aside { position: sticky; top: calc(var(--header-h) + 36px); display: grid; gap: 16px; justify-items: start; padding: 34px 34px 40px; background: var(--navy-950); color: var(--text); border-left: 2px solid var(--gold-500); }
.pg-aside h2 { font: 500 var(--t3)/1.25 var(--font); color: var(--gold-300); }
.pg-aside p { color: #E6DFD0; }
/* cartão da ficha (guias): ilustrativo */
.gcard { position: relative; display: grid; overflow: hidden; background: var(--navy-900); color: var(--text); border: 1px solid var(--line); }
.gcard-tag { position: absolute; z-index: 1; top: 14px; left: 18px; padding: 6px 10px; background: var(--gold-500); color: var(--navy-950); font: 600 .8125rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; }
.gcard-map { height: 120px; display: grid; place-items: center; background: var(--navy-800); border-bottom: 1px solid var(--line-soft); }
.gcard-map svg { width: 36px; height: 36px; translate: 0 6px; color: var(--gold-500); }
.gcard-body { display: flex; flex-direction: column; padding: 22px clamp(18px, 2vw, 26px) 34px; }
.gcard-name { font: 600 var(--t4)/1.2 var(--font); color: var(--gold-300); }
.gcard-cat { margin-top: 4px; font-size: var(--t6); color: var(--muted); }
.gcard-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.gcard-actions span { display: grid; justify-items: center; gap: 6px; padding: 10px 2px 9px; border: 1px solid var(--line-soft); color: var(--gold-300); font: 500 .8125rem/1 var(--font); letter-spacing: .08em; }
.gcard-actions svg { width: 20px; height: 20px; }
.gcard-rows { display: grid; gap: 12px; margin-top: 18px; }
.gline { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--t6); line-height: 1.4; }
.gline svg { width: 18px; height: 18px; color: var(--gold-500); }
.gcard-result { position: relative; margin-top: 22px; padding-left: 18px; font: 600 var(--t5)/1.35 var(--font); color: var(--gold-300); border-left: 2px solid var(--gold-500); }
@media (max-width: 860px) { .pg-points, .pg-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 920px) {
  .pg-hero-grid, .pg-split, .pg-cta-in, .pg-article-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-aside { position: static; }
  .pg-hero-card { margin-left: 0; }
}
@media (max-width: 560px) { .pg-actions .btn { width: 100%; } }

/* =========================================================
   Tema claro (v13): componentes nas seções brancas e marfim
   ========================================================= */
/* nas seções claras os blocos diagonais saem: atrás do texto eles atrapalham a leitura */
.light .diag { display: none; }
/* peças escuras dentro das seções claras continuam no tema escuro */
.light :is(.audit, .gcard, .pg-aside, .guide-card, .browser, .phone, .quote-sum) { --text: #E6DFD0; --muted: #A8A29C; --line: rgba(198, 166, 107, .32); --line-soft: rgba(198, 166, 107, .18); }
.light :is(.audit, .gcard, .pg-aside, .guide-card) { color: var(--text); }
.light :is(.audit, .gcard, .pg-aside, .guide-card, .quote-sum) :focus-visible { outline-color: var(--gold-300); }
.light :is(.audit, .pg-aside, .gcard, .quote-sum) .btn--line, .light :is(.audit, .pg-aside, .gcard, .quote-sum) .link-arrow { color: var(--gold-300); border-color: var(--gold-500); }
/* Google Meu Negócio */
.light .maps-col h3 { color: var(--bronze-700); }
/* Método */
.light .trail-base { stroke: var(--bronze-500); stroke-opacity: .55; }
.light .trail-draw { stroke: var(--bronze-500); }
.light .trail-head { fill: var(--bronze-700); }
.light .node { background: var(--white); border-color: var(--bronze-500); }
.light .node::after { border-color: var(--bronze-500); }
.light .trail-js .step.is-on .node { background: var(--bronze-500); border-color: var(--bronze-500); }
.light .step-ico { stroke: var(--bronze-500); }
.light .step h3 { color: var(--navy-950); }
/* Sobre */
.light .portrait, .light .thumb { background: var(--ivory-100); }
.light .portrait { outline-color: var(--bronze-500); }
.light .thumb.is-on::after { border-color: var(--bronze-700); }
.light .why-title { color: var(--navy-950); }
.light .why-item::before { background: var(--bronze-500); }
.light .why-item h4 { color: var(--navy-950); }
/* páginas internas */
.light.pg-hero::before, .lost.light::before { display: none; }
.light .pg-hero-copy { border-left-color: var(--bronze-500); }
.light .pg-hero-copy .display::after { background: var(--bronze-500); }
.light .crumbs a:hover { color: var(--bronze-700); }
.light .point::before { background: var(--bronze-500); }
.light .point h3, .light .pg-sum h2 { color: var(--navy-950); }
.light .maps-self-text { color: var(--bronze-700); }
.light .pg-thumb span { color: var(--navy-950); }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.quote { scroll-margin-top: calc(var(--header-h) + 24px); }
.pg-text a { color: inherit; font-weight: 600; text-decoration-color: var(--gold-500); text-underline-offset: 4px; }
:is(.light, .section--ivory, .section--paper) .pg-text a { text-decoration-color: var(--bronze-500); }