/* Treviso BBQ Festival · 2ª edição
   Fontes: Big Shoulders Display (títulos), Instrument Serif (texto e detalhes em itálico), DM Mono (etiquetas) */

@font-face{font-family:"Big Shoulders";src:url("fonts/BigShoulders.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --carvao:#0B0908;
  --carvao-2:#15110E;
  --osso:#F2EEE6;
  --brasa:#FF6020;
  --brasa-escura:#5A1F0B;
  --fumaca:#9A9288;
  --linha:rgba(242,238,230,.16);

  --f-display:"Big Shoulders","Arial Narrow",Impact,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,monospace;

  --gutter:clamp(20px,5vw,72px);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--carvao);color:var(--osso);
  font-family:var(--f-serif);font-size:clamp(20px,1.6vw,23px);line-height:1.45;letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* grão de papel, bem sutil, igual ao criativo */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dd,figure{margin:0}
em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--brasa)}

:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--osso);color:var(--carvao);padding:10px 14px;z-index:100;font-family:var(--f-mono);font-size:13px}
.skip:focus{left:8px}

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

.eyebrow{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--fumaca);
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--brasa)}

.h2{
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(48px,8vw,124px);line-height:.9;letter-spacing:.005em;
}
.h2 em{font-size:1.06em;letter-spacing:0;line-height:.8}
.h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(32px,4vw,52px);line-height:.95}
.lead{font-size:clamp(22px,2.1vw,30px);line-height:1.3}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:17px 26px;border:1.5px solid transparent;cursor:pointer;background:none;color:inherit;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn:active{transform:translateY(1px)}
.btn--fire{background:var(--brasa);color:var(--carvao)}
.btn--fire:hover{background:var(--osso)}
.btn--ghost{border-color:var(--linha);color:var(--osso)}
.btn--ghost:hover{border-color:var(--osso)}
.btn--dark{background:var(--carvao);color:var(--osso)}
.btn--dark:hover{background:var(--brasa);color:var(--carvao)}
.btn--sm{padding:13px 20px;font-size:13px}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  padding-top:96px;isolation:isolate;overflow:hidden;background:var(--carvao);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 55% at 50% 108%,rgba(255,96,32,.20),transparent 70%);
}
.hero__photo{position:absolute;inset:0 0 0 auto;width:62%;z-index:-2;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:saturate(.7) contrast(1.05) brightness(.62) sepia(.18);will-change:transform}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--carvao) 0%,rgba(11,9,8,.55) 38%,rgba(11,9,8,.15) 100%),
    linear-gradient(0deg,var(--carvao) 0%,transparent 34%),
    linear-gradient(180deg,rgba(11,9,8,.85) 0%,transparent 22%);
}

.nav{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--gutter);
}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.nav__brand img{width:46px;height:auto}
.nav__links{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav__links a{text-decoration:none;color:var(--fumaca);transition:color .2s}
.nav__links a:hover{color:var(--osso)}
.nav__cta{padding:11px 18px;font-size:12px}

.hero__body{
  flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:end;gap:clamp(24px,4vw,64px);
  width:100%;max-width:var(--max);margin-inline:auto;padding:clamp(16px,3vw,40px) var(--gutter) clamp(28px,4vw,56px);
}
.hero__logo{margin:0}
.hero__logo img{width:min(100%,620px);height:auto}

.hero__line{
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(44px,5.4vw,84px);line-height:.92;
}
.hero__line em{font-size:1.1em;line-height:.9}
.hero__lead{margin-top:18px;max-width:34ch;color:rgba(242,238,230,.86)}

.countdown{margin-top:30px}
.countdown__label{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--fumaca);margin-bottom:12px}
.countdown__grid{display:flex;gap:clamp(14px,2.4vw,30px)}
.cd{display:flex;flex-direction:column;min-width:0}
.cd b{font-family:var(--f-display);font-weight:800;font-size:clamp(46px,5.4vw,80px);line-height:.9;font-variant-numeric:tabular-nums;min-width:1.15em}
.cd span{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brasa);margin-top:6px}
.countdown__msg{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.4vw,48px);line-height:.95}
.countdown__msg em{font-size:1.08em}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linha);
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
}
.facts>div{padding:18px 0 22px;display:flex;flex-direction:column;gap:4px}
.facts>div+div{padding-left:clamp(16px,3vw,40px);border-left:1px solid var(--linha)}
.facts dt{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fumaca)}
.facts dd{font-size:clamp(19px,1.8vw,26px);line-height:1.15}

/* ---------- seções ---------- */
.sec{padding:clamp(72px,11vw,168px) 0}
.sec__head{margin-bottom:clamp(36px,6vw,80px)}
.sec__sub{margin-top:22px;max-width:36ch;font-size:clamp(20px,1.8vw,26px);color:rgba(242,238,230,.86)}
.space__local{
  margin-top:14px;font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--brasa);
  display:flex;align-items:center;gap:8px;
}
.space__local::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brasa)}

