:root{
  --bg:#111;
  --panel:#0c0c0c;
  --ink:#e8eef2;
  --muted:#9aa6b2;
  --brand:#11c6bd;
  --wa:#25D366;
  --tile:#16181b;
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
img{max-width:100%;display:block}
.container{width:min(1200px,92vw);margin:0 auto}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid transparent;background:#1f2226;color:#fff;text-decoration:none;font-weight:700;box-shadow:var(--shadow);transition:transform .2s, filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-primary{background:var(--brand);color:#061416}
.btn-wa{background:var(--wa);color:#04140a}
.btn.wide{width:100%}

.topbar{background:#000;border-bottom:1px solid #1a1d20}
.topbar .bar{display:flex;align-items:center;justify-content:space-between;padding:10px 6px}
.logo{height:70px;width:auto;filter: drop-shadow(0 1px 0 rgba(0,0,0,.25))}

.hero{padding:34px 0 6px;text-align:center}
.hero h1{margin:0 0 6px;font-size:clamp(24px,4vw,42px)}
.hero p{margin:0;color:var(--muted)}

.main-grid{display:grid;grid-template-columns: 1fr 1.2fr;gap:22px;margin:18px auto 10px}
@media(max-width: 940px){.main-grid{grid-template-columns:1fr}}

.video-col{display:flex;flex-direction:column;gap:12px}
.video-frame{position:relative;aspect-ratio:6/9;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.video-frame video{width:100%;height:100%;object-fit:cover;display:block}
.video-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.65));font-weight:700}

.gallery-col{min-height:100%}
.masonry{columns:1;column-gap:14px}
@media(min-width:640px){.masonry{columns:2}}
@media(min-width:1080px){.masonry{columns:3}}
.tile{break-inside:avoid;background:var(--tile);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin:0 0 14px}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.tile:hover img{transform:scale(1.02)}

.chips{padding:12px 0}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{background:#1b1e22;border:1px solid #24282d;color:#dfe7ec;padding:8px 12px;border-radius:999px;box-shadow:var(--shadow)}

.gallery-expand{margin:10px auto 40px}

.footer{background:#000;border-top:1px solid #1a1d20;padding:24px 0}
.footer .foot{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.footer .foot-cta{display:flex;gap:10px;flex-wrap:wrap}
.footer .foot-info{color:#b7c2cc}
/* ======= HEADER MOBILE ======= */
@media (max-width: 768px) {
  /* Container do topo (a barra preta) */
  .topbar,
  header,
  .navbar,
  .site-header {
    position: sticky;           /* gruda no topo ao rolar */
    top: 0;
    z-index: 1000;
    background: #0f0f0f;        /* preto elegante */
    padding: calc(env(safe-area-inset-top, 0) + 10px) 16px 12px; /* espaço p/ notch */
  }

  /* Linha do cabeçalho passa a coluna */
  .topbar-inner,
  .navbar-inner,
  .header-inner {
    display: flex;
    flex-direction: column;     /* empilha */
    align-items: center;        /* centraliza */
    gap: 10px;                  /* espaço entre logo e botões */
  }

  /* LOGO maior e fluida */
  .brand,
  .logo,
  .site-logo {
    display: block;
    max-width: 220px;           /* ajuste fino do tamanho no celular */
    width: 100%;
  }
  .brand img,
  .logo img,
  .site-logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* CTA buttons em linha, mas com quebra se faltar espaço */
  .cta-group {
    display: flex;
    flex-wrap: wrap;            /* deixa quebrar p/ 2 linhas se necessário */
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  /* Botões mais compactos no mobile */
  .btn,
  .btn-primary,
  .btn-whatsapp {
    font-size: 16px;
    line-height: 1.1;
    padding: 12px 16px;
    border-radius: 999px;
  }
}

/* Opcional: mostrar uma faixa de CTAs fixa no rodapé em telas muito estreitas */
@media (max-width: 420px) {
  .cta-bottom-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15,15,15,0.95);
    padding: 12px 14px calc(env(safe-area-inset-bottom, 0) + 12px);
    display: flex;
    gap: 10px;
    justify-content: center;
    z-index: 999;
    backdrop-filter: saturate(130%) blur(4px);
  }
  .cta-bottom-bar .btn {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 220px;
  }
}