/* =====================================================================
   GARAGE85 — estilos do site
   Fase 1: HERO frame-scrub (canvas) + HUD câmera-vintage
   Estrutura/animações inspiradas na BRACE, cores/marca da Garage85.
   ===================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink:     #0C0908;   /* carvão quente (fundo) */
  --stone:   #1A1512;   /* superfície escura */
  --surface: #211C18;   /* cards */
  --cream:   #F3ECDF;   /* texto claro */
  --ember:   #E0402F;   /* vermelho Garage85 (toldo/placa) — SÓ botões/CTA (detalhes = verde) */
  --green:   #16A34A;   /* verde Garage85 — acentos (eyebrow, palavra-destaque) */
  --green-bright: #22B85A;
  /* base cinematográfica escura — só o hero usa */
  --coal:    #14100E;
  --line:    rgba(243,236,223,0.10);
  /* base CLARA das seções fora do hero (branco+verde, identidade sem ficar sombrio) */
  --paper:    #F4EEE2;   /* fundo creme quente das seções */
  --paper-2:  #FBF8F1;   /* cards / superfície clara */
  --ink-2:    #1C1712;   /* texto escuro sobre claro */
  --muted:    #6B5F52;   /* texto secundário sobre claro */
  --line-dark: rgba(28,23,18,0.12);  /* divisórias sobre claro */
  /* verde da fachada — bloco de respiro (Sobre nós) + acentos */
  --green-deep:    #123D2C;
  --green-surface: #184A36;
  --green-ink:     #0F5132;  /* verde legível como texto sobre claro */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  overflow-x: clip;   /* clip NÃO cria scroll-container (hidden forçaria overflow-y:auto → body vira scroller e quebra o ScrollTrigger do hero). Mantém single scroller = window. */
}

/* ── NAVBAR ─────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 4rem;
  background: linear-gradient(to bottom, rgba(12,9,8,0.9) 0%, transparent 100%);
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
/* rolou pra fora do hero → nav sólida clara (combina com as seções claras) */
nav.scrolled {
  background: var(--paper-2);
  padding: 1rem 4rem;
  box-shadow: 0 1px 0 var(--line-dark), 0 8px 30px rgba(28,23,18,0.08);
}
nav.scrolled .nav-links a { color: var(--ink-2); }
nav.scrolled .nav-toggle span { background: var(--ink-2); }
.nav-logo {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.6rem; letter-spacing: 0.06em;
  color: var(--cream); text-decoration: none;
}
.nav-logo .num { color: var(--ember); }
.nav-logo img { height: 40px; width: auto; display: block; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
.nav-links a {
  font-family: var(--font-body); font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  opacity: 0.7; transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.nav-cta {
  opacity: 1; color: var(--cream);
  background: var(--ember); padding: 0.55rem 1.15rem;
  border-radius: 2px; transition: background 0.2s;
}
.nav-links a.nav-cta:hover { background: #c4331f; }

/* Hamburger — só ≤640px */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; padding: 6px 4px;
  background: none; border: none; cursor: pointer; z-index: 102;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 22px;
  background: var(--cream); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; overflow: hidden; max-height: 0;
  background: rgba(12,9,8,0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  /* ⚠️ borda começa em 0 e só existe com .open: `max-height:0` NÃO corta borda,
     então uma borda fixa deixaria a gaveta com 1px de altura mesmo fechada — e
     como o background-clip é border-box, o fundo quase preto pintava nesse 1px.
     Dava uma linha preta de ponta a ponta embaixo do menu no celular. */
  border-top: 0 solid rgba(243,236,223,0.07);
  transition: max-height 0.4s ease, border-top-width 0.4s ease;
}
.nav-drawer.open { max-height: 320px; border-top-width: 1px; }
.nav-drawer a {
  display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.5rem;
  font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(243,236,223,0.75);
  text-decoration: none; border-bottom: 1px solid rgba(243,236,223,0.05);
  transition: color 0.2s;
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover, .nav-drawer a:active { color: var(--green-bright); }
.nav-drawer-dash {
  display: inline-block; width: 16px; height: 1px;
  background: rgba(34,184,90,0.6); flex-shrink: 0;
}

/* ── HERO (frame-scrub) ─────────────────────────────────────────── */
#hero-wrap { position: relative; height: 300vh; }

#hero-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: var(--ink);
}

/* fundo estático mostrado até o canvas assumir (e no reduced-motion) */
#hero-bg {
  position: absolute; inset: 0;
  background: url('../hero-webp/frame_0092.webp?v=2') center center / cover no-repeat;
  filter: brightness(0.5);
}

#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* loader */
#hero-loader {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ink); gap: 1.5rem;
}
#hero-loader-bar-wrap { width: 200px; height: 1px; background: rgba(243,236,223,0.12); overflow: hidden; }
#hero-loader-bar { height: 100%; width: 0%; background: var(--green-bright); transition: width 0.08s linear; }
#hero-loader-text {
  font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.35em;
  color: rgba(243,236,223,0.35); text-transform: uppercase;
}

/* ── HUD OVERLAY ────────────────────────────────────────────────── */
#hero-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* legibilidade sobre o tijolo quente (fundo claro): sombra sutil em TODO texto do HUD */
  text-shadow: 0 1px 10px rgba(0,0,0,0.55), 0 0 3px rgba(0,0,0,0.35); }
#hero-hud .btn { text-shadow: none; } /* botões têm fundo sólido, não precisam */

/* degradê à esquerda pra manter o título legível sobre a pizza */
#hero-hud::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(12,9,8,0.74) 0%, rgba(12,9,8,0.46) 35%,
    rgba(12,9,8,0.08) 60%, transparent 100%
  );
}

/* top bar */
.hud-top-bar {
  position: absolute; top: 68px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 4rem;
}
.hud-rec {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-body); font-size: 0.6rem;
  letter-spacing: 0.18em; color: rgba(243,236,223,0.75);
}
.hud-rec-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright);
  animation: recBlink 1.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes recBlink { 0%,100%{opacity:1} 50%{opacity:0.25} }
.hud-rec-label { color: rgba(243,236,223,0.55); margin-right: 0.15rem; }
.hud-product-label {
  font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(243,236,223,0.4);
}
.hud-camera-info {
  font-family: var(--font-body); font-size: 0.58rem;
  letter-spacing: 0.16em; color: rgba(243,236,223,0.68);
}

/* cantos */
.hud-corner {
  position: absolute; width: 26px; height: 26px;
  border-color: rgba(243,236,223,0.3); border-style: solid; border-width: 0;
}
.hud-corner.tl { top: 116px; left: 22px; border-top-width: 1.5px; border-left-width: 1.5px; }
.hud-corner.tr { top: 116px; right: 30px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hud-corner.bl { bottom: 80px; left: 22px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hud-corner.br { bottom: 80px; right: 30px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* mira central */
.hud-crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; }
.hud-ch-h { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(243,236,223,0.1); transform: translateY(-50%); }
.hud-ch-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(243,236,223,0.1); transform: translateX(-50%); }
.hud-ch-ring { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(243,236,223,0.22); transform: translate(-50%,-50%); }
.hud-ch-dot { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: rgba(243,236,223,0.6); transform: translate(-50%,-50%); }

/* label lateral "role para explorar" */
.hud-scroll-wrap { position: absolute; left: 14px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center center; }
.hud-scroll-label { font-family: var(--font-body); font-size: 0.52rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(243,236,223,0.3); white-space: nowrap; }
.hud-side-dot {
  position: absolute; left: 22px; top: calc(50% - 80px);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(34,184,90,0.7); box-shadow: 0 0 8px rgba(34,184,90,0.45);
}

/* bloco de título (esquerda) */
.hud-title-block { position: absolute; left: 4rem; top: 50%; transform: translateY(-52%); max-width: 46vw; }
.hud-craft-label {
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(243,236,223,0.64); margin-bottom: 1.1rem;
}
.hud-main-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 8rem); line-height: 0.88; letter-spacing: -0.02em;
  color: var(--cream); display: block; margin-bottom: 0.12rem;
}
.hud-main-title .num { color: var(--green-bright); }
.hud-subtitle {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 3.6rem); line-height: 0.9; letter-spacing: -0.01em;
  color: var(--cream); margin-bottom: 1.6rem; display: block;
}
.hud-subtitle .em { color: var(--green-bright); }
.hud-tagline {
  font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(243,236,223,0.66); margin-bottom: 2rem;
}

/* CTAs do hero (nossa adição — caminho do pedido/clube) */
.hud-cta-row { display: flex; gap: 0.9rem; pointer-events: auto; flex-wrap: wrap; }
.btn {
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 0.8rem 1.6rem; cursor: pointer;
  text-decoration: none; border-radius: 2px; transition: all 0.2s; display: inline-block;
  text-align: center; text-indent: 0.18em;   /* compensa o espaço final do letter-spacing → texto centralizado */
}
.btn-ember { background: var(--ember); color: var(--cream); border: 1px solid var(--ember); }
.btn-ember:hover { background: #c4331f; border-color: #c4331f; transform: translateY(-2px); }
/* CTA que precisa gritar (ex.: "Ver o Clube" na home) — maior, arredondado e com sombra */
.btn-lg {
  font-size: 0.8rem; padding: 1.05rem 2.4rem; border-radius: 6px;
  box-shadow: 0 8px 22px rgba(224,64,47,0.28);
}
.btn-lg:hover { box-shadow: 0 12px 28px rgba(224,64,47,0.36); }
.btn-outline { background: transparent; color: var(--cream); border: 1px solid rgba(243,236,223,0.3); }
.btn-outline:hover { border-color: var(--green-bright); color: var(--green-bright); background: rgba(34,184,90,0.08); transform: translateY(-2px); }

/* régua direita */
.hud-ruler {
  position: absolute; right: 30px; top: 120px; bottom: 84px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
}
.hud-tick { width: 8px; height: 1px; background: rgba(243,236,223,0.18); }
.hud-tick.major { width: 14px; background: rgba(243,236,223,0.32); }

/* barra inferior */
.hud-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 78px;
  display: flex; align-items: center; padding: 0 4rem;
}
.hud-bottom-left {
  display: flex; align-items: center; gap: 1rem; flex-shrink: 0;
  font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(243,236,223,0.55);
}
.hud-audio-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.hud-audio-bar { width: 2.5px; border-radius: 1px; background: var(--green-bright); animation: audioBeat var(--dur) ease-in-out infinite alternate; }
@keyframes audioBeat { from{height:var(--lo)} to{height:var(--hi)} }

