/* =============================================================
   Fanuel Henrique — Boteco Acústico / Rústico Chic
   Mobile-first. Sem build, sem framework.
   ============================================================= */

:root{
  /* superfícies */
  --bg:            #121212;
  --bg-2:          #18181b;
  --surface:       #1c1917;   /* marrom café profundo */
  --surface-2:     #24201c;
  --line:          rgba(245,239,230,.10);
  --line-strong:   rgba(245,239,230,.18);

  /* acentos */
  --amber:         #d97706;
  --amber-deep:    #b45309;
  --amber-soft:    #f0b429;
  --sunset:        #ea580c;
  --sand:          #f5efe6;
  --wa:            #25d366;

  /* texto */
  --text:          #f5efe6;
  --text-muted:    rgba(245,239,230,.66);
  --text-dim:      rgba(245,239,230,.44);

  /* tipografia */
  --font-display:  "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-serif:    "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:     "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* medidas */
  --wrap:          1120px;
  --pad:           clamp(20px, 5vw, 40px);
  --radius:        16px;
  --radius-lg:     24px;
  --shadow:        0 18px 48px rgba(0,0,0,.45);
  --shadow-amber:  0 12px 32px rgba(217,119,6,.28);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:78px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* textura de grão quente sobre tudo */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.32;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3{ margin:0; line-height:1.05; font-weight:600; }
p{ margin:0; }

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--amber); color:#1a1207; padding:12px 18px; font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--amber-soft); outline-offset:3px; border-radius:4px; }

/* ============ BOTÕES ============ */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:12px;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  cursor:pointer; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--amber{
  --btn-bg:linear-gradient(135deg, var(--amber-soft), var(--amber) 45%, var(--amber-deep));
  --btn-fg:#1a1207; --btn-bd:transparent;
  box-shadow:var(--shadow-amber);
}
.btn--amber:hover{ box-shadow:0 16px 40px rgba(217,119,6,.42); }

.btn--ghost{ --btn-bg:rgba(245,239,230,.04); backdrop-filter:blur(6px); }
.btn--ghost:hover{ --btn-bd:var(--sand); }

.btn--outline{ --btn-bd:var(--amber); --btn-fg:var(--amber-soft); }
.btn--outline:hover{ --btn-bg:rgba(217,119,6,.12); }

.btn--sm{ padding:9px 16px; font-size:.85rem; }
.btn--lg{ padding:16px 28px; font-size:1rem; }
.btn--block{ width:100%; }
.btn .ico{ width:20px; height:20px; fill:currentColor; }

/* ============ NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(18,18,18,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav__inner{ display:flex; align-items:center; gap:16px; height:66px; }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand__mark{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:11px; color:var(--amber-soft);
  background:linear-gradient(150deg, rgba(217,119,6,.22), rgba(217,119,6,.05));
  border:1px solid rgba(217,119,6,.32);
}
.brand__mark svg{ width:21px; height:21px; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text strong{
  font-family:var(--font-display); font-size:1.28rem; letter-spacing:.06em;
  font-weight:400; text-transform:uppercase;
}
.brand__text small{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
  white-space:nowrap; display:none;
}
@media (min-width:520px){ .brand__text small{ display:block; } }

/* --- menu mobile (dropdown) --- */
.nav__toggle{
  display:grid; place-content:center; gap:5px;
  width:42px; height:42px; flex:none; cursor:pointer;
  background:rgba(245,239,230,.05); border:1px solid var(--line); border-radius:12px;
}
.nav__toggle span{
  display:block; width:18px; height:2px; border-radius:2px; background:var(--text);
  transition:transform .25s ease, opacity .2s ease;
}
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__links{
  position:absolute; left:var(--pad); right:var(--pad); top:64px;
  display:grid; gap:2px; padding:10px;
  background:rgba(24,24,27,.97); backdrop-filter:blur(16px);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  font-size:.95rem; font-weight:500;
}
.nav.is-open .nav__links{ opacity:1; visibility:visible; transform:none; }
.nav__links a{ color:var(--text-muted); padding:12px 14px; border-radius:10px; }
.nav__links a:hover{ color:var(--text); background:rgba(245,239,230,.06); }
.nav__cta-mobile{ margin-top:8px; }
.nav__cta{ display:none; }

