/* jeferson.srv.br — demonstração de repaginação, versão 2 (out/2026)
   Marca mantida: navy, azul, rampa azul→menta, verde de status, Sora + Inter.
   Elemento central: o mapa da operação — o Jeferson no centro, ligado a cada
   projeto no ar, com a verificação chegando por fio. */

@font-face {
  font-family: "Sora";
  src: url("/site/assets/fonts/sora-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/site/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* cor — tokens do site atual */
  --navy: #0b1220; --navy-2: #111d33; --navy-3: #16233c;
  --azul: #2f84c5; --azul-claro: #63aee6; --azul-escuro: #22689f; --azul-fundo: #eaf3fb;
  --verde: #49b862; --verde-claro: #7fd693; --verde-escuro: #237a3b;
  --menta: #76c9b0;
  --papel: #f7f8fa; --branco: #fff;
  --tinta: #0f172a; --tinta-2: #334155; --cinza: #5b6b80;
  --linha: #e2e8f0; --linha-forte: #cbd5e1;
  --linha-escura: rgb(255 255 255 / 0.1);
  --texto-escuro: #b6c6d6; --texto-escuro-2: #93a9bf;
  --grad: linear-gradient(90deg, #64afe5, #76c9b0 55%, #7ed597);

  /* tipo */
  --display: "Sora", system-ui, sans-serif;
  --texto: "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --t-12: 0.75rem; --t-14: 0.875rem; --t-16: 1rem; --t-20: 1.25rem;
  --t-25: 1.5625rem; --t-31: 1.953rem; --t-39: 2.441rem;

  /* espaço */
  --e-4: 4px; --e-8: 8px; --e-12: 12px; --e-16: 16px; --e-24: 24px;
  --e-32: 32px; --e-48: 48px; --e-64: 64px; --e-96: 96px; --e-128: 128px;

  --raio: 14px; --raio-sm: 10px; --raio-pill: 999px;
  --largura: 1200px;

  /* motion */
  --motion-dur-1: 120ms; --motion-dur-2: 240ms; --motion-dur-3: 480ms; --motion-dur-4: 800ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --motion-shift: 28px;
  --motion-stagger: 80ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-16)/1.6 var(--texto); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--e-24), var(--largura)); margin-inline: auto; }
@media (max-width: 639px) { .wrap { width: calc(100% - 2 * var(--e-16)); } }
.mascara { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mascara__in { display: block; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pular {
  position: fixed; left: var(--e-16); top: var(--e-16); z-index: 100;
  background: var(--branco); color: var(--tinta); padding: var(--e-12) var(--e-16);
  border-radius: var(--raio-sm); font-weight: 700; transform: translateY(-200%);
}
.pular:focus { transform: none; }

@view-transition { navigation: auto; }

/* barra de progresso (realce) */
.progresso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progresso { animation: progresso linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes progresso { to { transform: scaleX(1); } }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-8);
  min-height: 48px; padding: 0 var(--e-24); border-radius: var(--raio-pill);
  border: 1.5px solid transparent; font: 600 var(--t-16)/1 var(--display);
  text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--motion-dur-1) var(--motion-ease-out), box-shadow var(--motion-dur-2) var(--motion-ease-out), color var(--motion-dur-2), border-color var(--motion-dur-2);
}
.btn::before {
  /* brilho que atravessa no hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%);
  transform: translateX(-110%);
}
.btn:hover::before { transform: translateX(110%); transition: transform 700ms var(--motion-ease-out); }
.btn:active { transform: scale(0.97); }
.btn--azul { background: var(--azul-escuro); color: var(--branco); box-shadow: 0 8px 24px -10px rgb(47 132 197 / 0.8); }
.btn--azul:hover { box-shadow: 0 12px 30px -10px rgb(47 132 197 / 0.95); transform: translateY(-1px); }
.btn--contorno { border-color: rgb(255 255 255 / 0.28); color: var(--branco); background: rgb(255 255 255 / 0.03); }
.btn--contorno:hover { border-color: var(--branco); }
.btn--contorno-escuro { border-color: var(--linha-forte); color: var(--tinta); background: transparent; margin-top: var(--e-24); }
.hosp .btn--contorno-escuro { margin-top: auto; }
.btn--contorno-escuro:hover { border-color: var(--tinta); }
.btn--verde { background: var(--verde-escuro); color: var(--branco); }
.btn--p { min-height: 44px; padding: 0 var(--e-16); font-size: var(--t-14); }
.btn--g { min-height: 56px; padding: 0 var(--e-32); }

.link-seta { display: inline-flex; align-items: center; gap: var(--e-8); min-height: 44px; font-weight: 600; color: var(--azul-escuro); text-decoration: none; }
.link-seta::after {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  clip-path: polygon(0 42%, 64% 42%, 40% 14%, 54% 0, 100% 50%, 54% 100%, 40% 86%, 64% 58%, 0 58%);
  transition: transform var(--motion-dur-2) var(--motion-ease-out);
}
.link-seta:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-seta:hover::after { transform: translateX(4px); }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50; color: var(--branco);
  background: rgb(11 18 32 / 0.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha-escura);
}
.topo__in { display: flex; align-items: center; gap: var(--e-24); min-height: 72px; }
.topo :focus-visible { outline-color: var(--azul-claro); }
.logo { display: inline-flex; padding: var(--e-8) 0; }
.logo__letras { fill: var(--branco); stroke: var(--branco); stroke-width: 0; }
.logo__ponto { fill: var(--menta); transform-box: fill-box; transform-origin: 50% 50%; }
.logo:hover .logo__ponto--fim { animation: ponto-pula 650ms var(--motion-ease-out); }
@keyframes ponto-pula { 30% { transform: translateY(-24px) scale(1.1); } 60% { transform: translateY(0) scale(1.25, 0.8); } 80% { transform: scale(0.95, 1.05); } }
.nav { margin-left: auto; }
.nav__lista { display: flex; gap: var(--e-4); }
.nav__lista a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-12);
  text-decoration: none; font-weight: 500; font-size: var(--t-14); color: var(--texto-escuro); position: relative;
  transition: color var(--motion-dur-2);
}
.nav__lista a::after {
  content: ""; position: absolute; left: var(--e-12); right: var(--e-12); bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--motion-dur-2) var(--motion-ease-out);
}
.nav__lista a:hover { color: var(--branco); }
.nav__lista a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.topo__acoes { display: flex; gap: var(--e-8); align-items: center; }
.menu-btn {
  display: none; width: 48px; height: 48px; border: 1.5px solid rgb(255 255 255 / 0.28); border-radius: var(--raio-pill);
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.menu-btn__linhas { display: grid; gap: 6px; width: 18px; }
.menu-btn__linhas span { height: 2px; background: var(--branco); border-radius: 2px; }
@media (max-width: 1023px) {
  .nav, .topo__acoes .btn--contorno { display: none; }
  .topo__acoes { margin-left: auto; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 479px) { .topo__acoes .btn--azul { display: none; } }

/* gaveta */
.gaveta { position: fixed; inset: 0; z-index: 80; }
.gaveta[hidden] { display: none; }
.gaveta__fundo { position: absolute; inset: 0; background: rgb(11 18 32 / 0.6); }
.gaveta__painel {
  position: absolute; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--navy-2); color: var(--branco);
  padding: var(--e-24); display: flex; flex-direction: column; gap: var(--e-24); border-left: 1px solid var(--linha-escura);
}
.gaveta :focus-visible { outline-color: var(--azul-claro); }
.gaveta__fechar {
  align-self: flex-end; min-height: 44px; padding: 0 var(--e-16); background: transparent; color: var(--branco);
  border: 1.5px solid rgb(255 255 255 / 0.28); border-radius: var(--raio-pill); font: 600 var(--t-14) var(--display); cursor: pointer;
}
.gaveta__lista a { display: block; padding: var(--e-12) 0; font: 600 var(--t-25)/1.2 var(--display); letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--linha-escura); }
@media (prefers-reduced-motion: no-preference) {
  .gaveta.is-abrindo .gaveta__painel { animation: gaveta-entra var(--motion-dur-3) var(--motion-ease-out) both; }
  .gaveta.is-abrindo .gaveta__fundo { animation: some-entra var(--motion-dur-2) var(--motion-ease-out) both; }
  .gaveta.is-abrindo .gaveta__lista li { animation: sobe-entra var(--motion-dur-3) var(--motion-ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 50ms); }
  .gaveta.is-fechando .gaveta__painel { animation: gaveta-entra var(--motion-dur-2) var(--motion-ease-in) reverse both; }
  .gaveta.is-fechando .gaveta__fundo { animation: some-entra var(--motion-dur-2) var(--motion-ease-in) reverse both; }
}
@keyframes gaveta-entra { from { transform: translateX(100%); } }
@keyframes some-entra { from { opacity: 0; } }
@keyframes sobe-entra { from { opacity: 0; transform: translateY(16px); } }