.hud-scrubber-area { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 3rem; }
.hud-scrubber-track-wrap { position: relative; width: 100%; height: 1.5px; background: rgba(243,236,223,0.1); }
.hud-scrubber-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--green-bright); width: 0%; }
.hud-scrubber-knob { position: absolute; top: 50%; left: 0%; width: 7px; height: 7px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--green-bright); transform: translate(-50%,-50%); }
/* legenda flutua ABAIXO da linha, sem empurrar a linha do centro (que fica alinhada com os labels laterais) */
.hud-scrubber-caption { position: absolute; top: calc(50% + 11px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-body); font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(243,236,223,0.6); }

.hud-bottom-right {
  flex-shrink: 0; font-family: var(--font-body); font-size: 0.52rem;
  letter-spacing: 0.12em; color: rgba(243,236,223,0.62); text-align: right; line-height: 1.8;
}
.hud-bottom-right .hi { color: var(--green-bright); }

/* ── §1 AS PIZZAS ───────────────────────────────────────────────── */
.pizzas {
  background: var(--paper);
  padding: 7rem 2rem 8rem;
}

.pizzas-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 4rem;
}
.section-eyebrow {
  font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--green-ink); margin-bottom: 1.2rem;
}
.section-title {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1;
  color: var(--ink-2); margin-bottom: 1.4rem;
}
.section-title .num { color: var(--green-ink); }
.section-lead {
  font-family: var(--font-body); font-size: 0.95rem; line-height: 1.7;
  color: var(--muted);
}
/* eyebrow dentro de blocos escuros (bloco editorial sobre foto) fica claro */
.craft-content .section-eyebrow { color: var(--green-bright); }

.pizza-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; max-width: 1200px; margin: 0 auto;
}

.pizza-card {
  position: relative;              /* ancora o selo sobre a foto */
  background: var(--paper-2);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,23,18,0.04);
  transition: transform 0.4s ease, box-shadow 0.4s, border-color 0.4s;
}

/* ── SELO DAS PIZZAS: pílula verde ──────────────────────────────────
   Retângulo arredondado (pílula), verde claro com texto verde, sobre a foto
   no canto superior esquerdo. Ideia trazida pelo Renato (referência: o selo
   "Mais pedido" do delivery yooga). Em 20/07/2026 SUBSTITUIU o selo em imagem
   com o Fusca (que tinha sido aprovado em 19/07 e depois o Renato/Vitor
   preferiram este formato). Monta em cima de QUALQUER frase, então serve os 3
   rótulos do painel (Edição limitada · A mais pedida · Sugestão da casa) e
   qualquer texto novo — sem depender de arte pronta.
   `seloHTML()` no main.js imprime só <span class="pizza-selo">frase</span>.
   ⚠️ Agora é um <span>, não <img>, então a regra genérica
   `.pizza-card img { ... object-fit:cover }` não pega mais o selo — não há o
   risco de especificidade que existia com o `.pizza-selo-img`.
   (Os .webp em `assets/img/selos/` ficaram sem uso; ver 🏷️ SELOS no CLAUDE.md.) */
.pizza-selo {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3;
  display: inline-block; max-width: calc(100% - 1.8rem);
  padding: 7px 13px; border-radius: 999px;
  background: #c9f2dc; color: #12854e;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.pizza-card:hover {
  transform: translateY(-6px);
  border-color: rgba(22,163,74,0.5);
  box-shadow: 0 16px 40px rgba(28,23,18,0.14);
}

/* placeholder da foto (trocar por <img> quando o Vitor subir as fotos) */
.pizza-card-ph {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(28,23,18,0.03) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #ece3d3, #e2d7c3);
  border-bottom: 1px solid var(--line-dark);
}
.pizza-card-ph span {
  font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(28,23,18,0.35); text-align: center; padding: 0 1rem;
}
.pizza-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  filter: brightness(1); transition: transform 0.5s ease;
}
.pizza-card:hover img { transform: scale(1.04); }

.pizza-card-body { padding: 1.6rem 1.8rem 1.8rem; }
.pizza-card-tag {
  display: inline-block; font-family: var(--font-body); font-size: 0.58rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--green-ink);
  margin-bottom: 0.55rem;
}
.pizza-card-name {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 1.5rem; line-height: 1.15; margin-bottom: 1.1rem; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pizza-card-desc {
  font-family: var(--font-body); font-size: 0.8rem; line-height: 1.7;
  color: var(--muted); margin-bottom: 0;
}
.pizza-card-desc em { font-style: italic; opacity: 0.7; }

/* rodapé do card (preço + botão) */
.pizza-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pizza-price-wrap { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pizza-price {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink-2); line-height: 1;
}
.pizza-price-old {
  font-family: var(--font-body); font-size: 0.8rem; color: var(--muted);
  text-decoration: line-through;
}
.pizza-order-btn { flex-shrink: 0; }

/* esgotado */
.pizza-card.is-sold img, .pizza-card.is-sold .pizza-card-ph { filter: grayscale(1) brightness(0.9); }
.pizza-card.is-sold .pizza-price { color: var(--muted); }

/* skeleton (enquanto a API carrega) */
.pizza-card.is-skeleton { opacity: 1; transform: none; }
.pizza-card.is-skeleton .pizza-card-ph {
  background: linear-gradient(100deg, #ece3d3 30%, #f4ede0 50%, #ece3d3 70%);
  background-size: 200% 100%; animation: sk-shimmer 1.3s linear infinite;
}
.pizza-card.is-skeleton .sk-line {
  height: 0.9rem; margin: 0.6rem 0; border-radius: 3px;
  background: linear-gradient(100deg, #ece3d3 30%, #f4ede0 50%, #ece3d3 70%);
  background-size: 200% 100%; animation: sk-shimmer 1.3s linear infinite;
}
.pizza-card.is-skeleton .sk-line.short { width: 55%; }
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.btn-ember {
  background: var(--ember); color: var(--cream); border: none;
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
  padding: 0.7rem 1.4rem; cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  display: inline-block; text-align: center; text-indent: 0.18em;
}
.btn-ember:hover { background: #c4331f; transform: translateY(-2px); }

.pizzas-cta { text-align: center; margin-top: 4rem; }

/* reveal (fade + slide-up) — igual mecânica BRACE */
.reveal, .pizza-card { opacity: 0; transform: translateY(40px); }
.reveal.is-in, .pizza-card.is-in { opacity: 1; transform: none; }

/* botão creme (sobre fundo verde) */
.btn-cream {
  display: inline-block; background: var(--cream); color: var(--green-deep); border: none;
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em; font-weight: 500;
  text-transform: uppercase; text-decoration: none; padding: 0.85rem 1.6rem; border-radius: 4px;
  transition: transform 0.2s, background 0.3s;
  text-align: center; text-indent: 0.18em;
}
.btn-cream:hover { transform: translateY(-2px); background: #fff; }

/* botão outline pra fundo claro */
.btn-outline-dark { background: transparent; color: var(--ink-2); border: 1px solid var(--line-dark); transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.2s; }
.btn-outline-dark:hover { border-color: var(--green-ink); color: var(--green-ink); background: rgba(15,81,50,0.06); transform: translateY(-2px); }

/* ── §1c O CARRO-CHEFE (signature split, estilo BRACE) ──────────── */
/* ── CARRO-CHEFE: full-bleed cinematográfico (escuro, ocupa a seção toda) ──
   Foto da pizza cobrindo tudo (object-fit:cover) + scrim pra legibilidade +
   brasa pulsando. Segundo momento escuro do site (amarra com o hero) e evita
   dois verdes seguidos com o "Sobre" logo abaixo. */
.signature { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: clip; background: #140d07; }
.sig-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #140d07; }
.sig-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; transform: scale(1); will-change: transform; }
.sig-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,10,6,0.95) 0%, rgba(15,10,6,0.78) 32%, rgba(15,10,6,0.18) 64%, rgba(15,10,6,0.42) 100%),
    linear-gradient(to top, rgba(15,10,6,0.75) 0%, transparent 42%);
}
.sig-ember {
  position: absolute; right: 4%; bottom: -6%; width: 52%; height: 62%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 55% 100%, rgba(224,64,47,0.30) 0%, rgba(224,64,47,0.08) 45%, transparent 68%);
  filter: blur(18px); animation: sig-breathe 4s ease-in-out infinite;
}
@keyframes sig-breathe { 0%,100% { opacity: 0.6; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.06); } }

