/* =====================================================================
   MÁRCIO CABELEIREIRO - styles.css
   Tokens e identidade do Manual (fonte de verdade).
   Tema: dark travado (seções mármore = tint claro dentro do mesmo sistema).
   Acento: âmbar SÓ em CTA. Tricolor = motivo/identidade, nunca em botão.
   ===================================================================== */

:root {
  --ink:      #0B0B0D;
  --ink-2:    #141417;
  --line:     #1E1E23;
  --marble:   #EDEBE7;
  --marble-2: #E3E0DA;

  --pole-red:  #D42B33;
  --pole-white:#F4F1EC;
  --pole-blue: #1E3A8A;

  --amber:      #E8622A;
  --amber-soft: #F2874F;
  --teal:       #1FA7A0;
  --wa:         #25D366;

  --txt:        #F3F1EC;   /* texto claro sobre preto */
  --txt-muted:  #9A9AA2;   /* cinza corpo secundário */
  --txt-dark:   #17161A;   /* texto sobre mármore */
  --txt-dark-muted:#55535B;

  --pole-grad: repeating-linear-gradient(-60deg,
      var(--pole-red) 0 16px,
      var(--pole-white) 16px 32px,
      var(--pole-blue) 32px 48px,
      var(--pole-white) 48px 64px);

  --r-card: 14px;
  --r-pill: 100px;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-grain: 40;
  --z-rail: 30;
  --z-header: 60;
  --z-sticky: 70;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--ink);
  color: var(--txt);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* espaço p/ a barra sticky do WhatsApp no mobile */
  padding-bottom: 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

::selection { background: var(--amber); color: #fff; }

/* foco visível e acessível */
:focus-visible {
  outline: 2px solid var(--amber-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* =====================================================================
   TIPOGRAFIA
   ===================================================================== */
.d-line, .sec-title, .hero__title, .final__title,
.brand__name-top, .service__idx, .stat__num, .step__num {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.92;
  text-transform: uppercase;
}
.script {
  font-family: 'Kaushan Script', cursive;
  text-transform: none;
  color: var(--amber);
  font-weight: 400;
  line-height: 1.05;
}

.sec-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-title { font-size: clamp(2.1rem, 6vw, 3.4rem); }
.sec-title .script { display: inline-block; font-size: 1.05em; margin-left: 0.12em; padding-bottom: 0.12em; }
.section--marble .sec-title { color: var(--txt-dark); }
.sec-lead {
  margin-top: 18px;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: var(--txt-muted);
  max-width: 60ch;
}
.section--marble .sec-lead { color: var(--txt-dark-muted); }

/* =====================================================================
   SEÇÕES / RITMO
   ===================================================================== */
.section--dark   { background: var(--ink);   color: var(--txt); }
.section--marble { background: var(--marble); color: var(--txt-dark); }

.services, .space, .about, .stats, .testimonials, .steps, .faq {
  padding-block: clamp(72px, 11vw, 130px);
  position: relative;
}

/* divisor tricolor (nunca corte seco entre preto e mármore) */
.pole-divider {
  height: 6px;
  width: 100%;
  background: var(--pole-grad);
  background-size: 64px 64px;
  opacity: 0.92;
}
.section--pole { background: var(--ink); }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn {
  --btn-fs: 0.95rem;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: var(--btn-fs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              transform .28s var(--ease), border-color .28s var(--ease);
  will-change: transform;
}
.btn--sm { --btn-fs: 0.82rem; padding: 10px 18px; }
.btn--lg { --btn-fs: 1.02rem; padding: 16px 30px; }
.btn--xl { --btn-fs: 1.15rem; padding: 20px 40px; }

/* CTA primário - âmbar sobre preto, texto branco 700 */
.btn--amber { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn--amber:hover { background: var(--amber-soft); border-color: var(--amber-soft); }
.btn--amber:active { transform: scale(.98); }

/* secundário - contorno */
.btn--ghost { background: transparent; border-color: rgba(243,241,236,0.35); color: var(--txt); }
.btn--ghost:hover { border-color: var(--amber); background: rgba(232,98,42,0.10); }

/* ícone/logo oficial do WhatsApp (verde da própria marca) */
.ico-wa { width: 1.3em; height: 1.3em; flex: none; display: inline-block; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--gutter);
  background: linear-gradient(to bottom, rgba(11,11,13,0.92), rgba(11,11,13,0));
  transition: background-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(11,11,13,0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 40px -18px rgba(0,0,0,0.9);
}

.brand { display: inline-flex; align-items: center; gap: 12px; will-change: transform; }
.brand__mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--amber);
  font-family: 'Anton', serif; font-size: 1.25rem; color: var(--amber);
  flex: none;
}
/* variante da nav: logo oficial em PNG (branco, alfa) no lugar do "M".
   Sem círculo/borda — a arte já tem forma própria.
   O PNG é 1080x1080 mas a arte só ocupa 629x557 no centro (~24% de margem
   transparente em cada lado). object-position + scale compensam esse
   padding para a marca ocupar de fato a altura do header. */
.brand__mark--img {
  /* dimensões reais no layout (sem transform: scale, que não reserva
     espaço e fazia a arte invadir o texto ao lado).
     Caixa segue a proporção do conteúdo (1041x916 ≈ 1.14:1). */
  width: 57px; height: 50px;
  border: 0; border-radius: 0;
  object-fit: contain;
  transition: opacity .3s var(--ease);
}
/* Recorta a margem transparente do PNG para a arte ocupar a caixa toda.
   Valores medidos no canal alfa: conteúdo = 1041x916 dentro de 1080x1080
   (topo 64px, dir 21px, base 100px, esq 18px). */
@supports (object-view-box: inset(0)) {
  .brand__mark--img {
    object-view-box: inset(5.9% 1.9% 9.3% 1.7%);
  }
}
.brand:hover .brand__mark--img { opacity: 0.82; }
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__name-top { font-size: 1.15rem; letter-spacing: 0.02em; }
.brand__name-sub {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.62rem; letter-spacing: 0.34em; color: var(--txt-muted); text-transform: uppercase;
  margin-top: 2px;
}

.site-nav { display: none; gap: 28px; margin-left: auto; }
.site-nav a {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.98rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--txt-muted); position: relative; padding-block: 4px;
  transition: color .25s var(--ease);
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--amber); transition: width .3s var(--ease);
}
.site-nav a:hover { color: var(--txt); }
.site-nav a:hover::after { width: 100%; }
.header-cta { flex: none; }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .header-cta { margin-left: 28px; }
}

