/* ==========================================================================
   Croire Engenharia e Consultoria — base.css
   ==========================================================================
   Reset + layout + header/footer + seções. Importa o design system
   (tokens + componentes) — nenhum hex solto aqui, tudo via var(--…).

   Movimento: scroll NATIVO + scroll-behavior:smooth. Sem momentum/inércia
   (preferência fixa do usuário, vence o doc de front-end).
   Banner de cookies: SEMPRE à esquerda (o canto inferior direito é reservado).
   ========================================================================== */

@import url('/assets/css/tokens.css');
@import url('/assets/css/componentes.css');

/* ==========================================================================
   0. RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* clip, NUNCA hidden no body: hidden cria contêiner de scroll e quebra sticky */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { max-width: 100%; }
/* height:auto é obrigatório: width/height no HTML entram como presentational
   hint e venceriam o aspect-ratio do CSS, esticando a imagem. */
img { display: block; height: auto; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }

:target { scroll-margin-top: 90px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background-color: var(--brand);
  color: var(--ink-inverse);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: top var(--duration-base) var(--ease-standard);
}
.skip-link:focus-visible { top: var(--space-4); }

/* ==========================================================================
   1. TOKENS LOCAIS DE LAYOUT
   ========================================================================== */
:root {
  --header-h: 78px;
  --nav-drawer-w: min(360px, 86vw);
}
@media (max-width: 900px) {
  :root { --header-h: 66px; }
}

.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-section-sm); }

/* Cabeçalho de seção padrão (eyebrow + título), alinhado à esquerda */
.section-head { display: grid; gap: var(--space-5); }
.section-head .section-title { max-width: 20ch; text-wrap: balance; }
.section-head--wide .section-title { max-width: 24ch; }

/* Marcador losango — geometria do símbolo da marca (losangos sobrepostos) */
.lozenge {
  display: block;
  width: 9px; height: 9px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  border: var(--border-width-thick) solid var(--accent);
}

/* ==========================================================================
   2. BASELINE DE MOVIMENTO — reveal on-scroll (a camada rica é da etapa 7)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Em elemento sticky, transform faz o bloco "saltar" quando cola:
   a variante fade entra só por opacidade. */
[data-reveal="fade"] { transform: none; }

[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* Sem JS, nada fica invisível */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: var(--concrete-50);
  border-bottom: var(--border-width-hairline) solid var(--border);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { width: auto; height: 34px; }
@media (max-width: 900px) { .brand img { height: 28px; } }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 2.4vw, var(--space-10));
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 2vw, var(--space-8));
}
.nav-link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--border-width-thick);
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
.nav-link:hover { color: var(--brand); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--brand); font-weight: var(--weight-semibold); }

.nav-cta { padding-block: var(--space-3); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-toggle-bars { display: block; width: 22px; }
.nav-toggle-bars span {
  display: block;
  height: 2px;
  background-color: var(--brand);
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.nav-toggle-bars span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background-color: rgba(18, 20, 46, .5);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.nav-backdrop.is-open { opacity: 1; }
.nav-backdrop[hidden] { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 80;
    width: var(--nav-drawer-w);
    margin: 0;
    padding: calc(var(--header-h) + var(--space-8)) var(--space-6) var(--space-8);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-6);
    background-color: var(--concrete-50);
    border-left: var(--border-width-hairline) solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease-out),
                visibility 0s linear var(--duration-slow);
  }
  .site-nav.is-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link {
    padding-block: var(--space-4);
    font-size: var(--text-lg);
    border-bottom: var(--border-width-hairline) solid var(--border);
  }
  .nav-link::after { display: none; }
  .nav-cta { width: 100%; }
}

/* ==========================================================================
   4. HERO — full-bleed, fullscreen, foto real + overlay navy, sem scroll-cue
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100dvh - var(--header-h));
  overflow: hidden;
  background-color: var(--surface-inverse);
  color: var(--ink-inverse);
}

/* Wrapper de mídia SEMPRE display:block — overflow/clip não se aplicam a caixa inline */
.hero-media {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg, rgba(18, 20, 46, .94) 0%, rgba(18, 20, 46, .86) 38%, rgba(18, 20, 46, .46) 72%, rgba(18, 20, 46, .34) 100%),
    linear-gradient(180deg, rgba(18, 20, 46, .55) 0%, rgba(18, 20, 46, 0) 34%, rgba(18, 20, 46, .55) 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
  /* respiro inferior generoso: é ele que mantém o CTA do hero acima do
     banner de cookies (que fica fixo no canto inferior ESQUERDO) */
  padding-block: clamp(40px, 5vh, 64px) var(--hero-respiro);
  --hero-respiro: clamp(64px, 9vh, 112px);
  --hero-reserva: clamp(216px, 27vh, 264px);
}
.hero-inner { max-width: 76rem; }
/* A reserva de ~250px no pé do hero existe só para o banner de cookies não
   cobrir o CTA. Quem já respondeu ao banner (todo visitante recorrente) via
   essa faixa como espaço morto. A classe é aplicada por script inline no
   <head>, antes da pintura, para não haver salto de layout. */
