/* =========================================================================
   ATLAS INVESTIMENTOS E NEGÓCIOS — Folha de estilo
   -------------------------------------------------------------------------
   Sistema de design único (tokens) -> tudo deriva das variáveis em :root.
   Para reescalar tipografia, espaçamento ou cores, edite os tokens; os
   componentes acompanham automaticamente.

   ÍNDICE
   01. Tokens de design (:root)
   02. Reset & base
   03. Tipografia
   04. Layout (container / section)
   05. Botões & links
   06. Cabeçalho & navegação
   07. Menu mobile
   08. Hero
   09. Sobre
   10. Soluções
   11. Consultoria (advisory)
   12. Diferenciais (benefits)
   13. Como funciona (process)
   14. FAQ
   15. Faixa de CTA
   16. Escritório
   17. Rodapé
   18. Banner de cookies
   19. Utilitários (reveal, skip-link)
   20. Página legal
   21. Responsivo
   22. Movimento reduzido
   ========================================================================= */

/* ===== 01. Tokens de design ============================================= */
:root {
  /* Marca */
  --red: #f10d18;
  --red-dark: #b60812;
  --red-soft: rgba(241, 13, 24, 0.14);

  /* Acento secundário — azul-aço (equilibra o vermelho: estrutura/ícones) */
  --steel: #6483c4;
  --steel-soft: rgba(100, 131, 196, 0.14);

  /* Superfícies */
  --bg: #03050b;
  --bg-deep: #010208;
  --surface: #070a13;
  --surface-2: #0a0e19;

  /* Linhas / divisórias */
  --line: rgba(91, 107, 145, 0.30);
  --line-strong: rgba(91, 107, 145, 0.45);
  --line-red: rgba(241, 13, 24, 0.40);
  --line-steel: rgba(100, 131, 196, 0.40);

  /* Texto (contrastes verificados em fundo escuro >= AA) */
  --white: #fff;
  --text: #d5d8e1;          /* corpo principal */
  --muted: #a7adba;         /* parágrafos secundários (~6.3:1) */
  --dim: #8b91a1;           /* microcópia, legal, base do rodapé (>=12px) */
  --heading-soft: #9aa0b0;  /* títulos editoriais acinzentados */

  /* Tipografia — escala modular Major Third (~1.25), fluida */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Inter", sans-serif;

  --fs-display: clamp(2.45rem, 1.7rem + 3.1vw, 3.25rem);  /* hero / legal h1 — máx. 52px */
  --fs-h1: clamp(2.2rem, 1.7rem + 2.5vw, 3rem);           /* máx. 48px */
  --fs-h2: clamp(1.8rem, 1.45rem + 1.9vw, 2.75rem);       /* títulos de seção — máx. 44px */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);     /* cards / processo */
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body: 1rem;          /* 16px */
  --fs-body-sm: 0.875rem;   /* 14px */
  --fs-caption: 0.8125rem;  /* 13px */
  --fs-eyebrow: 0.75rem;    /* 12px — piso de UI/legal */
  --fs-micro: 0.6875rem;    /* 11px — apenas labels decorativas com tracking */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --lh-body-sm: 1.6;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-tight: -0.015em;
  --tracking-label: 0.12em;
  --tracking-eyebrow: 0.2em;

  /* Espaçamento — base 8px */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 96px;
  --section-y: clamp(72px, 9vw, 112px);     /* respiro vertical das seções */
  --grid-editorial: clamp(48px, 5vw, 80px); /* gutter dos grids de 2 colunas */

  /* Layout */
  --container: 1160px;
  --container-wide: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  --header-height: 76px;
  --scroll-offset: 108px;

  /* Raios */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Efeitos */
  --shadow-red: 0 18px 55px rgba(241, 13, 24, 0.18);
  --shadow-card: 0 14px 45px rgba(0, 0, 0, 0.25);
  --transition: 220ms ease;
  --tap-min: 44px;
}

