/* ==========================================================================
   GSK Labs - style.css
   Dark, sem framework. Cor sempre por token (tokens.css). Transicao <= 180ms.
   Ordem: reset, base, utilitarios, header, hero, sistemas, servicos, metodo,
   faq, contato, rodape, responsivo.
   ========================================================================== */

/* --- reset minimo ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; }

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* foco visivel - 2px solido, offset 2px (brand book) */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- utilitarios ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--action-primary); color: #fff;
  padding: 10px 16px; border-radius: 8px; z-index: var(--z-toast);
  transition: top .18s cubic-bezier(.4,0,.2,1);
}
.skip-link:focus { top: 16px; }
.tabular { font-variant-numeric: tabular-nums; }

/* --- tipografia de secao --------------------------------------------------- */
.section { padding: 88px 0; border-top: 1px solid var(--border-default); }
.section:first-of-type { border-top: 0; }
.section-head {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 68ch; margin-bottom: 48px;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .4px;
  color: var(--action-primary); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2rem);
  line-height: 1.2; letter-spacing: -.5px; color: var(--text-primary);
}
.section-sub {
  font-size: 1.0625rem; color: var(--text-secondary); max-width: 62ch;
}

/* --- botoes ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  line-height: 1; padding: 0 20px; height: 44px; border: 0; border-radius: 8px;
  cursor: pointer; white-space: nowrap; color: var(--text-primary);
  background: transparent;
  transition: background .18s cubic-bezier(.4,0,.2,1),
              border-color .18s cubic-bezier(.4,0,.2,1),
              transform .18s cubic-bezier(.4,0,.2,1),
              opacity .18s cubic-bezier(.4,0,.2,1);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary {
  background: var(--gradient-brand); color: #fff;
  box-shadow: 0 8px 24px rgba(91,91,246,.18);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(91,91,246,.26); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  color: var(--text-primary);
}
.btn-ghost:hover { border-color: var(--action-primary); transform: translateY(-1px); }
.btn-link {
  height: auto; padding: 0; background: none; color: var(--action-primary);
  font-size: .95rem;
}
.btn-link svg { transition: transform .18s cubic-bezier(.4,0,.2,1); }
.btn-link:hover svg { transform: translateX(3px); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* --- header sticky --------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg-page) 82%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border-default);
}
.topo-inner {
  display: flex; align-items: center; gap: 24px; height: 68px;
}
.logo { display: inline-flex; align-items: center; }
.logo svg { height: 26px; width: auto; }
.logo-gsk { fill: var(--logo-ink); }
.logo-labs { fill: var(--logo-sub); }
.logo-stop-a { stop-color: var(--logo-dot-a); }
.logo-stop-b { stop-color: var(--logo-dot-b); }
.nav-links {
  display: flex; align-items: center; gap: 28px; margin-left: auto;
}
.nav-links a {
  font-size: .95rem; font-weight: 500; color: var(--text-secondary);
  transition: color .18s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover { color: var(--text-primary); }
.topo .btn-primary { height: 40px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; margin-left: auto;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-default);
  border-radius: 8px; color: var(--text-primary); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* --- hero ------------------------------------------------------------------ */
.hero { padding: 72px 0 88px; position: relative; overflow: hidden; background: var(--bg-page); }
.hero-inner {
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3rem);
  line-height: 1.08; letter-spacing: -1px; color: var(--text-primary);
}
.hero-title .marca-ponto { color: var(--accent); }
.hero-sub { font-size: 1.15rem; color: var(--text-secondary); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: .9rem; color: var(--text-muted); }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  padding: 6px 12px; border-radius: 999px;
}
.badge svg { width: 15px; height: 15px; color: var(--action-primary); }
.hero-media { position: relative; }
.hero-glow {
  position: absolute; inset: -20% -10% auto auto; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(123,124,255,.20), transparent 70%);
  filter: blur(20px); z-index: var(--z-base); pointer-events: none;
}