/* =====================================================================
   01 · HERO
   ===================================================================== */
/* O banner é exibido 100% inteiro (nunca cortado): a altura do hero segue a
   proporção nativa da imagem (1671x949) e o texto se sobrepõe ao quadro. */
/* A altura do hero é derivada da LARGURA pela proporção do banner (via
   .hero__media, que dita o fluxo). Sem max-height: um teto de altura
   encolheria a caixa aspect-ratio e criaria tarja preta lateral. */
.hero {
  --banner-ar: 1671 / 949;
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--ink);
}
/* a media é o item que define a altura: largura total x proporção nativa */
.hero__media {
  grid-area: 1 / 1;
  position: relative; z-index: 0;
  width: 100%; aspect-ratio: var(--banner-ar);
}
/* cover aqui não corta: a caixa tem exatamente a proporção da imagem */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
/* Escurece o lado esquerdo (texto) e libera o direito (o Márcio).
   Rampa longa e SEM joelho: muitas paradas seguindo uma curva ease-in-out,
   para não existir linha visível de corte na altura do ombro. Todas as
   paradas usam a MESMA cor variando só o alpha (evita shift de matiz). */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      rgba(11,11,13,0.72)  0%,
      rgba(11,11,13,0.705) 10%,
      rgba(11,11,13,0.68)  18%,
      rgba(11,11,13,0.645) 26%,
      rgba(11,11,13,0.60)  33%,
      rgba(11,11,13,0.545) 40%,
      rgba(11,11,13,0.485) 47%,
      rgba(11,11,13,0.42)  54%,
      rgba(11,11,13,0.355) 61%,
      rgba(11,11,13,0.295) 68%,
      rgba(11,11,13,0.235) 75%,
      rgba(11,11,13,0.185) 82%,
      rgba(11,11,13,0.14)  89%,
      rgba(11,11,13,0.11)  95%,
      rgba(11,11,13,0.09) 100%),
    linear-gradient(180deg,
      rgba(11,11,13,0.52)  0%,
      rgba(11,11,13,0.30)  14%,
      rgba(11,11,13,0.15)  26%,
      rgba(11,11,13,0.07)  36%,
      rgba(11,11,13,0.05)  48%,
      rgba(11,11,13,0.08)  60%,
      rgba(11,11,13,0.17)  72%,
      rgba(11,11,13,0.34)  84%,
      rgba(11,11,13,0.58)  93%,
      rgba(11,11,13,0.80) 100%);
}
/* Vinheta suave para uniformizar + tint âmbar nas luzes da direita.
   Paradas explícitas em rgba(0,0,0,0): 'transparent' criava um segundo
   joelho na mesma faixa do scrim e reforçava a linha. */
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(135% 110% at 46% 46%,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0)   45%,
      rgba(0,0,0,0.03) 58%,
      rgba(0,0,0,0.08) 70%,
      rgba(0,0,0,0.15) 82%,
      rgba(0,0,0,0.23) 91%,
      rgba(0,0,0,0.30) 100%),
    radial-gradient(62% 72% at 84% 32%,
      rgba(232,98,42,0.13) 0%,
      rgba(232,98,42,0.08) 38%,
      rgba(232,98,42,0.03) 62%,
      rgba(232,98,42,0)   80%);
}