/* label + cantos de câmera (amarra com hero) — em claro sobre o escuro */
.sig-cam { position: absolute; top: 2.4rem; right: 2.2rem; z-index: 3; font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(244,238,226,0.55); }
.sig-corner { position: absolute; width: 24px; height: 24px; z-index: 3; pointer-events: none; }
.sig-corner.tl { top: 2rem; left: 2rem; border-top: 1px solid rgba(244,238,226,0.28); border-left: 1px solid rgba(244,238,226,0.28); }
.sig-corner.tr { top: 2rem; right: 2rem; border-top: 1px solid rgba(244,238,226,0.28); border-right: 1px solid rgba(244,238,226,0.28); }
.sig-corner.bl { bottom: 2rem; left: 2rem; border-bottom: 1px solid rgba(244,238,226,0.28); border-left: 1px solid rgba(244,238,226,0.28); }
.sig-corner.br { bottom: 2rem; right: 2rem; border-bottom: 1px solid rgba(244,238,226,0.28); border-right: 1px solid rgba(244,238,226,0.28); }

.signature-inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 7rem 2.4rem; }
.sig-text { max-width: 560px; }
.sig-eyebrow { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(244,238,226,0.75); margin-bottom: 1.6rem; display: flex; align-items: center; gap: 0.75rem; }
.sig-eyebrow .tick { width: 26px; height: 1px; background: var(--green-bright); }
.sig-badge {
  display: inline-block; margin-bottom: 1.1rem; background: var(--green-bright); color: #0a2e18;
  font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.5rem 0.95rem; border-radius: 999px;
}
.sig-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 8.5vw, 7.5rem); line-height: 0.9; color: var(--cream); letter-spacing: -0.015em; margin-bottom: 0.2rem; }
.sig-line { display: inline-block; overflow: hidden; padding-bottom: 0.1em; vertical-align: top; }
.sig-line-in { display: inline-block; }
.sig-dot { color: var(--green-bright); }
.sig-kicker { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 2.1rem); color: rgba(244,238,226,0.72); margin: 0.4rem 0 1.6rem; display: block; }
.sig-desc { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.85; color: rgba(244,238,226,0.78); max-width: 460px; margin-bottom: 1.6rem; }
.sig-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.2rem; }
.sig-tag {
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244,238,226,0.9); border: 1px solid rgba(244,238,226,0.24); border-radius: 999px;
  padding: 0.42rem 0.9rem; background: rgba(244,238,226,0.05); backdrop-filter: blur(2px);
}
.sig-cta-row { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.sig-link { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--cream); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0.9; transition: gap 0.25s, opacity 0.25s; }
.sig-link:hover { opacity: 1; gap: 0.8rem; }
.sig-link-arrow { color: var(--green-bright); }

@media (max-width: 820px) {
  .signature { min-height: 88vh; }
  .signature-inner { padding: 5rem 1.4rem; }
  .sig-cam, .sig-corner { display: none; }
  .sig-scrim { background: linear-gradient(to top, rgba(15,10,6,0.95) 0%, rgba(15,10,6,0.55) 45%, rgba(15,10,6,0.35) 100%); }
}

/* ── §1b SOBRE NÓS (bloco verde de respiro) ─────────────────────── */
.sobre { background: var(--green-deep); color: var(--cream); overflow: hidden; }
.sobre-inner {
  max-width: 1200px; margin: 0 auto; padding: 6rem 2rem;
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 4rem; align-items: center;
}
.sobre-media { position: relative; }
.sobre-media img {
  width: 100%; height: 100%; max-height: 560px; object-fit: cover; display: block;
  border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  filter: brightness(0.9);
}
.section-eyebrow.on-green { color: var(--green-bright); }
.sobre-title {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.02; color: var(--cream); margin: 1.2rem 0 1.4rem;
}
.sobre-desc {
  font-family: var(--font-body); font-size: 0.98rem; line-height: 1.9;
  color: rgba(243,236,223,0.72); max-width: 520px; margin-bottom: 2.2rem;
}
.sobre-desc em { font-style: italic; opacity: 0.6; }
.sobre-facts { display: flex; gap: 3rem; margin-bottom: 2.2rem; }
.sobre-fact { display: flex; flex-direction: column; gap: 0.35rem; }
.sobre-fact-num {
  font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--green-bright);
}
.sobre-fact-label {
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(243,236,223,0.6);
}

/* ── §3.5 GRUPO VIP (comunidade WhatsApp — bloco escuro premium) ──── */
.vip { position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, #17110d 0%, transparent 60%),
    linear-gradient(180deg, #0E0B0A 0%, #120D0A 100%);
  color: var(--cream); }
.vip-glow { position: absolute; z-index: 0; right: 4%; top: 50%; width: min(560px, 60vw); height: min(560px, 60vw);
  transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(34,184,90,0.18) 0%, rgba(34,184,90,0.06) 40%, transparent 70%);
  filter: blur(6px); }
.vip-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
  padding: 6.5rem 2rem; display: grid; grid-template-columns: 1fr 0.82fr; gap: 4.5rem; align-items: center; }

.vip-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; }
.vip-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright);
  box-shadow: 0 0 12px rgba(34,184,90,0.8); animation: recBlink 1.6s ease-in-out infinite; }
.vip-title { font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.02; color: var(--cream); margin: 1.1rem 0 1.3rem; }
.vip-title em { color: var(--green-bright); }
.vip-desc { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.85;
  color: rgba(243,236,223,0.72); max-width: 500px; margin-bottom: 1.8rem; }
.vip-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 2.1rem; }
.vip-list li { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-body);
  font-size: 0.92rem; color: rgba(243,236,223,0.82); }