.cookie-pendente .hero .container { padding-block-end: var(--hero-reserva); }

.hero-title {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  /* Escala própria do hero. O H1 do cliente é longo (~85 caracteres), então o
     mínimo continua contido para não virar 9 linhas no celular; o que subiu foi
     o TETO, porque no desktop 56px deixava o título pequeno demais para um hero
     fullscreen. Medido: continua cabendo em 100dvh em todos os breakpoints. */
  font-size: clamp(1.75rem, 0.55rem + 5.6vw, 5.25rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  text-wrap: balance;
  /* medida larga de propósito: o H1 do cliente tem ~100 caracteres e uma
     medida curta o quebraria em 5 linhas, estourando o hero */
  max-width: 26ch;
}
.hero-eyebrow { color: var(--ink-inverse-muted); }

.hero-points {
  margin-top: var(--space-8);
  display: grid;
  gap: 0;
  max-width: 58ch;
  border-top: var(--border-width-hairline) solid var(--border-inverse);
}
.hero-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-width-hairline) solid var(--border-inverse);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-inverse);
}
.hero-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}
.hero-note {
  font-size: var(--text-sm);
  color: var(--ink-inverse-muted);
}

/* Viewport BAIXO (notebook 1200x800, 1280x720): o hero não cabe em 100dvh
   com o título longo do cliente, e aí o CTA desce até a faixa do banner de
   cookies. A compressão abaixo é medida, não estética. */
@media (min-width: 561px) and (max-height: 950px) {
  .hero .container { padding-block: var(--space-6) var(--hero-respiro); --hero-respiro: var(--space-16); --hero-reserva: clamp(196px, 24vh, 232px); }
  /* medida mais larga = menos linhas de título, que é o que devolve altura */
  .hero-title { margin-top: var(--space-4); font-size: clamp(1.875rem, 0.7rem + 5vw, 5.25rem); max-width: 26ch; }
  .hero-points { margin-top: var(--space-5); }
  .hero-points li { padding-block: var(--space-2); }
  .hero-actions { margin-top: var(--space-5); }
}
@media (min-width: 561px) and (max-height: 820px) {
  .hero .container { padding-block: var(--space-5) var(--hero-respiro); --hero-respiro: var(--space-12); --hero-reserva: clamp(172px, 23vh, 206px); }
  .hero-title { margin-top: var(--space-3); font-size: clamp(1.625rem, 0.6rem + 3.9vw, 4rem); max-width: 31ch; }
  .hero-points li { font-size: 0.9375rem; padding-block: 6px; }
}

/* Em telas pequenas o hero é comprimido de propósito: é o que mantém o CTA
   ACIMA do banner de cookies (que vira faixa full-width no rodapé). Medido. */
@media (max-width: 560px) {
  .hero .container { padding-block: var(--space-6) var(--hero-respiro); --hero-respiro: var(--space-16); --hero-reserva: var(--space-32); }
  /* o eyebrow repete o assunto do H1; sai no celular para o CTA subir */
  .hero-eyebrow { display: none; }
  .hero-title { margin-top: 0; font-size: 1.9375rem; max-width: none; }
  .hero-points { margin-top: var(--space-6); }
  .hero-points li { padding-block: var(--space-2); font-size: 0.875rem; }
  .hero-actions { margin-top: var(--space-6); }
  .hero-actions .btn { width: 100%; }
  .hero-note { display: none; }
}

/* Celular BAIXO (320x568, 360x640): nesta faixa o hero simplesmente não tem
   altura para título longo + 3 apoios + CTA acima da barra de cookies, que é
   fixa e come ~120px do rodapé. Comprimir aqui é o que mantém o CTA visível;
   sem esta faixa o banner cobria o botão em 118px. Medido, não estético. */
