/* ═══════════════════════════════════════════════════════════════════════
   ÁlcoolTece — site.css
   Base visual extraída dos flyers: cor chapada + textura de pincel,
   doodles brancos, badges com sombra dura, título varsity.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --blue:        #2b68d9;
  --blue-deep:   #16326b;
  --orange:      #ef8320;
  --orange-ink:  #7a3708;
  --green:       #1f5b4d;
  --green-deep:  #123a30;

  --paper:  #f3f1e7;
  --ink:    #10203c;
  --white:  #ffffff;

  --maxw: 1120px;
  --radius: 14px;
  --hard: 6px 6px 0 rgba(9,20,45,.9);
  --hard-sm: 4px 4px 0 rgba(9,20,45,.85);

  --ff-display: "Anton", "Barlow Condensed", system-ui, sans-serif;
  --ff-cond:    "Barlow Condensed", system-ui, sans-serif;
  --ff-body:    "Barlow", system-ui, -apple-system, sans-serif;
  --ff-mark:    "Fredoka", "Barlow", system-ui, sans-serif;
}

/* Temas de cor por seção (body.theme-* ou section.theme-*) */
.theme-blue   { --bg: var(--blue);   --bg-deep: var(--blue-deep);   --on-bg: var(--white); --accent: var(--orange); }
.theme-orange { --bg: var(--orange); --bg-deep: var(--orange-ink);  --on-bg: var(--white); --accent: var(--blue-deep); }
.theme-green  { --bg: var(--green);  --bg-deep: var(--green-deep);  --on-bg: var(--white); --accent: var(--orange); }

/* ─── Reset / base ──────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ─── Fundo texturizado (pincel seco diagonal) ─────────────────────── */
.sticker-bg {
  position: relative;
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(118deg, rgba(0,0,0,.06)   0 16px, transparent 16px 46px);
  color: var(--on-bg);
  overflow: hidden;
}

/* ─── Doodles ──────────────────────────────────────────────────────── */
.dd-layer { position: absolute; inset: 0; pointer-events: none; color: rgba(255,255,255,.92); }
.dd {
  position: absolute;
  width: clamp(56px, 9vw, 104px);
  filter: drop-shadow(3px 4px 0 rgba(9,20,45,.35));
  will-change: transform;
}
.dd-1 { top: 5%;    left: 3%;  transform: rotate(-12deg); }
.dd-2 { top: 6%;    right: 4%; transform: rotate(10deg); }
.dd-3 { bottom: 7%; left: 4%;  transform: rotate(-6deg); }
.dd-4 { bottom: 6%; right: 4%; transform: rotate(8deg); }

/* Flutuar — ativo por padrão; some só se o usuário pediu "reduzir movimento" */
.dd-1 { animation: dd-float-1 6.4s ease-in-out -0.8s infinite; }
.dd-2 { animation: dd-float-2 7.3s ease-in-out -3.1s infinite; }
.dd-3 { animation: dd-float-3 5.9s ease-in-out -1.9s infinite; }
.dd-4 { animation: dd-float-4 6.9s ease-in-out -4.2s infinite; }

@keyframes dd-float-1 { 0%,100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-16px) rotate(-6deg); } }
@keyframes dd-float-2 { 0%,100% { transform: translateY(0) rotate(10deg); }  50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes dd-float-3 { 0%,100% { transform: translateY(0) rotate(-6deg); }  50% { transform: translateY(-19px) rotate(-11deg); } }
@keyframes dd-float-4 { 0%,100% { transform: translateY(0) rotate(8deg); }   50% { transform: translateY(-12px) rotate(3deg); } }

/* ─── Wordmark ÁlcoolTece ──────────────────────────────────────────── */
.wordmark {
  font-family: var(--ff-mark);
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--white);
}
.wordmark span {
  display: inline-block;
  text-shadow: var(--hard-sm);
}
/* letras "saltando" a base, como no flyer */
.wordmark span:nth-child(1) { font-size: 1.35em; transform: translateY(-.06em) rotate(-4deg); }
.wordmark span:nth-child(2) { font-size: .74em;  transform: translateY(.10em)  rotate(3deg); }
.wordmark span:nth-child(3) { font-size: .96em;  transform: translateY(-.02em) rotate(-2deg); }
.wordmark span:nth-child(4) { font-size: 1.05em; transform: translateY(.06em)  rotate(2deg); }
.wordmark span:nth-child(5) { font-size: .8em;   transform: translateY(-.05em) rotate(-3deg); }
.wordmark span:nth-child(6) { font-size: 1em;    transform: translateY(.08em)  rotate(2deg); }
.wordmark span:nth-child(7) { font-size: 1.25em; transform: translateY(-.04em) rotate(-3deg); }
.wordmark span:nth-child(8) { font-size: .82em;  transform: translateY(.07em)  rotate(3deg); }
.wordmark span:nth-child(9) { font-size: .98em;  transform: translateY(-.03em) rotate(-2deg); }
.wordmark span:nth-child(10){ font-size: 1.12em; transform: translateY(.05em)  rotate(3deg); }