/* --- desktop: menu inline --- */
@media (min-width:900px){
  .nav__toggle,.nav__cta-mobile{ display:none; }
  .nav__cta{ display:flex; }
  .nav__links{
    position:static; display:flex; gap:26px; padding:0;
    background:none; border:0; box-shadow:none; backdrop-filter:none;
    opacity:1; visibility:visible; transform:none;
    font-size:.9rem;
  }
  .nav__links a{ position:relative; padding:4px 0; border-radius:0; }
  .nav__links a:hover{ background:none; }
  .nav__links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
    background:var(--amber); transition:right .25s ease;
  }
  .nav__links a:hover::after{ right:0; }
}

/* ============ HERO ============ */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh; display:flex; align-items:center;
  padding:104px 0 56px;
  overflow:hidden;
}
@media (min-width:900px){ .hero{ padding:110px 0 72px; } }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg picture{ display:block; width:100%; height:100%; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  /* celular: corte estreito que joga o rosto dele para a direita da tela,
     ao lado da coluna de texto */
  object-position:64% 30%;
  /* a foto é em P&B: um toque de sépia casa com o âmbar do resto do site */
  filter:sepia(.34) saturate(1.18) contrast(1.05);
}
/* celular: escurece a faixa da esquerda (onde fica o texto) e deixa
   a direita limpa, para o rosto dele aparecer ao lado */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,18,18,.30) 0%, rgba(18,18,18,.12) 26%, rgba(18,18,18,.90) 80%, var(--bg) 100%),
    linear-gradient(90deg, rgba(18,18,18,.94) 0%, rgba(18,18,18,.86) 42%, rgba(18,18,18,.20) 78%, rgba(18,18,18,.34) 100%);
}

@media (min-width:900px){
  .hero__bg img{ object-position:center 26%; }
  .hero__bg::after{
    background:
      linear-gradient(180deg, rgba(18,18,18,.42) 0%, rgba(18,18,18,.16) 24%, rgba(18,18,18,.94) 78%, var(--bg) 100%),
      linear-gradient(90deg, rgba(18,18,18,.88) 0%, rgba(18,18,18,.34) 62%, rgba(18,18,18,.6) 100%);
  }
}

/* luz de filamento */

.hero__glow{
  position:absolute; z-index:-1; right:-14%; top:6%;
  width:min(78vw,640px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(240,180,41,.30), rgba(217,119,6,.12) 42%, transparent 68%);
  filter:blur(14px);
  animation:flicker 7s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{ opacity:.85; transform:scale(1); }
  38%    { opacity:1;   transform:scale(1.04); }
  62%    { opacity:.72; transform:scale(.99); }
}

.hero__inner{ position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber-soft); font-weight:600;
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(217,119,6,.3); background:rgba(217,119,6,.08);
}
.so-md{ display:none; }
@media (min-width:560px){ .so-md{ display:inline; } }

.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--amber-soft);
  box-shadow:0 0 0 0 rgba(240,180,41,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(240,180,41,0); }
  100%{ box-shadow:0 0 0 0 rgba(240,180,41,0); }
}

/* no celular o texto ocupa só a coluna da esquerda — a direita fica pro artista.
   Botões e números seguem largos, já abaixo do rosto. */
.eyebrow,.hero__lead{ max-width:62%; }
.hero__title{ max-width:69%; }
@media (min-width:700px){ .eyebrow,.hero__title,.hero__lead{ max-width:none; } }

.hero__title{
  margin:18px 0 0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 7.1vw, 5.6rem);
  line-height:.94; letter-spacing:.012em; text-transform:uppercase;
  text-shadow:0 4px 24px rgba(0,0,0,.7);
}
@media (min-width:700px){
  .hero__title{ margin-top:22px; font-size:clamp(2.9rem, 8.4vw, 5.6rem); max-width:16ch; }
}
.hero__title em{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  text-transform:none; letter-spacing:-.01em;
  font-size:.82em;
  color:var(--amber-soft);
}