.hero__inner {
  grid-area: 1 / 1;                /* sobrepõe a media, mesma célula */
  position: relative; z-index: 1;
  width: 100%;
  align-self: center;              /* texto no centro vertical do banner */
  padding-top: 96px;               /* espaço do header fixo */
  padding-bottom: clamp(24px, 4vh, 56px);
}
.hero__copy { max-width: 600px; text-align: left; }

.hero__title {
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.02;
  /* scrim mais leve => sombra faz o trabalho de contraste */
  text-shadow: 0 2px 28px rgba(0,0,0,0.92), 0 4px 60px rgba(0,0,0,0.75),
               0 1px 3px rgba(0,0,0,0.7);
}
.hero__title .d-line { display: block; text-wrap: balance; }
.hero__script {
  display: block; font-size: clamp(1.9rem, 4.2vw, 3.05rem);
  margin-top: 14px; padding-bottom: 0.16em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.72);
}
.hero__sub {
  margin-top: 24px; max-width: 44ch;
  font-size: clamp(1rem, 1.7vw, 1.16rem); color: rgba(243,241,236,0.94);
  text-shadow: 0 1px 14px rgba(0,0,0,0.95), 0 2px 34px rgba(0,0,0,0.8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__actions .btn--amber { box-shadow: 0 14px 34px -14px rgba(232,98,42,0.75); }
.hero__actions .btn--amber:hover { transform: translateY(-2px); }
.hero__actions .btn--ghost {
  background: rgba(11,11,13,0.30);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero__actions .btn--ghost:hover { transform: translateY(-2px); }

/* mobile: banner inteiro (nunca cortado) ancorado no topo e o texto
   centralizado abaixo dele — sem letterbox e sem tapar o Márcio. */
@media (max-width: 899px) {
  /* empilha: banner inteiro no topo, texto abaixo (sem sobreposição) */
  .hero {
    display: block;
    padding-bottom: clamp(40px, 8vw, 64px);
  }
  .hero__media { margin-top: 72px; /* espaço do header fixo */ }
  .hero__inner { padding-top: 0; }
  /* topo: só o suficiente p/ o header respirar; base: fade para o preto */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(11,11,13,0.80) 0%,
      rgba(11,11,13,0.30) 24%,
      rgba(11,11,13,0.10) 52%,
      rgba(11,11,13,0.72) 88%,
      var(--ink) 100%);
  }
  .hero__vignette {
    background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,0.45) 100%);
  }
  .hero__copy {
    max-width: 34rem; margin-inline: auto; text-align: center;
    margin-top: clamp(-28px, -5vw, -12px);
  }
  .hero__sub { margin-inline: auto; }
  .hero__actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .hero__media img { transform: none; } }

/* =====================================================================
   02 · MARQUEE TRICOLOR
   ===================================================================== */
.marquee {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--ink);
  padding-block: 22px;
}
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; }
.marquee__group span {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem); letter-spacing: 0.02em; color: var(--txt);
  padding-inline: clamp(18px, 3vw, 34px);
}
.marquee__group .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pole-red);
  box-shadow: 0 0 0 3px var(--ink), 14px 0 0 -1px var(--pole-blue);
  flex: none;
}

/* =====================================================================
   CARDS (base do manual)
   ===================================================================== */
.card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px;
}

/* =====================================================================
   03 · SERVIÇOS
   ===================================================================== */