.wordmark--xl { font-size: clamp(52px, 12vw, 128px); }
.wordmark--sm { font-size: 26px; }
.wordmark--sm span { text-shadow: 2px 2px 0 rgba(9,20,45,.6); }

/* ─── Logo em imagem (arquivo oficial) ────────────────────────────── */
.hero__logo { margin: 0; line-height: 0; }
.hero__logo img {
  width: min(86vw, 620px);
  height: auto;
  filter: drop-shadow(6px 8px 0 rgba(9,20,45,.28));
}
.brand-logo { display: inline-flex; line-height: 0; }
.brand-logo img { width: auto; }
.brand-logo--sm img  { height: 40px; }
.brand-logo--foot img { height: 46px; }

/* ─── Header ───────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--blue-deep);
  border-bottom: 3px solid rgba(255,255,255,.12);
}
.site-head__in { display: flex; align-items: center; gap: 22px; padding-block: 12px; }
.site-nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; color: rgba(255,255,255,.82);
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: .15s;
}
.site-nav a:hover,
.site-nav a.is-active { color: #fff; border-color: var(--orange); }

/* ─── Botões ───────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--orange);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff-cond); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; font-size: 16px; line-height: 1;
  padding: 14px 22px; border-radius: 10px;
  background: var(--btn-bg); color: #fff;
  border: 3px solid rgba(9,20,45,.9);
  box-shadow: var(--hard-sm);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 rgba(9,20,45,.9); }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(9,20,45,.9); }
.btn--solid { --btn-bg: var(--orange); }
.btn--ghost { --btn-bg: transparent; box-shadow: none; }
.btn--ghost:hover { box-shadow: none; background: rgba(255,255,255,.12); }
.btn--ig {
  margin-left: 4px; padding: 9px 14px; font-size: 14px;
  --btn-bg: rgba(255,255,255,.10); box-shadow: none; border-color: rgba(255,255,255,.25);
}
.btn--ig:hover { box-shadow: none; background: rgba(255,255,255,.2); }

/* ─── Hero ─────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(56px, 11vw, 120px); text-align: center; }
.hero__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hashtag {
  font-family: var(--ff-display);
  font-size: clamp(18px, 4.4vw, 34px);
  text-transform: none;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: var(--hard-sm);
}
.hashtag::before, .hashtag::after { content: ""; }
.hero__tagline {
  font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: clamp(15px, 3vw, 22px);
  color: var(--white);
  background: rgba(9,20,45,.28);
  padding: 8px 18px; border-radius: 8px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ─── Eyebrow / tag "apresenta" ───────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--ff-cond); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 15px;
  background: var(--ink); color: #fff;
  padding: 7px 14px; border-radius: 7px;
  box-shadow: var(--hard-sm);
  margin-bottom: 22px;
}

/* ─── Título varsity ───────────────────────────────────────────────── */
.varsity {
  font-family: var(--ff-display);
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .01em;
  font-size: clamp(40px, 8vw, 84px);
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: var(--hard);
}
.varsity--sm {
  font-size: clamp(26px, 4.6vw, 40px);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: var(--hard-sm);
}