/* ---------- abertura (navy) ---------- */
.abertura {
  position: relative; overflow: hidden; color: var(--branco);
  background: radial-gradient(70% 60% at 78% 35%, rgb(47 132 197 / 0.22), transparent 70%), var(--navy);
  padding: var(--e-64) 0;
}
.abertura__grade {
  /* malha de pontos — a "placa" onde o mapa está ligado */
  position: absolute; inset: -10% 0 0; pointer-events: none;
  background-image: radial-gradient(rgb(147 169 191 / 0.22) 1px, transparent 1.4px);
  background-size: 28px 28px;
  mask-image: radial-gradient(80% 70% at 70% 40%, #000 30%, transparent 80%);
}
@supports (animation-timeline: scroll()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .abertura > .abertura__grade { animation: grade-desce linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  }
}
@keyframes grade-desce { to { transform: translate3d(0, 10%, 0); } }
.abertura__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e-48); align-items: center; }
.selo-topo {
  display: inline-flex; align-items: center; gap: var(--e-8); padding: var(--e-8) var(--e-16);
  border: 1px solid var(--linha-escura); border-radius: var(--raio-pill); background: rgb(255 255 255 / 0.03);
  font: 500 var(--t-14) var(--texto); color: var(--texto-escuro);
}
.selo-topo__luz { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgb(73 184 98 / 0.2); }
.abertura__titulo { margin-top: var(--e-24); font: 700 clamp(2.3rem, 4.3vw, 3.7rem)/1.06 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.abertura__lead { margin-top: var(--e-24); font-size: var(--t-20); line-height: 1.55; color: var(--texto-escuro); max-width: 46ch; }
.abertura__lead strong { color: var(--branco); font-weight: 600; }
.abertura__ctas { display: flex; gap: var(--e-12); flex-wrap: wrap; margin-top: var(--e-32); }
.abertura :focus-visible, .fecho :focus-visible { outline-color: var(--azul-claro); }
@media (prefers-reduced-motion: no-preference) {
  .abertura [data-entra] { animation: sobe-entra var(--motion-dur-4) var(--motion-ease-out) both; }
  .abertura .abertura__lead { animation-delay: 380ms; }
  .abertura .abertura__ctas { animation-delay: 500ms; }
}
@media (max-width: 959px) {
  .abertura { padding-top: var(--e-48); }
  .abertura__in { grid-template-columns: 1fr; }
  .abertura__lead { font-size: var(--t-16); }
}

/* ---------- mapa da operação ---------- */
.mapa { position: relative; aspect-ratio: 1 / 0.92; min-height: 440px; }
.mapa__fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fio { fill: none; stroke: url(#fio-grad); stroke-width: 1.5; stroke-linecap: round; opacity: 0.6; }
.fio--base { stroke: rgb(147 169 191 / 0.2); stroke-width: 1; opacity: 1; stroke-dasharray: 3 5; }
.pacote { fill: var(--verde-claro); filter: drop-shadow(0 0 6px rgb(126 214 147 / 0.9)); }
.mapa__anel {
  position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px;
  border-radius: 50%; border: 1px dashed rgb(118 201 176 / 0.4); pointer-events: none;
}
.mapa__anel::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 1px solid rgb(99 174 230 / 0.18); }
@media (prefers-reduced-motion: no-preference) {
  .mapa__anel { animation: gira 40s linear infinite; }
  .mapa.is-pausado .mapa__anel { animation-play-state: paused; }
}
@keyframes gira { to { transform: rotate(1turn); } }
.mapa__centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 2px; text-align: center; z-index: 2;
}
.mapa__centro img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--navy); box-shadow: 0 0 0 2px var(--menta), 0 0 40px rgb(118 201 176 / 0.35);
  margin-bottom: var(--e-8);
}
.mapa__nome { font: 700 var(--t-20)/1.2 var(--display); letter-spacing: -0.01em; }
.mapa__papel { font: 500 var(--t-12) var(--mono); color: var(--texto-escuro-2); text-transform: uppercase; letter-spacing: 0.08em; }
.mapa__nos { position: absolute; inset: 0; }
.no {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e-8); align-items: center;
  padding: var(--e-8) var(--e-16) var(--e-8) var(--e-12); border-radius: var(--raio-sm);
  background: rgb(17 29 51 / 0.92); border: 1px solid var(--linha-escura);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6); z-index: 1; white-space: nowrap;
  transition: border-color var(--motion-dur-3) var(--motion-ease-out);
}
.no__luz { grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgb(73 184 98 / 0.18); }
.no__dom { font: 600 var(--t-14)/1.3 var(--mono); color: var(--branco); }
.no__ms { font: 500 var(--t-12)/1.3 var(--mono); color: var(--verde-claro); font-variant-numeric: tabular-nums; }
.no.is-aguardando .no__luz { background: var(--texto-escuro-2); box-shadow: none; }
.no.is-aguardando .no__ms { color: var(--texto-escuro-2); }
.no.is-chegou { border-color: rgb(126 214 147 / 0.55); }
.no[data-estado="fora"] .no__luz { background: #f2b35b; }
.no[data-estado="fora"] .no__ms { color: #f2b35b; }
@media (prefers-reduced-motion: no-preference) {
  .no.is-chegou .no__luz { animation: pulso 900ms var(--motion-ease-out); }
}
@keyframes pulso { 0% { transform: scale(1.8); box-shadow: 0 0 0 0 rgb(126 214 147 / 0.7); } 100% { transform: none; box-shadow: 0 0 0 14px rgb(126 214 147 / 0); } }
.mapa__legenda {
  position: absolute; left: 0; right: 0; bottom: -56px; display: flex; justify-content: space-between; align-items: center; gap: var(--e-16);
  font-size: var(--t-14); color: var(--texto-escuro);
}
.mapa__legenda strong { color: var(--verde-claro); font-weight: 600; }
.mapa__pausa {
  min-height: 36px; padding: 0 var(--e-12); border-radius: var(--raio-pill); background: transparent;
  color: var(--texto-escuro); border: 1px solid var(--linha-escura); font: 500 var(--t-12) var(--mono); cursor: pointer;
}
.mapa__pausa:hover { color: var(--branco); border-color: var(--texto-escuro-2); }
@media (max-width: 1100px) and (min-width: 960px) { .no__dom { font-size: var(--t-12); } }
@media (max-width: 959px) {
  .mapa { aspect-ratio: auto; min-height: 0; margin-top: var(--e-48); padding-top: 112px; }
  .mapa__centro { top: 0; left: 0; transform: none; display: flex; align-items: center; gap: var(--e-16); text-align: left; }
  .mapa__centro img { width: 72px; height: 72px; margin: 0; }
  .mapa__centro div { display: grid; }
  .mapa__anel { display: none; }
  .mapa__nos { position: static; display: grid; gap: var(--e-12); padding-left: 72px; }
  .no { position: relative; left: auto; top: auto; transform: none; justify-self: start; }
  .mapa__legenda { position: static; margin-top: var(--e-24); flex-wrap: wrap; }
}

/* números */
.numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--e-96);
  border: 1px solid var(--linha-escura); border-radius: var(--raio); background: rgb(17 29 51 / 0.6); position: relative;
}
.numero { padding: var(--e-24); border-left: 1px solid var(--linha-escura); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--e-4); }
.numero:first-child { border-left: 0; }
.numero__valor { font: 700 clamp(1.5rem, 2.3vw, 2rem)/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.numero__rotulo { color: var(--texto-escuro); font-size: var(--t-14); }
@media (max-width: 767px) {
  .numeros { grid-template-columns: 1fr 1fr; margin-top: var(--e-48); }
  .numero { padding: var(--e-16); }
  .numero:nth-child(3) { border-left: 0; }
  .numero:nth-child(n + 3) { border-top: 1px solid var(--linha-escura); }
}

/* ---------- seções claras ---------- */
.titulo-secao { font: 700 clamp(1.9rem, 3.6vw, 3rem)/1.1 var(--display); letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
.lead { margin-top: var(--e-16); font-size: var(--t-20); color: var(--tinta-2); max-width: 58ch; }
@media (max-width: 639px) { .lead { font-size: var(--t-16); } }
.cabeca { margin-bottom: var(--e-48); }

/* estrutura */
.estrutura { padding: var(--e-128) 0; }
.estrutura__in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e-64); align-items: start; }
.estrutura__texto { position: sticky; top: 120px; }
.estrutura__contador { margin-top: var(--e-32); display: flex; align-items: baseline; gap: var(--e-12); color: var(--tinta-2); font-weight: 500; }
.estrutura__num {
  font: 700 var(--t-39)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; min-width: 1ch;
}
.areas { display: grid; gap: var(--e-12); }
.area {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-24); align-items: center;
  padding: var(--e-24); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
}
.area__nome { font: 600 var(--t-20)/1.25 var(--display); letter-spacing: -0.015em; }
.area__itens { margin-top: var(--e-4); color: var(--cinza); font-size: var(--t-14); }
.area__dono { display: grid; justify-items: end; gap: var(--e-4); min-width: 16ch; font-size: var(--t-14); }
.area__antes { color: var(--cinza); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--azul-claro); }
.area__agora {
  display: inline-flex; align-items: center; gap: var(--e-8); padding: var(--e-4) var(--e-12) var(--e-4) var(--e-4);
  border-radius: var(--raio-pill); background: var(--navy); color: var(--branco); font: 600 var(--t-14) var(--display);
}
.area__agora::before {
  content: ""; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: url("/site/assets/img/jeferson-ia-108.jpg") center / cover; box-shadow: 0 0 0 1.5px var(--menta);
}
@media (max-width: 959px) {
  .estrutura { padding: var(--e-96) 0; }
  .estrutura__in { grid-template-columns: 1fr; gap: var(--e-48); }
  .estrutura__texto { position: static; }
}
@media (max-width: 599px) {
  .area { grid-template-columns: 1fr; gap: var(--e-12); padding: var(--e-16); }
  .area__dono { justify-items: start; display: flex; align-items: center; gap: var(--e-12); flex-wrap: wrap; }
}