.services { padding-bottom: clamp(96px, 14vw, 170px); }
.services__grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
.service { position: relative; overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease); }
.service::after {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--pole-grad); background-size: 64px 64px; opacity: 0; transition: opacity .4s var(--ease);
}
.service:hover { transform: translateY(-6px); border-color: #2a2a31; }
.service:hover::after { opacity: 0.9; }
.service__idx {
  font-size: 2.4rem; color: #26262d; line-height: 1; display: block; margin-bottom: 14px;
}
.service__name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.5rem; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 10px;
}
.service__desc { color: var(--txt-muted); font-size: 0.98rem; }
.service__price { margin-top: 20px; }
.price-tag {
  font-family: 'Anton', sans-serif; color: var(--amber);
  font-size: 1.5rem; letter-spacing: 0.02em;
}

/* cards de serviço sobrepõem levemente a próxima seção (manual) */
@media (min-width: 640px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .services { margin-bottom: -60px; }
  .services__grid { position: relative; z-index: 2; }
}

/* =====================================================================
   04 · O ESPAÇO (galeria)
   ===================================================================== */
.gallery {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
.gallery__item {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  border: 1px solid var(--marble-2);
  background: var(--marble-2);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery__item:hover img { transform: scale(1.045); }
.gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; font-size: 0.9rem; color: #fff;
  background: linear-gradient(to top, rgba(11,11,13,0.82), transparent);
}
/* a marca não é foto: o card empilha [imagem | legenda] e a imagem só pode
   ocupar a sobra (1fr), senão soma com a legenda e transborda a linha. */
.gallery__item--logo {
  display: grid; grid-template-rows: 1fr auto;
  justify-items: center; align-items: center;
  background: var(--marble); padding: 8%; gap: 10px;
}
.gallery__item--logo img { object-fit: contain; min-height: 0; max-height: 100%; width: auto; }
.gallery__item--logo figcaption { color: var(--txt-dark); background: none; position: static; padding-top: 0; }

/* mobile: as fotos são retratos (941x1672). Sem altura fixa elas ficariam
   altíssimas, então limita a proporção para ~4:5 e o cover recorta o centro. */
.gallery__item--tall img,
.gallery__item--facade img { aspect-ratio: 4 / 5; height: auto; }

@media (min-width: 760px) {
  /* 3 colunas: os dois retratos (2 linhas cada) + a marca numa coluna
     estreita ao lado, alinhada ao topo. */
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; }
  .gallery__item--tall,
  .gallery__item--facade { grid-row: span 2; }
  .gallery__item { height: 100%; }
  .gallery__item--tall img,
  .gallery__item--facade img { aspect-ratio: auto; height: 100%; }
  .gallery__item--logo { padding: 6%; }
}
@media (min-width: 1024px) {
  .gallery { grid-template-columns: 1fr 1fr 0.7fr; grid-auto-rows: 230px; }
  /* a marca fica na 3a coluna, ocupando só 1 linha (não estica) */
  .gallery__item--logo { grid-column: 3; grid-row: 1; }
}

/* =====================================================================
   05 · SOBRE O MÁRCIO
   ===================================================================== */
.about__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; grid-template-columns: 1fr; }
.about__body { color: rgba(243,241,236,0.86); font-size: clamp(1.02rem, 1.7vw, 1.18rem); max-width: 56ch; margin-top: 22px; margin-bottom: 30px; }

/* vídeo do Márcio (vertical 3:4) — herda a moldura tricolor do slot antigo */
.about__video {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink-2);
}
.about__video video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: block;
}
/* filetes tricolor nas laterais, mesmo motivo do poste */
.about__video::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-left: 4px solid var(--pole-red);
  border-right: 4px solid var(--pole-blue);
  border-radius: var(--r-card);
}
/* botão play/pause sobreposto */
.about__video-btn {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(11,11,13,0.30);
  transition: background-color .3s var(--ease);
}
.about__video-btn:hover { background: rgba(11,11,13,0.14); }
.about__video-ico {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--amber); border: 2px solid var(--amber);
  box-shadow: 0 14px 34px -12px rgba(232,98,42,0.8);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.about__video-btn:hover .about__video-ico { transform: scale(1.07); }
/* triângulo de play em CSS */
.about__video-ico::before {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}
/* Tocando (autoplay): sem véu e sem ícone — a imagem fica limpa.
   O ícone reaparece no hover/foco como affordance de pausa. */