/* sobre */
.sec--about{padding-bottom:clamp(48px,8vw,120px)}
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,6vw,96px);align-items:end}
.about__text{display:grid;gap:20px;color:rgba(242,238,230,.86)}
.about__text .lead{color:var(--osso)}
.trio{
  margin-top:clamp(48px,7vw,104px);
  display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(12px,2vw,28px);align-items:start;
}
.trio__item{overflow:hidden;background:var(--carvao-2);aspect-ratio:3/4}
.trio__item img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05) sepia(.14);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.trio__item:hover img{transform:scale(1.04)}
.trio__item--a{margin-top:clamp(24px,6vw,96px)}
.trio__item--c{margin-top:clamp(48px,12vw,180px)}

/* como vai ficar */
.sec--space{padding-bottom:clamp(56px,8vw,120px);background:var(--carvao-2)}
.space__hero{
  position:relative;overflow:hidden;margin:clamp(36px,6vw,72px) 0;
  height:clamp(300px,46vw,620px);background:var(--carvao);
}
.space__hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04);will-change:transform}
.space__hero figcaption,
.space__grid figure figcaption{
  position:absolute;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--osso);background:rgba(11,9,8,.6);padding:8px 12px;
}
.space__hero figcaption{right:0;top:0}
.space__grid{
  margin-top:clamp(28px,4vw,48px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.5vw,18px);
}
.space__grid figure{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--carvao)}
.space__grid img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.space__grid figure:hover img{transform:scale(1.05)}
.space__grid figcaption{left:0;bottom:0}
.space__note{margin-top:22px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fumaca)}

/* atrações */
.sec--lineup{background:var(--carvao-2)}
.lineup{border-top:1px solid var(--linha)}
.act{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:center;
  padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--linha);
}
.act__tag{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brasa);margin-bottom:14px}
.act__name{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(52px,8.4vw,128px);line-height:.86;letter-spacing:.005em;
}
.act__name em{font-size:.82em;padding-right:.08em}
.act__name span{display:block;font-size:.62em;letter-spacing:.02em;line-height:.95}
.act__desc{margin-top:18px;max-width:34ch;text-wrap:balance;color:rgba(242,238,230,.82)}
.act__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--carvao)}
.act__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.act:hover .act__media img{transform:scale(1.04)}
.act__media--photo img{filter:saturate(.9) contrast(1.04)}
.act__media--duo{background:#e9e5de}
.act__media--duo img{filter:brightness(.95) contrast(1.03) sepia(.08)}

/* ingressos */
.sec--tickets{
  background:
    radial-gradient(70% 40% at 50% 0%,rgba(255,96,32,.12),transparent 70%),
    var(--carvao);
}
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);align-items:stretch}

.ticket{
  position:relative;display:flex;flex-direction:column;
  background:var(--osso);color:var(--carvao);
  padding:26px 26px 26px;
}
.ticket__top{
  position:relative;padding-bottom:22px;margin-bottom:8px;
  border-bottom:2px dashed rgba(11,9,8,.28);
}
/* recortes laterais, como canhoto de ingresso */
.ticket__top::before,.ticket__top::after{
  content:"";position:absolute;bottom:-15px;width:28px;height:28px;border-radius:50%;background:var(--carvao);
}
.ticket__top::before{left:-40px}
.ticket__top::after{right:-40px}
.ticket__status{
  display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border:1.5px solid var(--carvao);margin-bottom:14px;
}
.ticket__name{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(52px,5vw,72px);line-height:.86}
.ticket__dates{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;color:rgba(11,9,8,.7)}
.ticket__prices{flex:1;display:grid;align-content:start}
.ticket__prices li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px 0;border-bottom:1px solid rgba(11,9,8,.14);
}
.ticket__prices li:last-child{border-bottom:0}
.ticket__prices span{font-size:22px;line-height:1.1}
.ticket__prices i{display:block;font-family:var(--f-mono);font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,9,8,.62);margin-top:4px}
.ticket__prices b{font-family:var(--f-display);font-weight:800;font-size:clamp(52px,5vw,68px);line-height:.85;font-variant-numeric:tabular-nums}
.ticket__prices small{font-family:var(--f-mono);font-weight:500;font-size:14px;letter-spacing:.06em;margin-right:6px;vertical-align:top;position:relative;top:.35em}
.ticket.is-open{outline:3px solid var(--brasa);outline-offset:-3px}
.ticket.is-open .ticket__status{background:var(--brasa);border-color:var(--brasa)}
.ticket.is-closed{opacity:.5}