/* --- comparador antes/depois (hero) ---------------------------------------- */
.ba-instrucao {
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  text-align: center; margin-bottom: 10px;
}
.ba-slider {
  position: relative; aspect-ratio: 8 / 5; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border-default); box-shadow: var(--shadow-hero);
  touch-action: pan-y; --split: 50%;
}
.ba-pane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ba-antes { background: #F1F0F7; }
.ba-depois {
  background: var(--neutral-950);
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.ba-tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; color: #fff; background: rgba(20,20,43,.55);
}
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px;
  background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(20,20,43,.2);
  pointer-events: none;
}
.ba-handle {
  position: absolute; top: 50%; left: var(--split); transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: #fff; color: var(--neutral-950); cursor: ew-resize;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.ba-handle svg { width: 14px; height: 14px; }

/* planilha falsa ("antes") */
.fake-sheet {
  width: 100%; max-width: 360px; background: #fff; border-radius: 8px;
  border: 1px solid #D8D7E4; overflow: hidden; font-size: .68rem;
  box-shadow: 0 4px 14px rgba(20,20,43,.10);
}
.fake-sheet-bar {
  display: flex; gap: 10px; padding: 6px 10px; background: #F1F0F7;
  border-bottom: 1px solid #D8D7E4; color: #62627E; font-weight: 600;
}
.fake-sheet-fx {
  display: flex; gap: 8px; align-items: center; padding: 5px 10px;
  border-bottom: 1px solid #D8D7E4; color: #14142B;
}
.fs-cellref {
  font-family: ui-monospace, Menlo, monospace; font-weight: 700;
  background: #F1F0F7; border-radius: 4px; padding: 1px 6px;
}
.fs-fxinput { font-family: ui-monospace, Menlo, monospace; color: #4B4B63; }
.fake-sheet-grid { display: flex; flex-direction: column; }
.fs-row {
  display: grid; grid-template-columns: 18px 1.3fr .9fr .9fr .9fr;
  border-bottom: 1px solid #E4E3EE; color: #14142B;
}
.fs-row span { padding: 4px 6px; border-right: 1px solid #E4E3EE; }
.fs-row span:first-child { color: #A9A9C4; text-align: center; border-right: 1px solid #D8D7E4; }
.fs-head { background: #F1F0F7; font-weight: 700; color: #62627E; }
.fs-danger { color: var(--danger-text); font-weight: 700; background: var(--danger-bg); }
.fs-warn { color: var(--warning-text); font-weight: 700; background: var(--warning-bg); }
.fs-ok { color: var(--success-text); font-weight: 700; }

/* painel falso ("depois") */
.fake-dash {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px;
  background: var(--neutral-800); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 16px; color: #F5F4FA;
}
.fake-dash-top {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
}
.fd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo-400); }
.fake-dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fd-kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: rgba(255,255,255,.06); border-radius: 8px;
}
.fd-kpi-label { font-size: .62rem; color: var(--neutral-400); }
.fd-kpi-value { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.fake-dash-chart { width: 100%; height: 46px; color: var(--indigo-400); }
.fake-dash-list { display: flex; flex-direction: column; gap: 6px; }
.fd-item { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--neutral-400); }
.fd-item svg { width: 14px; height: 14px; color: var(--success-dark); flex: none; }

@media (min-width: 641px) {
  .fake-sheet, .fake-dash { max-width: 420px; }
}

/* --- sistemas construidos -------------------------------------------------- */
.cards-case {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch;
}
.card-case {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 14px; overflow: hidden;
  transition: border-color .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s cubic-bezier(.4,0,.2,1),
              transform .18s cubic-bezier(.4,0,.2,1);
}
.card-case:hover {
  border-color: var(--action-primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.card-media { border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.card-media img { width: 100%; }
.card-body { display: flex; flex-direction: column; gap: 14px; padding: 28px; flex: 1; }
.card-selo {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: .75rem; font-weight: 700; letter-spacing: .3px;
  color: var(--accent); background: var(--action-subtle);
  padding: 5px 12px; border-radius: 999px;
}
.card-selo svg { width: 14px; height: 14px; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.4px; }
.card-nicho { font-size: .9rem; font-weight: 600; color: var(--text-muted); margin-top: -6px; }
.card-desc { color: var(--text-secondary); font-size: .975rem; }
.card-nums {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px;
}
.card-nums span {
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-subtle);
  border: 1px solid var(--border-default); padding: 5px 10px; border-radius: 6px;
}
.card-actions {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--border-default); margin-top: 4px;
}

/* --- servicos -------------------------------------------------------------- */
.pilares { display: flex; flex-direction: column; gap: 8px; }
.pilar {
  display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start;
  padding: 24px 0; border-top: 1px solid var(--border-default);
}
.pilar:first-child { border-top: 0; }
.pilar-icon {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--action-subtle); border-radius: 12px; color: var(--action-primary);
}
.pilar-icon svg { width: 24px; height: 24px; }
.pilar-body { display: flex; flex-direction: column; gap: 8px; }
.pilar-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.3px; }
.pilar-desc { color: var(--text-secondary); max-width: 64ch; }

/* --- metodo ---------------------------------------------------------------- */
.etapas { display: grid; grid-template-columns: 1fr; gap: 20px; }
.etapa {
  display: flex; flex-direction: column; gap: 12px; padding: 28px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 14px;
}
.etapa-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: #fff; background: var(--gradient-brand);
}
.etapa:nth-child(2) .etapa-num,
.etapa:nth-child(3) .etapa-num {
  background: var(--bg-subtle); color: var(--action-primary);
  border: 1px solid var(--border-default);
}
.etapa-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.3px; }
.etapa-desc { color: var(--text-secondary); }
.metodo-prazo {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 18px 20px;
  background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 12px;
  color: var(--text-secondary); font-size: .95rem;
}
.metodo-prazo svg { width: 20px; height: 20px; color: var(--action-primary); flex: none; margin-top: 2px; }
.metodo-prazo strong { color: var(--text-primary); }