/* planos */
.planos { padding: var(--e-128) 0 var(--e-96); background: var(--branco); border-top: 1px solid var(--linha); }
.planos__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-24); }
.plano {
  position: relative; display: flex; flex-direction: column; gap: var(--e-12);
  padding: var(--e-32); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
  transition: border-color var(--motion-dur-2), transform var(--motion-dur-2) var(--motion-ease-out);
}
.plano::before {
  /* fio da marca no topo do cartão */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad);
  transform-origin: 0 50%; transition: transform var(--motion-dur-4) var(--motion-ease-out) 200ms;
}
.plano:hover { border-color: var(--linha-forte); transform: translateY(-3px); }
.plano--destaque { background: var(--navy); color: var(--branco); border-color: var(--navy); }
.plano--destaque:hover { border-color: var(--navy); }
.plano__produto { font: 500 var(--t-14) var(--texto); color: var(--azul-escuro); }
.plano--destaque .plano__produto { color: var(--azul-claro); }
.plano__gancho { font: 600 var(--t-25)/1.2 var(--display); letter-spacing: -0.02em; max-width: 20ch; }
.preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-4); margin-top: var(--e-8); font-variant-numeric: tabular-nums; }
.preco__de { width: 100%; font-size: var(--t-14); color: var(--cinza); }
.preco__moeda { font: 600 var(--t-20) var(--display); }
.preco__valor { font: 700 var(--t-39)/1 var(--display); letter-spacing: -0.03em; }
.preco__per { color: var(--cinza); }
.plano--destaque .preco__per, .plano--destaque .preco__de, .plano--destaque .plano__obs { color: var(--texto-escuro); }
.plano__obs { font-size: var(--t-14); color: var(--cinza); }
.plano__lista { display: grid; gap: var(--e-8); margin: var(--e-8) 0 var(--e-16); padding-top: var(--e-16); border-top: 1px solid var(--linha); font-size: var(--t-14); }
.plano--destaque .plano__lista { border-top-color: var(--linha-escura); color: var(--texto-escuro); }
.plano__lista li { padding-left: var(--e-24); position: relative; }
.plano__lista li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em; width: 11px; height: 6px;
  border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg);
}
.plano__acoes { margin-top: auto; display: flex; align-items: center; gap: var(--e-16); flex-wrap: wrap; }
.plano--destaque .link-seta { color: var(--azul-claro); }
.plano--destaque :focus-visible { outline-color: var(--azul-claro); }
.planos__nota { margin-top: var(--e-24); font-size: var(--t-14); color: var(--cinza); }
@media (max-width: 899px) { .planos__grade { grid-template-columns: 1fr; } .plano { padding: var(--e-24); } }

