/* ═══════════════════════════════════════════════════════════════════
   ATHENAS PERFORMANCE — PORTFÓLIO
   Identidade extraída de athenasperformance.com:
   navy profundo + ciano elétrico, Cinzel nos títulos, Inter no texto,
   botões retos (raio 2px) com glow ciano, cards de vidro.

   Sumário
   01. Tokens (:root)
   02. Reset & base
   03. Utilitários (container, eyebrow, botões, reveal)
   04. Header / navegação
   05. Hero
   06. Sobre
   07. Galeria + filtros + lightbox
   08. Números
   09. Depoimentos
   10. CTA final + rodapé
   11. Breakpoints (480 / 768 / 1200)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. TOKENS ─────────────────────────────────────────────────── */
:root{
  /* Cores — paleta da marca */
  --navy:      #010d1f;   /* fundo padrão                     */
  --navy-2:    #010f26;   /* fundo elevado                    */
  --navy-3:    #000a18;   /* fundo mais escuro (hero/rodapé)  */
  --navy-4:    #020c1b;   /* faixa alternada                  */
  --cyan:      #00d4ff;   /* acento principal                 */
  --cyan-2:    #00b0d8;   /* fim do gradiente                 */
  --cyan-3:    #7ee8ff;   /* acento claro                     */
  --wpp:       #25d366;   /* verde WhatsApp                   */
  --wpp-2:     #1ebe5d;

  /* Texto */
  --txt:       #ffffff;
  --txt-soft:  rgba(255,255,255,.72);
  --txt-mute:  rgba(255,255,255,.48);
  --txt-faint: rgba(255,255,255,.32);

  /* Superfícies e bordas */
  --surface:      rgba(255,255,255,.027);
  --surface-hi:   rgba(255,255,255,.055);
  --line:         rgba(255,255,255,.067);
  --line-hi:      rgba(0,212,255,.35);

  /* Gradientes */
  --grad-cyan: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  --grad-wpp:  linear-gradient(135deg, var(--wpp) 0%, var(--wpp-2) 100%);

  /* Tipografia */
  --font-h: 'Cinzel', Georgia, serif;
  --font-b: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --fs-h1:  clamp(2.25rem, 6vw, 3.6rem);
  --fs-h2:  clamp(1.75rem, 4vw, 2.4rem);
  --fs-h3:  clamp(1.05rem, 2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm:   .875rem;
  --fs-xs:   .7rem;
  --lh-body: 1.65;

  /* Espaçamento — ritmo de 100px entre seções, como no site */
  --sp-sec:   100px;
  --sp-xl:    64px;
  --sp-lg:    40px;
  --sp-md:    24px;
  --sp-sm:    14px;
  --container: 1180px;

  /* Formas e movimento */
  --r:      12px;   /* raio dos cards           */
  --r-btn:  2px;    /* raio dos botões (reto)   */
  --tr:     all .32s cubic-bezier(.4,0,.2,1);
  --glow:   0 2px 20px rgba(0,212,255,.22);
  --glow-hi:0 6px 34px rgba(0,212,255,.38);

  --header-h: 80px;
}

/* ── 02. RESET & BASE ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

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

body{
  background:var(--navy);
  color:var(--txt-soft);
  font-family:var(--font-b);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-h);
  color:var(--txt);
  font-weight:700;
  line-height:1.2;
  letter-spacing:.01em;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:600; }

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; transition:var(--tr); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
svg{ width:100%; height:100%; fill:currentColor; }

/* Garante que o atributo [hidden] vença as regras de display dos componentes */
[hidden]{ display:none !important; }

/* Foco visível e consistente em toda a página (acessibilidade) */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}

/* Link de pular para o conteúdo — só aparece com Tab */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:var(--navy-3);
  padding:12px 20px; font-weight:600; font-size:var(--fs-sm);
}
.skip-link:focus{ left:12px; top:12px; }

/* ── 03. UTILITÁRIOS ────────────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

/* Seções: alternância de fundo idêntica ao site de referência */
.sec{ padding:var(--sp-sec) 0; background:var(--navy); }
.sec--alt{ background:var(--navy-4); }