.hero__lead{
  margin-top:16px;
  font-size:.88rem; color:var(--text-muted);
}
@media (min-width:700px){
  .hero__lead{ margin-top:20px; max-width:46ch; font-size:clamp(1rem,2.4vw,1.12rem); }
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__cta .btn{ flex:1 1 240px; }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:12px 30px;
  list-style:none; margin:40px 0 0; padding:26px 0 0;
  border-top:1px solid var(--line);
}
.hero__facts li{ display:flex; flex-direction:column; }
.hero__facts strong{
  font-family:var(--font-display); font-size:1.9rem; font-weight:400;
  letter-spacing:.03em; color:var(--amber-soft); line-height:1;
}
.hero__facts span{ font-size:.78rem; color:var(--text-dim); letter-spacing:.04em; }

.hero__scroll{
  position:absolute; left:50%; bottom:22px; translate:-50% 0;
  width:26px; height:42px; border:1.5px solid var(--line-strong); border-radius:14px;
  display:none; place-items:start center; padding-top:8px;
}
.hero__scroll span{
  width:3px; height:8px; border-radius:2px; background:var(--amber-soft);
  animation:scrolldot 1.9s ease-in-out infinite;
}
@keyframes scrolldot{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(12px); opacity:.2 } }

@media (min-width:900px){
  .hero__cta .btn{ flex:0 0 auto; }
  .hero__scroll{ display:grid; }
  .hero__facts{ gap:12px 56px; }
}

/* ============ FAIXA ROLANTE ============ */
.strip{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg, rgba(217,119,6,.10), rgba(234,88,12,.05));
  padding:13px 0;
}
.strip__track{
  display:flex; align-items:center; gap:20px; width:max-content;
  animation:marquee 34s linear infinite;
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); white-space:nowrap;
}
.strip__track i{ color:var(--amber); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ============ SEÇÕES ============ */
.section{ position:relative; padding:clamp(64px,11vw,110px) 0; }
.section--alt{ background:var(--bg-2); border-block:1px solid var(--line); }
.section--sunset{
  background:
    radial-gradient(1000px 460px at 78% -8%, rgba(234,88,12,.20), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--bg));
  border-block:1px solid var(--line);
}

.section__head{ max-width:62ch; margin-bottom:clamp(30px,5vw,52px); }
.kicker{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); font-weight:700; margin-bottom:12px;
}
.section h2{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.1rem,7.5vw,3.4rem); letter-spacing:.02em; line-height:.98;
}
.section__sub{ margin-top:14px; color:var(--text-muted); font-size:clamp(.98rem,3.4vw,1.06rem); }

/* ============ SEÇÃO COM FOTO DE FUNDO (igual ao hero) ============ */
.section--foto{ position:relative; isolation:isolate; overflow:hidden; }

.secao__bg{ position:absolute; inset:0; z-index:-2; }
.secao__bg picture{ display:block; width:100%; height:100%; }
.secao__bg img{
  width:100%; height:100%; object-fit:cover; object-position:26% 38%;
  transform: scaleX(-1);
}
/* escurece o suficiente para os cards e o título lerem por cima,
   e dissolve nas bordas para emendar com as seções vizinhas */
.secao__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--bg) 0%, rgba(18,18,18,.46) 15%, rgba(18,18,18,.44) 76%, var(--bg) 100%);
}
.section--foto .section__head h2,
.section--foto .section__head .kicker{ text-shadow:0 3px 18px rgba(0,0,0,.8); }
.section--foto .section__sub{ color:var(--text); text-shadow:0 2px 14px rgba(0,0,0,.9); }

/* no celular a seção fica muito alta e a foto esticaria demais:
   ela vira uma faixa no topo que dissolve no fundo */
@media (max-width:899px){
  .secao__bg{ bottom:auto; height:min(66svh,560px); }
  .secao__bg::after{
    background:linear-gradient(180deg,
      var(--bg) 0%, rgba(18,18,18,.40) 12%, rgba(18,18,18,.62) 58%, var(--bg) 100%);
  }
}

/* ============ CARDS DE FORMATO ============ */
.cards{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr); gap:22px; } }

/* sobre a foto os cards ficam mais sólidos, para o texto não competir */
.section--foto .card{
  background:linear-gradient(165deg, rgba(36,32,28,.90), rgba(24,21,19,.93));
  backdrop-filter:blur(10px);
  border-color:var(--line-strong);
}