/* ===== 02. Reset & base ================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

/* ===== 03. Tipografia =================================================== */
h1,
h2,
h3,
h4 {
  margin-top: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  margin-bottom: var(--space-md);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h1 strong,
h2 strong,
h3 strong {
  color: var(--red);
  font-weight: inherit;
}

p {
  margin-top: 0;
}

/* Eyebrow — label primária */
.eyebrow {
  margin: 0 0 var(--space-xs);
  color: var(--red);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* ===== 04. Layout ====================================================== */
.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: var(--section-y) 0;
}

/* Fundo alternado para seções (páginas internas) */
.section-surface {
  background: #050811;
  border-block: 1px solid var(--line);
}

/* Cabeçalho de seção reutilizável */
.section-heading {
  max-width: 720px;
  margin-bottom: var(--space-xl);
}

.section-heading.centered {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-heading p:last-child {
  max-width: 590px;
  margin-inline: auto;
  color: var(--muted);
}

/* ===== 05. Botões & links ============================================== */
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: 0 10px 30px rgba(241, 13, 24, 0.16);
  color: var(--white);
  cursor: pointer;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  transition: transform var(--transition), box-shadow var(--transition),
    background var(--transition), color var(--transition);
}

.button:hover {
  box-shadow: 0 14px 38px rgba(241, 13, 24, 0.3);
  transform: translateY(-2px);
}

.button svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.button-large {
  min-height: 56px;
  padding-inline: var(--space-lg);
}

.button-small {
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-eyebrow);
}

.button-outline {
  border-color: var(--line-strong);
  background: transparent;
  box-shadow: none;
}

.button-outline:hover {
  border-color: var(--red);
  background: var(--red);
}

.text-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: 600;
  transition: border-color var(--transition), color var(--transition);
}

.text-link:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ===== 06. Cabeçalho & navegação ======================================= */
.site-header {
  position: fixed;
  z-index: 50;
  top: 18px;
  right: 0;
  left: 0;
  transition: top var(--transition);
}

.header-shell {
  display: flex;
  width: min(100% - var(--gutter) * 2, var(--container-wide));
  min-height: var(--header-height);
  align-items: center;
  gap: var(--space-md);
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(7, 8, 14, 0.68);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header.scrolled {
  top: 8px;
}

.site-header.scrolled .header-shell {
  background: rgba(3, 5, 11, 0.92);
}

.brand {
  flex: 0 0 auto;
}

.brand img {
  width: 100px;
  max-height: 57px;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.4vw, 26px);
}

.desktop-nav a {
  position: relative;
  padding: var(--space-xs) 0;
  color: #e9e9ed;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: var(--red);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}

.desktop-nav a:hover {
  color: var(--red);
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Item da navegação correspondente à página atual */
.desktop-nav a[aria-current="page"] {
  color: var(--red);
}

.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mobile-menu nav a[aria-current="page"] {
  color: var(--red);
}

.menu-toggle {
  display: none;
  width: var(--tap-min);
  height: var(--tap-min);
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
}

/* ===== 07. Menu mobile ================================================= */
.menu-overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.74);
  opacity: 0;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.mobile-menu {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(86vw, 390px);
  flex-direction: column;
  padding: var(--space-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(241, 13, 24, 0.18), transparent 35%),
    #f5f5f6;
  color: #0a0c12;
  transform: translateX(102%);
  transition: transform 350ms cubic-bezier(0.76, 0, 0.24, 1);
}

.menu-open .menu-overlay {
  visibility: visible;
  opacity: 1;
}

.menu-open .mobile-menu {
  transform: translateX(0);
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-head img {
  width: 58px;
}

.menu-close {
  display: grid;
  width: var(--tap-min);
  height: var(--tap-min);
  place-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 32px; /* tamanho do glifo "×", intencionalmente fora da escala tipográfica */
  font-weight: 300;
  line-height: 1;
}

.mobile-menu-label {
  margin: var(--space-lg) 0 var(--space-2xs);
  color: var(--red);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-lg);
}

.mobile-menu nav a {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
}

.mobile-menu .button {
  margin-top: auto;
}

.mobile-menu-foot {
  margin: var(--space-sm) 0 0;
  color: #6f7280;
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
}

/* ===== 08. Hero ======================================================== */
.hero {
  position: relative;
  min-height: min(820px, 100vh);
  min-height: min(820px, 100svh);
  overflow: hidden;
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(90deg, rgba(2, 4, 10, 0.3) 0%, rgba(2, 4, 10, 0) 58%),
    url("../assets/hero-desktop.webp");
  background-position: center;
  background-size: cover;
  isolation: isolate;
}

.hero::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 130px;
  background: linear-gradient(180deg, transparent, var(--bg));
  content: "";
}

.hero-glow {
  position: absolute;
  z-index: -1;
  top: 30%;
  left: -250px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(25, 35, 76, 0.16);
  filter: blur(80px);
}