.about__video.is-playing .about__video-btn { background: transparent; }
.about__video.is-playing .about__video-ico { opacity: 0; transform: scale(.8); }
.about__video.is-playing .about__video-btn:hover .about__video-ico,
.about__video.is-playing .about__video-btn:focus-visible .about__video-ico {
  opacity: 1; transform: scale(1);
}
/* ícone de pausa (duas barras) quando está tocando */
.about__video.is-playing .about__video-ico::before {
  width: 16px; height: 20px;
  border: 0; margin-left: 0;
  background: linear-gradient(to right,
    #fff 0 5px, transparent 5px 11px, #fff 11px 16px);
}

/* slot de foto marcado (sem rosto IA) */
.photo-slot {
  position: relative; aspect-ratio: 4 / 5; width: 100%;
  border-radius: var(--r-card);
  display: grid; place-content: center; gap: 8px; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px),
    var(--ink-2);
  border: 1px dashed #38383f;
  overflow: hidden;
}
.photo-slot::before {
  content: ''; position: absolute; inset: 0; padding: 0;
  border-left: 4px solid var(--pole-red);
  border-right: 4px solid var(--pole-blue);
}
.photo-slot__label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 1.05rem; color: var(--txt-muted);
}
.photo-slot__hint { font-size: 0.82rem; color: #55555d; }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 0.85fr 1.15fr; }
  .about__photo { max-width: 420px; }
}

/* =====================================================================
   06 · NÚMEROS / PROVA
   ===================================================================== */
.stats__grid { display: grid; gap: 30px; grid-template-columns: 1fr; text-align: center; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stat__num {
  font-size: clamp(3.2rem, 12vw, 5.2rem); color: var(--txt-dark); line-height: 0.9;
  transition: transform .35s var(--ease);
}
.stat.is-done .stat__num { animation: pop .4s var(--ease); }
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)} }
.stat__label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 0.98rem; color: var(--txt-dark-muted); max-width: 20ch;
}
.stats__note { text-align: center; margin-top: 34px; font-size: 0.85rem; color: var(--txt-dark-muted); font-style: italic; }
@media (min-width: 760px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   07 · DEPOIMENTOS
   ===================================================================== */
.testimonials__row {
  display: grid; gap: 18px; grid-template-columns: 1fr;
}
.quote { display: flex; flex-direction: column; gap: 14px; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 18px; height: 18px; fill: var(--amber); }
.quote__body { font-size: 1.06rem; color: var(--txt); line-height: 1.5; }
.quote__by {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 0.92rem; color: var(--txt-muted); font-style: normal;
  margin-top: auto;
}
@media (min-width: 860px) { .testimonials__row { grid-template-columns: repeat(3, 1fr); } }
/* carrossel scroll-snap no mobile */
@media (max-width: 859px) {
  .testimonials__row {
    grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .testimonials__row::-webkit-scrollbar { display: none; }
  .quote { scroll-snap-align: start; }
}

/* =====================================================================
   08 · COMO FUNCIONA
   ===================================================================== */
.steps__list { display: grid; gap: 22px; grid-template-columns: 1fr; list-style: none; padding: 0; counter-reset: none; }
.step { position: relative; padding: 30px 26px 32px; border-radius: var(--r-card); background: rgba(255,255,255,0.55); border: 1px solid var(--marble-2); }
.step__num {
  display: block; font-size: 3.4rem; color: var(--amber); line-height: 0.8; margin-bottom: 12px;
}
.step__name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 1.35rem; letter-spacing: 0.01em; color: var(--txt-dark); margin-bottom: 8px;
}
.step__desc { color: var(--txt-dark-muted); font-size: 0.98rem; }
.steps__cta { margin-top: 40px; display: flex; justify-content: center; }
@media (min-width: 820px) {
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
  /* linha-poste conectando os passos */
  .steps__list::before {
    content: ''; position: absolute; top: 52px; left: 12%; right: 12%; height: 4px;
    background: var(--pole-grad); background-size: 48px 48px; opacity: 0.5; z-index: 0;
  }
  .step { z-index: 1; }
}

/* =====================================================================
   09 · FAQ (accordion, grid-trick)
   ===================================================================== */
.faq__wrap { max-width: 860px; }
.faq__list { display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--ink-2); overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; padding: 20px 22px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--txt);
}
.faq__ico { position: relative; width: 18px; height: 18px; flex: none; }
.faq__ico::before, .faq__ico::after {
  content: ''; position: absolute; background: var(--amber); border-radius: 2px;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.faq__ico::before { width: 16px; height: 2.5px; }
.faq__ico::after  { width: 2.5px; height: 16px; transition: transform .3s var(--ease); }
.faq__item.is-open .faq__ico::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__item.is-open .faq__q { color: var(--amber-soft); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p { padding: 0 22px 22px; color: var(--txt-muted); }

/* =====================================================================
   10 · CTA FINAL
   ===================================================================== */
.final { position: relative; overflow: hidden; text-align: center; padding-block: clamp(90px, 15vw, 170px); }
.final__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.final__title { font-size: clamp(2.6rem, 9vw, 5.6rem); }
.final__title .d-line { display: block; }
.final__script { display: block; font-size: clamp(2.4rem, 8vw, 4.8rem); margin-top: 4px; padding-bottom: 0.14em; }
.final__sub { margin-top: 22px; max-width: 44ch; color: rgba(243,241,236,0.82); font-size: clamp(1.02rem, 1.8vw, 1.18rem); }
.final__actions { margin-top: 38px; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 90px) 40px; }
.footer__grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
.footer__tag { color: var(--txt-muted); font-size: 0.95rem; margin-top: 16px; max-width: 36ch; }
.footer__h {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.82rem; color: var(--txt-muted); margin-bottom: 14px;
}
.footer__list { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--txt); font-size: 1rem; }
.footer__list a { display: inline-flex; align-items: center; gap: 8px; transition: color .25s var(--ease); }
.footer__list a:hover { color: var(--amber-soft); }
.ico-ig { width: 1.1em; height: 1.1em; color: currentColor; }
.footer__cta { align-self: start; }