.vip-check { position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(34,184,90,0.14); border: 1px solid rgba(34,184,90,0.5); }
.vip-check::after { content: ''; position: absolute; left: 6.5px; top: 3px; width: 4px; height: 8px;
  border: solid var(--green-bright); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.vip-cta-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.vip-cta { display: inline-flex; align-items: center; gap: 0.6rem; text-indent: 0; }
.vip-wa-ico { flex-shrink: 0; }
.vip-free { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(243,236,223,0.5); }

/* mockup de celular / conversa do WhatsApp */
.vip-visual { display: flex; justify-content: center; }
.vip-card { position: relative; width: min(340px, 84vw); border-radius: 22px; overflow: hidden;
  background: #0b141a; border: 1px solid rgba(243,236,223,0.1);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 2px 0 rgba(243,236,223,0.05) inset;
  display: flex; flex-direction: column; animation: vip-float 6s ease-in-out infinite; }
.vip-chat-head { display: flex; align-items: center; gap: 0.65rem; padding: 0.9rem;
  background: var(--green-deep); }
.vip-chat-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--green-bright); color: #08120c; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; display: flex; align-items: center; justify-content: center; }
.vip-chat-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.vip-chat-name { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--cream); }
.vip-chat-sub { font-family: var(--font-body); font-size: 0.62rem; color: rgba(243,236,223,0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vip-chat-wa { margin-left: auto; color: var(--green-bright); display: flex; }
.vip-chat-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  padding: 1.1rem 0.9rem;
  background:
    radial-gradient(circle at 20% 15%, rgba(34,184,90,0.05), transparent 40%),
    #0b141a; }
.vip-chat-day { align-self: center; margin-bottom: 0.25rem; padding: 0.22rem 0.65rem; border-radius: 6px;
  background: rgba(34,184,90,0.14); color: rgba(243,236,223,0.72);
  font-family: var(--font-body); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; }
.vip-bubble { position: relative; max-width: 82%; padding: 0.55rem 0.8rem; border-radius: 10px 10px 10px 3px;
  background: var(--cream); color: #1C1712; font-family: var(--font-body); font-size: 0.78rem; line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.vip-bubble { padding-bottom: 0.9rem; }
.vip-bubble::after { content: '12:0' attr(data-b); position: absolute; right: 8px; bottom: 3px;
  font-size: 0.5rem; color: rgba(28,23,18,0.4); }
.vip-chat-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem;
  background: #111b21; border-top: 1px solid rgba(243,236,223,0.06); }
.vip-input-pill { flex: 1; padding: 0.5rem 0.85rem; border-radius: 18px; background: #1f2c33;
  font-family: var(--font-body); font-size: 0.72rem; color: rgba(243,236,223,0.4); }
.vip-input-send { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--green-bright);
  color: #08120c; display: flex; align-items: center; justify-content: center; }
@keyframes vip-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── SORTEIO MENSAL (popup depois do carro-chefe) ──────────────────
   Overlay fixo, acima de tudo (inclusive a nav). Disparado 1x por main.js
   via ScrollTrigger no #carrochefe; fechar/enviar grava no localStorage
   pra não incomodar de novo. */
.sorteio-modal { position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center; padding: 1.5rem; }
/* ⚠️ OBRIGATÓRIO — NÃO REMOVER: o `display:flex` acima é regra de CLASSE e vence
   o `display:none` que o navegador aplica pelo atributo [hidden]. Sem esta linha
   o popup ignora o hidden: aparece já no hero e NÃO FECHA de jeito nenhum (nem
   no X, nem no ESC, nem ao enviar) — o JS marca hidden e o CSS segue mostrando.
   Mesma pegadinha que já mordeu a modal do admin (ver admin.css). */
.sorteio-modal[hidden] { display: none; }
.sorteio-backdrop { position: absolute; inset: 0; background: rgba(12,9,8,0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sorteio-card { position: relative; z-index: 1; width: 100%; max-width: 420px;
  max-height: calc(100vh - 3rem); overflow-y: auto;
  /* barra de rolagem escondida (pedido do Vitor) — o conteúdo ainda rola no
     dedo/roda, mas sem a barra feia cortando o card. Por isso o espaçamento
     abaixo é apertado: em tela curta o form tem que caber SEM precisar rolar. */
  scrollbar-width: none; -ms-overflow-style: none;
  /* segura o scroll dentro do card: chegando no fim, não "vaza" pra página */
  overscroll-behavior: contain;
  background: var(--paper-2); border-radius: 16px; padding: 1.7rem 1.6rem;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5); }
.sorteio-card::-webkit-scrollbar { display: none; }
.sorteio-close { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: transparent; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--muted); transition: background 0.2s, color 0.2s; }
.sorteio-close:hover { background: rgba(28,23,18,0.06); color: var(--ink-2); }
.sorteio-title { font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 1.85rem); line-height: 1.05; color: var(--ink-2); margin: 0.45rem 0 0.5rem; }
.sorteio-title em { color: var(--green-ink); font-style: italic; }
.sorteio-desc { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.5;
  color: var(--muted); margin-bottom: 1.1rem; }
.sorteio-card .form-row { margin-bottom: 0.75rem; }
.sorteio-card label { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.3rem; display: block; }
.sorteio-card input, .sorteio-card select {
  font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line-dark); border-radius: 7px; padding: 0.58rem 0.8rem;
  width: 100%; transition: border-color 0.2s;
}
.sorteio-card input:focus, .sorteio-card select:focus { outline: none; border-color: var(--green-ink); }
.sorteio-nasc-row { display: flex; gap: 0.7rem; }
.sorteio-nasc-row select { flex: 1; min-width: 0; }
.sorteio-consent { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.2rem 0 0.9rem;
  cursor: pointer; }
.sorteio-consent input { width: auto; flex-shrink: 0; margin-top: 0.2rem; accent-color: var(--green-ink); }
.sorteio-consent span { font-family: var(--font-body); font-size: 0.76rem; line-height: 1.5;
  color: var(--muted); text-transform: none; letter-spacing: 0; }
.sorteio-submit { width: 100%; border: none; }
.sorteio-msg { font-family: var(--font-body); font-size: 0.85rem; margin-top: 0.9rem;
  padding: 0.7rem 0.9rem; border-radius: 7px; }
.sorteio-msg.ok  { background: rgba(22,163,74,0.12); color: var(--green-ink); }
.sorteio-msg.err { background: rgba(224,64,47,0.1); color: #b3271a; }
@media (max-width: 480px) { .sorteio-card { padding: 1.5rem 1.3rem; } }

/* TELA CURTA (janela baixa / celular deitado): aperta mais ainda pro form
   caber inteiro sem rolar — com a barra escondida, conteúdo cortado passa
   despercebido, então é melhor ele caber de verdade. */
@media (max-height: 700px) {
  .sorteio-card { padding: 1.3rem 1.5rem; }
  .sorteio-title { font-size: clamp(1.25rem, 3.6vw, 1.55rem); margin: 0.35rem 0 0.4rem; }
  .sorteio-desc { font-size: 0.8rem; line-height: 1.45; margin-bottom: 0.85rem; }
  .sorteio-card .form-row { margin-bottom: 0.55rem; }
  .sorteio-card label { font-size: 0.62rem; margin-bottom: 0.22rem; }
  .sorteio-card input, .sorteio-card select { padding: 0.48rem 0.75rem; font-size: 0.85rem; }
  .sorteio-consent { margin: 0.15rem 0 0.7rem; }
  .sorteio-consent span { font-size: 0.72rem; line-height: 1.4; }
  .sorteio-close { top: 0.6rem; right: 0.6rem; }
}

/* ── §2 O PROCESSO — carrossel horizontal fixado (pinned) ───────── */
/* Substitui os antigos counters de KPI. Conta o craft: massa → molho → forno.
   Mundo claro (paper) + linguagem de câmera do hero. Fotos 01/02 = placeholder. */
/* overflow: clip (não `hidden`) — clipa o excesso SEM virar container de scroll,
   senão quebra o position:sticky do carrossel (.proc-h). Mesmo truque do body/hero. */
.processo { background: var(--paper); position: relative; overflow: clip; }

/* trilho alto que dá o "scroll" pro carrossel; a .proc-h fica sticky por cima
   (idêntico ao hero — sem pin do GSAP, sem espaçador frágil). 4 painéis =
   3×100vw de deslocamento → 400vh dá um mapeamento ~1:1 com o scroll. */
.proc-scroll { position: relative; height: 400vh; }
.proc-h { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--paper); }
.proc-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.proc-track { display: flex; height: 100vh; will-change: transform; }
.proc-panel { position: relative; width: 100vw; height: 100vh; flex: 0 0 100vw; display: flex; align-items: center; }

/* HUD topo (herda a câmera do hero) */
.proc-hud-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; justify-content: space-between; padding: 104px 4rem 0;
  font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted);
}
.proc-hud-top .rec { display: flex; align-items: center; gap: 0.5rem; }
.proc-hud-top .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.proc-corner { position: absolute; width: 24px; height: 24px; z-index: 8; border-color: var(--line-dark); border-style: solid; border-width: 0; }
.proc-corner.tl { top: 98px; left: 30px; border-top-width: 1.5px; border-left-width: 1.5px; }
.proc-corner.tr { top: 98px; right: 30px; border-top-width: 1.5px; border-right-width: 1.5px; }
.proc-corner.bl { bottom: 84px; left: 30px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.proc-corner.br { bottom: 84px; right: 30px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* abertura */
.proc-intro { flex-direction: column; justify-content: center; padding-left: clamp(2rem, 8vw, 9rem); }
.proc-eyebrow { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 1.4rem; }
.proc-intro-title { font-family: var(--font-display); font-weight: 700; line-height: 0.92; font-size: clamp(3.4rem, 9vw, 9rem); letter-spacing: -0.01em; color: var(--ink-2); }
.proc-intro-title em { font-style: italic; color: var(--green-ink); }
.proc-hint { margin-top: 2.2rem; display: flex; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.proc-arrow { width: 46px; height: 1px; background: var(--muted); position: relative; }
.proc-arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(45deg); }

/* capítulos */
.proc-media { position: relative; width: 52%; height: 100%; flex: 0 0 52%; overflow: hidden; }
.proc-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.02); }
.proc-media-fade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, var(--paper) 100%); }
.proc-ph { position: absolute; left: 20px; top: 20px; z-index: 3; background: rgba(12,9,8,0.72); color: var(--cream); font-family: var(--font-body); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; border-radius: 2px; max-width: 70%; }
.proc-ph b { color: var(--green-bright); font-weight: 600; }
.proc-num { position: absolute; bottom: clamp(78px, 11vh, 120px); left: 50%; transform: translateX(-50%); z-index: 4; font-family: var(--font-display); font-weight: 700; font-size: clamp(7rem, 15vw, 15rem); line-height: 0.78; color: transparent; -webkit-text-stroke: 1.6px rgba(243,236,223,0.55); user-select: none; pointer-events: none; }

.proc-text { width: 48%; flex: 0 0 48%; padding: 0 clamp(2.5rem, 6vw, 7rem); position: relative; }
.proc-inner { position: relative; z-index: 1; max-width: 460px; }
.proc-label { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green-ink); font-weight: 600; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.75rem; }
.proc-label .proc-tick { width: 26px; height: 1px; background: var(--green); }
.proc-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 4.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.01em; margin-bottom: 1.4rem; color: var(--ink-2); }
.proc-title em { font-style: italic; color: var(--green-ink); }
.proc-desc { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--muted); font-weight: 300; max-width: 400px; }
.proc-meta { margin-top: 1.6rem; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); opacity: 0.6; }

.proc-chap.flip { flex-direction: row-reverse; }
.proc-chap.flip .proc-media-fade { background: linear-gradient(270deg, transparent 60%, var(--paper) 100%); }

/* scrubber inferior (herda do hero) */
.proc-scrub { position: absolute; left: 4rem; right: 4rem; bottom: 40px; z-index: 8; display: flex; align-items: center; gap: 1.2rem; }
.proc-scrub-cap { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.proc-scrub-cap b { color: var(--ink-2); }
.proc-scrub-track { flex: 1; height: 2px; background: var(--line-dark); position: relative; }
.proc-scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--green); }
.proc-scrub-name { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* dois marquees em direções opostas (sabores → esquerda, frases → direita) */
.marquee-wrap { position: relative; z-index: 2; overflow: hidden; padding: 3rem 0; border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 1.3rem; }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 32s linear infinite; white-space: nowrap; }
.marquee-track.reverse { animation-duration: 40s; animation-direction: reverse; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  color: var(--ink-2); opacity: 0.55; flex-shrink: 0; display: flex; align-items: center; gap: 3.5rem;
}
/* 2ª linha (volta pra direita): frases em sans maiúsculo, contraste com os sabores */
.marquee-track.reverse .marquee-item { font-family: var(--font-body); font-style: normal; font-size: clamp(0.8rem, 1.5vw, 1.1rem); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.42; gap: 2.4rem; }
.marquee-track.reverse .marquee-dot { background: var(--ink-2); opacity: 0.3; }
.marquee-dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; display: inline-block; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── §0.5 FAIXA DE PARCEIROS (logos, logo abaixo do hero) ───────── */
.clube-strip { background: var(--paper); padding: 2.6rem 0 2.4rem; border-bottom: 1px solid var(--line-dark); text-align: center; }
.clube-strip[hidden] { display: none; }
.clube-strip-eyebrow { display: inline-block; margin-bottom: 1.5rem; font-family: var(--font-body);
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--green-ink);
  text-decoration: none; opacity: 0.85; transition: opacity 0.3s; }
.clube-strip-eyebrow:hover { opacity: 1; }
.clube-strip-carousel { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clube-strip-track { display: flex; gap: 2.2rem; width: max-content; align-items: center;
  animation: clube-scroll 38s linear infinite; }
.clube-strip-carousel:hover .clube-strip-track { animation-play-state: paused; }
.clube-strip[data-loading] .clube-strip-track { animation: none; }
.clube-strip-logo {
  flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--line-dark);
  box-shadow: 0 1px 3px rgba(28,23,18,0.05); transition: transform 0.35s ease, border-color 0.35s;
}
.clube-strip-logo:hover { transform: translateY(-3px); border-color: rgba(22,163,74,0.4); }
.clube-strip-logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; }
.clube-strip-logo .clube-logo-ph {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 1.8rem; color: var(--green-ink); opacity: 0.6;
}