/* comparação */
.compara { padding: var(--e-96) 0; }
.tabela-rola { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); }
.tabela { width: 100%; border-collapse: collapse; min-width: 620px; }
.tabela th, .tabela td { text-align: left; padding: var(--e-16) var(--e-24); border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela thead th { font: 600 var(--t-12) var(--texto); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cinza); background: var(--papel); }
.tabela tbody th { font-weight: 600; width: 22%; }
.tabela td { color: var(--cinza); }
.tabela .tabela__nos { background: var(--azul-fundo); color: var(--tinta); font-weight: 500; }
.tabela thead .tabela__nos { color: var(--azul-escuro); background: #dcebf8; }
.tabela td.tabela__nos { position: relative; padding-left: calc(var(--e-24) + 22px); }
.tabela td.tabela__nos::before {
  content: ""; position: absolute; left: var(--e-24); top: 1.45em; width: 11px; height: 6px;
  border-left: 2px solid var(--verde-escuro); border-bottom: 2px solid var(--verde-escuro); transform: rotate(-45deg);
}

/* portfólio */
.portfolio { padding: var(--e-96) 0; background: var(--branco); border-block: 1px solid var(--linha); }
.projetos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-24); margin-bottom: var(--e-24); }
.projeto { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; text-decoration: none; transition: border-color var(--motion-dur-2), transform var(--motion-dur-2) var(--motion-ease-out); }
a.projeto:hover { border-color: var(--azul-claro); transform: translateY(-3px); }
.projeto__img { aspect-ratio: 302 / 203; overflow: hidden; background: var(--branco); border-bottom: 1px solid var(--linha); }
.projeto__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--motion-ease-out); }
a.projeto:hover .projeto__img img { transform: scale(1.05); }
.projeto__img--interno { display: grid; place-items: center; background: radial-gradient(80% 80% at 70% 20%, rgb(47 132 197 / 0.3), transparent), var(--navy); }
.bolhas { display: grid; gap: var(--e-8); width: 78%; font-size: var(--t-14); }
.bolha { padding: var(--e-8) var(--e-12); border-radius: 12px; max-width: 85%; }
.bolha--eles { background: var(--navy-3); color: var(--branco); justify-self: start; border-bottom-left-radius: 4px; }
.bolha--nos { background: var(--verde-escuro); color: var(--branco); justify-self: end; border-bottom-right-radius: 4px; }
.projeto__corpo { padding: var(--e-24); display: grid; gap: var(--e-4); }
.projeto__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-8); margin-bottom: var(--e-8); }
.projeto__dom { font: 500 var(--t-12) var(--mono); color: var(--cinza); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--e-8); border-radius: var(--raio-pill); background: #e3f4e7; color: var(--verde-escuro); font: 600 var(--t-12) var(--texto); }
.status__luz { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--neutro { background: var(--linha); color: var(--tinta-2); }
[data-estado="fora"] .status { background: #fdf0dc; color: #8a5300; }
.projeto__nome { font: 600 var(--t-20)/1.25 var(--display); letter-spacing: -0.015em; }
.projeto__tipo { font-size: var(--t-14); font-weight: 600; color: var(--azul-escuro); }
.projeto__desc { font-size: var(--t-14); color: var(--cinza); margin-top: var(--e-4); }
@media (max-width: 899px) { .projetos { grid-template-columns: 1fr; } }

/* dúvidas */
.duvidas { padding: var(--e-96) 0 var(--e-128); }
.duvidas__in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e-64); }
.faq { display: grid; gap: var(--e-12); }
.faq__item { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); transition: border-color var(--motion-dur-2); }
.faq__item[open] { border-color: var(--azul-claro); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-16);
  min-height: 64px; padding: var(--e-16) var(--e-24); font: 600 var(--t-16)/1.4 var(--display);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; width: 14px; height: 14px; flex: none;
  background: linear-gradient(var(--azul-escuro), var(--azul-escuro)) center / 100% 2px no-repeat,
              linear-gradient(var(--azul-escuro), var(--azul-escuro)) center / 2px 100% no-repeat;
  transition: transform var(--motion-dur-2) var(--motion-ease-out);
}
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__resp { padding: 0 var(--e-24) var(--e-24); color: var(--tinta-2); max-width: 65ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__resp { animation: sobe-entra var(--motion-dur-3) var(--motion-ease-out); }
}
@media (max-width: 899px) { .duvidas__in { grid-template-columns: 1fr; gap: var(--e-32); } }

/* fecho */
.fecho { position: relative; overflow: hidden; background: radial-gradient(60% 70% at 20% 30%, rgb(47 132 197 / 0.2), transparent 70%), var(--navy); color: var(--branco); padding: var(--e-128) 0; }
.fecho__in { position: relative; }
.fecho__foto { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--navy); box-shadow: 0 0 0 2px var(--menta); margin-bottom: var(--e-32); }
.fecho__titulo { font: 700 clamp(2.1rem, 4.6vw, 4rem)/1.08 var(--display); letter-spacing: -0.035em; max-width: 20ch; }
.fecho__acoes { display: flex; align-items: center; gap: var(--e-32); flex-wrap: wrap; margin-top: var(--e-48); }
.fecho__fone { font: 600 var(--t-20) var(--display); text-decoration: none; color: var(--texto-escuro); min-height: 44px; display: inline-flex; align-items: center; }
.fecho__fone:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 6px; }
.fecho__quem { margin-top: var(--e-48); color: var(--texto-escuro-2); max-width: 56ch; }