.sec__head{ text-align:center; max-width:680px; margin:0 auto var(--sp-xl); }
.sec__lead{ color:var(--txt-mute); margin-top:var(--sp-sm); }

/* Rótulo pequeno ciano acima dos títulos */
.eyebrow{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(0,212,255,.85);
  margin-bottom:var(--sp-sm);
}

/* Texto com gradiente ciano */
.grad{
  background:var(--grad-cyan);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Botões — retos, letra espaçada, glow ciano */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 32px;
  border-radius:var(--r-btn);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.07em;
  text-align:center;
  transition:var(--tr);
  white-space:nowrap;
}
.btn--primary{
  background:var(--grad-cyan);
  color:var(--navy-3);
  box-shadow:var(--glow);
}
.btn--primary:hover,
.btn--primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--glow-hi);
}
.btn--ghost{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--txt);
}
.btn--ghost:hover,
.btn--ghost:focus-visible{
  border-color:var(--line-hi);
  background:var(--surface-hi);
  transform:translateY(-2px);
}
.btn--wpp{
  background:var(--grad-wpp);
  color:#fff;
  border-radius:100px;
  padding:11px 22px;
  font-size:.8rem;
  box-shadow:0 4px 20px rgba(37,211,102,.38);
}
.btn--wpp:hover{ transform:translateY(-2px); box-shadow:0 6px 26px rgba(37,211,102,.5); }
.btn--lg{ padding:18px 40px; font-size:1rem; }

/* Animação de entrada ao scroll (ativada pelo IntersectionObserver) */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal.is-visible{ opacity:1; transform:none; }
/* Escalonamento: data-delay="1..5" */
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }

/* ── 04. HEADER ─────────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:var(--tr);
}
/* Fundo aparece só depois de rolar (classe adicionada por JS) */
.site-header.is-stuck{
  background:rgba(0,10,24,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  height:66px;
}
.header__inner{ display:flex; align-items:center; gap:var(--sp-lg); }

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand__mark{
  display:grid; place-items:center;
  width:34px; height:34px;
  font-family:var(--font-h); font-weight:900; font-size:1.05rem;
  color:var(--navy-3);
  background:var(--grad-cyan);
  box-shadow:var(--glow);
}
.brand__text{
  font-family:var(--font-h); font-weight:700;
  font-size:.82rem; letter-spacing:.16em; color:var(--txt);
  display:flex; flex-direction:column; line-height:1.15;
}
.brand__text em{
  font-style:normal; font-weight:400;
  font-size:.58rem; letter-spacing:.3em; color:var(--cyan);
}

.nav{ display:flex; gap:var(--sp-md); margin-left:auto; }
.nav a{
  font-size:.85rem; font-weight:500; letter-spacing:.04em;
  color:var(--txt-soft); position:relative; padding:6px 0;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--cyan); transition:var(--tr);
}
.nav a:hover{ color:var(--txt); }
.nav a:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{
  display:block; width:22px; height:2px;
  background:var(--txt); transition:var(--tr);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── 05. HERO ───────────────────────────────────────────────────── */
/* Layout dividido: texto à esquerda, moldura vertical 9:16 à direita.
   A mídia aparece no formato natural — sem esticar. Fundo com brilho
   ciano sutil no lugar do antigo vídeo de tela cheia. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 48px) 0 72px;
  background:
    radial-gradient(1100px 620px at 82% 30%, rgba(0,212,255,.10), transparent 60%),
    var(--navy-3);
  overflow:hidden;
}
.hero__inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--sp-xl);
  align-items:center;
  width:100%;
}
.hero__content{ max-width:600px; }
.hero__title{ margin:.2em 0 var(--sp-md); }
.hero__sub{
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--txt-soft);
  max-width:52ch;
  margin-bottom:var(--sp-lg);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-sm); margin-bottom:var(--sp-xl); }
.hero__badges{ display:flex; flex-wrap:wrap; gap:var(--sp-md) var(--sp-lg); }

/* Moldura vertical da mídia */
.hero__figure{
  position:relative;
  justify-self:center;
  width:100%;
  max-width:340px;
}
.hero__frame{
  position:relative;
  aspect-ratio:9/16;              /* trava o formato vertical, sem distorcer */
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line-hi);
  background:var(--navy-2);
  box-shadow:
    0 24px 70px rgba(0,0,0,.5),
    0 0 0 6px rgba(255,255,255,.02),
    var(--glow-hi);
}
.hero__video{
  width:100%; height:100%;
  object-fit:cover;               /* cobre a moldura 9:16 sem esticar */
  display:block;
}
/* Etiqueta flutuante no canto da moldura */
.hero__frame-tag{
  position:absolute; left:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt);
  background:rgba(0,10,24,.6);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:100px;
}
.hero__frame-tag::first-letter{ color:var(--cyan); }
.hero__badges li{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-sm); color:var(--txt-mute);
}
.hero__badges span{ color:var(--cyan); font-weight:700; }