/* ── §3 CLUBE DE BENEFÍCIOS (carrossel de parceiros — Supabase) ──── */
.clube { background: var(--paper); padding: 7rem 0 8rem; }
.clube-header { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; padding: 0 2rem; }

/* carrossel infinito (mesma mecânica dos marquees). máscara nas bordas p/ fade. */
.clube-carousel {
  position: relative; overflow: hidden; padding: 1rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clube-track { display: flex; gap: 1.4rem; width: max-content; animation: clube-scroll 46s linear infinite; }
.clube-carousel:hover .clube-track { animation-play-state: paused; }
@keyframes clube-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* carrossel vazio (loading / sem dados): não anima e não mostra faixa */
.clube-carousel[data-loading] .clube-track,
.clube-carousel[data-empty]   .clube-track { animation: none; }

.clube-p-card {
  flex: 0 0 auto; width: 250px; box-sizing: border-box;
  background: var(--paper-2); border: 1px solid var(--line-dark); border-radius: 10px;
  padding: 1.6rem; box-shadow: 0 1px 2px rgba(28,23,18,0.04);
  transition: transform 0.35s ease, box-shadow 0.35s, border-color 0.35s;
}
.clube-p-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(28,23,18,0.12); border-color: rgba(22,163,74,0.4); }
.clube-logo {
  height: 80px; border-radius: 8px; margin-bottom: 1.2rem; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #efe7d8; border: 1px solid var(--line-dark);
}
.clube-logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }
.clube-logo .clube-logo-ph {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 2rem; color: var(--green-ink); opacity: 0.6;
}
.clube-tag { font-family: var(--font-body); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--green-ink); }
.clube-card-name { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--ink-2); margin: 0.4rem 0 0.6rem; line-height: 1.15; }
.clube-benefit { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--green-ink); }
.clube-benefit em { font-style: italic; font-weight: 400; color: var(--muted); }

.clube-empty { text-align: center; max-width: 520px; margin: 1rem auto 0; padding: 0 2rem;
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--muted); }
.clube-cta { text-align: center; margin-top: 3rem; }
.clube-cta-hint {
  font-family: var(--font-body); font-size: 0.8rem; color: var(--muted);
  margin-top: 0.9rem;
}

/* ── Cards do carrossel viram BOTÃO (abrem o modal do parceiro) ──────
   Só os da home (#clube-track). Os cards do clube.html (.clubep-grid)
   seguem sendo <article> estático e não podem herdar nada disto. */
#clube-track .clube-p-card {
  position: relative; text-align: left; font: inherit; color: inherit;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
#clube-track .clube-p-card:focus-visible {
  outline: 2px solid var(--green-ink); outline-offset: 3px;
}
/* pista de "dá pra clicar" — no touch fica sempre visível, já que não há hover */
.clube-card-more {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  margin-top: 1rem; padding: 0.5rem 0.7rem; border-radius: 999px;
  background: rgba(15,81,50,0.08); color: var(--green-ink);
  font-family: var(--font-body); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.25s, opacity 0.25s, transform 0.25s;
}
.clube-card-more svg { width: 14px; height: 14px; }
@media (hover: hover) {
  /* onde existe mouse, a pista só aparece no hover/foco (card fica limpo) */
  .clube-card-more { opacity: 0; transform: translateY(4px); }
  #clube-track .clube-p-card:hover  .clube-card-more,
  #clube-track .clube-p-card:focus-visible .clube-card-more { opacity: 1; transform: none; }
}

/* ── MODAL DO PARCEIRO (home) ────────────────────────────────────── */
.pmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.pmodal[hidden] { display: none; }
.pmodal-backdrop { position: absolute; inset: 0; background: rgba(18,61,44,0.55); backdrop-filter: blur(3px); animation: pmodal-fade 0.2s ease; }
.pmodal-box {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  max-height: calc(100vh - 3rem); overflow-y: auto;
  background: var(--paper-2); border: 1px solid var(--line-dark); border-radius: 14px;
  padding: 1.8rem; box-shadow: 0 24px 60px rgba(28,23,18,0.28);
  animation: pmodal-in 0.25s cubic-bezier(0.16,1,0.3,1);
}
.pmodal-x {
  position: absolute; top: 0.8rem; right: 0.8rem; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-dark); border-radius: 50%;
  color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.pmodal-x:hover { color: var(--green-ink); border-color: var(--green-ink); background: rgba(15,81,50,0.06); }
.pmodal-x svg { width: 17px; height: 17px; }
/* o card do modal reusa os .pc-* do clube.html, só solta a largura fixa */
.pmodal-body .clube-p-card.pc {
  width: auto; display: flex; flex-direction: column; padding: 0;
  background: none; border: none; box-shadow: none; border-radius: 0;
}
.pmodal-body .clube-p-card.pc:hover { transform: none; box-shadow: none; }
@keyframes pmodal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmodal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
/* trava o scroll do fundo enquanto o modal está aberto */
body.pmodal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pmodal-backdrop, .pmodal-box { animation: none; }
  .clube-card-more { transition: none; }
}