@media (max-width: 560px) and (max-height: 700px) {
  .hero .container { padding-block: var(--space-4) var(--hero-respiro); --hero-respiro: var(--space-10); --hero-reserva: var(--space-24); }
  .hero-title { font-size: 1.4375rem; line-height: 1.12; }
  .hero-points { margin-top: var(--space-3); }
  .hero-points li { padding-block: 3px; font-size: 0.8125rem; line-height: 1.35; }
  .hero-actions { margin-top: var(--space-3); }
  .hero-actions .btn { padding-block: var(--space-3); }
}
/* 320x568 (iPhone SE 1ª geração) é o pior caso do acervo: o H1 de Ensaios tem
   6 linhas aqui e ainda estourava 7px sobre a barra de cookies. */
@media (max-width: 560px) and (max-height: 600px) {
  .hero-title { font-size: 1.3125rem; }
  .hero-points li { font-size: 0.78125rem; padding-block: 2px; }
}

/* ==========================================================================
   5. CLIENTES — faixa em movimento (marquee), grayscale → cor no hover
   ========================================================================== */
.clients {
  padding-block: var(--space-section-sm);
  background-color: var(--surface-raised);
  border-block: var(--border-width-hairline) solid var(--border);
}
.clients-head { display: grid; gap: var(--space-4); }
.clients-head .section-title { font-size: var(--text-h3); max-width: 26ch; text-wrap: balance; }

.clients-marquee {
  display: block;
  margin-top: var(--space-10);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  width: max-content;
  animation: client-marquee 58s linear infinite;
}
.clients-marquee:hover .clients-track,
.clients-marquee:focus-within .clients-track { animation-play-state: paused; }

.clients-track li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 64px;
}
.clients-track img {
  width: auto;
  max-height: 56px;
  max-width: 132px;
  object-fit: contain;
  /* multiply apaga o fundo branco dos logos que vieram com caixa */
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.clients-track img:hover { filter: grayscale(0); opacity: 1; }

@keyframes client-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
  .clients-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   6. SERVIÇOS — aside sticky com foto + lista editorial numerada com sweep
   ========================================================================== */
.services { padding-block: var(--space-section); }

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(var(--space-10), 5vw, var(--space-20));
  align-items: start;
}
.services-aside { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
/* coluna estreita (360px): o H2 em --text-h2 estoura, então cai para h3 */
.services-aside .section-title { font-size: var(--text-h3); max-width: 16ch; }
.services-aside .section-lede { color: var(--ink-muted); }

.services-media {
  display: block;
  margin-top: var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--border-width-hairline) solid var(--border);
}
.services-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.services-list { border-top: var(--border-width-hairline) solid var(--border); }

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4) clamp(var(--space-6), 3vw, var(--space-10));
  padding-block: clamp(var(--space-6), 2.4vw, var(--space-10));
  border-bottom: var(--border-width-hairline) solid var(--border);
  isolation: isolate;
}
/* Sweep de hover: preenche a linha inteira de navy, transbordando o gutter */
.service-row::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--space-6));
  z-index: -1;
  background-color: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-out);
}
.service-row:hover::before,
.service-row:focus-within::before { transform: scaleX(1); }

.service-index {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  line-height: 1.35;
  color: var(--accent-technical-strong);
  transition: color var(--duration-base) var(--ease-standard);
}
.service-title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--brand);
  text-wrap: balance;
  transition: color var(--duration-base) var(--ease-standard);
}
.service-text {
  grid-column: 2;
  margin-top: var(--space-3);
  max-width: 62ch;
  color: var(--ink-muted);
  transition: color var(--duration-base) var(--ease-standard);
}
.service-cta {
  grid-column: 2;
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--brand);
  transition: color var(--duration-base) var(--ease-standard);
}
/* Link esticado sobre a linha inteira (o card clicável correto: <a> com ::after,
   nunca um <button> embrulhando h3/p) */
.service-cta::after { content: ''; position: absolute; inset: 0; }
.service-cta svg { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-standard); }
.service-row:hover .service-cta svg { transform: translateX(4px); }

.service-row:hover .service-title,
.service-row:focus-within .service-title { color: var(--ink-inverse); }
.service-row:hover .service-text,
.service-row:focus-within .service-text { color: var(--ink-inverse-muted); }
.service-row:hover .service-index,
.service-row:focus-within .service-index { color: var(--accent); }
.service-row:hover .service-cta,
.service-row:focus-within .service-cta { color: var(--accent); }

@media (max-width: 900px) {
  .services-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .services-aside { position: static; }
  .services-media img { aspect-ratio: 16 / 9; }
}
/* Espelhamento por COLOCAÇÃO explícita, não por `order`: com `order` o item
   cai na outra trilha do grid e herda a largura errada (aside de 360px
   ocupando o 1fr). A ordem do DOM continua título → lista. */
