/* ============================================================
   GRUPO BRASILSERV — SISTEMA DE DESIGN
   tokens.css · tokens + reset/base
   Tokens nomeados por FUNÇÃO, nunca por aparência.
   Site tem apenas tema claro — sem dark mode, nem automático nem manual.
   ============================================================ */

:root {
  color-scheme: light only;

  /* ── SUPERFÍCIES — rampa neutra fria, levemente azulada ────── */
  --color-bg: #F7F8FB;            /* fundo padrão da página */
  --color-surface: #FFFFFF;       /* branco proposital: cards elevados */
  --color-surface-alt: #EFF1F6;   /* seção alternada */
  --color-surface-sunken: #E2E5EE;
  --color-border: #E2E5EE;
  --color-border-strong: #C9CEDD;

  /* ── TEXTO ─────────────────────────────────────────────────── */
  --color-text: #171A25;            /* títulos e corpo principal */
  --color-text-secondary: #3C4358;
  --color-text-muted: #6E7691;      /* AA sobre --color-bg */
  --color-text-faint: #9AA1B8;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-deep: #DADDF0;

  /* ── PRIMÁRIA — derivada de #2F316B · única cor de ação ────── */
  --color-primary: #2F316B;
  --color-primary-hover: #262858;
  --color-primary-active: #1D1F44;
  --color-primary-deep: #1D1F44;    /* faixa institucional */
  --color-primary-soft: #EEF0F9;
  --color-primary-line: #B4B9DF;

  /* ── ACENTO — derivada de #EE8913 · só acento, nunca decoração ─ */
  --color-accent: #EE8913;
  --color-accent-text: #A55A06;     /* legível sobre fundo claro (4.9:1) */
  --color-accent-soft: #FEF5E9;
  --color-accent-wash: rgba(238, 137, 19, 0.12);  /* #EE8913 a 12% — tagline do hero */

  /* ── CTA — gradiente laranja com texto branco (decisão do cliente, a
        partir de mockup fornecido). Contraste do stop mais claro (#FFA132)
        com branco fica abaixo de AA — mesma ressalva que já valia para o
        laranja sólido anterior. ─────────────────────────────────── */
  --color-cta: #EE8913;
  --color-cta-hover: #D2760A;
  --gradient-cta: linear-gradient(to right, #FFA132 0%, #CD7D1F 100%);
  --color-text-on-cta: #FFFFFF;

  /* ── HEADER — barra institucional superior, telefone e fio inferior ─ */
  --gradient-header-top: linear-gradient(to right, #021367 0%, #4B63D7 50%, #021367 100%);
  --color-phone: #2C3C8D;
  --color-header-border: #DAE7FF;

  /* ── SEMÂNTICAS, discretas ─────────────────────────────────── */
  --color-success: #1F7A4D;
  --color-warning: #B57A08;
  --color-danger: #B3372E;
  --color-danger-soft: #FBEDEB;
  --color-focus: #EE8913;

  /* ── TIPOGRAFIA ────────────────────────────────────────────── */
  /* Cairo única, em títulos e corpo — no lugar do par Playfair Display +
     Montserrat. Sem contraste serifa/sans, a hierarquia passa a depender só
     de tamanho e peso, por isso a escala foi acentuada, não só deslocada.
     Cairo tem x-height mais modesto e desenho mais fechado que a Montserrat
     que substitui: no mesmo corpo ela "pesa" menos na mancha de texto, então
     toda a escala subiu ~6% (corpo 16px → 17px, small 14px → 15px, rótulo
     11px → 12px — de volta aos valores de antes da Montserrat) e a entrelinha
     do corpo voltou de 1.65 para 1.7. Tracking negativo dos títulos caiu pela
     metade: Cairo é uma geométrica de contadores fechados, aperta mais rápido
     que a serifa fina da Playfair no mesmo valor. */
  --font-display: "Cairo", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui: "Cairo", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --text-display-xl: clamp(2.5rem, 5.95vw, 4.5rem);
  --text-display-l: clamp(2rem, 4vw, 2.9375rem);
  --text-display-m: clamp(1.625rem, 2.5vw, 2.0625rem);
  --text-title: 1.25rem;
  --text-body-l: 1.125rem;
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.75rem;
  --measure: 66ch;                  /* medida máxima de leitura */

  /* ── ESPAÇAMENTO — escala de 4px ───────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px; --space-40: 160px;
  --section-y: clamp(64px, 9vw, 128px);   /* ritmo vertical de seção */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ── RAIO — 4 níveis + pill. Botão nunca passa de --radius-md
        (10px): pill em CTA foi testado e reprovado pelo cliente. ── */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;

  /* ── STAMP — diâmetro do círculo do selo do hero ───────────── */
  --stamp-size: clamp(116px, 9vw, 156px);

  /* ── SOMBRAS — 4 níveis, tingidas com o azul da marca ──────── */
  --shadow-1: 0 1px 2px rgba(23, 26, 55, 0.06);
  --shadow-2: 0 4px 12px -2px rgba(23, 26, 55, 0.09);
  --shadow-3: 0 12px 28px -6px rgba(23, 26, 55, 0.13);
  --shadow-4: 0 28px 60px -12px rgba(23, 26, 55, 0.18);

  /* ── MOTION ────────────────────────────────────────────────── */
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── RESET / BASE ──────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.7;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--color-accent-text); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--color-accent); color: #171A25; }

/* ── FAQ — details/summary nativo: abre sem JavaScript. Cada item é um
      card próprio (fundo, raio, sombra), não uma lista com border-bottom.
      O marcador padrão sai; o "+" vira "×" quando aberto. ──── */
[data-faq] details {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
[data-faq] summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  min-height: 44px;
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease);
}
[data-faq] summary::-webkit-details-marker { display: none; }
[data-faq] summary:hover { color: var(--color-accent-text); }
[data-faq] .gbs-faq-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
[data-faq] details[open] .gbs-faq-ico {
  transform: rotate(135deg);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
[data-faq] .gbs-faq-body {
  padding: 0 var(--space-6) var(--space-6);
  max-width: var(--measure);
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
/* Abertura/fechamento suave via ::details-content (sem JS) — degrada com
   elegância em navegadores sem suporte: o conteúdo só aparece/some
   instantâneo, exatamente como o <details> nativo já se comportava antes. */
[data-faq] details {
  interpolate-size: allow-keywords;
}
[data-faq] details::details-content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.35s var(--ease), opacity 0.3s var(--ease), content-visibility 0.35s var(--ease) allow-discrete;
}
[data-faq] details[open]::details-content {
  height: auto;
  opacity: 1;
}

/* ── STAMP — selo giratório sobre a foto do hero. Três camadas
      concêntricas: fundo (fixo), texto (gira), miolo (fixo). O wrapper mede
      o CÍRCULO, não o SVG. Fundo a 88% do wrapper; texto a 78%, contido
      DENTRO da borda do fundo (não por fora — vazava sobre a foto sem o
      "backing" do círculo); miolo a 40.5% do wrapper (proporção miolo/fundo
      do design original, 49.33%, mantida solta do valor do fundo atual —
      recalcular se o fundo mudar muito de tamanho). O fundo é
      um círculo CSS, não o stamp-bg.svg: backdrop-filter dentro de um SVG
      carregado via <img> não enxerga a página atrás, então o desfoque
      simplesmente não acontecia. ──────────────────────────────────── */
.gbs-stamp-wrapper {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--stamp-size);
  height: var(--stamp-size);
  z-index: 3;
}
/* Variante em fluxo normal (não flutuando sobre uma foto): mesmas camadas
   internas (.gbs-stamp-txt/.gbs-stamp-iso), sem o círculo de fundo — usada
   sobre fundo escuro sólido, onde o "backing" translúcido não faz falta. */
