/* ============================================================
   KALI MARQUES · CORRETORA DE IMÓVEIS
   ------------------------------------------------------------
   Organização do arquivo (Atomic Design):
     1. TOKENS        variáveis de cor, espaço, tipo, raio e tempo
     2. BASE          reset e ajustes globais
     3. LAYOUT        wrap, seções e superfícies
     4. ÁTOMOS        botão, chip, campo, marca, ponto
     5. MOLÉCULAS     cabeçalho de seção, barra de confiança, acordeão,
                      passo, slider, opção, resumo, depoimento
     6. ORGANISMOS    header, hero, sobre, simulador, formulário, rodapé
     7. MOVIMENTO
     8. BREAKPOINTS   mobile first: 600px, 900px, 1200px

   Grade de 8 pontos: todo espaçamento sai da escala --s-*.
   Política de raio: só recebem canto arredondado os controles
   (botões, campos, opções) e as superfícies contidas (painéis, cards,
   imagens com moldura). Fios, divisórias e faixas de ponta a ponta
   ficam retos, para a estrutura continuar legível.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* --- Primitivas da marca --- */
  --c-navy-900:#041626;
  --c-navy-800:#0B2740;
  --c-navy-700:#123152;
  --c-navy-600:#163A59;
  --c-sand:#A69586;
  --c-sand-dark:#7E6E60;
  --c-sand-light:#C9BFB5;
  --c-white:#F2F2F2;
  --c-danger:#B4462E;
  --c-whats:#1EA85A;

  /* --- Semânticas (superfície escura, padrão) --- */
  --bg:var(--c-navy-900);
  --surface:rgba(242,242,242,.045);
  --surface-2:var(--c-navy-800);
  --fg:var(--c-white);
  --fg-2:rgba(242,242,242,.74);
  --fg-3:rgba(242,242,242,.5);
  --border:rgba(242,242,242,.13);
  --border-2:rgba(242,242,242,.26);
  --accent:var(--c-sand);
  --accent-fg:var(--c-navy-900);
  --accent-soft:rgba(166,149,134,.14);
  --field-bg:rgba(242,242,242,.05);

  /* --- Espaço (grade de 8pt) --- */
  --s-1:4px;  --s-2:8px;   --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px;  --s-7:40px; --s-8:48px;
  --s-9:64px; --s-10:80px; --s-11:96px; --s-12:128px;
  --s-sec:clamp(64px, 9vw, 120px);
  --s-gutter:20px;

  /* --- Tipografia --- */
  --font-sans:"Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --fs-100:11px;
  --fs-200:13px;
  --fs-300:15px;
  --fs-400:16px;
  --fs-500:18px;
  --fs-600:clamp(19px, 1.5vw, 22px);
  --fs-700:clamp(22px, 2.4vw, 28px);
  --fs-800:clamp(27px, 4vw, 44px);
  --fs-900:clamp(34px, 6.4vw, 60px);

  --lh-tight:1.08;
  --lh-snug:1.3;
  --lh-base:1.65;
  --tr-tight:-.035em;
  --tr-mono:.16em;

  /* --- Raio --- */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-full:999px;

  /* --- Elevação ---
     Cada nível tem duas camadas: uma curta, de contato, que ancora o
     elemento na superfície, e uma longa e difusa, de ambiente, que dá a
     altura. Sombra de camada única sempre parece adesivo colado.
     --e-edge é o fio de luz na borda de cima, que separa a peça do fundo
     onde a sombra sozinha não daria conta. */
  --e-1:0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.24);
  --e-2:0 2px 4px rgba(0,0,0,.30), 0 10px 24px rgba(0,0,0,.38);
  --e-3:0 6px 12px rgba(0,0,0,.36), 0 28px 56px rgba(0,0,0,.48);
  --e-edge:inset 0 1px 0 rgba(242,242,242,.07);

  /* --- Movimento --- */
  --t-1:140ms;
  --t-2:260ms;
  --t-3:420ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  --wrap:1280px;
  --hdr-h:64px;
}

/* Escopo de superfície clara: os componentes não precisam saber
   em que seção estão, só leem os tokens semânticos. */
.surface-light{
  --bg:var(--c-white);
  --surface:#FFFFFF;
  --surface-2:#E8E6E2;
  --fg:var(--c-navy-900);
  --fg-2:#33404B;
  --fg-3:#64707C;
  --border:rgba(4,22,38,.12);
  --border-2:rgba(4,22,38,.26);
  --accent:var(--c-sand-dark);
  --accent-fg:var(--c-white);
  --accent-soft:rgba(166,149,134,.16);
  --field-bg:#FFFFFF;
  --e-1:0 1px 2px rgba(4,22,38,.07), 0 1px 1px rgba(4,22,38,.04);
  --e-2:0 2px 4px rgba(4,22,38,.05), 0 10px 24px rgba(4,22,38,.09);
  --e-3:0 6px 12px rgba(4,22,38,.07), 0 28px 56px rgba(4,22,38,.14);
  --e-edge:inset 0 1px 0 rgba(255,255,255,.92);
  background:var(--bg);
  color:var(--fg-2);
}

/* Escopo de superfície areia: usado na chamada final. */
.surface-sand{
  --bg:var(--c-sand);
  --surface:rgba(4,22,38,.05);
  --fg:var(--c-navy-900);
  --fg-2:rgba(4,22,38,.74);
  --fg-3:rgba(4,22,38,.55);
  --border:rgba(4,22,38,.18);
  --border-2:rgba(4,22,38,.34);
  --accent:var(--c-navy-900);
  --accent-fg:var(--c-sand);
  background:var(--bg);
  color:var(--fg-2);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + var(--s-4));
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

/* Trava de rolagem enquanto o menu está aberto. O body vira fixo,
   deslocado pela posição salva no JS, para a página não correr atrás. */