.card{
  position:relative; overflow:hidden;
  padding:28px 26px 26px; border-radius:var(--radius-lg);
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:0; transition:opacity .3s ease;
}
.card:hover{ transform:translateY(-5px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.card:hover::after{ opacity:1; }

.card__ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  color:var(--amber-soft);
  background:radial-gradient(circle at 30% 25%, rgba(240,180,41,.22), rgba(217,119,6,.06));
  border:1px solid rgba(217,119,6,.28);
}
.card__ico svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.card h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:1.65rem; letter-spacing:.03em;
}
.card__resumo{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); font-weight:600; margin-top:-8px;
  overflow-wrap:anywhere;
}
.card p{ color:var(--text-muted); font-size:.95rem; }
.card ul{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; }
.card li{ display:flex; gap:9px; align-items:flex-start; font-size:.88rem; color:var(--text-dim); }
.card li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:8px; border-radius:50%;
  background:var(--amber);
}

/* ============ BUSCA ============ */
.search{
  position:relative; display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:999px; padding:4px 6px 4px 18px; max-width:520px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.search:focus-within{ border-color:var(--amber); box-shadow:0 0 0 4px rgba(217,119,6,.14); }
.search__ico{
  width:19px; height:19px; flex:none; fill:none; stroke:var(--text-dim);
  stroke-width:1.9; stroke-linecap:round;
}
.search input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--text); font-size:1rem; padding:13px 12px;
}
.search input::placeholder{ color:var(--text-dim); }
.search input::-webkit-search-cancel-button{ display:none; }
.search__clear{
  flex:none; width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(245,239,230,.08); font-size:1.2rem; line-height:1;
}
.search__clear:hover{ background:rgba(245,239,230,.16); }

.search__status{
  margin-top:12px; font-size:.86rem; color:var(--amber-soft); min-height:1.3em;
}

/* ============ ABAS ============ */
.tabs{
  display:flex; gap:8px; margin:22px 0 26px;
  overflow-x:auto; scrollbar-width:none;
  padding-bottom:4px; -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:none; cursor:pointer; white-space:nowrap;
  padding:11px 20px; border-radius:999px;
  background:rgba(245,239,230,.04); border:1px solid var(--line);
  color:var(--text-muted); font-weight:600; font-size:.9rem;
  transition:all .2s ease;
}
.tab:hover{ color:var(--text); border-color:var(--line-strong); }
.tab[aria-selected="true"]{
  background:linear-gradient(135deg, var(--amber-soft), var(--amber));
  color:#1a1207; border-color:transparent; box-shadow:var(--shadow-amber);
}
.tabs.is-hidden{ display:none; }

/* ============ LISTA DE MÚSICAS ============ */
.bloco__sub{ color:var(--text-dim); font-size:.9rem; margin-bottom:18px; font-style:italic; }

.musicas{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2px; grid-template-columns:1fr;
}
@media (min-width:700px){ .musicas{ grid-template-columns:1fr 1fr; gap:2px 26px; } }

.musica{
  display:flex; align-items:baseline; gap:10px;
  padding:12px 4px; border-bottom:1px dashed var(--line);
}
.musica__titulo{ font-weight:600; font-size:.98rem; }
.musica__linha{ flex:1; border-bottom:1px dotted rgba(245,239,230,.14); translate:0 -3px; }
.musica__artista{ font-size:.82rem; color:var(--text-dim); text-align:right; }
.musica mark{
  background:rgba(240,180,41,.24); color:var(--amber-soft);
  border-radius:3px; padding:0 2px;
}

.vazio{
  padding:34px 22px; text-align:center; border-radius:var(--radius);
  border:1px dashed var(--line-strong); background:rgba(245,239,230,.02);
}
.vazio strong{ display:block; font-size:1.05rem; margin-bottom:6px; }
.vazio p{ color:var(--text-muted); font-size:.92rem; margin-bottom:16px; }

.repertorio__cta{
  margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
}
.repertorio__cta p{ color:var(--text-muted); flex:1 1 260px; }

/* ============ VÍDEOS ============ */
/* no celular vira carrossel horizontal; overscroll-behavior evita a travada */
.videos{
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--pad) * -1); padding:2px var(--pad) 14px;
  scrollbar-width:none;
}
.videos::-webkit-scrollbar{ display:none; }
.videos > *{ flex:0 0 80%; scroll-snap-align:center; }

@media (min-width:760px){
  .videos{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
    overflow:visible; overscroll-behavior-x:auto; margin-inline:0; padding:0;
  }
  .videos > *{ flex:initial; }
}