/* ── §4 ONDE ENTREGAMOS (bloco verde + mapa animado) ────────────── */
.entrega { background: var(--green-deep); color: var(--cream); position: relative; overflow: hidden; }
.entrega-inner {
  max-width: 1200px; margin: 0 auto; padding: 6.5rem 2rem;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: center;
}
.entrega-head { max-width: 460px; margin: 0 0 2rem; }
.entrega-title {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; color: var(--cream); margin: 1.2rem 0 1.2rem;
}
.entrega-desc { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.8; color: rgba(243,236,223,0.72); max-width: 420px; }
/* lista de cidades */
.entrega-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin: 0 0 2.2rem; max-width: 430px; }
.entrega-list li { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(243,236,223,0.1); }
.entrega-list li:last-child { border-bottom: none; }
.entrega-list .mk { width: 9px; height: 9px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 12px rgba(34,184,90,0.7); flex-shrink: 0; }
.entrega-list .city { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.4rem; color: var(--cream); }
.entrega-list .mode { margin-left: auto; font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243,236,223,0.55); }
/* mapa real do Google (retirada — clicar e traçar rota) */
.entrega-map { position: relative; }
.map-embed { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(243,236,223,0.16); box-shadow: 0 20px 50px rgba(0,0,0,0.35); aspect-ratio: 4 / 3; background: #1a1512; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.entrega-dir { margin-top: 1.1rem; }
.map-svg { width: 100%; height: auto; overflow: visible; }
.muni-fill { fill: rgba(34,184,90,0.10); }
.muni.hub .muni-fill { fill: rgba(34,184,90,0.20); }
.muni-line { fill: none; stroke: rgba(243,236,223,0.45); stroke-width: 1.5; stroke-linejoin: round; }
.muni.hub .muni-line { stroke: rgba(243,236,223,0.88); stroke-width: 2; }
.muni-dot { fill: var(--green-bright); }
.muni.hub .muni-dot { fill: var(--cream); }
.hub-pulse { fill: rgba(243,236,223,0.35); }
.map-river { fill: none; stroke: rgba(150,200,220,0.42); stroke-width: 2.5; stroke-linecap: round; }
.map-label { font-family: var(--font-display); font-style: italic; font-size: 18px; fill: var(--cream); }
.map-label.lg { font-size: 22px; }
.map-sub { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(243,236,223,0.6); }

@media (max-width: 820px) {
  .entrega-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .entrega-map { order: 1; max-width: 480px; margin: 0 auto; width: 100%; }
  .entrega-head, .entrega-list, .entrega-desc { max-width: none; }
}

/* ── RODAPÉ ─────────────────────────────────────────────────────── */
.site-footer { background: #0F0C0A; color: var(--cream); padding: 6rem 2rem 2.5rem; position: relative; overflow: hidden; }
/* marca-d'água de pizza: sangra da direita e DISSOLVE pro centro (sem borda,
   igual o fade do carrossel). Trocar o src da <img> quando quiser outra foto. */
.footer-watermark {
  position: absolute; right: 0; top: 0; width: 66%; height: 100%;
  object-fit: cover; object-position: center; opacity: 0.28;
  filter: contrast(1.04) saturate(1.06);
  z-index: 1; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to left, #000 6%, transparent 80%);
          mask-image: linear-gradient(to left, #000 6%, transparent 80%);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem;
  position: relative; z-index: 2;
}
.footer-logo { height: 40px; width: auto; display: block; margin-bottom: 1.2rem; }
.footer-tagline { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.7; color: rgba(243,236,223,0.5); max-width: 320px; margin-bottom: 1rem; }
.footer-ig { display: inline-flex; align-items: center; color: var(--green-bright); text-decoration: none; transition: color 0.2s, transform 0.2s; }
.footer-ig:hover { color: var(--cream); transform: translateY(-1px); }
.footer-col h4 { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(243,236,223,0.45); margin-bottom: 1.2rem; }
/* :not(.btn) — sem isso, esta regra genérica (que tem 1 elemento a mais na
   seletor) ganha por especificidade do .btn-ember:hover do botão "Ver
   cardápio" no footer-order: o texto virava verde e o botão esticava
   (display:block) em vez do inline-block normal do .btn. */
.footer-col a:not(.btn), .footer-muted {
  display: block; font-family: var(--font-body); font-size: 0.85rem; color: rgba(243,236,223,0.72);
  text-decoration: none; margin-bottom: 0.7rem; transition: color 0.2s;
}
.footer-col a:not(.btn):hover { color: var(--green-bright); }
.footer-muted em { font-style: italic; color: rgba(243,236,223,0.4); }
.footer-order .btn-ember { margin-top: 0.2rem; }
.footer-bottom {
  max-width: 1200px; margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(243,236,223,0.1);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 0.72rem; color: rgba(243,236,223,0.4);
  position: relative; z-index: 2;
}

/* ── RESPONSIVO ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 1.2rem 2rem; }
  .hud-title-block { max-width: 70vw; }
  .pizza-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(2) { border-right: none; }
  .craft-content { padding: 5rem 2rem; }
  .sobre-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .sobre-media { order: -1; }
  .sobre-media img { max-height: 380px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .vip-inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .vip-glow { display: none; }
}

/* ── CELULAR: hero vira FOTO ESTÁTICA (sem frame-scrub) ──────────────
   Casa com o guard HERO_MOBILE do main.js (≤700px). Sem o trilho de 300vh:
   o hero é UMA tela; o canvas/loader somem, a foto (#hero-bg) aparece. */
@media (max-width: 700px) {
  #hero-wrap { height: 100vh; height: 100svh; }
  #hero-sticky { position: relative; height: 100vh; height: 100svh; }
  #hero-canvas, #hero-loader { display: none; }
  #hero-bg { display: block; }
  .hud-scrubber-area, .hud-bottom-right { display: none; }

  /* Foto própria pro celular (frame_0075: a pizza inteira enquadrada,
     sem os potes/pano da mesa que sobravam nas laterais em telas estreitas)
     + SEM o escurecimento uniforme de 50% do desktop: a foto fica vívida lá
     em cima, e só a faixa onde o texto senta é que escurece (gradiente de
     baixo pra cima), em vez de escurecer a imagem inteira igual. */
  #hero-bg {
    background-image: url('../hero-webp/frame_0075.webp?v=1');
    filter: none;
  }
  #hero-hud::before {
    background: linear-gradient(
      to bottom,
      transparent 0%, transparent 38%,
      rgba(12,9,8,0.5) 62%, rgba(12,9,8,0.92) 100%
    );
  }
  .hud-title-block { top: auto; bottom: 118px; transform: none; }
}
@media (max-width: 640px) {
  nav { padding: 0.9rem 1.25rem; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-drawer { display: flex; }

  .hud-top-bar { padding: 0 1rem; }
  .hud-camera-info { display: none; }
  .hud-product-label { font-size: 0.5rem; letter-spacing: 0.1em; }
  .hud-title-block { left: 1.25rem; right: 1.25rem; max-width: none; }
  .hud-main-title { font-size: clamp(3rem, 17vw, 4.5rem); }
  .hud-craft-label { font-size: 0.5rem; }
  .hud-subtitle { font-size: clamp(1.3rem, 7vw, 2rem); }
  .hud-tagline { font-size: 0.55rem; }
  .hud-bottom { padding: 0 1rem; }
  .hud-bottom-right { display: none; }
  .hud-scrubber-area { display: none; }
  .hud-ruler { display: none; }
  .hud-scroll-wrap { display: none; }
  .hud-side-dot { display: none; }
  .btn { padding: 0.7rem 1.2rem; font-size: 0.62rem; }

  .pizzas { padding: 4rem 0 5rem; }
  .pizzas-header, .pizzas-cta { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* vitrine vira fileira que desliza no dedo, com snap (puro CSS, sem autoplay) */
  .pizza-grid {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 1.25rem;
    padding: 0.5rem 1.25rem 1.5rem;
    scrollbar-width: none;               /* Firefox */
  }
  .pizza-grid::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

  .pizza-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .pizza-card-ph, .pizza-card img { aspect-ratio: 4/3; }

  /* carrossel do processo: empilha mídia/texto dentro de cada painel */
  .proc-chap, .proc-chap.flip { flex-direction: column; justify-content: center; }
  .proc-media, .proc-text { width: 100%; flex-basis: auto; }
  .proc-media { height: 42%; }
  .proc-text { padding: 1.6rem 1.25rem 0; }
  .proc-inner { max-width: none; }
  .proc-hud-top, .proc-corner { display: none; }
  .proc-scrub { left: 1.25rem; right: 1.25rem; bottom: 26px; }
  .proc-num { font-size: clamp(5rem, 22vw, 8rem); bottom: clamp(56px, 8vh, 90px); }
  .proc-intro { padding-left: 1.25rem; padding-right: 1.25rem; }
  .marquee-wrap { padding: 2.5rem 0; }
  .sobre-inner { padding: 4rem 1.25rem; }
  .sobre-facts { gap: 2rem; }
  .vip-inner { padding: 4.5rem 1.25rem; gap: 2.2rem; }
  .vip-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .vip-card { width: 100%; max-width: 360px; }
  .clube { padding: 4rem 0 5rem; }
  .clube-p-card { width: 210px; }
  .entrega-inner { padding: 4.5rem 1.25rem; }
  .entrega-cities { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; }
}

/* REDUCED MOTION removido de propósito (decisão do Vitor): as animações
   (marquee dos logos, carrossel, hero scrub, reveals) rodam sempre,
   mesmo com o SO/navegador do visitante pedindo "reduzir movimento". */

/* =====================================================================
   PÁGINA CLUBE (clube.html) — mesmo design system, mundo claro + verde
   ===================================================================== */
.page-light { background: var(--paper); color: var(--ink-2); }
nav .nav-links a.is-active { color: var(--green-ink); }
nav.scrolled .nav-links a.is-active { color: var(--green-ink); }

/* botão outline escuro (fundo claro) — reforço caso não exista variação de hover */
.btn-outline-dark:hover { border-color: var(--green-ink); color: var(--green-ink); }

/* ── BANNER (verde premium: grão + brasa + selo + ticker) ───────── */
.clubep-banner {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(34,184,90,0.12), transparent 55%),
    linear-gradient(180deg, #0f3626 0%, var(--green-deep) 55%, #0e3323 100%);
  color: var(--cream); padding: 9rem 2rem 0; position: relative; overflow: hidden;
}
/* vinheta nas bordas */
.clubep-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 160px rgba(0,0,0,0.45);
}
.clubep-banner-grain {
  position: absolute; inset: 0; z-index: 0; 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='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.clubep-banner-glow {
  position: absolute; top: -25%; right: -8%; width: 55%; height: 150%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(224,64,47,0.22), transparent 62%); filter: blur(6px);
}
.clubep-banner-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; position: relative; z-index: 2; padding-bottom: 3.5rem; }
.clubep-banner-title {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.0; color: var(--cream);
  margin: 0.4rem 0 1.3rem;
}
.clubep-banner-title .num { color: var(--green-bright); }
.tline { display: block; overflow: hidden; padding-bottom: 0.04em; }
.tline-in { display: block; }
.clubep-banner-lead { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.7; color: rgba(243,236,223,0.85); max-width: 520px; margin-bottom: 2rem; }
.clubep-banner-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* estado inicial da intro (JS anima; reduced-motion/no-JS mostram) */
.clubep-intro { opacity: 0; }
.clubep-banner-lead.clubep-intro, .clubep-banner-cta.clubep-intro, .section-eyebrow.clubep-intro { transform: translateY(18px); }
.tline-in.clubep-intro { transform: translateY(105%); opacity: 1; }
.clubep-banner-art.clubep-intro { transform: scale(0.92); }

/* arte: caixa REAL da Garage85 (reta, QR estampado) — maior, perspectiva, fundo de ingredientes */
.clubep-banner-art { position: relative; justify-self: center; width: min(540px, 92vw); aspect-ratio: 1.05; perspective: 1250px; }
/* Fundo de ingredientes atrás da caixa. ⚠️ HISTÓRIA IMPORTANTE: isto já sumiu uma
   vez porque `assets/img/clube-ingredients.jpg` existia NO DISCO mas nunca foi
   versionado no git — no deploy dava 404, e na época a correção foi remover a
   referência em vez de commitar o arquivo. Em 19/07/2026 a imagem foi versionada
   e o fundo restaurado. Se sumir de novo no ar mas aparecer local, a primeira
   coisa a checar é `git ls-files assets/img/clube-ingredients.jpg`. */
.clubep-banner-media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 66%; z-index: 1;
  background: url('../img/clube-ingredients.jpg') center right / cover no-repeat;
  opacity: 0.42; filter: brightness(0.72) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
  will-change: transform;
}
.clubep-box { position: relative; z-index: 1; width: 100%; height: 100%;
  transform: rotateY(-20deg) rotateX(5deg) rotateZ(-2deg);
  transform-style: preserve-3d; will-change: transform; }
.clubep-box-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 55px rgba(0,0,0,0.6)); }

/* ticker embaixo do banner */
.clubep-ticker { position: relative; z-index: 2; border-top: 1px solid rgba(243,236,223,0.12); overflow: hidden; }
.clubep-ticker-track { display: flex; width: max-content; animation: clube-scroll 34s linear infinite; }
.clubep-ticker-track span { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243,236,223,0.55); padding: 0.9rem 0; white-space: nowrap; }
.clubep-ticker-track i { color: var(--green-bright); font-style: normal; margin: 0 0.7rem; }