html.is-locked{ overflow:hidden; }
html.is-locked body{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg-2);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:var(--fs-400);
  line-height:var(--lh-base);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
dl,dd,figure{ margin:0; }
p{ margin:0 0 var(--s-4); }
svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

h1,h2,h3,h4{
  margin:0;
  color:var(--fg);
  font-weight:300;
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-tight);
  text-wrap:balance;
}

::selection{ background:var(--c-sand); color:var(--c-navy-900); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--c-navy-900); }
::-webkit-scrollbar-thumb{ background:var(--c-navy-600); border-radius:var(--r-full); }
::-webkit-scrollbar-thumb:hover{ background:var(--c-sand-dark); }

.skip{
  position:absolute; left:var(--s-4); top:calc(-1 * var(--s-12)); z-index:1000;
  padding:var(--s-3) var(--s-5); border-radius:var(--r-sm);
  background:var(--c-sand); color:var(--c-navy-900);
  font-family:var(--font-mono); font-size:var(--fs-200);
  transition:top var(--t-2) var(--ease);
}
.skip:focus{ top:var(--s-4); }

.muted{ color:var(--fg-3); }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--s-gutter);
}

.sec{ padding-block:var(--s-sec); position:relative; }

/* ============================================================
   4. ÁTOMOS
   ============================================================ */

/* --- Botão -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2);
  min-height:48px;                      /* alvo de toque confortável */
  padding:var(--s-3) var(--s-5);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-family:var(--font-mono);
  font-size:var(--fs-200);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.25;
  cursor:pointer;
  transition:background var(--t-2) var(--ease),
             color var(--t-2) var(--ease),
             border-color var(--t-2) var(--ease),
             transform var(--t-1) var(--ease),
             box-shadow var(--t-2) var(--ease);
}
.btn:active{ transform:translateY(1px); }

.btn--primary{ background:var(--accent); color:var(--accent-fg); box-shadow:var(--e-1); }
.btn--primary:hover{ background:var(--c-sand-light); color:var(--c-navy-900); box-shadow:var(--e-2); }
.surface-light .btn--primary:hover{ background:var(--c-navy-900); color:var(--c-white); }

.btn--solid{ background:var(--fg); color:var(--bg); box-shadow:var(--e-1); }
.btn--solid:hover{ background:var(--accent); color:var(--accent-fg); box-shadow:var(--e-2); }

.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--border-2); }
.btn--ghost:hover{ background:var(--surface); border-color:var(--fg); }

.btn--sm{ min-height:40px; padding:var(--s-2) var(--s-4); font-size:var(--fs-100); }
.btn--lg{ min-height:56px; padding:var(--s-4) var(--s-6); font-size:var(--fs-200); }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* --- Chip / etiqueta ---------------------------------------- */
.chip{
  display:inline-block;
  padding:var(--s-1) var(--s-3);
  border:1px solid var(--border-2);
  border-radius:var(--r-full);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* --- Ícone de rede ------------------------------------------
   Cada glifo na cor da própria plataforma. O Instagram traz o degradê
   dentro do SVG, porque ele não tem cor única.
   No hover só a borda e o fundo reagem: nada se move de lugar.
   ----------------------------------------------------------- */
.icons{ display:flex; flex-wrap:wrap; gap:var(--s-2); }

.icon{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--fg-2);
  box-shadow:var(--e-1);
  transition:border-color var(--t-2) var(--ease),
             background var(--t-2) var(--ease),
             box-shadow var(--t-2) var(--ease);
}
.icon svg{ width:21px; height:21px; }
/* O glifo do WhatsApp é para ser preenchido, e a regra global de svg
   (fill:none / stroke) vence o atributo do arquivo. Como o viewBox dele
   é 512, o traço herdado viraria 0,05px: invisível. Daí o override. */
.icon--whatsapp svg,
.icon--whatsapp svg path{ fill:currentColor; stroke:none; }

.icon:hover,
.icon:focus-visible{
  border-color:currentColor;
  box-shadow:var(--e-2);
}