/* rodapé */
.rodape { background: #070c16; color: var(--texto-escuro-2); padding: var(--e-48) 0; font-size: var(--t-14); }
.rodape__in { display: flex; gap: var(--e-24); align-items: center; flex-wrap: wrap; }
.rodape__logo { fill: var(--branco); }
.rodape__ponto { fill: var(--menta); }
.rodape__demo { margin-left: auto; }
.rodape :focus-visible { outline-color: var(--azul-claro); }

/* botão flutuante */
.whats {
  position: fixed; right: var(--e-16); bottom: var(--e-16); z-index: 40;
  display: inline-flex; align-items: center; gap: var(--e-8); min-height: 52px; padding: 0 var(--e-24) 0 var(--e-16);
  background: var(--verde-escuro); color: #fff; border-radius: var(--raio-pill); text-decoration: none; font: 600 var(--t-16) var(--display);
  box-shadow: 0 12px 30px -10px rgb(11 18 32 / 0.6); transition: transform var(--motion-dur-2) var(--motion-ease-out);
}
.whats:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: no-preference) { .whats { animation: whats-entra var(--motion-dur-4) var(--motion-ease-out) 1.8s both; } }
@keyframes whats-entra { from { transform: translateY(120%) scale(0.8); opacity: 0; } }
@media (max-width: 479px) { .whats span { display: none; } .whats { padding: 0 var(--e-16); } }

/* ---------- reveal (classe posta pelo JS) ---------- */
.has-motion [data-revela] { opacity: 0; transform: translate3d(0, var(--motion-shift), 0); }
.has-motion [data-revela].is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--motion-dur-3) var(--motion-ease-out), transform var(--motion-dur-3) var(--motion-ease-out), border-color var(--motion-dur-2);
  transition-delay: calc(min(var(--reveal-i, 0), 6) * var(--motion-stagger));
}
.has-motion .plano:not(.is-visible)::before { transform: scaleX(0); }
.has-motion .plano.is-visible:hover, .has-motion a.projeto.is-visible:hover { transform: translateY(-3px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-revela], .has-motion [data-revela].is-visible { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===================== versão 3: foco em sistemas sob medida ===================== */

/* núcleo do mapa (no lugar da foto) */
.nucleo {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--navy-3), var(--navy-2));
  border: 3px solid var(--navy); box-shadow: 0 0 0 2px var(--menta), 0 0 40px rgb(118 201 176 / 0.35);
  margin-bottom: var(--e-8);
}
.nucleo svg { fill: none; stroke: var(--menta); stroke-width: 2.2; stroke-linecap: round; }
.mapa__pausa { white-space: nowrap; }
.mapa__centro > div { background: rgb(11 18 32 / 0.88); padding: 2px 10px 4px; border-radius: 8px; }
@media (min-width: 960px) { .no { width: 236px; } }
.no__ms { transition: opacity var(--motion-dur-2) var(--motion-ease-out); }
.no__ms.is-trocando { opacity: 0; }
@media (max-width: 959px) { .nucleo { width: 72px; height: 72px; margin: 0; } .nucleo svg { width: 34px; height: 34px; } }

/* caos → sistema */
.caos { padding: var(--e-128) 0; overflow: hidden; }
.caos__in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e-64); align-items: center; }
.lead--forte { color: var(--tinta); font-weight: 600; }
.caos__palco { position: relative; min-height: 460px; }
.papel {
  position: absolute; padding: var(--e-12) var(--e-16); border-radius: var(--raio-sm);
  background: var(--branco); border: 1px solid var(--linha); box-shadow: 0 10px 24px -14px rgb(15 23 42 / 0.35);
  font: 500 var(--t-14) var(--mono); color: var(--tinta-2); white-space: nowrap;
}
.papel--1 { left: 0; top: 4%; rotate: -5deg; }
.papel--2 { right: 4%; top: 0; rotate: 4deg; background: #fff8e6; }
.papel--3 { left: 6%; bottom: 10%; rotate: 3deg; background: #e8f6ec; }
.papel--4 { right: 0; bottom: 18%; rotate: -6deg; background: #fff3a8; }
.papel--5 { left: 36%; bottom: 0; rotate: -2deg; }
.papel--6 { right: 10%; top: 44%; rotate: 7deg; }
.janela {
  position: absolute; left: 50%; top: 50%; width: min(420px, 92%); translate: -50% -50%;
  background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--raio);
  box-shadow: 0 30px 60px -24px rgb(15 23 42 / 0.45); overflow: hidden; z-index: 2;
}
.janela__barra { display: flex; align-items: center; gap: 6px; padding: var(--e-12) var(--e-16); background: var(--navy); color: var(--branco); }
.janela__barra span { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 0.25); }
.janela__barra p { margin-left: var(--e-8); font: 600 var(--t-14) var(--display); }
.janela__corpo { padding: var(--e-24); display: grid; gap: var(--e-16); }
.janela__cliente { font: 600 var(--t-16) var(--display); display: flex; justify-content: space-between; gap: var(--e-8); flex-wrap: wrap; }
.janela__cliente em { font: 600 var(--t-12) var(--texto); font-style: normal; color: var(--verde-escuro); background: #e3f4e7; padding: 2px var(--e-8); border-radius: var(--raio-pill); }
.janela__etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-4); font-size: var(--t-12); color: var(--cinza); }
.janela__etapas li { padding-top: var(--e-12); border-top: 4px solid var(--linha); }
.janela__etapas .feito { border-top-color: var(--verde); color: var(--tinta); }
.janela__etapas .agora { border-top-color: var(--azul); color: var(--azul-escuro); font-weight: 600; }
.janela__dados { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-8); }
.janela__dados div { background: var(--papel); border-radius: var(--raio-sm); padding: var(--e-8) var(--e-12); }
.janela__dados dt { font-size: var(--t-12); color: var(--cinza); }
.janela__dados dd { font: 700 var(--t-16) var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 959px) {
  .caos { padding: var(--e-96) 0; }
  .caos__in { grid-template-columns: 1fr; gap: var(--e-32); }
  .caos__palco { min-height: 380px; }
  .papel { font-size: var(--t-12); }
}

/* o que resolve */
.resolve { padding: var(--e-96) 0; background: var(--branco); border-block: 1px solid var(--linha); }
.resolve__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-24); }
.resolve__item { padding: var(--e-24); border-radius: var(--raio); background: var(--papel); border: 1px solid var(--linha); position: relative; overflow: hidden; }
.resolve__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--motion-dur-3) var(--motion-ease-out);
}
.resolve__item:hover::before { transform: scaleY(1); }
.resolve__item h3 { font: 600 var(--t-20)/1.25 var(--display); letter-spacing: -0.015em; margin-bottom: var(--e-8); }
.resolve__item p { color: var(--cinza); font-size: var(--t-14); }
@media (max-width: 899px) { .resolve__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .resolve__grade { grid-template-columns: 1fr; } }