/* ── COMO FUNCIONA · ROTA DE ENTREGA (linha desenha no scroll) ──── */
.rota { padding: 5rem 2rem 5.5rem; max-width: 1120px; margin: 0 auto; }
.rota-track { position: relative; margin-top: 3rem; }
.rota-stops { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; z-index: 2; }
/* linha base tracejada + progresso verde, passando pelo centro dos nós (topo=32px) */
.rota-line, .rota-progress { position: absolute; left: 12.5%; right: 12.5%; top: 31px; height: 2px; z-index: 1; }
.rota-line { background-image: linear-gradient(90deg, var(--green-ink) 45%, transparent 45%); background-size: 12px 2px; opacity: 0.28; }
.rota-progress { right: auto; width: 75%; background: var(--green-ink); transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 10px rgba(22,163,74,0.5); }
.rota-stop { text-align: center; position: relative; padding: 0 0.5rem; }
.rota-ghost { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 5.5rem; line-height: 1; color: var(--green-ink); opacity: 0.08; z-index: 0; pointer-events: none; }
.rota-node {
  position: relative; z-index: 2; width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%;
  background: var(--paper-2); border: 2px solid rgba(22,163,74,0.35); color: var(--green-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.rota-node svg { width: 30px; height: 30px; }
.rota-node.is-lit { background: var(--green-ink); border-color: var(--green-ink); color: var(--cream); transform: scale(1.08); box-shadow: 0 10px 26px rgba(15,81,50,0.3), 0 0 0 6px rgba(22,163,74,0.12); }
.rota-text { position: relative; z-index: 2; }
.rota-step { display: inline-block; font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 0.35rem; opacity: 0.75; }
.rota-stop h3 { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.45rem; color: var(--ink-2); margin: 0.1rem 0 0.5rem; }
.rota-stop p { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.6; color: var(--muted); max-width: 220px; margin: 0 auto; }

/* ── GRADE DE PARCEIROS + FILTRO ────────────────────────────────── */
.clubep-parceiros { padding: 3rem 2rem 6rem; max-width: 1200px; margin: 0 auto; }
.clubep-parceiros-head { text-align: center; max-width: 640px; margin: 0 auto 2.4rem; }
.clubep-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 3rem; }
.clube-chip {
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.6rem 1.15rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line-dark);
  transition: all 0.2s;
}
.clube-chip:hover { border-color: var(--green-ink); color: var(--green-ink); }
.clube-chip.is-active { background: var(--green-ink); color: var(--paper-2); border-color: var(--green-ink); }

.clubep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; min-height: 120px; }
.clubep-grid[data-loading]::after {
  content: 'Carregando parceiros…'; grid-column: 1 / -1; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--muted); padding: 2rem 0;
}
/* na grade, o card ocupa a coluna inteira (sobrescreve a largura fixa do carrossel da home) */
/* card cheio da grade (formato da referência) */
.clubep-grid .clube-p-card.pc { width: auto; display: flex; flex-direction: column; padding: 1.5rem; }
.pc-head { display: flex; align-items: center; gap: 0.9rem; }
.pc-logo { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #efe7d8; border: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: center; }
.pc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pc-logo .clube-logo-ph { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.5rem; color: var(--green-ink); }
.pc-name { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--ink-2); line-height: 1.05; }
.pc-tag { display: inline-block; margin-top: 0.35rem; font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-ink); background: rgba(22,163,74,0.1); padding: 0.14rem 0.55rem; border-radius: 999px; }
.pc-contact { border-top: 1px solid var(--line-dark); margin-top: 1rem; padding-top: 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; }
.pc-row { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-size: 0.82rem; color: var(--muted); word-break: break-word; }
.pc-row svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--green-ink); }
.pc-block { border-top: 1px solid var(--line-dark); margin-top: 0.9rem; padding-top: 0.9rem; }
.pc-label { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 0.3rem; }
.pc-label svg { width: 15px; height: 15px; }
.pc-block p { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }
.pc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 1.1rem; }
.pc-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 0.6rem 0.7rem; border-radius: 7px; transition: all 0.2s; }
.pc-btn svg { width: 15px; height: 15px; }
.pc-btn-wa { background: var(--green-ink); color: var(--paper-2); border: 1px solid var(--green-ink); }
.pc-btn-wa:hover { background: #0c3f27; }
.pc-btn-ig { background: transparent; color: var(--ink-2); border: 1px solid var(--line-dark); }
.pc-btn-ig:hover { border-color: var(--green-ink); color: var(--green-ink); }
.clubep-empty { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--muted); padding: 2rem 0; }

/* ── CANDIDATURA (bloco verde + form) ───────────────────────────── */
.clubep-candidatura { background: var(--green-deep); color: var(--cream); padding: 5rem 2rem 6rem; }
.clubep-cand-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.clubep-cand-title { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1; margin: 0.4rem 0 1.2rem; }
.clubep-cand-desc { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.7; color: rgba(243,236,223,0.82); margin-bottom: 1.6rem; }
.clubep-cand-bullets { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.clubep-cand-bullets li { font-family: var(--font-body); font-size: 0.9rem; color: rgba(243,236,223,0.9); padding-left: 1.4rem; position: relative; }
.clubep-cand-bullets li::before { content: '✓'; position: absolute; left: 0; color: var(--green-bright); font-weight: 700; }

.clubep-form { background: var(--paper-2); border-radius: 14px; padding: 2rem; box-shadow: 0 20px 50px rgba(10,30,20,0.28); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-2 > div { display: flex; flex-direction: column; }
.clubep-form label { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.45rem; }
.form-hint { text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 0.72rem; }
.clubep-form input, .clubep-form select, .clubep-form textarea {
  font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line-dark); border-radius: 7px; padding: 0.7rem 0.85rem;
  width: 100%; transition: border-color 0.2s;
}
.clubep-form input:focus, .clubep-form select:focus, .clubep-form textarea:focus { outline: none; border-color: var(--green-ink); }
.clubep-form textarea { resize: vertical; }
.clubep-form input[type=file] { padding: 0.5rem; font-size: 0.8rem; color: var(--muted); }

/* prévia da logo que a pessoa escolheu no form */
.logo-preview { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.8rem;
  padding: 0.7rem; background: #fff; border: 1px solid var(--line-dark); border-radius: 8px; }
.logo-preview[hidden] { display: none; }
.logo-preview-chip { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #efe7d8; border: 1px solid var(--line-dark); }
.logo-preview-chip img { width: 100%; height: 100%; object-fit: contain; padding: 0.3rem; }
.logo-preview-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.logo-preview-name { font-family: var(--font-body); font-size: 0.8rem; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.logo-preview-warn { color: var(--green-ink); max-width: 260px; }
.logo-preview-warn[hidden] { display: none; }
.logo-preview-clear { align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ember);
  text-decoration: underline; }
.clubep-form-submit { width: 100%; margin-top: 0.4rem; border: none; }
.clubep-form-msg { font-family: var(--font-body); font-size: 0.85rem; margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 7px; }
.clubep-form-msg.ok  { background: rgba(22,163,74,0.12); color: var(--green-ink); }
.clubep-form-msg.err { background: rgba(224,64,47,0.1);  color: #b3271a; }

@media (max-width: 900px) {
  .clubep-banner-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .clubep-banner-lead { margin-left: auto; margin-right: auto; }
  .clubep-banner-cta { justify-content: center; }
  .clubep-banner-art { order: -1; width: min(260px, 62vw); }
  /* ── FUNDO DE INGREDIENTES NO CELULAR ──────────────────────────────
     ⚠️ SÓ AQUI DENTRO. No desktop o #clube-media é um painel de 66% da largura
     do banner e o `cover` quase não corta, porque lá o elemento fica quase
     quadrado (835x758) — aquilo está aprovado, NÃO MEXER.
     No celular o mesmo elemento virava uma tira ALTA E ESTREITA (248x854): o
     `cover` então ampliava a foto pela altura e mostrava só uma fatia central,
     o que fazia o fundo parecer zoom aleatório. Aqui ele vira um QUADRADO
     (imagem é 560x560, então quadrado = zero corte), largo o bastante pra
     sangrar além das bordas, centrado atrás da caixa.
     ⚠️ A centralização NÃO pode usar transform: o GSAP anima `yPercent` neste
     elemento e sobrescreveria um translateX. Ver a nota na regra abaixo. */
  #clube-media {
    /* ⚠️ o elemento é MAIS LARGO que a tela (sangra de propósito), e nesse caso
       `margin: 0 auto` NÃO centraliza — encosta à esquerda e joga tudo 34px pro
       lado. Por isso left:50% + margem negativa de metade da largura. */
    top: 0; left: 50%; right: auto; bottom: auto;
    margin: 0 0 0 calc(min(560px, 118vw) / -2);
    width: min(560px, 118vw); height: min(560px, 118vw);
    background-position: center center;
    /* máscara radial no lugar da lateral: some com os cantos e com a borda de
       baixo, pra não marcar retângulo nem linha reta no verde */
    -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 72%);
            mask-image: radial-gradient(circle at center, #000 40%, transparent 72%);
  }
  /* ⚠️ o brilho é radial-gradient(circle) com sizing farthest-corner: num elemento
     estreito o raio fica gigante e ele chega na borda AINDA opaco (medido: 74% a
     199px de 375) → corta reto e vira uma linha vertical no meio da tela. No
     desktop o elemento é largo e ele desbota antes da borda, por isso lá não
     aparece. Some no celular, igual .vip-glow faz neste mesmo breakpoint. */
  .clubep-banner-glow { display: none; }
}
@media (max-width: 800px) {
  .clubep-cand-inner { grid-template-columns: 1fr; gap: 2rem; }
  .clubep-banner { padding: 7.5rem 1.25rem 0; }
  /* rota vira vertical no celular */
  .rota-stops { grid-template-columns: 1fr; gap: 2.4rem; }
  .rota-line, .rota-progress { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; }
  .rota-line { background-image: linear-gradient(180deg, var(--green-ink) 45%, transparent 45%); background-size: 2px 12px; }
  .rota-progress { transform: scaleY(0); transform-origin: top center; }
  .rota-stop { display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem; text-align: left; align-items: start; padding: 0; }
  .rota-node { margin: 0; }
  .rota-ghost { left: 8px; top: -8px; transform: none; font-size: 3.4rem; }
  .rota-stop p { margin: 0; max-width: none; }
}
@media (max-width: 480px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ── §3 A GARAGEM (página história, a-garagem.html) ──────────────── */
.clubep-banner-inner.no-art { grid-template-columns: 1fr; max-width: 720px; text-align: center; margin: 0 auto; }
.clubep-banner-inner.no-art .clubep-banner-cta { justify-content: center; }
.clubep-banner-inner.no-art .clubep-banner-lead { margin-left: auto; margin-right: auto; }

/* fundo real do balcão (foto deles, desfocada) atrás do banner, com véu verde por cima */
.historia-hero-banner, .parceiros-hero-banner { background: #0e2a1d; }
.clubep-banner-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.clubep-banner-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.clubep-banner-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14,42,29,0.94) 0%, rgba(14,42,29,0.82) 34%, rgba(14,50,32,0.42) 68%, rgba(14,50,32,0.62) 100%),
    linear-gradient(180deg, rgba(14,42,29,0.25) 0%, rgba(14,42,29,0.55) 100%);
}

/* item real flutuando no banner (mesma vaga da caixa do Clube, sem perspectiva 3D) */
.clubep-banner-art.art-pizza { aspect-ratio: auto; width: min(460px, 84vw); perspective: none; }
.historia-pizza {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,0.55));
  transform: rotate(-3deg); animation: pizza-float 6.5s ease-in-out infinite;
}
@keyframes pizza-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-12px); }
}
/* variante da caixa em Parceiros: reta (sem giro), pra diferenciar do Kombi/História */
.parceiros-box { transform: rotate(0deg); animation: box-float 6.5s ease-in-out infinite; }
@keyframes box-float {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(0deg) translateY(-12px); }
}
@media (max-width: 820px) {
  .clubep-banner-art.art-pizza { width: min(280px, 66vw); }
}


