/* ============================================================
   SentinIA — Landing de produção (build estático)
   Gerado a partir de "SentinIA Landing Page.dc.html" (Claude Design).
   Sem React/CDN: tokens + estilos globais + comportamentos portados.
   ============================================================ */

/* ---------- Tokens (cores) ---------- */
:root {
  --navy-900: #16294D;
  --navy-700: #1F3864;
  --gold-500: #C9A227;
  --gold-600: #B48E1E;
  --offwhite: #F7F5F0;
  --white: #FFFFFF;
  --green-600: #1E7A4F;

  --ink-100: rgba(22, 41, 77, 1);
  --ink-78: rgba(22, 41, 77, .78);
  --ink-62: rgba(22, 41, 77, .62);
  --ink-50: rgba(22, 41, 77, .50);
  --ink-16: rgba(22, 41, 77, .16);
  --ink-12: rgba(22, 41, 77, .12);
  --ink-08: rgba(22, 41, 77, .08);
  --paper-80: rgba(247, 245, 240, .8);
  --paper-55: rgba(247, 245, 240, .55);
  --paper-20: rgba(247, 245, 240, .2);

  --text-primary: var(--navy-900);
  --text-secondary: var(--ink-78);
  --text-muted: var(--ink-50);
  --text-on-navy: var(--offwhite);
  --text-on-navy-secondary: var(--paper-80);
  --surface-page: var(--offwhite);
  --surface-card: var(--white);
  --surface-inverse: var(--navy-900);
  --border-subtle: var(--ink-12);
  --border-strong: var(--ink-16);
  --accent: var(--gold-500);
  --success: var(--green-600);
  --focus-ring: rgba(201, 162, 39, .55);

  /* Tipografia */
  --font-display: "Sora", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-detail: "Space Grotesk", sans-serif;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 15px;
  --tracking-display: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.16em;
  --tracking-slogan: 0.2em;
  --leading-display: 1.05;
  --leading-body: 1.65;

  /* Espaçamento / componentes */
  --space-2: 8px;
  --pad-input-y: 12px;
  --pad-input-x: 14px;
  --radius-none: 0;
  --radius-pill: 999px;

  /* Movimento */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 120ms;
}

/* ---------- Globais ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* impede scroll horizontal dos objetos rotacionados */
}
img { max-width: 100%; }
a { color: var(--navy-900); text-decoration-color: var(--gold-500); text-underline-offset: 3px; transition: color 160ms var(--ease-standard); }
a:hover { color: var(--gold-500); }
input, select, button { font-family: var(--font-body); }
::selection { background: rgba(201, 162, 39, .3); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Animações ---------- */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sheen { 0% { left: -60%; } 12% { left: 130%; } 100% { left: 130%; } }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 122, 79, .35); } 12% { box-shadow: 0 0 0 6px rgba(30, 122, 79, 0); } }

/* Acordeão */
.acc-body { display: grid; grid-template-rows: 0fr; opacity: 0; }
.acc-body > div { overflow: hidden; }
button[aria-expanded="true"] + .acc-body { grid-template-rows: 1fr; opacity: 1; }
button[aria-expanded="true"] .chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .acc-body { transition: grid-template-rows 300ms cubic-bezier(.22,1,.36,1), opacity 300ms cubic-bezier(.22,1,.36,1); }
  .chev { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
  .float-a { animation: floatY 7s ease-in-out infinite; }
  .float-b { animation: floatY 8.2s ease-in-out infinite; }
  .float-c { animation: floatY 9s ease-in-out infinite; }
  .float-d { animation: floatY 7.6s ease-in-out infinite; }
  .float-e { animation: floatY 8.6s ease-in-out infinite; }
  .cta-sheen { position: relative; overflow: hidden; }
  .cta-sheen::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36%; left: -60%; background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0)); animation: sheen 8s linear infinite; pointer-events: none; }
  [data-reveal].pre > * { opacity: 0; transform: translateY(24px); }
  [data-reveal].in > * { opacity: 1; transform: translateY(0); transition: opacity 600ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1); }
  [data-reveal].pre [data-line] { transform: scaleX(0); }
  [data-reveal].in [data-line] { transform: scaleX(1); transition: transform 600ms cubic-bezier(.22,1,.36,1) 150ms; }
  [data-reveal].pre [data-draw] path { stroke-dashoffset: 1; }
  [data-reveal].in [data-draw] path { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms cubic-bezier(.22,1,.36,1) 200ms; }
  .dot-pulse { animation: dotPulse 3s cubic-bezier(.22,1,.36,1) infinite; }
}