/* processo */
.processo { padding: var(--e-128) 0 var(--e-96); }
.passos { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e-24); position: relative; }
.passos::before, .passos::after {
  content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: var(--linha);
}
.passos::after { background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--progresso, 1)); }
.passo { position: relative; z-index: 1; }
.passo__n {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--branco); font: 700 var(--t-16) var(--display);
  box-shadow: 0 0 0 6px var(--papel); margin-bottom: var(--e-16);
  transition: background var(--motion-dur-3), transform var(--motion-dur-3) var(--motion-ease-out);
}
.passo.is-ativo .passo__n { background: var(--azul-escuro); transform: scale(1.08); }
.passo h3 { font: 600 var(--t-20)/1.25 var(--display); margin-bottom: var(--e-8); }
.passo p { color: var(--cinza); font-size: var(--t-14); }
.processo__cta { margin-top: var(--e-48); }
@media (max-width: 899px) {
  .passos { grid-template-columns: 1fr; gap: var(--e-32); }
  .passos::before, .passos::after { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
  .passos::after { transform-origin: 50% 0; transform: scaleY(var(--progresso, 1)); }
  .passo { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--e-16); }
  .passo__n { grid-row: 1 / span 2; margin: 0; }
}

/* outros serviços */
.servicos { padding: var(--e-96) 0; background: var(--navy); color: var(--branco); }
.servicos .lead { color: var(--texto-escuro); }
.servicos__grade { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--e-32); border-top: 1px solid var(--linha-escura); }
.servico { padding: var(--e-24) 0 var(--e-32); border-bottom: 1px solid var(--linha-escura); }
.servico h3 { font: 600 var(--t-20)/1.25 var(--display); margin-bottom: var(--e-8); }
.servico p { color: var(--texto-escuro); font-size: var(--t-14); max-width: 34ch; }
.servicos__mais { margin-top: var(--e-32); }
.servicos .link-seta { color: var(--azul-claro); }
.servicos :focus-visible { outline-color: var(--azul-claro); }
@media (max-width: 899px) { .servicos__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .servicos__grade { grid-template-columns: 1fr; } }

/* canais no fecho */
.canais { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-16); margin-top: var(--e-48); }
.canal {
  display: grid; gap: var(--e-8); align-content: start; text-align: left; padding: var(--e-24);
  border-radius: var(--raio); border: 1px solid var(--linha-escura); background: rgb(17 29 51 / 0.7);
  color: var(--branco); text-decoration: none; font: inherit; cursor: pointer;
  transition: border-color var(--motion-dur-2), transform var(--motion-dur-2) var(--motion-ease-out);
}
.canal:hover { border-color: var(--azul-claro); transform: translateY(-3px); }
.canal h3 { font: 600 var(--t-20)/1.25 var(--display); }
.canal p { color: var(--texto-escuro); font-size: var(--t-14); }
.canal__acao { margin-top: var(--e-8); font-weight: 600; color: var(--azul-claro); }
.canal--principal { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.canal--principal p { color: #e3eef8; }
.canal--principal .canal__acao { color: var(--branco); }
@media (max-width: 899px) { .canais { grid-template-columns: 1fr; } }
.has-motion .canal.is-visible:hover { transform: translateY(-3px); transition-delay: 0s; }

/* modal de contato — mesmo formulário e endpoint do site atual */
.falar { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--e-16); }
.falar[hidden] { display: none; }
.falar__fundo { position: absolute; inset: 0; background: rgb(11 18 32 / 0.7); backdrop-filter: blur(4px); }
.falar__box {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--branco); border-radius: 18px; padding: var(--e-32);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5);
}
.falar__box h3 { font: 700 var(--t-25)/1.2 var(--display); letter-spacing: -0.02em; padding-right: var(--e-32); }
.falar__sub { margin-top: var(--e-8); color: var(--cinza); font-size: var(--t-14); }
.falar__x {
  position: absolute; right: var(--e-12); top: var(--e-12); width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--cinza); cursor: pointer;
}
.falar__x:hover { background: var(--papel); color: var(--tinta); }
.falar__form { display: grid; gap: var(--e-16); margin-top: var(--e-24); }
.falar__hp { position: absolute; left: -9999px; }
.falar__campo { display: grid; gap: var(--e-4); }
.falar__campo label { font: 600 var(--t-14) var(--texto); }
.falar__campo input, .falar__campo textarea {
  width: 100%; min-height: 48px; padding: var(--e-12) var(--e-16); border-radius: var(--raio-sm);
  border: 1px solid var(--linha-forte); font: 400 var(--t-16)/1.5 var(--texto); color: var(--tinta); background: var(--branco);
  transition: border-color var(--motion-dur-2), box-shadow var(--motion-dur-2);
}
.falar__campo textarea { resize: vertical; }
.falar__campo input:focus-visible, .falar__campo textarea:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgb(47 132 197 / 0.3); }
.falar__campo [aria-invalid="true"] { border-color: #b42318; }
.falar__erro { color: #b42318; font-size: var(--t-14); }
.falar__erro:empty { display: none; }
.falar__enviar { width: 100%; min-height: 52px; }
.falar__enviar:disabled { opacity: 0.7; cursor: progress; }
.falar__aviso { color: #b42318; font-size: var(--t-14); }
.falar__ok { text-align: center; display: grid; justify-items: center; gap: var(--e-12); padding: var(--e-24) 0 var(--e-8); }
.falar__ok[hidden] { display: none; }
.falar__ok svg { width: 72px; height: 72px; }
.falar__ok circle { fill: #e3f4e7; }
.falar__ok path { fill: none; stroke: var(--verde-escuro); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; }
.falar__ok h4 { font: 700 var(--t-25) var(--display); margin: 0; }
.falar__ok p { color: var(--cinza); }
.btn--claro { border-color: var(--linha-forte); color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) {
  .falar.is-abrindo .falar__fundo { animation: some-entra var(--motion-dur-2) var(--motion-ease-out) both; }
  .falar.is-abrindo .falar__box { animation: modal-entra var(--motion-dur-3) var(--motion-ease-out) both; }
  .falar.is-fechando .falar__fundo { animation: some-entra var(--motion-dur-2) var(--motion-ease-in) reverse both; }
  .falar.is-fechando .falar__box { animation: modal-entra var(--motion-dur-2) var(--motion-ease-in) reverse both; }
  .falar__ok:not([hidden]) path { animation: risca 600ms var(--motion-ease-out) 150ms both; }
  .falar__ok:not([hidden]) svg { animation: modal-entra 500ms var(--motion-ease-out) both; }
  .falar__campo.is-erro { animation: treme 360ms ease; }
}
@keyframes modal-entra { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
@keyframes risca { from { stroke-dashoffset: 40; } }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
button.whats { border: 0; cursor: pointer; }

/* ===================== versão 4: páginas internas ===================== */

.nav__lista a[aria-current="page"] { color: var(--branco); }
.nav__lista a[aria-current="page"]::after { transform: scaleX(1); }
.titulo-secao--m { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.janela__item { font-size: var(--t-14); color: var(--cinza); margin-top: calc(var(--e-12) * -1); }

/* topo das páginas internas */
.hero-int {
  position: relative; overflow: hidden; color: var(--branco); padding: var(--e-96) 0 var(--e-96);
  background: radial-gradient(60% 80% at 85% 20%, rgb(47 132 197 / 0.22), transparent 70%), var(--navy);
}
.hero-int__in { position: relative; }
.hero-int__titulo { margin-top: var(--e-24); font: 700 clamp(2.2rem, 4.6vw, 3.9rem)/1.06 var(--display); letter-spacing: -0.035em; max-width: 22ch; }
.hero-int__lead { margin-top: var(--e-24); font-size: var(--t-20); line-height: 1.55; color: var(--texto-escuro); max-width: 60ch; }
.hero-int :focus-visible { outline-color: var(--azul-claro); }
@media (prefers-reduced-motion: no-preference) {
  .hero-int [data-entra] { animation: sobe-entra var(--motion-dur-4) var(--motion-ease-out) both; }
  .hero-int .hero-int__lead { animation-delay: 300ms; }
  .hero-int .abertura__ctas, .hero-int .retrato--hero { animation-delay: 420ms; }
  .hero-int .atalhos { animation-delay: 540ms; }
}
@media (max-width: 639px) { .hero-int { padding: var(--e-64) 0; } .hero-int__lead { font-size: var(--t-16); } }
.atalhos { display: flex; flex-wrap: wrap; gap: var(--e-8); margin-top: var(--e-48); }
.atalhos a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-16); border-radius: var(--raio-pill);
  border: 1px solid var(--linha-escura); color: var(--texto-escuro); text-decoration: none; font-size: var(--t-14); font-weight: 500;
  transition: color var(--motion-dur-2), border-color var(--motion-dur-2), background var(--motion-dur-2);
}
.atalhos a:hover { color: var(--branco); border-color: var(--azul-claro); background: rgb(99 174 230 / 0.08); }
.hero-int__in--foto { display: grid; grid-template-columns: 7fr 5fr; gap: var(--e-64); align-items: center; }
@media (max-width: 899px) { .hero-int__in--foto { grid-template-columns: 1fr; gap: var(--e-48); } }

/* retratos (Sobre) */
.retrato { position: relative; }
.retrato img { width: 100%; height: auto; border-radius: var(--raio); }
.retrato figcaption { margin-top: var(--e-12); font-size: var(--t-14); color: var(--texto-escuro-2); }
.retrato--hero img { aspect-ratio: 485 / 560; object-fit: cover; box-shadow: 0 0 0 1px var(--linha-escura), 0 30px 60px -20px rgb(0 0 0 / 0.6); max-width: 420px; }
.retrato--hero::before {
  content: ""; position: absolute; inset: -14px 28px 40px -14px; border: 1px solid rgb(118 201 176 / 0.4); border-radius: var(--raio); z-index: -1;
}
.retrato--lado { position: sticky; top: 112px; }
.retrato--lado figcaption { color: var(--cinza); }

/* história (Sobre) */
.historia { padding: var(--e-128) 0 var(--e-96); }
.historia__in { display: grid; grid-template-columns: 7fr 4fr; gap: var(--e-64); align-items: start; }
.historia__texto { display: grid; gap: var(--e-64); }
.historia__texto p { margin-top: var(--e-16); font-size: var(--t-16); color: var(--tinta-2); max-width: 64ch; line-height: 1.7; }
.linha-tempo { display: flex; flex-wrap: wrap; gap: var(--e-8); margin-top: var(--e-24); }
.linha-tempo li {
  padding: var(--e-4) var(--e-12); border-radius: var(--raio-pill); background: var(--branco); border: 1px solid var(--linha);
  font: 600 var(--t-14) var(--display);
}
@media (max-width: 899px) {
  .historia { padding: var(--e-96) 0 var(--e-64); }
  .historia__in { grid-template-columns: 1fr; }
  .retrato--lado { position: static; max-width: 320px; }
}

/* valores e "o que esperar" */
.valores, .esperar { padding: var(--e-96) 0; background: var(--branco); border-block: 1px solid var(--linha); }
.valores__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-24); }
.valores__grade--4 { grid-template-columns: repeat(4, 1fr); }
.valor { padding: var(--e-24); border-radius: var(--raio); background: var(--papel); border: 1px solid var(--linha); position: relative; overflow: hidden; }
.valor::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); transform-origin: 0 50%; transition: transform var(--motion-dur-4) var(--motion-ease-out) 200ms; }
.has-motion .valor:not(.is-visible)::before { transform: scaleX(0); }
.valor h3 { font: 600 var(--t-20)/1.25 var(--display); margin-bottom: var(--e-8); }
.valor p { color: var(--cinza); font-size: var(--t-14); }
@media (max-width: 1023px) { .valores__grade--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .valores__grade, .valores__grade--4 { grid-template-columns: 1fr; } }