/* Indicador de rolagem */
.hero__scroll{
  position:absolute; left:50%; bottom:28px; z-index:1;
  transform:translateX(-50%);
  width:24px; height:38px;
  border:1px solid var(--line); border-radius:100px;
  display:grid; place-items:start center; padding-top:7px;
}
.hero__scroll span{
  width:3px; height:7px; border-radius:2px; background:var(--cyan);
  animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot{
  0%,100%{ transform:translateY(0);    opacity:1; }
  50%    { transform:translateY(10px); opacity:.2; }
}

/* ── 06. SOBRE ──────────────────────────────────────────────────── */
.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-xl);
  align-items:center;
}
.about__media{ position:relative; }
.about__media img{
  width:100%; height:auto;          /* deixa o aspect-ratio definir a altura */
  aspect-ratio:4/3; object-fit:cover;   /* imagem horizontal */
  border-radius:var(--r);
  border:1px solid var(--line);
}
/* Selo flutuante sobre a imagem */
.about__badge{
  position:absolute; right:-16px; bottom:24px;
  background:rgba(0,10,24,.92);
  backdrop-filter:blur(10px);
  border:1px solid var(--line-hi);
  border-radius:var(--r);
  padding:18px 24px;
  text-align:center;
  box-shadow:var(--glow);
}
.about__badge strong{
  display:block;
  font-family:var(--font-h); font-size:1.9rem; font-weight:800;
  background:var(--grad-cyan); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about__badge span{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--txt-mute); }

.about__text h2{ margin-bottom:var(--sp-md); }
.about__text p{ margin-bottom:var(--sp-md); }
.about__list{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:12px; margin:var(--sp-lg) 0;
}
.about__list li{ display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--txt-soft); }
.about__list span{ color:var(--cyan); font-size:.6rem; }

/* ── 07. GALERIA ────────────────────────────────────────────────── */
/* Filtros em dois eixos: Tipo (linha 1) e Loja (linha 2) */
.filters-wrap{
  display:flex; flex-direction:column;
  gap:14px;
  max-width:820px; margin:0 auto var(--sp-xl);
}
.filters-row{
  display:grid;
  grid-template-columns:64px 1fr;   /* rótulo fixo + botões */
  align-items:center;
  gap:12px;
}
.filters-label{
  text-align:right;
  font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-faint);
}
.filters{
  display:flex; flex-wrap:wrap;
  gap:10px;
}
.filter{
  padding:10px 20px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:100px;
  font-size:.8rem; font-weight:500; letter-spacing:.06em;
  color:var(--txt-mute);
  transition:var(--tr);
}
.filter:hover{ color:var(--txt); border-color:var(--line-hi); }
.filter.is-active{
  background:var(--grad-cyan);
  border-color:transparent;
  color:var(--navy-3);
  font-weight:600;
  box-shadow:var(--glow);
}
/* Combinação sem itens: botão apagado e não clicável */
.filter:disabled{
  opacity:.32;
  cursor:not-allowed;
  filter:grayscale(.4);
}
.filter:disabled:hover{ color:var(--txt-mute); border-color:var(--line); }
.filter__count{ opacity:.6; font-size:.72rem; margin-left:4px; }