.gbs-stamp-wrapper-inline {
  position: relative;
  width: 140px;
  height: 140px;
  flex: 0 0 auto;
}
.gbs-stamp-bg {
  position: absolute; inset: 6%;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 5px 38px rgba(30, 41, 86, 0.12);
}
/* stamp-txt.svg (v2) já vem quase centrado no próprio quadro — bounding box
   do conteúdo opaco medido por pixel em 49.75%/49.56%, não exatamente
   50/50. O desvio é pequeno, mas girando ele acumula num "balanço" visível
   em certos ângulos — daí o transform-origin explícito no valor medido, em
   vez de confiar no 50%/50% implícito. width/height/top/left EXPLÍCITOS,
   não `inset`: um <img> é elemento substituído com tamanho intrínseco (o
   do SVG) — `inset` sozinho, sem width/height, não o estica para preencher
   o espaço, ele fica ancorado no canto no tamanho intrínseco. Confirmado
   renderizando a composição de verdade (Playwright) — sem isso o texto
   girava excêntrico, fora do eixo do círculo. */
.gbs-stamp-txt {
  position: absolute; top: 13%; left: 13%; width: 74%; height: 74%;
  transform-origin: 49.75% 49.56%;
  animation: gbs-spin 18s linear infinite;
  will-change: transform;
}
.gbs-stamp-iso { position: absolute; top: 50%; left: 50%; width: 40.5%; height: 40.5%; transform: translate(-50%, -50%); }

/* ── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes gbs-drawer-in { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gbs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gbs-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ============================================================
   LAYOUT RESPONSIVO — breakpoints 768 / 1024 / 1280
   Estado base = mobile e SEM JavaScript. O JS não posiciona nada.
   ============================================================ */

/* — Header: nav de âncoras visível sem JS; burger só com JS — */
[data-nav-desktop] { display: none; }
[data-header-cta], [data-header-phone] { display: none; }
[data-burger] { display: none; }
:root[data-js="on"] [data-burger] { display: grid; }
[data-nav-fallback] { display: block; }
:root[data-js="on"] [data-nav-fallback] { display: none; }

/* — Grids: coluna única por padrão — */
[data-hero-grid],
[data-section-head],
[data-cards],
[data-difs],
[data-mvv-grid],
[data-sobre],
[data-footer-grid],
[data-transp] { grid-template-columns: 1fr; }
[data-stamp] { display: none; }

@media (min-width: 768px) {
  [data-proof] li:not(:first-child) { border-left: 1px solid var(--color-border); padding-left: var(--gutter); }
  [data-hero-p2] { max-width: 58ch; }
  [data-cards] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-difs] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-mvv-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-mvv-grid] > div:not(:first-child) { border-left: 1px solid var(--color-border); }
  [data-footer-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  [data-hero-grid] { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  [data-stamp] { display: block; }
  /* O padding reserva a metade do selo que fica fora da foto — sem ele o
     selo vazaria para dentro da coluna de texto. */
  [data-hero-figure] { padding-left: calc(var(--stamp-size) / 2); }
  [data-section-head] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  [data-align-end] { margin-left: auto; }
  [data-cards] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-parceiros] { flex-wrap: nowrap; justify-content: center; gap: var(--space-24); }
  [data-sobre], [data-transp] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  [data-footer-grid] { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

/* — Header completo só quando cabe: 5 itens de menu + telefone +
     CTA não entram em 1024px sem quebrar linha — */
@media (min-width: 1200px) {
  [data-nav-desktop] { display: block; }
  [data-header-cta], [data-header-phone] { display: inline-flex; }
  [data-burger], :root[data-js="on"] [data-burger] { display: none; }
  [data-nav-fallback] { display: none; }
}

@media (min-width: 1280px) {
  [data-footer-grid] { column-gap: var(--space-10); }
}