.video{ display:flex; flex-direction:column; gap:12px; }
.video__frame{
  position:relative; aspect-ratio:9/16; border-radius:var(--radius);
  overflow:hidden; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow);
}
@media (min-width:760px){ .video__frame{ aspect-ratio:9/14; } }
.video__frame iframe,.video__frame video{ width:100%; height:100%; border:0; object-fit:cover; }

.video__ph{
  position:absolute; inset:0; display:grid; place-content:center; gap:10px;
  text-align:center; padding:22px; color:var(--text-dim);
  background:
    radial-gradient(circle at 50% 38%, rgba(217,119,6,.18), transparent 62%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
}
.video__ph svg{ width:46px; height:46px; margin-inline:auto; stroke:var(--amber); fill:none; stroke-width:1.4; }
.video__ph code{
  font-size:.72rem; color:var(--amber-soft);
  background:rgba(217,119,6,.12); padding:2px 7px; border-radius:5px;
}
.video h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:1.25rem; letter-spacing:.04em;
}
.video p{ color:var(--text-dim); font-size:.88rem; }

/* ============ DEPOIMENTOS ============ */
.strip-feedbacks {
  padding: 10px 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.quotes-marquee {
  overflow: hidden;
  padding: 4px 0;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.quotes-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: marqueeQuotes 40s linear infinite;
}
.quotes-track:hover {
  animation-play-state: paused;
}
@keyframes marqueeQuotes {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); } /* 8px is half the gap */
}

.quote{
  padding: 8px 18px; border-radius: 99px;
  background: linear-gradient(165deg, rgba(36,32,28,.4), rgba(24,21,19,.5));
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.05);
  flex: none;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
.quote::before{ content: none; }
.quote p{ font-size: .9rem; color: var(--text-dim); white-space: nowrap; margin: 0; font-style: normal; }
.quote footer{ font-size: .85rem; white-space: nowrap; margin: 0; }
.quote footer strong{ color: var(--amber-soft); font-weight: 600; font-style: normal; display: inline; }

/* ============ BOTECO DIGITAL ============ */
.boteco{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:860px){ .boteco{ grid-template-columns:1.05fr .95fr; gap:22px; } }

.boteco__card{
  padding:30px 26px; border-radius:var(--radius-lg);
  background:rgba(18,18,18,.55); backdrop-filter:blur(8px);
  border:1px solid var(--line-strong);
}
.boteco__card h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:1.75rem; letter-spacing:.03em; margin-bottom:8px;
}
.boteco__card > p{ color:var(--text-muted); font-size:.95rem; }
.boteco__hint{ margin-top:12px; font-size:.8rem; color:var(--text-dim); }

.pedido{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.pedido input{
  flex:1 1 200px; min-width:0;
  padding:14px 18px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line-strong);
  color:var(--text); font-size:1rem; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pedido input:focus{ border-color:var(--amber); box-shadow:0 0 0 4px rgba(217,119,6,.14); }
.pedido input::placeholder{ color:var(--text-dim); }

.pix{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:22px; }
.pix__qr{
  position:relative; flex:none; width:148px; height:148px;
  border-radius:14px; overflow:hidden; background:var(--sand); padding:8px;
}
.pix__qr img,.pix__qr svg{ width:100%; height:100%; object-fit:contain; display:block; }
.pix__qr-fallback{
  position:absolute; inset:0; display:grid; place-content:center; gap:6px;
  text-align:center; padding:14px; color:#2a2118;
  background:repeating-linear-gradient(45deg, #efe7db, #efe7db 8px, #e6dccd 8px, #e6dccd 16px);
}
.pix__qr-fallback span{ font-weight:700; font-size:.9rem; }
.pix__qr-fallback small{ font-size:.66rem; line-height:1.35; }
.pix__qr-fallback code{ background:rgba(0,0,0,.08); padding:1px 4px; border-radius:4px; }

.pix__info{ flex:1 1 190px; min-width:0; }
.pix__label{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); }
.pix__key{
  font-size:1rem; font-weight:600; margin:4px 0 12px;
  overflow-wrap:anywhere; color:var(--amber-soft);
}
.pix__acoes{ display:flex; flex-wrap:wrap; gap:8px; }
.pix__titular{ margin-top:12px; font-size:.78rem; color:var(--text-dim); }

/* ============ CONTATO ============ */
.contato{ display:grid; gap:38px; grid-template-columns:1fr; }
@media (min-width:900px){ .contato{ grid-template-columns:1fr 1fr; gap:56px; align-items:start; } }

.contato__lista{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:18px; }
.contato__lista li{ display:flex; gap:13px; align-items:flex-start; font-size:.94rem; }
.contato__lista svg{
  width:22px; height:22px; flex:none; margin-top:2px;
  fill:none; stroke:var(--amber); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.contato__lista a{ color:var(--text-muted); border-bottom:1px solid var(--line-strong); }
.contato__lista a:hover{ color:var(--amber-soft); border-color:var(--amber); }
.contato__social a{ display:inline-flex; align-items:center; gap:11px; border:0; }

.form{
  padding:28px 24px; border-radius:var(--radius-lg);
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); display:grid; gap:16px;
}
@media (min-width:520px){ .form{ padding:32px 30px; } }

.field{ display:grid; gap:7px; }
.field-row{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:520px){ .field-row{ grid-template-columns:1fr 1fr; } }

.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.field .opt{ text-transform:none; letter-spacing:0; opacity:.7; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:12px;
  background:rgba(18,18,18,.7); border:1px solid var(--line-strong);
  color:var(--text); font-family:inherit; font-size:.98rem; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize:vertical; min-height:88px; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--amber); box-shadow:0 0 0 4px rgba(217,119,6,.14);
}
.field input:user-invalid{ border-color:#dc2626; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5efe6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:42px;
}
.field select option{ background:var(--surface); color:var(--text); }
.form__nota{ font-size:.76rem; color:var(--text-dim); text-align:center; }