/* Foto do hero usada só no mobile (empilhada abaixo do texto) */
.hero-photo {
  display: none;
}

.hero-content {
  display: flex;
  min-height: min(820px, 100vh);
  min-height: min(820px, 100svh);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--header-height) + var(--space-2xl)); /* limpa o cabeçalho fixo */
  padding-bottom: var(--space-4xl);
}

.hero h1 {
  width: min(680px, 92%);
  margin-bottom: var(--space-md);
  font-size: var(--fs-display);
}

.hero h1 span {
  color: var(--red);
}

.hero-subtitle {
  width: min(560px, 100%);
  max-width: 52ch;
  margin-bottom: var(--space-lg);
  color: #c4c7d0;
  font-size: var(--fs-body-lg);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.hero-trust span {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: #a4a8b3;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-trust span::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--steel);
  box-shadow: 0 0 12px var(--steel);
  content: "";
}

.scroll-indicator {
  position: absolute;
  bottom: 45px;
  left: 50%;
  display: grid;
  width: 28px;
  height: 46px;
  place-content: start center;
  padding-top: 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  transform: translateX(-50%);
}

.scroll-indicator span {
  width: 3px;
  height: 8px;
  border-radius: 4px;
  background: var(--steel);
  animation: scroll-dot 1.8s infinite;
}

@keyframes scroll-dot {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(18px); }
}

/* ===== 09. Sobre ======================================================= */
.about {
  background:
    radial-gradient(circle at 90% 40%, rgba(241, 13, 24, 0.06), transparent 28%),
    var(--bg);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--grid-editorial);
}

.section-copy h2 {
  margin-bottom: 0; /* gap controlado pelo grid (separação título/texto) */
  color: var(--heading-soft);
  font-weight: 500;
}

.about-content p,
.advisory-content p {
  color: var(--muted);
}

.about-content p + p,
.advisory-content p + p {
  margin-top: var(--space-sm);
}

.about-content .button,
.advisory-content .button {
  margin-top: var(--space-md);
}

/* ===== 10. Soluções ==================================================== */
.solutions {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 49, 93, 0.27), transparent 35%),
    #050811;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-md);
}

.solution-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: border-color var(--transition), transform var(--transition),
    box-shadow var(--transition);
}

.solution-card:hover {
  border-color: var(--line-red);
  box-shadow: var(--shadow-red);
  transform: translateY(-6px);
}

.card-visual {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.card-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.solution-card:hover .card-visual img {
  transform: scale(1.05);
}

/* Overlay que mantém a estética escura/vermelha e a legibilidade do número */
.card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 5, 11, 0.15) 0%, rgba(3, 5, 11, 0.78) 100%),
    linear-gradient(120deg, rgba(100, 131, 196, 0.18), transparent 55%);
}

/* Ícone da categoria como selo sobre a foto */
.card-badge {
  position: absolute;
  z-index: 2;
  bottom: var(--space-sm);
  left: var(--space-sm);
  display: grid;
  width: 46px;
  height: 46px;
  place-content: center;
  border: 1px solid var(--line-steel);
  border-radius: 50%;
  background: rgba(3, 5, 11, 0.55);
  backdrop-filter: blur(6px);
}

.card-badge svg {
  width: 24px;
  fill: none;
  stroke: var(--steel);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.card-num {
  position: absolute;
  z-index: 2;
  top: var(--space-xs);
  right: var(--space-md);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-lg);
}

.card-body h3 {
  margin-bottom: var(--space-xs);
}

.card-body p {
  margin-bottom: var(--space-md);
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.card-body a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  color: var(--white);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-body a span {
  color: var(--steel);
  font-size: var(--fs-h4);
  transition: transform var(--transition);
}

.card-body a:hover span {
  transform: translate(3px, -3px);
}

.asset-types {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.018);
}

.asset-types p {
  min-width: 210px;
  margin: 0;
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.asset-types div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2xs);
}

.asset-types span {
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--fs-eyebrow);
}

/* ===== 11. Consultoria ================================================= */
.advisory {
  overflow: hidden;
  background: var(--bg);
}

.advisory-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--grid-editorial);
}

.advisory-heading h2 {
  margin-bottom: 0;
  color: var(--heading-soft);
  font-weight: 500;
}

