/* ============================================================
   ProAgentes — tokens medidos (fonte: referencia-sintra-v2/03,08)
   ============================================================ */
:root {
  /* cor */
  --bg-dark: #000000;
  --bg-light: #ffffff;
  --surface-dark: rgba(255, 255, 255, 0.05);
  --surface-dark-10: rgba(255, 255, 255, 0.1);
  --surface-light: rgba(0, 0, 0, 0.05);
  --border-dark: rgba(255, 255, 255, 0.2);
  --border-dark-10: rgba(255, 255, 255, 0.1);
  --border-light: rgba(0, 0, 0, 0.1);
  --text-primary-dark: #ffffff;
  --text-primary-light: #000000;
  --text-secondary: #404040;
  --text-tertiary: #737373;
  --text-footer-link: #585858;
  --text-support-dark: #949494;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --danger: #ef4444;
  --success: #22c55e;
  --nav-text: #0f172a;
  --divider: #f0f3f7;
  --card-dark: #181818;
  --card-neutral-900: #171717;
  --faq-item-bg: #fafafa;
  --footer-email-purple: #6d44cc;
  --footer-email-field: #4c2f8e;
  --footer-email-submit: #f8fafc;

  /* gradientes por produto (pares medidos da paleta de agentes) */
  --grad-nexus-a: rgb(34, 197, 94);   --grad-nexus-b: rgb(20, 83, 45);
  --grad-reelo-a: rgb(217, 70, 239);  --grad-reelo-b: rgb(112, 26, 117);
  --grad-ohno-a: rgb(52, 152, 253);   --grad-ohno-b: rgb(35, 59, 122);
  --grad-5spro-a: rgb(245, 158, 11);  --grad-5spro-b: rgb(120, 53, 15);
  --grad-vistoria-a: rgb(139, 92, 246); --grad-vistoria-b: rgb(88, 28, 135);

  /* sombra */
  --shadow-navbar: rgba(0, 36, 123, 0.15) 0 -3px 0 0 inset, rgb(203, 213, 225) 0 0 0 1px;
  --shadow-dropdown: rgba(15, 23, 42, 0.08) 0 2px 4px 0;
  --shadow-card-soft: rgba(64, 64, 64, 0.1) 0 1px 3px 0;
  --shadow-card-lift: rgba(64, 64, 64, 0.15) 0 25px 50px -12px;
  --shadow-gallery: rgba(0, 0, 0, 0.07) 0 2px 32px 0;
  --shadow-glass-inset: rgba(255, 255, 255, 0.25) 0 1px 1px 0 inset;

  /* raio */
  --radius-card: 16px;
  --radius-pill: 1600px;
  --radius-chip: 8px;
  --radius-drawer-item: 10px;
  --radius-nav-cta: 12px;
  --radius-plan-option: 24px;
  --radius-hero-card: 32px;

  /* movimento */
  --t-fast: 220ms;
  --t-med: 360ms;
  --t-slow: 520ms;
  --nav-close: 400ms;
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emph: cubic-bezier(0.2, 0.7, 0, 0.98);
}

/* ————— reset mínimo ————— */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg-dark);
  color: var(--text-primary-dark);
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.5rem;  /* 24px */
  letter-spacing: -0.02em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

body.page-light { background: var(--bg-light); color: var(--text-primary-light); }

/* ————— invólucro (medidas de 02-anatomia §0) ————— */
.padding-global { padding-left: 5vw; padding-right: 5vw; }
.padding-global-21 { padding-left: 5%; padding-right: 5%; }
.container-large  { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; }
.container-medium { width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; }
.container-small  { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; }
.max-width-large  { max-width: 48rem; }
.max-width-medium { max-width: 32rem; }

.padding-section-large   { padding-top: 5rem; padding-bottom: 5rem; }
.padding-section-large-4 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.padding-section-medium  { padding-top: 5rem; padding-bottom: 5rem; }
.padding-section-small   { padding-top: 3rem; padding-bottom: 3rem; }