/* ============ FOOTER ============ */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:52px 0 96px; }
.footer__inner{ display:grid; gap:14px; justify-items:center; text-align:center; }
.footer__brand{
  font-family:var(--font-display); font-size:2rem; font-weight:400;
  letter-spacing:.07em; text-transform:uppercase;
}
.footer__tag{ font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.footer__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-top:8px; font-size:.9rem; }
.footer__links a{ color:var(--text-muted); }
.footer__links a:hover{ color:var(--amber-soft); }
.footer__copy{ font-size:.76rem; color:var(--text-dim); margin-top:10px; }

/* ============ WHATSAPP FLUTUANTE ============ */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:120;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px; border-radius:999px;
  background:var(--wa); color:#06301a;
  box-shadow:0 12px 30px rgba(37,211,102,.34);
  transition:transform .2s ease, box-shadow .2s ease, padding .25s ease;
}
.wa-float svg{ width:26px; height:26px; fill:currentColor; flex:none; }
.wa-float__label{ display:none; font-weight:700; font-size:.92rem; padding-right:6px; }
.wa-float:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 16px 38px rgba(37,211,102,.46); }
@media (min-width:900px){
  .wa-float{ right:26px; bottom:26px; padding:14px 20px 14px 18px; }
  .wa-float__label{ display:inline; }
}

/* ============ TOAST ============ */
.toast{
  position:fixed; left:50%; bottom:88px; translate:-50% 0; z-index:200;
  padding:13px 22px; border-radius:999px;
  background:var(--sand); color:#1a1207; font-weight:600; font-size:.9rem;
  box-shadow:var(--shadow);
  opacity:0; transition:opacity .25s ease, translate .25s ease;
}
.toast.is-on{ opacity:1; translate:-50% -10px; }

/* ============ REVEAL ON SCROLL ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============ IMPRESSÃO (plaquinha de mesa em mesa.html) ============ */
@media print{
  .nav,.wa-float,.hero__scroll,.strip,.toast{ display:none !important; }
  body{ background:#fff; color:#000; }
  body::before{ display:none; }
}

/* dica do carrossel de vídeos (só no celular) */
.videos__dica{
  margin-top:4px; font-size:.82rem; color:var(--text-dim); letter-spacing:.02em;
}
@media (min-width:760px){ .videos__dica{ display:none; } }

/* ============ PINE COLLECTIVE ============ */
.pine-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #000;
  padding: 6px 14px;
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "Geist", sans-serif;
}
.pine-badge img {
  height: 14px;
  width: auto;
  opacity: 0.8;
}
.pine-badge--footer {
  background: transparent;
  padding: 0;
  margin-top: 24px;
}