/* ─── Seção "Próxima festa" ───────────────────────────────────────── */
.proxima { padding-block: clamp(48px, 9vw, 96px); background: var(--bg-deep); }
.card-festa {
  position: relative;
  border: 4px solid rgba(9,20,45,.9);
  border-radius: var(--radius);
  box-shadow: var(--hard);
  padding: clamp(28px, 6vw, 56px);
}
.card-festa__main { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.badge-date {
  display: inline-flex; flex-direction: column; gap: 2px;
  background: var(--bg-deep); color: #fff;
  border: 3px solid rgba(9,20,45,.9);
  border-radius: 9px; padding: 10px 18px;
  box-shadow: var(--hard-sm);
  transform: rotate(-1.5deg);
}
.badge-date strong {
  font-family: var(--ff-display); font-size: clamp(24px, 4.6vw, 38px);
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.badge-date em {
  font-family: var(--ff-cond); font-style: normal; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: 13px;
  color: rgba(255,255,255,.85);
}
.card-festa__atletica {
  font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: clamp(14px, 2.4vw, 18px);
  color: rgba(255,255,255,.9);
}
.lineup-inline {
  display: flex; flex-wrap: wrap; gap: 6px 0;
  font-family: var(--ff-display); text-transform: uppercase;
  font-size: clamp(20px, 3.6vw, 30px); color: #fff;
}
.lineup-inline li { display: inline-flex; align-items: center; }
.lineup-inline li:not(:last-child)::after {
  content: "•"; margin: 0 12px; color: var(--accent);
}
.card-festa__local {
  font-family: var(--ff-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; color: rgba(255,255,255,.9);
}

/* ─── Títulos de seção ─────────────────────────────────────────────── */
.sec-title {
  font-family: var(--ff-display);
  text-transform: uppercase;
  font-size: clamp(30px, 6vw, 54px);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 28px;
}
.sec-title::after {
  content: ""; display: block; width: 90px; height: 7px; margin-top: 12px;
  background: var(--orange); border-radius: 4px;
}
.sec-title--light { color: #fff; }
.sec-title--light::after { background: #fff; }

/* ─── Sobre ────────────────────────────────────────────────────────── */
.sobre { padding-block: clamp(48px, 9vw, 90px); }
.sobre__text { max-width: 62ch; display: flex; flex-direction: column; gap: 16px; font-size: 18px; }
.sobre__text strong { color: var(--blue); }

/* ─── Line-up ──────────────────────────────────────────────────────── */
.lineup { padding-block: clamp(48px, 9vw, 90px); }
.lineup .wrap { position: relative; z-index: 2; }
.dj-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.dj-chip {
  font-family: var(--ff-display); text-transform: uppercase;
  font-size: clamp(18px, 3vw, 26px);
  background: var(--paper); color: var(--ink);
  border: 3px solid rgba(9,20,45,.9);
  border-radius: 10px; padding: 10px 18px;
  box-shadow: var(--hard-sm);
}
.dj-chip:nth-child(even) { transform: rotate(-1.5deg); }
.dj-chip:nth-child(3n)   { transform: rotate(1.5deg); }

/* ─── Edições ──────────────────────────────────────────────────────── */
.edicoes { padding-block: clamp(48px, 9vw, 90px); }
.edicoes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.ed-card {
  background: var(--bg);
  color: #fff;
  border: 4px solid rgba(9,20,45,.9);
  border-radius: var(--radius);
  box-shadow: var(--hard-sm);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.ed-card__date {
  align-self: flex-start;
  font-family: var(--ff-cond); font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; font-size: 13px;
  background: rgba(9,20,45,.35); padding: 5px 12px; border-radius: 6px;
}
.ed-card .varsity--sm { color: var(--paper); }
.ed-card__meta {
  font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 13px; color: rgba(255,255,255,.85);
}
.ed-card__line { font-family: var(--ff-cond); font-weight: 600; font-size: 15px; color: rgba(255,255,255,.95); }

/* ─── Local ────────────────────────────────────────────────────────── */
.local { padding-block: clamp(48px, 9vw, 90px); }
.local__in { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.local__addr { font-size: 20px; margin-bottom: 10px; }
.local__casas { font-family: var(--ff-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 20px; }
.local__map {
  border: 4px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--hard-sm); overflow: hidden;
}
.local__map iframe { width: 100%; height: 340px; border: 0; }

/* ─── Footer ───────────────────────────────────────────────────────── */
.site-foot { background: var(--blue-deep); color: #fff; padding-block: 46px; text-align: center; }
.site-foot__in { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.site-foot__tag { font-family: var(--ff-display); font-size: 20px; }
.site-foot__links { font-family: var(--ff-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.site-foot__links a:hover { color: var(--orange); }
.site-foot__mini { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 6px; }

/* ─── Responsivo ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .site-head__in { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; margin-left: 0; justify-content: center; gap: 14px; }
  .btn--ig { margin-left: auto; }
  .local__in { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .dd { opacity: .5; }
  .site-nav { font-size: 13px; }
}

/* ─── Reveal on scroll ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ─── Reduz movimento ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* Os doodles continuam flutuando de propósito — é decorativo e sutil. */
}