@media (min-width: 901px) {
  .services--mirror .services-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .services--mirror .services-aside { grid-column: 2; grid-row: 1; }
  .services--mirror .services-list  { grid-column: 1; grid-row: 1; }
}
@media (max-width: 560px) {
  .service-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .service-text, .service-cta { grid-column: 1; }
  .service-row::before { inset: 0 calc(-1 * var(--space-5)); }
}

/* ==========================================================================
   7. PARA QUEM É — split navy: foto real + lista com letra-índice
   (nunca pills/chips)
   ========================================================================== */
.audience { padding-block: var(--space-section); }

.audience-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--space-10), 5vw, var(--space-20));
  align-items: center;
}
/* Variante com a foto à direita: a ordem do DOM já é texto → mídia, então
   basta inverter a proporção das trilhas (a foto é sempre a mais estreita). */
.audience--mirror .audience-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.audience-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.audience-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.audience-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-6);
  background: linear-gradient(180deg, rgba(18, 20, 46, 0), rgba(18, 20, 46, .88));
  font-size: var(--text-sm);
  color: var(--ink-inverse);
}

.audience-list { margin-top: var(--space-10); border-top: var(--border-width-hairline) solid var(--border-inverse); }
.audience-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-6);
  padding-block: var(--space-5);
  border-bottom: var(--border-width-hairline) solid var(--border-inverse);
  transition: padding-left var(--duration-base) var(--ease-standard);
}
.audience-item:hover { padding-left: var(--space-3); }
.audience-letter {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--accent);
  line-height: 1;
  width: 1.6ch;
}
.audience-name {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-inverse);
}

@media (max-width: 900px) {
  .audience-grid,
  .audience--mirror .audience-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .audience-media img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   8. SOBRE — split editorial: texto + foto emoldurada com credencial
   ========================================================================== */
.about {
  padding-block: var(--space-section);
  background-color: var(--surface-alt);
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--space-10), 5vw, var(--space-20));
  align-items: center;
}
/* mesma regra do serviços: colocação explícita, nunca `order` */
@media (min-width: 901px) {
  .about--mirror .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .about--mirror .about-media { grid-column: 1; grid-row: 1; }
  .about--mirror .about-body  { grid-column: 2; grid-row: 1; }
}

.about-body { display: grid; gap: var(--space-5); }
.about-body .section-lede { margin-top: var(--space-2); color: var(--ink); }
.about-body p { max-width: 62ch; }
.about-body p + p { color: var(--ink-muted); }

.about-credential {
  margin-top: var(--space-6);
  padding-left: var(--space-6);
  border-left: var(--border-width-thick) solid var(--accent);
  display: grid;
  gap: var(--space-1);
}
.about-credential strong {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--brand);
}
.about-credential span { font-size: var(--text-sm); color: var(--ink-muted); }

.about-media { display: block; position: relative; }
.about-media .frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.about-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* filete dourado deslocado — a "moldura offset" da biblioteca, em dose mínima */
.about-media::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-5));
  top: var(--space-8);
  bottom: var(--space-8);
  width: var(--border-width-thick);
  background-color: var(--accent);
}

@media (max-width: 900px) {
  .about-grid,
  .about--mirror .about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .about-media img { aspect-ratio: 3 / 2; }
  .about-media::before { left: 0; top: auto; bottom: calc(-1 * var(--space-4)); width: var(--space-16); height: var(--border-width-thick); }
}

/* ==========================================================================
   9. FAQ — acordeão editorial, com aside de rótulo (mesma largura de container)
   ========================================================================== */
.faq { padding-block: var(--space-section); }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(var(--space-10), 5vw, var(--space-20));
  align-items: start;
}
.faq-aside { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
.faq-aside .section-title { font-size: var(--text-h3); max-width: 16ch; }
.faq-aside-note { margin-top: var(--space-6); color: var(--ink-muted); max-width: 34ch; }
.faq-aside .btn { margin-top: var(--space-6); }

.faq-list { border-top: var(--border-width-hairline) solid var(--border); }
.faq-item { border-bottom: var(--border-width-hairline) solid var(--border); }

.faq-h { margin: 0; }
.faq-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding-block: var(--space-6);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--brand);
  transition: color var(--duration-fast) var(--ease-standard);
}
.faq-trigger:hover { color: var(--accent-technical-strong); }

.faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  margin-top: 4px;
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-xs);
}
.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq-panel {
  display: grid;
  grid-template-rows: 1fr; /* sem JS o conteúdo fica visível */
  transition: grid-template-rows var(--duration-slow) var(--ease-out);
}
.faq-list.is-enhanced .faq-panel { grid-template-rows: 0fr; }
.faq-list.is-enhanced .faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; }
.faq-panel p {
  max-width: 72ch;
  padding-bottom: var(--space-6);
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .faq-aside { position: static; }
  .faq-trigger { font-size: var(--text-xl); }
}

/* ==========================================================================
   10. CTA FINAL — "Como funciona" em 3 etapas, linha que desenha (scaleY)
   ========================================================================== */
.cta-final {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
}
.cta-deco {
  position: absolute;
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  width: min(520px, 46vw);
  opacity: .16;
  pointer-events: none;
}
.cta-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(var(--space-10), 5vw, var(--space-20));
  align-items: center;
}
.cta-title { max-width: 16ch; text-wrap: balance; }
.cta-actions { margin-top: var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.cta-note { font-size: var(--text-sm); color: var(--ink-inverse-muted); }

.steps { position: relative; padding-left: 0; }
.steps::before,
.steps::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 26px;
  width: var(--border-width-thick);
}
.steps::before { background-color: var(--border-inverse); }
.steps::after {
  background-color: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1100ms var(--ease-out);
}
.steps.is-visible::after { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .steps::after { transform: scaleY(1); transition: none; }
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
}
.step-dot {
  position: relative;
  z-index: 1;
  width: 28px; height: 28px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  background-color: var(--surface-inverse);
  border: var(--border-width-thick) solid var(--accent);
  transform: rotate(45deg);
}
.step-dot span {
  transform: rotate(-45deg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  color: var(--accent);
  line-height: 1;
}
.step-body { display: grid; gap: var(--space-2); }
.step-label {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
}
.step-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-inverse);
}

@media (max-width: 900px) {
  .cta-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .cta-deco { display: none; }
}
@media (max-width: 560px) {
  .cta-actions .btn { width: 100%; }
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--brand-strong);
  color: var(--ink-inverse);
  padding-block: var(--space-16) var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: clamp(var(--space-10), 4vw, var(--space-16));
}
.footer-brand img { width: auto; height: 46px; border-radius: var(--radius-xs); }
.footer-brand p {
  margin-top: var(--space-5);
  max-width: 34ch;
  font-size: var(--text-sm);
  color: var(--ink-inverse-muted);
}
.footer-col-title {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
}
.footer-links { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.footer-links a {
  font-size: var(--text-base);
  color: var(--ink-inverse);
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer-links a:hover { color: var(--accent); }

.footer-contact { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.footer-phone {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  font-variant-numeric: var(--numeral-variant);
  color: var(--ink-inverse);
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer-phone:hover { color: var(--accent); }

.footer-bottom {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--border-inverse);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-inverse-muted);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   12. BANNER DE COOKIES — SEMPRE À ESQUERDA (LGPD)
   O canto inferior direito é reservado; banner à direita disputa com o CTA.
   ========================================================================== */
.cookie {
  position: fixed;
  left: var(--space-6);
  bottom: var(--space-6);
  z-index: 90;
  width: min(430px, calc(100% - 2 * var(--space-6)));
  /* Compacto de proposito: com 176px de altura era o banner, e nao a tipografia,
     que limitava o tamanho do H1 do hero — o CTA tem de caber acima dele. */
  padding: var(--space-4) var(--space-5);
  background-color: var(--surface-inverse-alt);
  color: var(--ink-inverse);
  border: var(--border-width-hairline) solid var(--border-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.cookie[hidden] { display: none; }
.cookie-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.cookie-text {
  margin-top: 6px;
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--ink-inverse-muted);
}
.cookie-actions {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cookie-actions .btn { padding-block: 9px; font-size: 0.8125rem; }

@media (max-width: 560px) {
  .cookie {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    padding: var(--space-5);
    border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  /* barra compacta: é o que garante, por medição, que o banner não cobre
     o CTA do hero em telas pequenas (o rótulo vive no aria-label do bloco) */
  .cookie { padding: var(--space-4); }
  .cookie-title { display: none; }
  .cookie-text { margin-top: 0; font-size: 0.8125rem; line-height: 1.4; }
  .cookie-actions { margin-top: var(--space-3); }
  .cookie-actions .btn { flex: 1 1 auto; padding-block: 10px; }
}