.advisory-mark {
  position: absolute;
  z-index: -1;
  right: -140px;
  bottom: -200px;
  width: 400px;
  opacity: 0.035;
  transform: rotate(-14deg);
}

/* ===== 12. Diferenciais ================================================ */
.benefits {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line-steel), transparent) 1;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 49, 93, 0.5), transparent 32%),
    linear-gradient(180deg, #070810 0%, var(--bg) 65%);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
}

.benefit-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-md);
  place-content: center;
  border: 1px solid var(--line-steel);
  border-radius: 50%;
  background: var(--steel-soft);
}

.benefit-icon svg {
  width: 25px;
  fill: none;
  stroke: var(--steel);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.benefit h3 {
  margin-bottom: var(--space-xs);
}

.benefit p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.center-action {
  margin-top: var(--space-2xl);
  text-align: center;
}

/* ===== 13. Como funciona =============================================== */
.process {
  border-top: 1px solid var(--line);
  background: #060912;
}

.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--grid-editorial);
}

.process-heading {
  position: sticky;
  top: var(--scroll-offset);
  align-self: start;
}

.process-heading h2 {
  margin-bottom: 0;
  color: var(--heading-soft);
  font-weight: 500;
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-list li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--line);
}

.process-list li:first-child {
  padding-top: 0;
}

.process-list li:last-child {
  border-bottom: 0;
}

.process-list > li > span {
  color: var(--steel);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.process-list h3 {
  margin-bottom: var(--space-2xs);
}

.process-list p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

/* ===== 14. FAQ ========================================================= */
.faq-section {
  background: var(--bg);
}

.faq-list {
  width: min(100%, 860px);
  margin-inline: auto;
}

.faq-list details {
  margin-bottom: var(--space-xs);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--transition);
}

.faq-list details[open] {
  border-color: var(--line-steel);
}

.faq-list summary {
  position: relative;
  padding: var(--space-md) 64px var(--space-md) var(--space-md);
  color: var(--white);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before,
.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 25px;
  width: 15px;
  height: 1px;
  background: var(--steel);
  content: "";
  transition: transform var(--transition);
}

.faq-list summary::after {
  transform: rotate(90deg);
}

.faq-list details[open] summary::after {
  transform: rotate(0);
}

.faq-list details div {
  padding: 0 64px var(--space-md) var(--space-md);
}

.faq-list details p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

/* ===== 15. Faixa de CTA ================================================ */
.cta-section {
  padding: var(--section-y) 0; /* mesmo respiro das demais seções */
  background: var(--bg);
}

.cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 22%, 260px);
  align-items: center;
  gap: var(--space-xl);
  overflow: hidden;
  padding: 40px 0 40px 40px; /* direita = 0 para o logo sangrar até a borda */
  border: 1px solid var(--line-red);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 75% 20%, rgba(241, 13, 24, 0.2), transparent 33%),
    linear-gradient(145deg, #111424 0%, #04050b 62%);
  box-shadow: var(--shadow-red);
}

.cta-copy {
  position: relative;
  z-index: 2; /* conteúdo (e o botão) sempre por cima da meia-logo */
}

.cta-copy h2 {
  max-width: 700px;
}

.cta-copy > p:not(.eyebrow) {
  max-width: 600px;
  margin-bottom: var(--space-md);
  color: var(--muted);
}

.cta-card > img {
  align-self: start; /* começa no topo, alinhado com o conteúdo */
  justify-self: end;
  max-width: 235px;
  opacity: 0.92;
  filter: drop-shadow(0 0 40px rgba(241, 13, 24, 0.23));
  transform: translateX(20px); /* leve sangria à direita */
}

/* ===== 16. Escritório ================================================== */
.office {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--line);
  background: #05070e;
}

.office-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(24px, 3vw, 45px);
}

.office h2 {
  margin-bottom: 0;
  font-size: var(--fs-h3);
}

.office address {
  color: var(--muted);
  font-size: var(--fs-body-sm);
  font-style: normal;
  line-height: var(--lh-body-sm);
}

.office address span {
  display: block;
  margin-bottom: var(--space-3xs);
  color: var(--white);
  font-weight: 600;
}