/* Masonry via colunas CSS — lida bem com alturas mistas (foto/reel) */
.gallery{
  column-count:3;
  column-gap:18px;
  transition:opacity .3s ease;
}
.gallery.is-switching{ opacity:0; }   /* transição suave ao trocar de filtro */

.g-item{
  position:relative;
  display:block;
  width:100%;
  break-inside:avoid;
  margin-bottom:18px;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--navy-2);
  cursor:pointer;
  transition:var(--tr);
  /* entrada escalonada dos itens ao filtrar */
  opacity:0;
  transform:translateY(18px) scale(.98);
  animation:itemIn .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes itemIn{ to{ opacity:1; transform:none; } }

.g-item:hover,
.g-item:focus-visible{
  border-color:var(--line-hi);
  box-shadow:var(--glow);
  transform:translateY(-4px);
}
.g-item img,
.g-item video{
  width:100%; height:auto;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.g-item.is-loaded img,
.g-item.is-loaded video{ opacity:1; }
.g-item:hover img,
.g-item:hover video{ transform:scale(1.05); }

/* Skeleton/placeholder animado enquanto a mídia carrega */
.g-skeleton{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.03) 30%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.03) 70%);
  background-size:220% 100%;
  animation:shimmer 1.4s infinite linear;
  transition:opacity .4s ease;
}
.g-item.is-loaded .g-skeleton{ opacity:0; pointer-events:none; }
@keyframes shimmer{ from{ background-position:180% 0; } to{ background-position:-40% 0; } }

/* Camada de informação no hover */
.g-overlay{
  position:absolute; inset:auto 0 0 0;
  padding:36px 16px 14px;
  background:linear-gradient(0deg, rgba(0,10,24,.92), transparent);
  opacity:0; transform:translateY(8px);
  transition:var(--tr);
  pointer-events:none;
}
.g-item:hover .g-overlay,
.g-item:focus-visible .g-overlay{ opacity:1; transform:none; }
.g-overlay b{ display:block; font-size:.82rem; color:var(--txt); font-weight:600; }
.g-overlay small{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); }

/* Selo de vídeo (▶) no canto do card */
.g-badge{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(0,10,24,.7);
  backdrop-filter:blur(6px);
  border:1px solid var(--line-hi);
  color:var(--cyan); font-size:.7rem;
  transition:var(--tr);
}
.g-item:hover .g-badge{ background:var(--grad-cyan); color:var(--navy-3); border-color:transparent; }

.gallery__empty{ text-align:center; color:var(--txt-mute); padding:var(--sp-xl) 0; }
.gallery__more{ display:flex; justify-content:center; margin-top:var(--sp-lg); }

/* ── LIGHTBOX ───────────────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  background:rgba(0,6,16,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .3s ease;
  padding:64px 20px;
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }

.lb__stage{
  position:relative;
  max-width:min(1100px, 92vw);
  max-height:82vh;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transform:scale(.96);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.lightbox.is-open .lb__stage{ transform:none; }

.lb__media{ display:flex; }
.lb__media img,
.lb__media video{
  max-width:min(1100px, 92vw);
  max-height:72vh;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:var(--r);
  background:var(--navy-3);
}

.lb__caption{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  font-size:var(--fs-sm);
}
.lb__cat{
  font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan);
}
.lb__title{ color:var(--txt-soft); }
.lb__counter{ color:var(--txt-faint); font-variant-numeric:tabular-nums; }

/* Controles */
.lb__close,
.lb__nav{
  position:fixed; z-index:2;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  color:var(--txt);
  transition:var(--tr);
}
.lb__close{
  top:20px; right:20px;
  width:44px; height:44px; border-radius:50%;
  font-size:1.6rem; line-height:1;
}
.lb__nav{
  top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  font-size:2rem; line-height:1; padding-bottom:4px;
}
.lb__nav--prev{ left:20px; }
.lb__nav--next{ right:20px; }
.lb__close:hover,
.lb__nav:hover{
  background:var(--grad-cyan);
  color:var(--navy-3);
  border-color:transparent;
  box-shadow:var(--glow);
}
.lb__nav:hover{ transform:translateY(-50%) scale(1.06); }