.sec--tickets .sec__head{margin-bottom:0}
.buy{
  margin-bottom:clamp(40px,6vw,72px);padding:0 0 clamp(28px,4vw,44px);
  border-bottom:1px solid var(--linha);
  display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,4vw,64px);align-items:start;
}
.notice{
  margin-bottom:clamp(40px,6vw,72px);padding:clamp(22px,3vw,36px);
  background:var(--carvao-2);border:1px solid var(--linha);border-left:4px solid var(--brasa);
  display:grid;gap:14px;
}
.notice__tag{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brasa)}
.notice__title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.2vw,42px);line-height:.98}
.notice p:not(.notice__tag){color:rgba(242,238,230,.88)}
.notice__list{display:grid;gap:8px}
.notice__list li{position:relative;padding-left:22px;color:rgba(242,238,230,.88)}
.notice__list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--brasa)}
.buy__intro p{margin-top:14px;max-width:30ch;color:rgba(242,238,230,.86)}
.buy__steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.buy__label{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brasa);margin-bottom:10px}
.buy__value{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.05;margin-bottom:18px;overflow-wrap:anywhere;letter-spacing:.01em}

/* patrocinadores (logos) */
.sec--partners{background:var(--carvao)}
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.5vw,18px)}
/* as logos vem de fundo claro, por isso o cartao branco */
.logo-slot{
  display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  padding:clamp(16px,3vw,36px);background:#fff;
}
.logo-slot--tall{padding:clamp(8px,1.2vw,14px)}
.logo-slot img{max-width:100%;max-height:100%;object-fit:contain}

/* patrocínio */
.sec--sponsor{
  background:
    radial-gradient(65% 55% at 85% 15%,rgba(255,96,32,.14),transparent 70%),
    var(--carvao);
}
.sponsor{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.sponsor__text .lead{margin-top:22px;max-width:44ch;color:rgba(242,238,230,.86)}
.sponsor__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sponsor__tel{margin-top:18px;font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--fumaca)}

.sponsor__tiers{display:grid;gap:14px}
.tier{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  background:var(--carvao-2);border:1px solid var(--linha);padding:20px 26px;
  transition:border-color .25s,transform .25s;
}
.tier:hover{border-color:var(--brasa);transform:translateX(4px)}
.tier__tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fumaca);flex:1 1 100%;margin-bottom:2px}
.tier__name{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.6vw,34px);line-height:1}
.tier__price{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1;font-variant-numeric:tabular-nums;margin-left:auto}
.tier__price small{font-family:var(--f-mono);font-weight:500;font-size:13px;margin-right:4px;color:var(--fumaca)}
.tier--silver{border-color:rgba(242,238,230,.3)}
.tier--gold{background:var(--brasa);border-color:var(--brasa)}
.tier--gold .tier__tag,.tier--gold .tier__price small{color:rgba(11,9,8,.65)}
.tier--gold .tier__name,.tier--gold .tier__price{color:var(--carvao)}
.tier--gold:hover{transform:translateX(4px) scale(1.01)}

/* galeria */
.sec--gallery{padding-bottom:clamp(64px,9vw,120px);overflow:hidden}
.strip{
  display:flex;gap:clamp(10px,1.5vw,20px);overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 var(--gutter) 24px;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:var(--brasa) transparent;
}
.strip img{
  height:clamp(340px,52vw,640px);width:auto;flex:none;scroll-snap-align:start;object-fit:cover;
  filter:saturate(.75) contrast(1.05) sepia(.14);
}

/* rodapé */
.foot{border-top:1px solid var(--linha);padding:clamp(48px,7vw,96px) 0 28px;background:var(--carvao-2)}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.foot__logo{width:min(100%,360px);height:auto}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.foot__link{font-size:clamp(22px,2vw,28px);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.foot__link:hover{color:var(--brasa);border-color:var(--brasa)}
.foot__legal{margin-top:clamp(40px,6vw,80px);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fumaca)}

/* entrada suave ao rolar */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .hero__photo{width:100%}
  .hero__photo img{filter:saturate(.7) contrast(1.05) brightness(.5) sepia(.18)}
  .hero__photo::after{
    background:
      linear-gradient(0deg,var(--carvao) 6%,rgba(11,9,8,.55) 55%,rgba(11,9,8,.8) 100%);
  }
  .hero__body{grid-template-columns:1fr;align-items:start;gap:28px}
  .hero__logo img{width:min(78%,440px)}
  .about{grid-template-columns:1fr}
  .space__grid{grid-template-columns:1fr 1fr}
  .act{grid-template-columns:1fr}
  .act__media{order:-1;aspect-ratio:16/10}
  .tickets{grid-template-columns:1fr;max-width:520px}
  .buy{grid-template-columns:1fr}
  .sponsor{grid-template-columns:1fr;gap:40px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__logo{grid-column:1/-1;width:min(70%,300px)}
}
@media (max-width:560px){
  .hero{padding-top:84px}
  .nav__brand span{display:none}
  .facts{grid-template-columns:1fr}
  .facts>div+div{padding-left:0;border-left:0;border-top:1px solid var(--linha)}
  .facts>div{padding:14px 0}
  .trio{grid-template-columns:1fr 1fr}
  .trio__item--c{display:none}
  .trio__item--b{margin-top:48px}
  .hero__actions .btn{flex:1 1 100%}
  .countdown__grid{gap:16px}
  .sponsor__actions .btn{flex:1 1 100%}
  .tier{padding:16px 20px}
  .buy__steps{grid-template-columns:1fr}
  .partners{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}