/* ===== 17. Rodapé ====================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr));
  gap: clamp(32px, 3.5vw, 56px);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

.footer-brand img {
  width: 150px;
  margin-bottom: var(--space-md);
}

.footer-brand p {
  max-width: 330px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.footer-col h3 {
  margin: 0 0 var(--space-sm);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-col a,
.footer-col button {
  padding: var(--space-2xs) 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-caption);
  text-align: left;
  transition: color var(--transition);
}

.footer-col a:hover,
.footer-col button:hover {
  color: var(--red);
}

.legal-notice {
  padding-block: var(--space-md);
  border-top: 1px solid var(--line);
}

.legal-notice p {
  max-width: 1040px;
  margin: 0;
  color: var(--dim);
  font-size: var(--fs-eyebrow);
  line-height: 1.7;
}

.footer-bottom {
  border-top: 1px solid var(--line);
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 65px;
  color: var(--dim);
  font-size: var(--fs-eyebrow);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a:hover {
  color: var(--red);
}

/* ===== 18. Banner de cookies =========================================== */
.cookie-banner {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  width: min(100% - 40px, 1000px);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-inline: auto;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 10, 17, 0.97);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner strong {
  display: block;
  color: var(--white);
  font-size: var(--fs-body-sm);
}

.cookie-banner p {
  margin: var(--space-3xs) 0 0;
  color: var(--muted);
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
}

.cookie-banner p a {
  color: var(--white);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2xs);
}

.cookie-actions .button {
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-eyebrow);
}

/* Janela informativa (popups dos links do rodapé) */
.info-dialog {
  width: min(100% - var(--gutter) * 2, 540px);
  max-height: min(82vh, 640px);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  border: 1px solid var(--line-red);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(241, 13, 24, 0.16), transparent 42%),
    #090c15;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7);
  color: var(--text);
  overflow: auto;
}

.info-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
}

.info-dialog h2 {
  margin-bottom: var(--space-md);
  font-size: var(--fs-h3);
}