.footer__map { margin-top: 46px; }
.map-slot {
  aspect-ratio: 16 / 6; width: 100%; border-radius: var(--r-card);
  display: grid; place-content: center; gap: 6px; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px),
    var(--ink-2);
  border: 1px dashed #38383f; color: var(--txt-muted);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.map-slot__hint { font-size: 0.78rem; letter-spacing: 0.02em; color: #55555d; text-transform: none; font-weight: 500; }
.footer__legal { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); color: #55555d; font-size: 0.82rem; }

@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr auto; } }

/* =====================================================================
   COLUNA-POSTE LATERAL (motivo condutor)
   ===================================================================== */
.pole-rail { display: none; }
@media (min-width: 1180px) {
  .pole-rail {
    display: block; position: fixed; top: 0; right: 26px; bottom: 0; width: 10px; z-index: var(--z-rail);
    pointer-events: none;
  }
  .pole-rail__spiral {
    position: absolute; inset: 0; border-radius: 6px;
    background: var(--pole-grad); background-size: 20px 20px;
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  }
  .pole-rail__node {
    position: absolute; right: -3px; width: 16px; height: 16px; border-radius: 50%;
    background: #26262d; border: 2px solid #35353d;
    transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  }
  .pole-rail__node[data-node="1"] { top: 18%; }
  .pole-rail__node[data-node="2"] { top: 36%; }
  .pole-rail__node[data-node="3"] { top: 54%; }
  .pole-rail__node[data-node="4"] { top: 72%; }
  .pole-rail__node[data-node="5"] { top: 90%; }
  .pole-rail__node.is-lit {
    background: var(--amber); border-color: var(--amber-soft);
    box-shadow: 0 0 0 4px rgba(232,98,42,0.16);
  }
}

/* =====================================================================
   WHATSAPP STICKY (mobile)
   ===================================================================== */
.sticky-wa {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 20px; border-radius: var(--r-pill);
  background: var(--amber); color: #fff;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 1.05rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
}
.sticky-wa .ico-wa { width: 1.4em; height: 1.4em; }
@media (min-width: 900px) { .sticky-wa { display: none; } }
/* reserva espaço p/ a barra não cobrir o rodapé no mobile */
@media (max-width: 899px) { body { padding-bottom: 78px; } }

/* =====================================================================
   GRÃO / TEXTURA (~5%)
   ===================================================================== */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* =====================================================================
   REVEALS (estado inicial só quando .gsap-ready) + reduced motion
   ===================================================================== */
.gsap-ready [data-reveal] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .gsap-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
  .marquee__track { transform: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* fallback: se algo ficar escondido além do tempo, o JS remove .gsap-ready */