.historia-block { padding: 6rem 2.4rem; max-width: 1160px; margin: 0 auto; }
.historia-block + .historia-block { padding-top: 0; }
.historia-block-head { margin-bottom: 2.4rem; max-width: 640px; }
.historia-step { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; display: block; }

.historia-ph {
  border: 1px dashed rgba(15,10,6,0.22); border-radius: 10px; background: rgba(15,10,6,0.03);
  min-height: 220px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 2rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); line-height: 1.6;
}

.historia-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.historia-gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 10px; display: block; }
.historia-gallery-cap { font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }

.historia-video-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; }
.historia-video-card { position: relative; border-radius: 14px; overflow: hidden; background: #0c0906; aspect-ratio: 9/16; max-width: 340px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.historia-video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.historia-video-text .section-eyebrow { margin-bottom: 1rem; }

/* feature: foto grande + texto (Cap 01 · placa; Cap 05 · hoje) */
.historia-feature { display: grid; grid-template-columns: 0.82fr 1fr; gap: 3.2rem; align-items: center; }
.historia-feature.flip .historia-feature-media { order: 2; }
.historia-feature-media img { width: 100%; height: 100%; max-height: 520px; object-fit: cover;
  border-radius: 12px; display: block; box-shadow: 0 22px 55px rgba(0,0,0,0.22); }
/* Cap. 01: a foto da placa é 1400x2489 (bem alta) e o slot é quase quadrado, então
   o `cover` esconde ~37% da vertical. Centralizado, a janela pegava de 18,5% a 81,5%
   da foto — cortava o topo da placa (que começa em ~9,5%) e sobrava rua vazia embaixo.
   Com 15% a janela vai de ~5,6% a ~68,5% e a placa inteira cabe (o pé da seta está em
   ~65,5%). ⚠️ Não usar `top`/0%: a janela fecharia em 62,9% e cortaria a seta.
   Escopado no #comeco de propósito — a outra .historia-feature-media é a fachada, que
   está bem enquadrada centralizada. */
#comeco .historia-feature-media img { object-position: center 15%; }
.historia-feature-text .btn, .historia-people-text .btn { margin-top: 1.6rem; }
.historia-feature-text .section-lead, .historia-feature-text .parceiro-desc { max-width: 460px; }

/* galeria de 4 retratos (o craft) */
.historia-gallery.quad { grid-template-columns: repeat(4, 1fr); }
.historia-gallery.quad img, .historia-gallery.tall img { height: 340px; }

/* pessoas: 2 retratos + texto */
.historia-people { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: 3rem; align-items: center; }
.historia-people-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.historia-people-media img { width: 100%; height: 360px; object-fit: cover; border-radius: 12px;
  display: block; box-shadow: 0 16px 40px rgba(0,0,0,0.18); }

@media (max-width: 820px) {
  .historia-block { padding: 4rem 1.4rem; }
  .historia-gallery { grid-template-columns: 1fr; }
  .historia-gallery img { height: 220px; }
  .historia-gallery.quad { grid-template-columns: 1fr 1fr; }
  .historia-gallery.quad img, .historia-gallery.tall img { height: 260px; }
  .historia-video-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .historia-feature, .historia-people { grid-template-columns: 1fr; gap: 1.8rem; }
  .historia-feature.flip .historia-feature-media { order: 0; }
  .historia-feature-media img { max-height: 420px; }
  .historia-people-media img { height: 300px; }
}
@media (max-width: 440px) {
  .historia-people-media img { height: 220px; }
  .historia-gallery.quad img, .historia-gallery.tall img { height: 220px; }
}

/* ── §4 PARCEIROS (página parceiros.html) ────────────────────────── */
.parceiro-card {
  display: grid; grid-template-columns: 160px 1fr; gap: 2.2rem; align-items: center;
  background: var(--paper-2); border-radius: 16px; padding: 2.4rem; max-width: 900px; margin: 0 auto;
  box-shadow: 0 12px 40px rgba(15,10,6,0.06);
}
.parceiro-logo-ph {
  width: 160px; height: 160px; border-radius: 50%; border: 1px dashed rgba(15,10,6,0.22);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem;
  font-family: var(--font-body); font-size: 0.7rem; color: var(--muted); line-height: 1.5; background: rgba(15,10,6,0.03);
}
.parceiro-logo {
  width: 160px; height: 160px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15,10,6,0.06); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.parceiro-logo img { width: 100%; height: 100%; object-fit: contain; padding: 1.3rem; }
.parceiro-cat { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 0.5rem; display: block; }
.parceiro-name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; margin-bottom: 0.6rem; }
.parceiro-desc { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.7; color: var(--ink-2); margin-bottom: 1.2rem; }
.parceiro-desc em { font-style: italic; opacity: 0.65; }
.parceiro-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.parceiros-soon { max-width: 900px; margin: 3.5rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.parceiro-soon-card {
  border: 1px dashed rgba(15,10,6,0.18); border-radius: 12px; padding: 2rem 1rem; text-align: center;
  font-family: var(--font-body); font-size: 0.8rem; color: var(--muted);
}

@media (max-width: 720px) {
  .parceiro-card { grid-template-columns: 1fr; text-align: center; padding: 2rem 1.4rem; }
  .parceiro-logo-ph { margin: 0 auto; }
  .parceiro-cta { justify-content: center; }
  .parceiros-soon { grid-template-columns: 1fr; }
}

/* =====================================================================
   PÁGINA EVENTOS (eventos.html) — encontro de carros antigos
   ===================================================================== */
.eventos-hero-banner { background: #0e2a1d; }

/* galeria: grid uniforme (as fotos vêm em proporções diferentes, o cover
   iguala) — cada item é <button> pra abrir no lightbox e ser acessível */
.evento-galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.evento-item {
  position: relative; padding: 0; border: none; cursor: pointer;
  background: #efe7d8; border-radius: 10px; overflow: hidden;
  aspect-ratio: 4 / 5; display: block;
  box-shadow: 0 1px 2px rgba(28,23,18,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s;
}
.evento-item img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease; }
.evento-item:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(28,23,18,0.18); }
.evento-item:hover img { transform: scale(1.06); }
.evento-item:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; }
/* lupa no hover, pra deixar claro que dá pra abrir */
.evento-item::after {
  content: '⤢'; position: absolute; right: 0.6rem; bottom: 0.6rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(12,9,8,0.72); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.evento-item:hover::after { opacity: 1; transform: translateY(0); }

/* ── LIGHTBOX ──────────────────────────────────────────────────────── */
.evento-lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,9,8,0.93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 3.5rem 1rem;
}
.evento-lightbox[hidden] { display: none; }
.evento-lb-img {
  max-width: min(1000px, 92vw); max-height: 86vh;
  object-fit: contain; border-radius: 8px; display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.evento-lb-close, .evento-lb-nav {
  position: absolute; background: rgba(243,236,223,0.1); border: 1px solid rgba(243,236,223,0.2);
  color: var(--cream); cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.evento-lb-close:hover, .evento-lb-nav:hover { background: rgba(243,236,223,0.2); border-color: var(--green-bright); }
.evento-lb-close { top: 1.2rem; right: 1.2rem; width: 42px; height: 42px; font-size: 1.6rem; line-height: 1; }
.evento-lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.8rem; line-height: 1; }
.evento-lb-nav.prev { left: 1.2rem; }
.evento-lb-nav.next { right: 1.2rem; }

@media (max-width: 900px) {
  .evento-galeria { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .evento-galeria { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .evento-lb-nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .evento-lb-nav.prev { left: 0.5rem; }
  .evento-lb-nav.next { right: 0.5rem; }
  .evento-lb-close { top: 0.8rem; right: 0.8rem; }
  .evento-lightbox { padding: 4rem 0.6rem; }
}