/* Trava a rolagem do fundo com o lightbox aberto */
body.is-locked{ overflow:hidden; }

/* ── 08. NÚMEROS ────────────────────────────────────────────────── */
.numbers__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:34px 26px;
  text-align:center;
  transition:var(--tr);
}
.stat:hover{ border-color:var(--line-hi); background:var(--surface-hi); transform:translateY(-4px); }
.stat__value{
  display:block;
  font-family:var(--font-h);
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;
  background:var(--grad-cyan);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
  margin-bottom:10px;
}
.stat__label{ font-size:var(--fs-sm); color:var(--txt-mute); line-height:1.45; }

/* ── 09. DEPOIMENTOS ────────────────────────────────────────────── */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.quote{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px;
  display:flex; flex-direction:column; gap:18px;
  transition:var(--tr);
}
.quote:hover{ border-color:var(--line-hi); background:var(--surface-hi); transform:translateY(-4px); }
.quote__stars{ color:var(--cyan); letter-spacing:.18em; font-size:.85rem; }
.quote blockquote{ color:var(--txt-soft); font-size:.94rem; flex:1; }
.quote figcaption{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line); }
.quote figcaption span{ display:flex; flex-direction:column; }
.quote figcaption strong{ color:var(--txt); font-size:.88rem; font-weight:600; }
.quote figcaption small{ color:var(--txt-faint); font-size:var(--fs-xs); }
.quote__avatar{
  display:grid !important; place-items:center;
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%;
  background:var(--grad-cyan);
  color:var(--navy-3);
  font-family:var(--font-h); font-weight:700; font-size:.8rem;
}

/* ── 10. CTA FINAL + RODAPÉ ─────────────────────────────────────── */
.cta-final{
  padding:var(--sp-sec) 0;
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(0,212,255,.12), transparent 70%),
    var(--navy-3);
  border-top:1px solid var(--line);
  text-align:center;
}
.cta-final__inner{ max-width:680px; }
.cta-final h2{ margin-bottom:var(--sp-md); }
.cta-final p{ color:var(--txt-mute); margin-bottom:var(--sp-lg); }
.cta-final__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-sm); justify-content:center; }

.footer{ background:var(--navy-3); border-top:1px solid var(--line); }
.footer__inner{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr 1fr;
  gap:var(--sp-lg);
  padding-block:var(--sp-xl);
}
.footer__brand p{ margin-top:var(--sp-md); font-size:var(--fs-sm); color:var(--txt-faint); max-width:34ch; }
.footer h3{
  font-family:var(--font-b);
  font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-faint);
  margin-bottom:var(--sp-md);
}
.footer__nav, .footer__contact{ display:flex; flex-direction:column; gap:10px; }
.footer__nav a, .footer__contact a{ font-size:var(--fs-sm); color:var(--txt-mute); }
.footer__nav a:hover, .footer__contact a:hover{ color:var(--cyan); }
.footer__contact p{ font-size:var(--fs-sm); color:var(--txt-faint); }

.socials{ display:flex; gap:10px; }
.socials a{
  display:grid; place-items:center;
  width:42px; height:42px; padding:11px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  color:var(--txt-soft);
}
.socials a:hover{
  background:var(--grad-cyan); color:var(--navy-3);
  border-color:transparent; transform:translateY(-3px);
  box-shadow:var(--glow);
}

.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-block:24px;
  border-top:1px solid var(--line);
  color:var(--txt-faint); font-size:var(--fs-xs);
}

/* ═══════════════════════════════════════════════════════════════════
   11. BREAKPOINTS — mobile-first: 480px, 768px, 1200px
   ═══════════════════════════════════════════════════════════════════ */

/* ≥ 1200px — layout amplo, 4 colunas na galeria */
@media (min-width:1200px){
  .gallery{ column-count:4; }
}