/* ---------- Hover (substituem os style-hover do runtime DC) ---------- */
.cta { transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard); }
.cta:hover { background: var(--gold-600) !important; color: var(--navy-900) !important; }
.card-hover { transition: transform 200ms cubic-bezier(.22,1,.36,1), border-color 200ms cubic-bezier(.22,1,.36,1); }
.card-hover:hover { transform: translateY(-2px); border-color: var(--gold-500); }
.lift { transition: transform 200ms cubic-bezier(.22,1,.36,1); }
.lift:hover { transform: translateY(-2px); }
.sim-btn { transition: border-color 160ms var(--ease-standard); }
.sim-btn:hover { border-color: var(--navy-700); }
.acc-row { transition: border-color 200ms cubic-bezier(.22,1,.36,1); }
.acc-row:hover { border-top-color: var(--gold-500); }
.hv-navy700:hover { color: var(--navy-700); }
.hv-linkedin { transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard); }
.hv-linkedin:hover { color: var(--gold-500); border-color: var(--navy-700); }

/* Simulador — indicador de seleção */
.sim-btn .sel { display: none; }
.sim-btn.is-sel .sel { display: block; }

/* ---------- Campos de formulário (porta o componente Input) ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); }
.field > .lbl { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.field input {
  font-family: var(--font-body); font-size: var(--text-base);
  padding: var(--pad-input-y) var(--pad-input-x);
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); outline: none; border-radius: var(--radius-none);
  transition: border-color var(--duration-fast) var(--ease-standard); width: 100%;
}
.field input:focus { border-color: var(--gold-500); }
.field.has-error input { border-color: var(--navy-700); }
.field .msg { font-size: var(--text-sm); color: var(--text-muted); }
.field.has-error .msg { color: var(--navy-700); font-weight: 500; }

/* ---------- Botão WhatsApp (caminho humano; verde nunca como cor de marca) ---------- */
.wa { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.wa-topbar { font-family: var(--font-detail); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-900); border: 1px solid var(--border-strong); padding: 8px 14px; transition: border-color 200ms var(--ease-standard), color 200ms var(--ease-standard); }
.wa-topbar:hover { border-color: var(--navy-700); color: var(--navy-900); }
.wa-outline { justify-content: center; width: 100%; font-family: var(--font-detail); font-size: 13.5px; font-weight: 500; letter-spacing: .04em; color: var(--navy-900); background: transparent; border: 1px solid var(--navy-900); padding: 15px 20px; transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard); }
.wa-outline:hover { color: var(--gold-500); border-color: var(--navy-700); }
.wa svg { flex: 0 0 auto; }

/* ---------- Bloco "o que acontece depois" ---------- */
.next-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.next-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--ink-78); }
.next-steps .n { flex: 0 0 auto; font-family: var(--font-detail); font-size: 12px; font-weight: 500; color: var(--navy-900); border: 1px solid var(--border-strong); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(247,245,240,.97); border-top: 1px solid var(--border-strong); transform: translateY(110%); transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.sticky-cta.show { transform: translateY(0); }

/* ---------- Ajustes mobile (corrige colisão imagem × texto) ---------- */
@media (max-width: 768px) {
  .float-a, .float-b, .float-c, .float-d, .float-e { animation: none !important; }
  .obj-hero { position: static !important; top: auto !important; right: auto !important; width: 42vw !important; margin: 4px 0 -8px auto; }
  .obj-hero > div { transform: translateX(30%) rotate(9deg) !important; }
  .obj-carimbo { position: static !important; top: auto !important; right: auto !important; width: 86px !important; margin: 10px 0 -30px auto; }
  .obj-lupa { position: static !important; margin: 6px auto 0 0 !important; }
  .obj-lupa img { width: 120px !important; }
  .obj-parallax-mobile { display: none; } /* objetos puramente decorativos que competem com texto */
}
@media (min-width: 769px) {
  /* A lupa flui ABAIXO da lista de passos, preenchendo o espaço em branco da coluna —
     nunca sobrepõe o texto. */
  .obj-lupa { position: static; align-self: flex-start; margin-top: 28px !important; z-index: 0; }
  .obj-lupa img { width: clamp(180px, 17vw, 240px) !important; }
}