.icon--whatsapp{  color:#25D366; }
.icon--instagram{ color:#D3218F; }
.icon--linkedin{  color:#0A66C2; }
.icon--whatsapp:hover{  background:rgba(37,211,102,.12); }
.icon--instagram:hover{ background:rgba(211,33,143,.12); }
.icon--linkedin:hover{  background:rgba(10,102,194,.14); }

/* --- Sobrelinha --------------------------------------------- */
.eyebrow{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--s-3);
  margin:0 0 var(--s-5);
  color:var(--fg-3);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:var(--tr-mono);
  text-transform:uppercase;
}

/* --- Ponto de status ---------------------------------------- */
.dot{
  width:7px; height:7px; flex:none; margin-top:7px;
  border-radius:var(--r-full);
  background:var(--c-whats);
  box-shadow:0 0 0 4px rgba(30,168,90,.18);
}

/* --- Texto de apoio ----------------------------------------- */
.lead{
  color:var(--fg);
  font-size:var(--fs-600);
  font-weight:200;
  line-height:1.45;
  letter-spacing:-.02em;
  max-width:44ch;
}

/* --- Campo de formulário ------------------------------------ */
.field{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.field__l{
  color:var(--fg-3);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.field__l i{ font-style:normal; text-transform:none; letter-spacing:0; }
.field__l .req{ color:var(--accent); font-weight:400; }

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:48px;
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--field-bg);
  color:var(--fg);
  font-size:var(--fs-400);
  font-weight:300;
  resize:vertical;
  transition:border-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.field textarea{ min-height:96px; padding-block:var(--s-3); }
.field input::placeholder,
.field textarea::placeholder{ color:var(--fg-3); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field select{
  appearance:none;
  padding-right:var(--s-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7A86' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s-4) center;
  background-size:18px;
}
.field.is-invalid input{ border-color:var(--c-danger); }
.field__err{ display:none; color:var(--c-danger); font-size:var(--fs-200); font-style:normal; }
.field.is-invalid .field__err{ display:block; }
.field__err--block{ margin-top:var(--s-2); }
.field__err--block.is-on{ display:block; }

/* --- Marca -------------------------------------------------- */
.logo{ display:inline-flex; align-items:center; gap:var(--s-3); }
/* O simbolo da Urben ja vem sobre fundo azul escuro proprio,
   por isso ele so recebe o raio e o recorte. */
.logo__mark{
  width:42px; height:42px; flex:none;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:#012B43;
  box-shadow:var(--e-1);
  transition:transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.logo__mark img{ width:100%; height:100%; object-fit:cover; }
.logo:hover .logo__mark{ transform:translateY(-1px); box-shadow:var(--e-2); }
.logo__txt{ display:flex; flex-direction:column; line-height:1.2; }
.logo__txt b{ color:var(--fg); font-size:var(--fs-500); font-weight:400; letter-spacing:-.01em; }
.logo__txt i{
  margin-top:2px;
  color:var(--fg-3);
  font-family:var(--font-mono);
  font-size:9px;
  font-style:normal;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ============================================================
   5. MOLÉCULAS
   ============================================================ */

/* --- Cabeçalho de seção (padrão F: índice, título, apoio) ---- */
.shead{
  padding-top:var(--s-5);
  border-top:1px solid var(--border);
  margin-bottom:var(--s-8);
}
.shead__idx{
  display:flex; align-items:center; gap:var(--s-3);
  margin:0 0 var(--s-4);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:var(--tr-mono);
}
.shead__idx span{ color:var(--fg-3); text-transform:uppercase; }
.shead__title{ font-size:var(--fs-800); max-width:18ch; }
.shead__sub{
  margin:var(--s-4) 0 0;
  color:var(--fg-2);
  font-size:var(--fs-400);
  max-width:56ch;
}
.shead__cta{ margin-top:var(--s-6); }

/* --- Faixa corrida ------------------------------------------ */
.marquee{
  background:var(--c-sand);
  color:var(--c-navy-900);
  border-block:1px solid rgba(4,22,38,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(4,22,38,.08);
  overflow:hidden;
}
.marquee__track{
  display:flex; align-items:center; gap:var(--s-6);
  width:max-content;
  padding-block:var(--s-4);
  animation:marquee 48s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
.marquee__item{
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.marquee__sep{
  width:5px; height:5px; flex:none;
  border-radius:var(--r-full);
  background:rgba(4,22,38,.4);
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* --- Lista de provas ---------------------------------------- */
.bullets{ margin:var(--s-7) 0; border-top:1px solid var(--border); }
.bullets__i{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-4);
  padding-block:var(--s-4);
  border-bottom:1px solid var(--border);
}
.bullets__n{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.12em;
  padding-top:5px;
}
.bullets__c{ display:flex; flex-direction:column; color:var(--fg-2); font-size:var(--fs-300); line-height:1.55; }
.bullets__c b{ margin-bottom:2px; color:var(--fg); font-size:var(--fs-400); font-weight:400; }

/* --- Acordeão ----------------------------------------------- */
.acc{ border-top:1px solid var(--border); }
.acc__item{ border-bottom:1px solid var(--border); }

.acc__head{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--s-2) var(--s-4);
  padding-block:var(--s-5);
  text-align:left;
}
.acc__n{
  grid-column:1 / -1;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.12em;
}
.acc__t{
  font-size:var(--fs-600);
  font-weight:300;
  max-width:26ch;
  transition:color var(--t-2) var(--ease);
}
.acc__tag{ display:none; }
.acc__icon{ position:relative; width:24px; height:24px; flex:none; }
.acc__icon::before,
.acc__icon::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
  transition:transform var(--t-3) var(--ease);
}
.acc__icon::before{ width:16px; height:1.5px; }
.acc__icon::after{ width:1.5px; height:16px; }

.acc__head:hover .acc__t,
.acc__item.is-open .acc__t{ color:var(--accent); }
.acc__item.is-open .acc__icon::after{ transform:translate(-50%,-50%) scaleY(0); }

.acc__body{ max-height:0; overflow:hidden; transition:max-height var(--t-3) var(--ease); }
.acc__in{ padding-bottom:var(--s-6); }
.acc__in p{ color:var(--fg-2); max-width:62ch; }
.acc__list{ display:grid; gap:var(--s-2); margin:var(--s-5) 0 var(--s-6); }
.acc__list li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-3);
  color:var(--fg-2); font-size:var(--fs-300);
}
.acc__list i{
  color:var(--accent); font-family:var(--font-mono);
  font-size:var(--fs-100); font-style:normal; padding-top:5px;
}

/* --- Passo -------------------------------------------------- */
.steps{ border-top:1px solid var(--border); }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-4);
  padding-block:var(--s-6);
  border-bottom:1px solid var(--border);
}
.step__n{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-600);
  line-height:1.1;
}
.step__t{ margin-bottom:var(--s-2); font-size:var(--fs-700); }
.step__c p{ margin:0; color:var(--fg-2); max-width:54ch; }

/* --- Slider ------------------------------------------------- */
.range{ padding-block:var(--s-5); border-bottom:1px solid var(--border); }
.range:first-child{ border-top:1px solid var(--border); }
.range__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-4); margin-bottom:var(--s-4);
}
/* --- Alternador SAC / Price --------------------------------- */
.range--sys{ padding-top:0; }
.range__lbl{
  color:var(--fg-3);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.seg{
  display:grid; grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--r-full);
  background:var(--surface);
}
.seg__opt{
  min-height:40px;
  border-radius:var(--r-full);
  color:var(--fg-2);
  font-family:var(--font-mono);
  font-size:var(--fs-200);
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.seg__opt:hover{ color:var(--fg); }
.seg__opt.is-on{
  background:var(--accent);
  color:var(--accent-fg);
  box-shadow:var(--e-1);
}
.seg__hint{
  margin:var(--s-3) 0 0;
  color:var(--fg-3);
  font-size:var(--fs-200);
  line-height:1.55;
  min-height:2.8em;   /* reserva as duas linhas: trocar de sistema nao empurra os sliders */
}

.range__top label{
  color:var(--fg-3);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.range__top label i{ font-style:normal; color:var(--accent); }
.range__top output{ color:var(--fg); font-size:var(--fs-600); font-weight:300; letter-spacing:-.02em; }

.range input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:2px;
  border-radius:var(--r-full);
  background:var(--border-2);
  outline:none; cursor:pointer;
}
.range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px;
  border-radius:var(--r-full);
  border:2px solid var(--bg);
  background:var(--accent);
  box-shadow:var(--e-1);
  cursor:grab;
  transition:transform var(--t-1) var(--ease);
}
.range input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.range input[type=range]::-moz-range-thumb{
  width:18px; height:18px;
  border-radius:var(--r-full);
  border:2px solid var(--bg);
  background:var(--accent);
  cursor:grab;
}

/* --- Opção selecionável ------------------------------------- */
.opts{ display:grid; gap:var(--s-2); }
.opt{
  width:100%;
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:var(--s-3);
  min-height:64px;
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  text-align:left;
  box-shadow:var(--e-1);
  transition:border-color var(--t-2) var(--ease),
             background var(--t-2) var(--ease),
             box-shadow var(--t-2) var(--ease),
             transform var(--t-1) var(--ease);
}
.opt:hover{ border-color:var(--border-2); box-shadow:var(--e-2); transform:translateY(-1px); }
.opt.is-on{
  border-color:var(--c-navy-900);
  background:var(--c-navy-900);
  box-shadow:var(--e-2);
  transform:none;
}
.opt__n{ color:var(--accent); font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.12em; }
.opt.is-on .opt__n{ color:var(--c-sand); }
.opt__c{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.opt__c b{ color:var(--fg); font-size:var(--fs-400); font-weight:400; }
.opt__c span{ color:var(--fg-3); font-size:var(--fs-200); }
.opt.is-on .opt__c b{ color:var(--c-white); }
.opt.is-on .opt__c span{ color:rgba(242,242,242,.6); }

/* --- Resumo ------------------------------------------------- */
.recap{
  margin-top:var(--s-6);
  padding:var(--s-5);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-2);
  box-shadow:var(--e-edge);
}
.recap__t{
  margin:0 0 var(--s-3);
  color:var(--fg-3);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.recap__row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-4);
  padding-block:var(--s-2);
  border-top:1px solid var(--border);
  font-size:var(--fs-300);
}
.recap__row dt{ color:var(--fg-3); }
.recap__row dd{ color:var(--fg); text-align:right; }