/* --- faq (accordion nativo <details>) -------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 80ch; }
.faq-item {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 12px; overflow: hidden;
  transition: border-color .18s cubic-bezier(.4,0,.2,1);
}
.faq-item[open] { border-color: var(--action-primary); }
.faq-q {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 18px 22px; font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; color: var(--text-primary); list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon {
  flex: none; width: 20px; height: 20px; color: var(--action-primary);
  transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.faq-item[open] .faq-icon { transform: rotate(90deg); }
.faq-a { padding: 0 22px 20px 56px; color: var(--text-secondary); }

/* --- contato --------------------------------------------------------------- */
.contato-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.contato-aside { display: flex; flex-direction: column; gap: 20px; }
.contato-aside .section-head { margin-bottom: 0; }
.wa-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 12px;
  transition: border-color .18s cubic-bezier(.4,0,.2,1);
}
.wa-card:hover { border-color: var(--action-primary); }
.wa-icon {
  width: 44px; height: 44px; flex: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--action-subtle); color: var(--action-primary);
}
.wa-icon svg { width: 24px; height: 24px; }
.wa-body { display: flex; flex-direction: column; }
.wa-body span { font-size: .82rem; color: var(--text-muted); }
.wa-body strong { font-family: var(--font-display); color: var(--text-primary); }

.form-diag {
  display: flex; flex-direction: column; gap: 18px; padding: 28px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 14px;
}
.campo-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 7px; min-width: 240px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.campo .req { color: var(--accent); }
.campo input, .campo textarea {
  height: 40px; padding: 0 14px; color: var(--text-primary);
  background: var(--bg-page); border: 1px solid var(--border-default); border-radius: 6px;
  transition: border-color .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.campo textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--text-muted); }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--action-primary);
  box-shadow: 0 0 0 3px var(--action-subtle);
}
.form-actions { display: flex; justify-content: flex-end; }
.lgpd { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.loading-inline {
  display: none; align-items: center; gap: 12px; color: var(--text-secondary); font-size: .95rem;
}
.loading-inline.ativo { display: flex; }
.spinner {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 3px solid var(--border-default); border-top-color: var(--action-primary);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.mensagem-ok, .mensagem-erro {
  display: none; align-items: flex-start; gap: 12px; padding: 16px 18px;
  border-radius: 12px; font-size: .95rem;
}
.mensagem-ok.ativo, .mensagem-erro.ativo { display: flex; }
.mensagem-ok {
  color: var(--msg-ok-text); background: rgba(52,211,153,.10);
  border: 1px solid rgba(52,211,153,.30);
}
.mensagem-erro {
  color: var(--msg-erro-text); background: rgba(251,113,133,.10);
  border: 1px solid rgba(251,113,133,.30);
}
.mensagem-ok svg, .mensagem-erro svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* --- rodape ---------------------------------------------------------------- */
.rodape { border-top: 1px solid var(--border-default); padding: 64px 0 32px; background: var(--bg-page); }
.rodape-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.rodape-col { display: flex; flex-direction: column; gap: 14px; }
.rodape-col h3 {
  font-family: var(--font-display); font-size: .85rem; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted);
}
.rodape-marca svg { height: 24px; width: auto; margin-bottom: 4px; }
.rodape-frase { color: var(--text-secondary); max-width: 34ch; }
.rodape-col a { color: var(--text-secondary); transition: color .18s cubic-bezier(.4,0,.2,1); }
.rodape-col a:hover { color: var(--text-primary); }
.rodape-links li { padding: 4px 0; }
.rodape-outros li { padding: 4px 0; color: var(--text-secondary); }
.rodape-base {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-default);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  color: var(--text-muted); font-size: .85rem;
}