/* serviços: quatro áreas */
.areas-serv { padding: var(--e-96) 0; }
.areas-serv__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-24); }
.area-serv { padding: var(--e-32); border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); }
.area-serv--destaque { border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgb(99 174 230 / 0.15); }
.area-serv__nome { font: 700 var(--t-25)/1.2 var(--display); letter-spacing: -0.02em; }
.area-serv__desc { margin-top: var(--e-8); color: var(--cinza); }
.itens { margin-top: var(--e-24); border-top: 1px solid var(--linha); }
.item {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--e-16); align-items: center;
  padding: var(--e-12) var(--e-8); border-bottom: 1px solid var(--linha); text-decoration: none; position: relative;
  transition: background var(--motion-dur-2);
}
.item::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; width: 14px; height: 14px; background: var(--azul-escuro);
  clip-path: polygon(0 42%, 64% 42%, 40% 14%, 54% 0, 100% 50%, 54% 100%, 40% 86%, 64% 58%, 0 58%);
  transform: translateX(-6px); opacity: 0.4; transition: transform var(--motion-dur-2) var(--motion-ease-out), opacity var(--motion-dur-2);
}
.item:hover { background: var(--azul-fundo); }
.item:hover::after { transform: none; opacity: 1; }
.item__nome { font: 600 var(--t-16)/1.35 var(--display); }
.item__desc { grid-column: 1; font-size: var(--t-14); color: var(--cinza); }
.item--forte .item__nome { color: var(--azul-escuro); }
@media (max-width: 899px) { .areas-serv__grade { grid-template-columns: 1fr; } .area-serv { padding: var(--e-24); } }

/* sistemas prontos em 3 colunas */
.planos__grade--3 { grid-template-columns: repeat(3, 1fr); }
.plano__resumo { color: var(--cinza); font-size: var(--t-14); }
.plano--destaque .plano__resumo { color: var(--texto-escuro); }
.chip-api {
  align-self: flex-start; display: inline-flex; gap: 4px; padding: 2px var(--e-12); border-radius: var(--raio-pill);
  background: #e3f4e7; color: var(--verde-escuro); font-size: var(--t-12); font-weight: 500;
}
.plano--destaque .chip-api { background: rgb(126 214 147 / 0.15); color: var(--verde-claro); }
@media (max-width: 1099px) { .planos__grade--3 { grid-template-columns: 1fr; } }