/* --- Consentimento ------------------------------------------ */
.consent{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-3);
  align-items:start;
  margin-top:var(--s-5);
  color:var(--fg-3);
  font-size:var(--fs-300);
  cursor:pointer;
}
.consent input{ position:absolute; opacity:0; width:0; height:0; }
.consent__box{
  width:22px; height:22px; margin-top:2px;
  border:1px solid var(--border-2);
  border-radius:var(--r-xs);
  background:var(--field-bg);
  position:relative;
  transition:background var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.consent__box::after{
  content:""; position:absolute; left:7px; top:3px;
  width:6px; height:11px;
  border:solid var(--c-sand); border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform var(--t-1) var(--ease);
}
.consent input:checked + .consent__box{ background:var(--c-navy-900); border-color:var(--c-navy-900); }
.consent input:checked + .consent__box::after{ transform:rotate(45deg) scale(1); }
.consent input:focus-visible + .consent__box{ outline:2px solid var(--accent); outline-offset:3px; }

/* --- Depoimento --------------------------------------------- */
.quote{
  position:relative;
  display:flex; flex-direction:column;
  padding:var(--s-6);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  background:linear-gradient(158deg, rgba(242,242,242,.06), rgba(242,242,242,.02) 58%);
  box-shadow:var(--e-1), var(--e-edge);
  transition:box-shadow var(--t-2) var(--ease),
             transform var(--t-2) var(--ease),
             border-color var(--t-2) var(--ease);
}
/* filete interno, o mesmo detalhe da moldura do retrato */
.quote::before{
  content:""; position:absolute; pointer-events:none;
  inset:7px;
  border:1px solid rgba(166,149,134,.26);
  border-radius:calc(var(--r-md) - 7px);
  transition:border-color var(--t-2) var(--ease);
}
/* Aspas de abertura, dentro do filete.
   Antes elas ficavam sobre a linha e usavam background:var(--bg) para
   abrir um vão. Só que var(--bg) é o fundo da seção, mais escuro que a
   superfície do card, e o remendo aparecia como um buraco. Agora ficam
   inteiras dentro do card, sem recorte nenhum. */
.quote::after{
  content:"“";
  position:absolute;
  top:var(--s-3); right:var(--s-5);
  color:var(--accent);
  font-size:52px; line-height:1;
  opacity:.3;
  pointer-events:none;
}
.quote:hover{
  box-shadow:var(--e-2), var(--e-edge);
  transform:translateY(-3px);
  border-color:rgba(166,149,134,.5);
}
.quote:hover::before{ border-color:rgba(166,149,134,.45); }
.quote__k{
  margin:var(--s-2) 0 var(--s-4);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.quote__t{
  margin-bottom:var(--s-5);
  color:var(--fg);
  font-size:var(--fs-500);
  font-weight:200;
  line-height:1.5;
  letter-spacing:-.012em;
}
.quote__by{ margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--border); }
.quote__by b{ display:block; color:var(--fg); font-size:var(--fs-300); font-weight:400; }
.quote__by span{
  color:var(--fg-3); font-family:var(--font-mono);
  font-size:var(--fs-100); letter-spacing:.12em; text-transform:uppercase;
}

/* ============================================================
   6. ORGANISMOS
   ============================================================ */

/* --- Header ------------------------------------------------- */
.hdr{ position:sticky; top:0; z-index:900; }
/* O desfoque fica num pseudo-elemento, e nao no proprio .hdr: filtro em
   elemento ancestral vira bloco de contencao e prenderia o menu lateral
   (position:fixed) dentro da faixa do header. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(4,22,38,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.hdr.is-stuck::before{
  background:rgba(4,22,38,.97);
  border-bottom-color:var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,.34);
}
.hdr__in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--s-gutter);
  height:var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}

.nav{
  position:fixed; inset:0;
  width:100%;
  display:flex; flex-direction:column; align-items:stretch;
  padding:calc(var(--hdr-h) + var(--s-7)) var(--s-gutter) var(--s-7);
  background:
    radial-gradient(120% 70% at 80% 0%, rgba(22,58,89,.55), transparent 62%),
    var(--c-navy-900);
  transform:translateX(101%);
  visibility:hidden;
  overflow-y:auto;
  z-index:950;
  transition:transform var(--t-3) var(--ease), visibility var(--t-3);
}
.nav.is-open{ transform:none; visibility:visible; }
.nav__a{
  padding-block:var(--s-5);
  border-bottom:1px solid var(--border);
  color:var(--fg-2);
  font-size:var(--fs-700);
  font-weight:200;
  letter-spacing:var(--tr-tight);
  transition:color var(--t-2) var(--ease), padding-left var(--t-2) var(--ease);
}
.nav__a:hover,.nav__a.is-on{ color:var(--fg); padding-left:var(--s-2); }
.nav__cta{ margin-top:var(--s-7); }

.nav__foot{
  margin-top:auto;
  padding-top:var(--s-6);
  border-top:1px solid var(--border);
  display:grid; gap:var(--s-2);
}
.nav__foot-k{
  color:var(--fg-3);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.nav__foot-v{
  color:var(--fg);
  font-size:var(--fs-700);
  font-weight:200;
  letter-spacing:var(--tr-tight);
  line-height:1.1;
}
.nav__foot-note{
  margin:0;
  color:var(--fg-3);
  font-size:var(--fs-200);
}
.nav__foot .icons{ margin-top:var(--s-3); }

.burger{
  width:44px; height:44px; position:relative;
  margin-right:calc(-1 * var(--s-2));
  z-index:960;
}
.burger span{
  position:absolute; left:11px;
  width:22px; height:1.5px;
  background:var(--c-white);
  transition:transform var(--t-2) var(--ease);
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:25px; }
.burger.is-open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* --- Hero --------------------------------------------------- */
.hero{ position:relative; background:var(--c-navy-900); }
.hero__media{ position:relative; height:clamp(300px, 62vw, 420px); overflow:hidden; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:52% 18%;
}
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,22,38,.28) 0%, transparent 38%, var(--c-navy-900) 100%);
}
.hero__copy{
  position:relative; z-index:2;
  padding:var(--s-7) var(--s-gutter) var(--s-9);
}
.hero__title{ font-size:var(--fs-900); margin-bottom:var(--s-5); max-width:17ch; text-wrap:pretty; }
.hl{ position:relative; color:var(--c-sand); white-space:nowrap; }
.hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.02em;
  height:2px; border-radius:var(--r-full); background:var(--c-sand);
  transform:scaleX(0); transform-origin:left;
  animation:underline var(--t-3) var(--ease) 500ms forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }

.hero__sub{ color:var(--fg-2); font-size:var(--fs-500); max-width:48ch; margin-bottom:var(--s-6); }
.hero__actions{ display:flex; flex-direction:column; gap:var(--s-3); }
.hero__proof{
  display:flex; align-items:flex-start; gap:var(--s-3);
  margin:var(--s-5) 0 0;
  color:var(--fg-2);
  font-size:var(--fs-200);
}
.hero__proof b{ color:var(--fg-2); font-weight:400; }

/* --- Sobre -------------------------------------------------- */
.sobre__in{ display:grid; gap:var(--s-7); }
/* --- Moldura de quadro -------------------------------------
   Camadas, de fora para dentro:
     .frame       o caixilho. É uma BORDA, não padding: borda com uma cor
                  por lado é o único jeito de ter canto em meia-esquadria
                  de verdade, a emenda a 45 graus dos quadros reais.
     ::before     o verniz, um risco de luz correndo pelo caixilho.
     .frame__mat  o passe-partout, rebaixado por sombra interna.
     ::before     o filete, a linha fina solta dentro do passe-partout.
     .frame__art  a arte, com sombra própria e vinheta.
   A luz vem do alto à esquerda, igual ao resto do site.
   ----------------------------------------------------------- */
.sobre__fig{ margin:0; }

.frame{
  --frame-w:clamp(14px, 1.8vw, 20px);
  position:relative;
  border-style:solid;
  border-width:var(--frame-w);
  border-top-color:#EBE3DA;
  border-right-color:#94826F;
  border-bottom-color:#6B5C4C;
  border-left-color:#C3B3A2;
  border-radius:3px;
  background:#0A1B2A;
  box-shadow:
    var(--e-3),
    0 0 0 1px rgba(0,0,0,.55),          /* fio escuro fechando o caixilho por fora */
    inset 0 0 0 1px rgba(0,0,0,.42),    /* fio escuro no lábio interno */
    inset 0 0 14px rgba(0,0,0,.32);
}
.frame::before{
  content:""; position:absolute; pointer-events:none;
  inset:calc(-1 * var(--frame-w));
  border-radius:3px;
  background:linear-gradient(148deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.07) 15%,
    transparent 33%,
    transparent 67%,
    rgba(0,0,0,.14) 100%);
}