/* ==========================================================================
   Responsivo - mobile-first ate aqui; a partir de 641px expande
   ========================================================================== */
@media (min-width: 641px) {
  .campo-row { grid-template-columns: 1fr 1fr; }
  .etapas { grid-template-columns: repeat(3, 1fr); }
  .rodape-grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
}

@media (min-width: 1025px) {
  .container { padding: 0 48px; }
  .section { padding: 104px 0; }
  .hero-inner { grid-template-columns: 1.05fr 1fr; gap: 64px; }
  .cards-case { grid-template-columns: 1fr 1fr; }
  .contato-grid { grid-template-columns: .9fr 1.1fr; gap: 56px; }
}

/* nav vira menu mobile abaixo de 900px */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
    padding: 8px 24px 20px; transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1), visibility .18s;
  }
  .nav-links.aberto { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--border-default); }
  .nav-links .btn-primary { margin-top: 14px; height: 44px; }
}

/* ==========================================================================
   Galerias (paginas /galeria/*.html) - grid de miniaturas + lightbox
   ========================================================================== */
.trava-scroll { overflow: hidden; }

.topo-galeria {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg-page) 82%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border-default);
}
.topo-galeria .container { display: flex; align-items: center; gap: 20px; height: 64px; }
.voltar-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--text-secondary); transition: color .18s cubic-bezier(.4,0,.2,1);
}
.voltar-link:hover { color: var(--text-primary); }
.voltar-link svg { width: 20px; height: 20px; }
.galeria-titulo {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--text-primary); margin-left: auto;
}
.galeria-intro { padding: 44px 0 8px; }
.galeria-intro h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2rem); letter-spacing: -.5px;
}
.galeria-intro p { color: var(--text-secondary); margin-top: 10px; max-width: 64ch; }

.galeria-grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px 0 80px; }
.galeria-item {
  display: flex; flex-direction: column; padding: 0; text-align: left;
  border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden;
  background: var(--bg-surface); cursor: pointer;
  transition: border-color .18s cubic-bezier(.4,0,.2,1),
              transform .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.galeria-item:hover {
  border-color: var(--action-primary); transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.galeria-item img { width: 100%; display: block; }
.galeria-legenda-mini {
  padding: 10px 14px; font-size: .85rem; font-weight: 600;
  color: var(--text-secondary); border-top: 1px solid var(--border-default);
}

.lightbox {
  display: none; position: fixed; inset: 0; z-index: var(--z-modal);
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,7,13,.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lightbox.aberto { display: flex; animation: lb-in .20s ease; }
.lightbox.saindo { animation: lb-out .19s ease; }
.lightbox-fig { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.lightbox-img.modal-lg {
  max-width: 89vw; max-height: 90vh; width: auto; height: auto;
  border-radius: 12px; border: 1px solid var(--border-default);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: lb-zoom .20s ease;
}
.lightbox-legenda { font-family: var(--font-display); font-weight: 600; color: #F5F4FA; font-size: .95rem; }
.lightbox-fechar {
  position: fixed; top: 20px; right: 20px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--bg-surface);
  border: 1px solid var(--border-default); color: var(--text-primary);
  cursor: pointer; z-index: var(--z-tooltip);
  transition: border-color .18s cubic-bezier(.4,0,.2,1);
}
.lightbox-fechar:hover { border-color: var(--action-primary); }
.lightbox-fechar svg { width: 22px; height: 22px; }
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--bg-surface);
  border: 1px solid var(--border-default); color: var(--text-primary);
  cursor: pointer; z-index: var(--z-tooltip);
  transition: border-color .18s cubic-bezier(.4,0,.2,1);
}
.lightbox-nav:hover { border-color: var(--action-primary); }
.lightbox-nav svg { width: 24px; height: 24px; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lb-zoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 641px) { .galeria-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1025px) { .galeria-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ==========================================================================
   Botao flutuante do WhatsApp (so no index)
   ========================================================================== */
.whats-flutuante {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast);
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--action-primary); color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.whats-flutuante:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.whats-flutuante svg { width: 30px; height: 30px; }
@media (max-width: 640px) {
  .whats-flutuante { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whats-flutuante svg { width: 28px; height: 28px; }
}