/* hospedagem */
.hospedagem { padding: var(--e-96) 0; }
.hosp__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-24); align-items: stretch; }
.hosp {
  display: flex; flex-direction: column; gap: var(--e-12); padding: var(--e-32); border-radius: var(--raio);
  background: var(--branco); border: 1px solid var(--linha); position: relative;
}
.hosp .btn { margin-top: auto; }
.hosp .plano__lista { margin-bottom: var(--e-8); }
.hosp--top { border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgb(99 174 230 / 0.15), 0 24px 50px -30px rgb(34 104 159 / 0.6); }
.hosp__tag {
  position: absolute; top: -13px; left: var(--e-32); padding: 2px var(--e-12); border-radius: var(--raio-pill);
  background: var(--azul-escuro); color: var(--branco); font: 600 var(--t-12) var(--display);
}
.hosp__nome { font: 700 var(--t-20) var(--display); }
.hosp .link-seta { align-self: center; }
@media (max-width: 899px) { .hosp__grade { grid-template-columns: 1fr; gap: var(--e-32); } }

/* portfólio completo */
.portfolio--pagina { border-top: 0; padding-top: var(--e-96); }
.casos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-32); }
.caso { display: grid; grid-template-rows: auto 1fr; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; transition: border-color var(--motion-dur-2); }
.caso:hover { border-color: var(--azul-claro); }
.caso__img { aspect-ratio: 302 / 203; overflow: hidden; background: var(--branco); border-bottom: 1px solid var(--linha); }
.caso__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--motion-ease-out); }
.caso:hover .caso__img img { transform: scale(1.04); }
.caso__corpo { padding: var(--e-24) var(--e-32) var(--e-32); display: flex; flex-direction: column; gap: var(--e-8); }
.caso__nome { font: 700 var(--t-25)/1.2 var(--display); letter-spacing: -0.02em; }
.caso__desc { color: var(--tinta-2); }
.caso__feito { margin-top: var(--e-8); padding: var(--e-16); border-radius: var(--raio-sm); background: var(--branco); border: 1px solid var(--linha); font-size: var(--t-14); color: var(--tinta-2); }
.caso__feito-tit { font: 600 var(--t-12) var(--texto); text-transform: uppercase; letter-spacing: 0.06em; color: var(--azul-escuro); margin-bottom: var(--e-4); }
.caso .link-seta { margin-top: auto; align-self: flex-start; }
@media (max-width: 899px) { .casos { grid-template-columns: 1fr; } .caso__corpo { padding: var(--e-24); } }

/* painel do cliente (Contato) */
.painel-cli { padding: var(--e-96) 0; }
.painel-cli__in {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-32); flex-wrap: wrap;
  padding: var(--e-48); border-radius: var(--raio); background: var(--azul-fundo); border: 1px solid #cfe3f4;
}
.painel-cli__in .lead { max-width: 52ch; }
@media (max-width: 639px) { .painel-cli__in { padding: var(--e-24); } }
.canais--hero { margin-top: var(--e-48); }
.canal__tit { font: 600 var(--t-20)/1.25 var(--display); }

/* fecho com texto */
.fecho__lead { margin-top: var(--e-24); font-size: var(--t-20); color: var(--texto-escuro); max-width: 60ch; }
@media (max-width: 639px) { .fecho__lead { font-size: var(--t-16); } }

/* rodapé completo */
.rodape { padding: var(--e-64) 0 var(--e-32); }
.rodape__grade { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: var(--e-32); }
.rodape__marca p { margin-top: var(--e-16); max-width: 32ch; }
.rodape__tit { font: 600 var(--t-14) var(--display); color: var(--branco); margin-bottom: var(--e-12); }
.rodape ul { display: grid; gap: var(--e-4); }
.rodape a, .rodape__link {
  display: inline-flex; align-items: center; min-height: 32px; color: var(--texto-escuro-2); text-decoration: none;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; transition: color var(--motion-dur-2);
}
.rodape a:hover, .rodape__link:hover { color: var(--branco); }
.rodape__base { display: flex; align-items: center; gap: var(--e-24); flex-wrap: wrap; margin-top: var(--e-48); padding-top: var(--e-24); border-top: 1px solid var(--linha-escura); }
.rodape__base .rodape__demo { margin-left: auto; }
@media (max-width: 899px) { .rodape__grade { grid-template-columns: 1fr 1fr; } .rodape__marca { grid-column: 1 / -1; } }
@media (max-width: 479px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ===================== política de privacidade ===================== */
.politica { padding: var(--e-96) 0 var(--e-128); }
.politica__in { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--e-64); align-items: start; }
.politica__indice { position: sticky; top: 112px; }
.politica__indice-tit { font: 600 var(--t-14) var(--display); margin-bottom: var(--e-12); }
.politica__indice ol { list-style: none; border-left: 2px solid var(--linha); counter-reset: ind; }
.politica__indice a {
  display: flex; gap: var(--e-8); min-height: 40px; align-items: center; margin-left: -2px; padding: 0 var(--e-16);
  border-left: 2px solid transparent; color: var(--cinza); text-decoration: none; font-size: var(--t-14);
  transition: color var(--motion-dur-2), border-color var(--motion-dur-2);
}
.politica__indice a::before { counter-increment: ind; content: counter(ind) "."; font-variant-numeric: tabular-nums; }
.politica__indice a:hover { color: var(--azul-escuro); border-left-color: var(--azul-claro); }
.politica__texto { display: grid; gap: var(--e-48); max-width: 760px; }
.politica__texto section { scroll-margin-top: 104px; }
.politica__texto h2 { font: 700 var(--t-25)/1.2 var(--display); letter-spacing: -0.02em; margin-bottom: var(--e-16); }
.politica__texto p, .politica__texto li { color: var(--tinta-2); line-height: 1.7; }
.politica__texto p + p, .politica__texto ul + p, .politica__tabela + p { margin-top: var(--e-12); }
.politica__texto ul { list-style: none; display: grid; gap: var(--e-8); margin-top: var(--e-12); }
.politica__texto li { position: relative; padding-left: var(--e-24); }
.politica__texto li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--azul-claro); }
.politica__texto a { color: var(--azul-escuro); text-underline-offset: 3px; }
.politica__tabela { margin-top: var(--e-12); overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); }
.politica__tabela table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: var(--t-14); }
.politica__tabela th, .politica__tabela td { text-align: left; vertical-align: top; padding: var(--e-12) var(--e-16); border-bottom: 1px solid var(--linha); }
.politica__tabela tr:last-child > * { border-bottom: 0; }
.politica__tabela thead th { background: var(--papel); font: 600 var(--t-12) var(--texto); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cinza); }
.politica__tabela tbody th { font-weight: 600; color: var(--tinta); width: 30%; }
@media (max-width: 899px) {
  .politica { padding: var(--e-64) 0 var(--e-96); }
  .politica__in { grid-template-columns: 1fr; gap: var(--e-32); }
  .politica__indice { position: static; }
}