.info-dialog p {
  margin: 0 0 var(--space-sm);
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.info-dialog p:last-child {
  margin-bottom: 0;
}

.info-dialog strong {
  color: var(--white);
  font-weight: 600;
}

.info-dialog .dialog-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: grid;
  width: 40px;
  height: 40px;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.info-dialog .dialog-close:hover {
  border-color: var(--red);
  color: var(--white);
}

/* ===== 19. Utilitários ================================================= */
.skip-link {
  position: fixed;
  z-index: 999;
  top: 12px;
  left: 12px;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 6px;
  background: var(--white);
  color: var(--bg);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 20. Página legal ================================================ */
.legal-page {
  min-height: 100vh;
  padding: calc(var(--scroll-offset) + var(--space-xl)) 0 var(--section-y);
  background:
    radial-gradient(circle at 80% 0%, rgba(241, 13, 24, 0.13), transparent 28%),
    var(--bg);
}

.legal-header {
  margin-bottom: var(--space-3xl);
}

.legal-header img {
  width: 150px;
  margin-bottom: var(--space-xl);
}

.legal-header h1 {
  max-width: 800px;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-display);
}

.legal-header h1 span {
  color: var(--red);
}

.legal-header p {
  max-width: 680px;
  color: var(--muted);
}

.legal-nav {
  position: sticky;
  top: 20px;
  z-index: 4;
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xl);
  padding: var(--space-2xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(7, 10, 19, 0.9);
  backdrop-filter: blur(12px);
}

.legal-nav a {
  flex: 1;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 7px;
  color: var(--text);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.legal-nav a:hover {
  background: var(--red);
  color: var(--white);
}

.legal-content {
  display: grid;
  gap: var(--space-md);
}

.legal-card {
  scroll-margin-top: var(--scroll-offset);
  padding: var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.legal-card h2 {
  font-size: var(--fs-h2);
}

.legal-card h3 {
  margin: var(--space-lg) 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.legal-card p,
.legal-card li {
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.legal-card li + li {
  margin-top: var(--space-2xs);
}

.legal-back {
  display: inline-flex;
  margin-top: var(--space-xl);
  color: var(--red);
  font-weight: 700;
}

/* Sub-páginas (Sobre / serviços) — intro e figura reutilizáveis */
.page-intro {
  position: relative;
  padding: calc(var(--scroll-offset) + var(--space-xl)) 0 var(--section-y);
  background:
    radial-gradient(circle at 82% 0%, rgba(241, 13, 24, 0.1), transparent 32%),
    var(--bg);
}

.page-intro h1 {
  max-width: 720px;
  margin-bottom: var(--space-md);
  font-size: var(--fs-display);
}

.page-intro .lead {
  max-width: 620px;
  margin-bottom: var(--space-lg);
  color: var(--muted);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
}

.page-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.page-figure img {
  width: 100%;
  height: clamp(280px, 42vw, 480px);
  object-fit: cover;
}

.page-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--line);
}

.page-figure figcaption span {
  color: var(--red);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.page-figure figcaption strong {
  color: var(--white);
  font-size: var(--fs-h4);
}

/* Página de erro (404) */
.error-page {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--section-y) var(--gutter);
  text-align: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(241, 13, 24, 0.12), transparent 42%),
    var(--bg);
}

.error-page img {
  width: 200px;
  margin-bottom: var(--space-sm);
}

.error-page h1 {
  font-size: var(--fs-display);
}

.error-page .error-lead {
  max-width: 440px;
  color: var(--muted);
  font-size: var(--fs-body-lg);
}

/* ===== 21. Responsivo ================================================== */

/* --- <= 1080px : nav vira menu, diferenciais em 2 colunas --- */
@media (max-width: 1080px) {
  .desktop-nav,
  .header-cta {
    display: none;
  }

  .header-shell {
    justify-content: space-between;
  }

  .menu-toggle {
    display: grid;
  }

  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- <= 768px : grids editoriais e estruturais colapsam --- */
@media (max-width: 768px) {
  /* ritmo vertical mais compacto no mobile */
  :root {
    --section-y: clamp(48px, 10vw, 72px);
  }

  .section-heading {
    margin-bottom: var(--space-lg);
  }

  .center-action {
    margin-top: var(--space-lg);
  }

  .office {
    padding: var(--section-y) 0;
  }

  .about-grid,
  .advisory-grid,
  .process-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .process-heading {
    position: static;
  }

  .office-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    justify-items: start;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-col a,
  .footer-col button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Hero centralizado com imagem mobile */
  /* Hero empilhado: texto em fundo escuro no topo, foto numa faixa abaixo */
  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: none;
    background-color: var(--bg-deep);
  }

  .hero-photo {
    display: block;
    width: 100%;
    height: auto; /* mostra a imagem inteira, sem cortar */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 92%, transparent 100%);
  }

  .hero::after {
    height: 130px;
  }

  .hero-glow {
    top: -180px;
    left: 50%;
    width: 440px;
    height: 440px;
    background: rgba(104, 9, 18, 0.14);
    transform: translateX(-50%);
  }

  .hero-content {
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-xl);
    text-align: center;
  }

  .page-intro {
    padding-top: calc(var(--header-height) + var(--space-lg));
  }

  .hero h1 {
    width: 100%;
  }

  .hero-subtitle {
    width: 100%;
    max-width: 470px;
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .hero-actions .text-link {
    display: none;
  }

  .hero-trust {
    display: none;
  }

  .scroll-indicator {
    display: none;
  }

  .cta-card {
    grid-template-columns: 1fr;
    padding: var(--space-xl) var(--space-md);
    text-align: center;
  }

  /* Meia-logo como grafismo de fundo no canto inferior direito,
     encostando na borda; o botão passa por cima. */
  .cta-card > img {
    position: absolute;
    z-index: 1;
    top: auto;
    right: -8px;
    bottom: -8px;
    width: auto;
    height: 150px; /* controla pela altura: logo é estreita e comprida */
    max-width: none;
    opacity: 0.55;
    transform: none;
  }
}

/* --- <= 560px : layout mobile pleno --- */
@media (max-width: 560px) {
  :root {
    --header-height: 54px;
  }

  .brand img {
    width: 80px;
  }

  /* cabeçalho mais compacto no mobile */
  .site-header {
    top: 10px;
  }

  .header-shell {
    min-height: 54px;
    border-radius: 12px;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
  }

  .hero h1 {
    font-size: clamp(2.05rem, 9vw, 2.9rem);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }

  .benefit-icon {
    margin-inline: auto;
  }

  .asset-types {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-md);
  }

  .asset-types div {
    justify-content: flex-start;
  }

  .asset-types p {
    min-width: 0;
  }

  .process-list li {
    grid-template-columns: 48px 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-bottom .container {
    min-height: 90px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3xs);
  }

  .cookie-banner {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .cookie-actions {
    flex-direction: column-reverse;
  }

  .legal-nav {
    flex-direction: column;
  }
}

/* ===== 22. Movimento reduzido ========================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}