@media (max-width: 991px) {
  .padding-section-large   { padding-top: 4rem; padding-bottom: 4rem; }
  .padding-section-large-4 { padding-top: 4rem; padding-bottom: 4rem; }
  .padding-section-medium  { padding-top: 4rem; padding-bottom: 4rem; }
  .padding-global.helper-lp { padding-left: 0.75rem; padding-right: 0.75rem; }
}
@media (max-width: 767px) {
  .padding-section-large   { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  .padding-section-large-4 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  .padding-section-medium  { padding-top: 3rem; padding-bottom: 3rem; }
  .padding-section-small   { padding-top: 2rem; padding-bottom: 2rem; }
}

.background-color-alternate { background-color: #000; }

/* ————— escala tipográfica (.text-size-*, 03 §2.2) ————— */
.text-size-sm   { font-size: 0.875rem;  line-height: 1.25rem; letter-spacing: -0.03em; }
.text-size-base { font-size: 1.0625rem; line-height: 1.5rem;  letter-spacing: -0.02em; }
.text-size-lg   { font-size: 1.1875rem; line-height: 1.4;     letter-spacing: -0.01em; }
.text-size-xl   { font-size: 1.25rem;   line-height: 1.33;    letter-spacing: -0.03em; }
.text-size-2xl  { font-size: 1.3rem;    line-height: 1.4;     letter-spacing: -0.03em; }
.text-size-3xl  { font-size: 1.875rem;  line-height: 1.2;     letter-spacing: -0.03em; }
.text-size-4xl  { letter-spacing: -0.03em; }
.text-size-5xl  { font-size: 3rem;      line-height: 1.1;     letter-spacing: -0.03em; }
.text-size-6xl  { font-size: 3.75rem;   line-height: 1.2;     letter-spacing: -0.03em; }
.text-size-7xl  { font-size: 4rem;      line-height: 1;       letter-spacing: -0.03em; font-weight: 500; }
.text-size-stat { font-size: 4.5rem;    line-height: 1;       letter-spacing: -0.03em; font-weight: 500; }

@media (max-width: 991px) {
  .text-size-4xl { font-size: 2.25rem; line-height: 1.2; }
  .text-size-5xl { font-size: 2.75rem; }
  .text-size-6xl { font-size: 3.25rem; }
  .text-size-7xl { font-size: 3.5rem; line-height: 1.21429; }
}
@media (max-width: 767px) {
  .text-size-lg  { font-size: 1.0625rem; }
  .text-size-xl  { font-size: 1.1875rem; }
  .text-size-2xl { font-size: 1.25rem; }
  .text-size-3xl { font-size: 1.5rem; line-height: 1.33333; }
  .text-size-4xl { font-size: 1.75rem; line-height: 1.2; }
  .text-size-5xl { font-size: 2.25rem; }
  .text-size-6xl { font-size: 2.25rem; line-height: 2.5rem; }
  .text-size-7xl { font-size: 2.5rem; line-height: 1.2; }
  .text-size-stat { font-size: 3rem; line-height: 1.2; }
}

.text-color-secondary { color: var(--text-secondary); }
.text-color-tertiary  { color: var(--text-tertiary); }
.text-align-center { text-align: center; }
.opacity-70 { opacity: 0.7; }

/* ————— margens utilitárias (03 §3.3) ————— */
.margin-small   { margin: 1rem; }
.margin-medium  { margin: 2rem; }
.margin-large   { margin: 3rem; }
.margin-xlarge  { margin: 4rem; }
.margin-xxlarge { margin: 5rem; }
.margin-huge    { margin: 6rem; }
[class*="margin-"].margin-top    { margin-right: 0; margin-bottom: 0; margin-left: 0; }
[class*="margin-"].margin-bottom { margin-right: 0; margin-top: 0; margin-left: 0; }
@media (max-width: 991px) {
  .margin-medium  { margin: 1.5rem; } .margin-large { margin: 2.5rem; }
  .margin-xlarge  { margin: 3rem; }   .margin-xxlarge { margin: 4rem; }
  .margin-huge    { margin: 5rem; }
}
@media (max-width: 767px) {
  .margin-medium  { margin: 1.25rem; } .margin-large { margin: 1.5rem; }
  .margin-xlarge  { margin: 2rem; }    .margin-xxlarge { margin: 3rem; }
  .margin-huge    { margin: 3.5rem; }
}

/* ————— botões (05 §2) ————— */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  background: var(--accent);
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: all 200ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
}
.button.is-secondary-white {
  background: #fff;
  color: var(--accent);
}
.button.is-secondary-white:hover { background: #fff; border-color: var(--accent-hover); }
.button.is-tall { padding-top: 15px; padding-bottom: 15px; } /* altura 56 */
.button.is-small { padding-top: 11px; padding-bottom: 11px; } /* altura 48 */
/* `is-link` é o botão que se veste de link — e vem com `padding:0` no atributo `style`,
   que a cascata não vence. No celular ele media 24 px de altura (conferência da Onda 1);
   `min-height` passa por cima do padding zerado sem mexer no desenho de desktop. */
@media (max-width: 991px) {
  .button.is-link { min-height: 44px; }
}

/* ————— placeholder visível (regra da casa: nada de conteúdo inventado) ————— */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, #3a3a3a 0 14px, #333 14px 28px);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  padding: 8px;
  overflow: hidden;
}
.page-light .ph,
.ph.is-light {
  background: repeating-linear-gradient(45deg, #e2e2e2 0 14px, #d9d9d9 14px 28px);
  border-color: rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.55);
}
.ph-label { max-width: 100%; margin: 0; font-family: inherit; }

/* slot de personagem 3D — trocado via assets/personagens.json */
.ph-personagem { position: relative; }
.ph-personagem > img, .ph-personagem > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* QA-sintra: com arte no slot, o tracejado/listrado do placeholder não deve mais aparecer
   (na Sintra o slot preenchido é invisível como moldura). O rótulo segue no DOM como fallback. */
/* ui-perfeicao rodada 1: generalizado de .ph.ph-personagem para qualquer .ph com arte
   (ex.: telas reais do Senso) — slot preenchido nunca mostra moldura de obra.
   A lista repete as variantes claras para vencer a especificidade de `.ph.is-light`. */
.ph:has(> img, > picture),
.page-light .ph:has(> img, > picture),
.ph.is-light:has(> img, > picture) { border-color: transparent; background: none; }

/* ————— reduced motion (04 §9, estendido pela spec §5) ————— */
@media (prefers-reduced-motion: reduce) {
  [data-sticky-header] { transition: none; }
  .step-dropdown, .step-dropdown p, .step-dropdown h3, .step-dropdown .step-num { transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .button { transition: none; }
}

/* QA 11/08 (D3/D4): vazamento horizontal na home@390 e produto@768 — contencao no nivel
   da pagina. clip nao cria scroll container (sticky ok); scrollers internos seguem. */
html, body { overflow-x: clip; }

/* ============================================================
   ESTREIA LIMPA (ui-perfeicao, rodada 1) — visitante nunca vê andaime.
   O modo obra (?obra=1 → classe .obra no <html>, ver assets/js/obra.js)
   devolve os rótulos e molduras tracejadas para trabalho interno.
   ============================================================ */
/* rótulo de andaime: só no modo obra */
html:not(.obra) .ph-label { display: none; }

/* slot sem arte: vira bloco neutro discreto (sem listrado, sem tracejado) */
html:not(.obra) .ph:not(:has(> img, > picture)) {
  background: var(--surface-dark);
  border: 1px solid var(--border-dark-10);
  border-radius: var(--radius-card);
}
html:not(.obra) .page-light .ph:not(:has(> img, > picture)),
html:not(.obra) .ph.is-light:not(:has(> img, > picture)) {
  background: var(--surface-light);
  border-color: var(--border-light);
}

/* bloco que só existe para nós enquanto o material real não chega
   (depoimentos fictícios, faixas de logos, números não medidos, selos, redes) */
html:not(.obra) [data-obra-only] { display: none !important; }