.frame__mat{
  position:relative;
  padding:clamp(16px, 2.2vw, 26px);
  background:linear-gradient(158deg, #102439 0%, #0A1B2A 46%, #061321 100%);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.05);
}
.frame__mat::before{
  content:""; position:absolute; pointer-events:none;
  inset:clamp(8px, 1.1vw, 13px);
  border:1px solid rgba(166,149,134,.42);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}

.frame__art{
  position:relative;
  box-shadow:
    0 3px 10px rgba(0,0,0,.55),         /* a arte projeta sombra no passe-partout */
    0 0 0 1px rgba(0,0,0,.55);
}
.frame__art img{
  display:block;
  width:100%;
  height:auto;                          /* proporção original: nada de corte */
}
.frame__art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.11) 0%,
      rgba(255,255,255,.03) 24%,
      transparent 44%),
    radial-gradient(118% 92% at 50% 42%,
      transparent 52%,
      rgba(4,22,38,.32) 100%);          /* vinheta discreta nas bordas */
}

/* Plaquinha gravada, no lugar da legenda solta */
.frame__plate{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:max-content; max-width:100%;
  margin:var(--s-5) auto 0;
  padding:var(--s-2) var(--s-5);
  border-radius:2px;
  background:linear-gradient(145deg, #D3C9BE, #A08F80 48%, #7B6B5D);
  color:var(--c-navy-900);
  text-align:center;
  box-shadow:
    var(--e-1),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.26);
}
.frame__plate b{
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.frame__plate span{
  font-size:var(--fs-200);
  font-weight:300;
  color:rgba(4,22,38,.72);
  letter-spacing:.01em;
}

.sobre__txt .lead{ margin-bottom:var(--s-4); }
.sobre__txt p{ color:var(--fg-2); }

/* --- Simulador ---------------------------------------------- */
.sim{ display:grid; gap:var(--s-7); }
.sim__panel{
  padding:var(--s-5);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--e-2), var(--e-edge);
  min-width:0;
}
.sim__k{
  margin:0;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.sim__v{
  margin:var(--s-2) 0 var(--s-1);
  color:var(--fg);
  font-size:clamp(38px, 8vw, 56px);
  font-weight:200;
  line-height:1.05;
  letter-spacing:-.04em;
}
.sim__note{ margin:0; color:var(--fg-3); font-size:var(--fs-200); }
.sim__dl{ margin-top:var(--s-5); }
.sim__row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-3);
  padding-block:var(--s-3);
  border-top:1px solid var(--border);
  font-size:var(--fs-300);
}
.sim__row dt{ color:var(--fg-3); }
.sim__row dd{ color:var(--fg); font-family:var(--font-mono); font-size:var(--fs-200); }
.sim__cta{ width:100%; margin-top:var(--s-5); }
.sim__fine{ margin:var(--s-4) 0 0; color:var(--fg-3); font-size:var(--fs-100); line-height:1.6; }

/* --- Depoimentos -------------------------------------------- */
.depo__grid{ display:grid; gap:var(--s-4); }

/* --- Formulário --------------------------------------------- */
.wiz{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--e-2), var(--e-edge);
}
.wiz__tabs{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border); }
.wiz__tabs li{
  display:flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-4) var(--s-2);
  border-left:1px solid var(--border);
  color:var(--fg-3);
  transition:background var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.wiz__tabs li:first-child{ border-left:0; }
.wiz__num{ font-family:var(--font-mono); font-size:var(--fs-200); }
.wiz__lbl{ display:none; font-size:var(--fs-300); }
.wiz__tabs li.is-active{ color:var(--fg); background:var(--surface-2); }
.wiz__tabs li.is-done{ color:var(--accent); }

.wiz__bar{ height:3px; background:var(--surface-2); }
.wiz__bar span{
  display:block; height:100%; width:25%;
  border-radius:0 var(--r-full) var(--r-full) 0;
  background:var(--accent);
  transition:width var(--t-3) var(--ease);
}