/* ≤ 1200px — reduz respiro lateral */
@media (max-width:1200px){
  :root{ --sp-sec:84px; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:var(--sp-xl) var(--sp-lg); }
}

/* ≤ 768px — tablet/mobile: menu recolhido, colunas simples */
@media (max-width:768px){
  :root{ --sp-sec:70px; --sp-xl:44px; }

  /* Menu vira painel deslizante */
  .nav{
    position:fixed; inset:0 0 auto 0;
    flex-direction:column; gap:0;
    margin:0; padding:calc(var(--header-h) + 12px) 24px 28px;
    background:rgba(0,10,24,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    transform:translateY(-110%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
  }
  .nav.is-open{ transform:none; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .header__cta{ display:none; }

  /* Hero empilha: texto em cima, moldura vertical embaixo (centralizada) */
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 32px); }
  .hero__inner{
    grid-template-columns:1fr;
    gap:var(--sp-lg);
    text-align:center;
  }
  .hero__content{ max-width:none; order:1; }
  .hero__figure{ order:2; max-width:300px; }
  .hero__sub{ margin-inline:auto; }
  .hero__actions{ justify-content:center; }
  .hero__badges{ justify-content:center; gap:10px var(--sp-md); }

  /* Sobre empilha, imagem primeiro, com textos centralizados */
  .about{ grid-template-columns:1fr; gap:var(--sp-lg); }
  .about__badge{ right:16px; bottom:16px; padding:14px 18px; }
  .about__text{ text-align:center; }
  .about__list{ justify-items:center; }
  .about__list li{ justify-content:center; }

  .gallery{ column-count:2; column-gap:14px; }
  .g-item{ margin-bottom:14px; }

  /* Resultados e Depoimentos em 2 colunas no mobile */
  .numbers__grid{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:repeat(2,1fr); }

  /* Lightbox: controles descem para o polegar */
  .lightbox{ padding:56px 12px; }
  .lb__nav{ top:auto; bottom:20px; transform:none; width:48px; height:48px; }
  .lb__nav:hover{ transform:scale(1.06); }
  .lb__nav--prev{ left:calc(50% - 60px); }
  .lb__nav--next{ right:calc(50% - 60px); }
  .lb__media img, .lb__media video{ max-height:62vh; }
  .lb__caption{ padding-bottom:60px; }

  .footer__bottom{ justify-content:center; text-align:center; }
}

/* ≤ 480px — celular pequeno: uma coluna, botões full-width */
@media (max-width:480px){
  :root{ --sp-sec:56px; --sp-md:18px; }
  .container{ padding-inline:18px; }

  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hero__scroll{ display:none; }

  .about__list{ grid-template-columns:1fr; }
  /* Selo SOBRE a imagem (canto inferior esquerdo), não mais abaixo dela */
  .about__badge{
    left:14px; right:auto; bottom:14px;
    padding:12px 18px;
  }

  /* Galeria em GRADE de 3 colunas no celular (antes era 1, ficava grande).
     Gaps menores para caber bem em telas estreitas. */
  .gallery{ column-count:3; column-gap:8px; }
  .g-item{ margin-bottom:8px; border-radius:8px; }
  .g-badge{ width:26px; height:26px; top:6px; right:6px; font-size:.6rem; }
  .g-overlay{ display:none; }   /* legenda no hover não faz sentido no toque */

  /* Filtros: rótulo acima dos botões, tudo centralizado */
  .filters-row{ grid-template-columns:1fr; gap:8px; justify-items:center; }
  .filters-label{ text-align:center; }
  .filters{ gap:8px; justify-content:center; }
  .filter{ padding:9px 15px; font-size:.75rem; }

  .numbers__grid{ grid-template-columns:repeat(2,1fr); }  /* mantém 2 colunas */
  .quote{ padding:22px; }
  .cta-final__actions{ flex-direction:column; }
  .cta-final__actions .btn{ width:100%; }
  .footer__inner{ grid-template-columns:1fr; }
}

/* ── Acessibilidade: respeita quem pediu menos movimento ────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .g-item{ opacity:1; transform:none; animation:none; }
}