.wiz__body{ padding:var(--s-5); }
.step-panel{ display:none; border:0; padding:0; margin:0; }
.step-panel.is-active{ display:block; animation:fadeUp var(--t-3) var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.step-panel__t{
  padding:0; margin-bottom:var(--s-2);
  color:var(--fg); font-size:var(--fs-700); font-weight:300; letter-spacing:var(--tr-tight);
}
.step-panel__h{ margin-bottom:var(--s-5); color:var(--fg-2); font-size:var(--fs-300); }

.fields{ display:grid; gap:var(--s-4); }
.fields--top{ margin-top:var(--s-5); }

.wiz__foot{
  display:flex; flex-direction:column-reverse; gap:var(--s-3);
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:1px solid var(--border);
}
.wiz__foot .btn{ width:100%; }
.wiz__foot #b-prev{ visibility:hidden; }
.wiz__foot.has-prev #b-prev{ visibility:visible; }
.wiz__next{ display:flex; flex-direction:column; gap:var(--s-2); }
.wiz__safe{ margin:0; text-align:center; color:var(--fg-3); font-size:var(--fs-200); }

.done{ display:none; }
.done.is-on{ display:block; animation:fadeUp var(--t-3) var(--ease); }
.done__tag{
  display:inline-block;
  margin:0 0 var(--s-4);
  padding:var(--s-1) var(--s-3);
  border-radius:var(--r-full);
  background:var(--accent); color:var(--accent-fg);
  font-family:var(--font-mono); font-size:var(--fs-100);
  letter-spacing:.16em; text-transform:uppercase;
}
.done__t{ margin-bottom:var(--s-3); font-size:var(--fs-700); }
.done p{ color:var(--fg-2); max-width:52ch; margin-bottom:var(--s-5); }
.done__actions{ display:flex; flex-direction:column; gap:var(--s-3); }

/* --- Chamada final ------------------------------------------ */
.cta{
  --bg:var(--c-sand);
  --fg:var(--c-navy-900);
  --fg-2:rgba(4,22,38,.74);
  --fg-3:rgba(4,22,38,.58);
  --border:rgba(4,22,38,.18);
  --border-2:rgba(4,22,38,.34);
  --accent:var(--c-navy-900);
  --accent-fg:var(--c-sand);
  --surface:rgba(4,22,38,.06);
  background:var(--bg); color:var(--fg-2);
  padding-block:var(--s-9);
}
.cta__in{ display:grid; gap:var(--s-6); }
.cta__sig{
  margin:0 0 var(--s-3);
  color:var(--fg-3);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.cta__t{ margin-bottom:var(--s-3); font-size:var(--fs-800); }
.cta__p{ margin:0; color:var(--fg-2); max-width:44ch; }
.cta .btn--solid{ background:var(--c-navy-900); color:var(--c-sand); justify-self:start; }
.cta .btn--solid:hover{ background:var(--c-navy-800); color:var(--c-white); }

/* --- Rodapé ------------------------------------------------- */
.ft{
  position:relative;
  background:#020D17;
  padding-top:var(--s-10);
  border-top:1px solid var(--border);
}
/* leve clarão no alto, para o rodapé não parecer um bloco morto */
.ft::before{
  content:""; position:absolute; inset:0 0 auto; height:220px; pointer-events:none;
  background:radial-gradient(80% 100% at 50% 0%, rgba(22,58,89,.34), transparent 70%);
}
.ft > *{ position:relative; }
.ft__in{ display:grid; gap:var(--s-7); padding-bottom:var(--s-8); }
.ft__desc{ margin:var(--s-5) 0 var(--s-3); color:var(--fg-2); font-size:var(--fs-300); max-width:36ch; }
.ft__tagline{
  margin:0;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ft__creci{
  margin:var(--s-3) 0 0;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ft__h{
  margin-bottom:var(--s-4);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
nav.ft__col a{
  display:block; padding-block:var(--s-1);
  color:var(--fg-2); font-size:var(--fs-300);
  transition:color var(--t-2) var(--ease);
}
nav.ft__col a:hover{ color:var(--fg); }
.ft__p{ margin-bottom:var(--s-4); color:var(--fg-2); font-size:var(--fs-300); }
.ft__lk{ color:var(--accent); transition:color var(--t-2) var(--ease); }
.ft__lk:hover{ color:var(--c-sand-light); }
.ft__fone{
  display:inline-block;
  margin-bottom:var(--s-3);
  color:var(--fg);
  font-size:var(--fs-700);
  font-weight:200;
  letter-spacing:var(--tr-tight);
  transition:color var(--t-2) var(--ease);
}
.ft__fone:hover{ color:var(--accent); }
.ft__col--contato .icons{ margin-top:var(--s-5); }

.ft__bottom{ border-top:1px solid var(--border); padding-block:var(--s-5); }
/* No celular tudo empilha e centraliza, inclusive a assinatura do estúdio. */
.ft__bottom-in{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--s-5); text-align:center;
}
.ft__legal p{ margin:0; color:var(--fg-3); font-size:var(--fs-200); }

/* Assinatura discreta do estudio responsavel pelo site */
.sign{ display:inline-flex; align-items:center; gap:var(--s-3); flex:none; opacity:.7; transition:opacity var(--t-2) var(--ease); }
.sign__l{
  color:rgba(242,242,242,.8);
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; line-height:1;
}
.sign__img{ width:84px; height:auto; display:block; }
.sign:hover,.sign:focus-visible{ opacity:1; }

/* --- Ação flutuante de WhatsApp -----------------------------
   Círculo no celular, onde espaço é curto, e pílula com rótulo a
   partir de 600px, que converte melhor do que um ícone sozinho.
   O anel pulsante é box-shadow crescendo, sem elemento extra.
   ----------------------------------------------------------- */
.fab{
  position:fixed; right:var(--s-4); bottom:var(--s-4); z-index:800;
  display:inline-flex; align-items:center; gap:var(--s-2);
  height:58px; padding:5px;
  border-radius:var(--r-full);
  background:linear-gradient(145deg, #34E27F 0%, #25D366 42%, #10A44F 100%);
  color:#fff;
  box-shadow:
    0 3px 8px rgba(2,12,22,.34),
    0 14px 30px rgba(16,164,79,.42),
    inset 0 1px 0 rgba(255,255,255,.34);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(12px) scale(.92);
  transition:opacity var(--t-2) var(--ease), visibility var(--t-2),
             transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.fab.is-on{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.fab.is-on:hover,
.fab.is-on:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    0 5px 12px rgba(2,12,22,.4),
    0 20px 42px rgba(16,164,79,.52),
    inset 0 1px 0 rgba(255,255,255,.4);
}

.fab__ico{
  width:48px; height:48px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-full);
  background:rgba(255,255,255,.14);
}
.fab__ico svg{ width:26px; height:26px; fill:currentColor; stroke:none; }

.fab__label{ display:none; }

/* anel de atenção */
.fab.is-on::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  animation:fabPulse 2.8s ease-out infinite;
}
@keyframes fabPulse{
  0%{   box-shadow:0 0 0 0 rgba(37,211,102,.45); }
  70%{  box-shadow:0 0 0 15px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ============================================================
   7. MOVIMENTO
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
  .hl::after{ transform:scaleX(1); }
  .marquee__track{ animation:none !important; transform:none !important; }
  .fab.is-on::before{ animation:none !important; }
}

/* ============================================================
   8. BREAKPOINTS (mobile first)
   ============================================================ */

/* ---- 600px: tablet pequeno ---- */
@media (min-width:600px){
  :root{ --s-gutter:32px; }

  .hero__actions{ flex-direction:row; flex-wrap:wrap; }
  .hero__actions .btn{ flex:1 1 auto; }
  .opts{ grid-template-columns:1fr 1fr; }
  .fields{ grid-template-columns:1fr 1fr; }
  .field--full{ grid-column:1 / -1; }
  .depo__grid{ grid-template-columns:1fr 1fr; }
  .wiz__lbl{ display:inline; }
  .fab{ padding-right:var(--s-5); }
  .fab__label{
    display:block;
    font-family:var(--font-mono);
    font-size:var(--fs-100);
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .wiz__tabs li{ justify-content:flex-start; padding-inline:var(--s-4); }
  .wiz__foot{ flex-direction:row; align-items:center; justify-content:space-between; }
  .wiz__foot .btn{ width:auto; }
  .wiz__next{ align-items:flex-end; }
  .wiz__safe{ text-align:right; }
  .done__actions{ flex-direction:row; }
  .ft__in{ grid-template-columns:1fr 1fr; }
  .ft__brand{ grid-column:1 / -1; }
  .ft__bottom-in{
    flex-direction:row; flex-wrap:wrap; align-items:center;
    justify-content:space-between; text-align:left; gap:var(--s-4);
  }
  .acc__tag{
    display:inline-block;
    color:var(--fg-3);
    font-family:var(--font-mono);
    font-size:var(--fs-100);
    letter-spacing:.14em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .acc__head{ grid-template-columns:1fr auto auto; }
  .acc__n{ grid-column:1 / -1; }
}

/* ---- 900px: desktop ---- */
@media (min-width:900px){
  :root{ --hdr-h:76px; --s-gutter:40px; }

  .burger{ display:none; }
  .nav{
    position:static; width:auto; flex-direction:row; align-items:center;
    padding:0; background:none; border:0; box-shadow:none;
    transform:none; visibility:visible; overflow:visible;
  }
  .nav__foot{ display:none; }
  .nav__a{
    position:relative;
    padding:var(--s-2) var(--s-3);
    border:0;
    font-size:var(--fs-300);
    font-weight:300;
    letter-spacing:0;
  }
  .nav__a:hover,.nav__a.is-on{ padding-left:var(--s-3); }
  .nav__a::after{
    content:""; position:absolute; left:var(--s-3); right:var(--s-3); bottom:2px;
    height:1px; background:var(--accent);
    transform:scaleX(0); transform-origin:right;
    transition:transform var(--t-2) var(--ease);
  }
  .nav__a:hover::after,.nav__a.is-on::after{ transform:scaleX(1); transform-origin:left; }
  .nav__cta{ margin:0 0 0 var(--s-3); min-height:40px; padding:var(--s-2) var(--s-4); font-size:var(--fs-100); }

  /* Hero em tela dividida: texto alinhado ao grid, foto sangrando na borda */
  .hero{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:calc(100svh - var(--hdr-h)); }
  .hero::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
    background-image:linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:calc(100% / 8) 100%;
    mask-image:linear-gradient(180deg,#000,transparent 72%);
    -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  }
  .hero__copy{
    display:flex; flex-direction:column; justify-content:center;
    padding-block:var(--s-10);
    padding-left:max(var(--s-gutter), calc((100vw - var(--wrap)) / 2 + var(--s-gutter)));
    padding-right:var(--s-8);
  }
  .hero__media{ order:2; height:auto; }
  .hero__media img{ position:absolute; inset:0; object-position:52% 20%; }
  .hero__media::after{
    background:linear-gradient(90deg, var(--c-navy-900) 0%, rgba(4,22,38,.34) 24%, transparent 56%);
  }
  .hero__actions .btn{ flex:0 0 auto; }

  .shead{ padding-top:var(--s-6); }
  .shead__title{ max-width:20ch; }

  .sobre__in{ grid-template-columns:.85fr 1fr; gap:var(--s-9); align-items:start; }

  .acc__head{ grid-template-columns:auto 1fr auto auto; gap:var(--s-5); padding-block:var(--s-6); }
  .acc__n{ grid-column:auto; }
  .acc__in{ padding-left:calc(var(--s-5) + 32px); padding-bottom:var(--s-7); }

  .processo__in{ display:grid; grid-template-columns:.8fr 1fr; gap:var(--s-9); align-items:start; }
  .shead--side{ position:sticky; top:calc(var(--hdr-h) + var(--s-7)); margin-bottom:0; }
  .step{ grid-template-columns:auto 1fr; gap:var(--s-6); padding-block:var(--s-7); }
  .step__n{ font-size:var(--fs-700); }

  .sim{ grid-template-columns:1fr .85fr; gap:var(--s-9); align-items:start; }
  .sim__panel{ padding:var(--s-6); }

  .depo__grid{ grid-template-columns:repeat(3,1fr); }

  .wiz__body{ padding:var(--s-7); }
  .opts--3{ grid-template-columns:repeat(3,1fr); }

  .cta__in{ grid-template-columns:1fr auto; align-items:center; gap:var(--s-8); }
  .cta .btn--solid{ justify-self:end; }

  .ft__in{ grid-template-columns:1.6fr .9fr 1fr 1fr; gap:var(--s-7); }
  .ft__brand{ grid-column:auto; }
}

/* ---- 1200px: desktop largo ---- */
@media (min-width:1200px){
  :root{ --s-gutter:48px; }
  body{ font-size:17px; }
  .sobre__in{ gap:var(--s-10); }
  .sim{ gap:var(--s-10); }
}