/* ============================================================
   KITTER — o kota que sabe
   Paleta do manual: #41100F bordeaux · #F7F1E1 creme
   #251615 castanho-escuro · #544027 dourado torrado
   ============================================================ */

@font-face {
  font-family: 'The Girl Next Door';
  src: url('../assets/fonts/TheGirlNextDoor-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barriecito';
  src: url('../assets/fonts/Barriecito-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brandon Grotesque';
  src: url('../assets/fonts/Brandon-Grotesque-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brandon Grotesque';
  src: url('../assets/fonts/Brandon-Grotesque-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brandon Grotesque';
  src: url('../assets/fonts/Brandon-Grotesque-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bordeaux: #41100F;
  --cream: #F7F1E1;
  --dark: #251615;
  --gold: #544027;
  --font-hand: 'The Girl Next Door', cursive;
  --font-display: 'Barriecito', cursive;
  --font-body: 'Brandon Grotesque', 'Segoe UI', sans-serif;
  --pad: clamp(1.25rem, 5vw, 5rem);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* SVGs da marca como máscara monocromática — a cor vem de `color`.
   Os URLs são definidos aqui (relativos à folha de estilos) porque url()
   em propriedades custom inline resolve contra o documento errado no Chrome. */
.brand-svg {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--svg) center / contain no-repeat;
  mask: var(--svg) center / contain no-repeat;
}
.nav__face          { --svg: url('../assets/svg/facemark.svg'); }
.hero__wordmark     { --svg: url('../assets/svg/wordmark.svg'); }
.kota__face         { --svg: url('../assets/svg/facemark.svg'); }
.footer__logo       { --svg: url('../assets/svg/wordmark.svg'); }

img { max-width: 100%; display: block; }

::selection { background: var(--bordeaux); color: var(--cream); }

/* ---------- grão de papel ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 60;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); }
  40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-2%); }
  80% { transform: translate(3%,3%); }
}

/* ---------- tipografia utilitária ---------- */
.hand    { font-family: var(--font-hand); }
.display { font-family: var(--font-display); }

.kicker {
  font-family: var(--font-hand);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--bordeaux);
  transform: rotate(-1.5deg);
  display: inline-block;
}
.kicker--cream { color: var(--cream); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--pad);
  mix-blend-mode: difference;
  color: var(--cream);
}
.nav__logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.nav__face { width: 30px; height: 36px; }
.nav__word { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .05em; }
.nav__links { display: flex; gap: 1.75rem; align-items: center; }
.nav__links a {
  color: inherit; text-decoration: none;
  font-weight: 500; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  position: relative;
}
.nav__links a:not(.nav__cta)::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.65,.05,.36,1);
}
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  border: 2px solid currentColor; border-radius: 999px;
  padding: .45rem 1.2rem; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  transition: background .25s, color .25s;
}
.nav__cta:hover { background: var(--cream); color: var(--bordeaux); mix-blend-mode: normal; }
@media (max-width: 640px) { .nav__links a:not(.nav__cta) { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  background: var(--dark);
  color: var(--cream);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background: url('../assets/img/kitter-merch-canva.jpg') center 45%/cover no-repeat;
  transform: scale(1.05);
  animation: heroZoom 20s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(37,22,21,.72) 0%, rgba(65,16,15,.55) 45%,
    rgba(37,22,21,.65) 75%, rgba(37,22,21,.95) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 7rem var(--pad) 6rem;
  display: flex; flex-direction: column; align-items: center;
}
.hero__eyebrow {
  font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  font-size: clamp(.65rem, 1.6vw, .85rem);
  margin-bottom: 1.5rem; opacity: .85;
  max-width: 100%;
}
@media (max-width: 640px) {
  .hero__eyebrow { letter-spacing: .18em; font-size: .6rem; white-space: normal; }
}
.hero__wordmark { width: clamp(280px, 62vw, 760px); aspect-ratio: 944.53 / 635.22; }
/* countdown */
.countdown {
  display: flex; align-items: baseline; gap: clamp(.5rem, 2vw, 1.25rem);
  margin-top: 3rem;
  font-family: var(--font-display);
}
.countdown__unit { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.countdown__num {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.countdown__lbl {
  font-family: var(--font-body); font-weight: 500;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; opacity: .7;
}
.countdown__sep { font-size: clamp(2rem, 6vw, 4rem); opacity: .35; transform: translateY(-.35em); }

.hero__date {
  margin-top: 2rem;
  font-size: clamp(.95rem, 2.2vw, 1.2rem);
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  opacity: .9;
}

/* botão */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 2.25rem;
  font-family: var(--font-body); font-weight: 700;
  font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 1rem 2.2rem;
  border: none;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.btn--cream { background: var(--cream); color: var(--bordeaux); }
.btn--cream:hover { transform: rotate(-1.5deg) scale(1.04); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.btn__arrow { transition: transform .25s; }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* marquee */
.marquee {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 3;
  background: var(--bordeaux);
  border-top: 2px solid var(--cream);
  overflow: hidden;
  padding: .8rem 0;
}
.marquee__track {
  display: flex; white-space: nowrap;
  animation: marquee 22s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   O KOTA
   ============================================================ */
.section { padding: clamp(5rem, 12vw, 9rem) var(--pad); }

.kota { background: var(--cream); position: relative; overflow: hidden; }
.kota::before {
  content: ''; position: absolute; inset: 0;
  background: url('../assets/svg/pattern.svg') center/520px repeat;
  opacity: .05; pointer-events: none;
}
.kota__inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.kota__facecol { display: flex; justify-content: center; }
.kota__face {
  width: clamp(200px, 30vw, 420px);
  aspect-ratio: 497.3 / 598.86;
  color: var(--bordeaux);
  transform: rotate(-3deg);
}
.kota__line {
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  color: var(--dark);
}
.kota__line:nth-of-type(2) { margin-left: clamp(1rem, 4vw, 3rem); transform: rotate(-.6deg); }
.kota__line:nth-of-type(3) { margin-left: clamp(2rem, 8vw, 6rem); transform: rotate(.8deg); }
.kota__body {
  margin-top: 2rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.65;
  max-width: 56ch;
}
.kota__slogan {
  margin-top: 1.75rem;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--bordeaux);
  transform: rotate(-2deg);
}
@media (max-width: 800px) {
  .kota__inner { grid-template-columns: 1fr; }
  .kota__face { width: clamp(160px, 40vw, 240px); }
}

/* ============================================================
   MENU
   ============================================================ */
.menu {
  background: var(--dark);
  color: var(--cream);
  position: relative;
}
.menu__head { text-align: center; margin-bottom: clamp(3rem, 7vw, 5rem); }
.menu__sub {
  margin-top: 1rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: .1em; text-transform: uppercase; opacity: .75;
}
.menu__grid {
  max-width: 1250px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.dish {
  flex: 0 1 360px;
  min-width: 300px;
  border: 2px dashed rgba(247,241,225,.35);
  border-radius: 255px 18px 225px 18px/18px 225px 18px 255px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .35s, border-color .35s;
}
.dish:nth-child(odd)  { transform: rotate(-.8deg); }
.dish:nth-child(even) { transform: rotate(.9deg); }
.dish:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02);
  background: var(--bordeaux);
  border-color: var(--cream);
}
.dish__icon { width: clamp(110px, 12vw, 150px); margin-bottom: 1rem; color: var(--cream); }
.dish__icon .brand-svg { width: 100%; aspect-ratio: 1; }
.dish:nth-child(1) .dish__icon .brand-svg { --svg: url('../assets/svg/icon-panado.svg'); }
.dish:nth-child(2) .dish__icon .brand-svg { --svg: url('../assets/svg/icon-estufado.svg'); }
.dish:nth-child(3) .dish__icon .brand-svg { --svg: url('../assets/svg/icon-barriga.svg'); }
.dish:nth-child(4) .dish__icon .brand-svg { --svg: url('../assets/svg/icon-bola.svg'); }
.dish:nth-child(5) .dish__icon .brand-svg { --svg: url('../assets/svg/icon-gelado.svg'); }
.dish:hover .dish__icon { animation: wiggle .5s ease; }
@keyframes wiggle {
  0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); }
  50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); }
}
.dish__num { font-size: .72em; opacity: .8; margin-right: .15em; }
.dish__name {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--cream);
}
.dish__desc { margin-top: .9rem; font-size: .98rem; line-height: 1.55; opacity: .8; max-width: 34ch; }
@media (max-width: 620px) { .dish { flex: 1 1 100%; min-width: 0; } }

/* molhos e bebidas */
.extras {
  max-width: 1250px; margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 2px dashed rgba(247,241,225,.35);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.extras__title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--cream);
  transform: rotate(-1.5deg);
  margin-bottom: 1rem;
}
.extras__list { list-style: none; }
.extras__list li {
  padding: .55rem 0;
  font-size: 1rem; line-height: 1.45;
  border-bottom: 1px solid rgba(247,241,225,.15);
  opacity: .85;
}
.extras__list li:last-child { border-bottom: none; }
.extras__list strong { letter-spacing: .04em; }
@media (max-width: 700px) { .extras { grid-template-columns: 1fr; } }

/* ============================================================
   A JANELA
   ============================================================ */
.janela { background: var(--cream); }
.janela__head { text-align: center; margin-bottom: clamp(3rem, 7vw, 5rem); }
.janela__sub {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: var(--gold);
  margin-top: .5rem;
  transform: rotate(-1deg);
}
.janela__grid {
  max-width: 1250px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.janela__item {
  position: relative; overflow: hidden;
  border: 3px solid var(--dark);
  border-radius: 18px 255px 18px 255px/255px 18px 255px 18px;
  background: var(--dark);
}
.janela__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.janela__item:hover img { transform: scale(1.05); }
.janela__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.25rem .9rem;
  background: linear-gradient(transparent, rgba(37,22,21,.85));
  color: var(--cream);
  font-family: var(--font-hand);
  font-size: 1.15rem;
}
.janela__item--tall { grid-column: 1 / 13; }
.janela__item:nth-child(2) { grid-column: 1 / 5; }
.janela__item:nth-child(3) { grid-column: 5 / 9; }
.janela__item:nth-child(4) { grid-column: 9 / 13; }
.janela__item--tall img { aspect-ratio: 3504/2352; }
.janela__item:nth-child(2) img,
.janela__item:nth-child(3) img,
.janela__item:nth-child(4) img { aspect-ratio: 1/1; }
@media (max-width: 800px) {
  .janela__grid { grid-template-columns: 1fr; }
  .janela__item { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

.janela__info {
  max-width: 1250px; margin: clamp(3rem, 7vw, 5rem) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 3px solid var(--dark);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.info-block { display: flex; flex-direction: column; gap: .5rem; }
.info-block__label {
  font-weight: 700; font-size: .75rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}
.info-block__value { font-size: clamp(1.2rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--bordeaux); }
@media (max-width: 700px) { .janela__info { grid-template-columns: 1fr; } }

/* ============================================================
   AVISA-ME
   ============================================================ */
.avisa {
  background: var(--bordeaux);
  color: var(--cream);
  position: relative; overflow: hidden;
}
.avisa::before {
  content: ''; position: absolute; inset: 0;
  background: url('../assets/svg/pattern.svg') center/520px repeat;
  opacity: .06; pointer-events: none;
}
.avisa__inner { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.avisa__sub {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6; opacity: .9;
}

/* social cards */
.socials { margin-top: 3.5rem; }
.socials__label { font-size: clamp(1.3rem, 2.6vw, 1.7rem); transform: rotate(-1deg); }
.socials__row {
  margin-top: 1.5rem;
  display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap;
}
.social-card {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  min-width: 150px;
  padding: 1.4rem 1.6rem;
  border: 2px solid var(--cream);
  border-radius: 18px 255px 18px 255px/255px 18px 255px 18px;
  color: var(--cream);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s;
}
.social-card:nth-child(1) { transform: rotate(-1.2deg); }
.social-card:nth-child(2) { transform: rotate(.8deg); }
.social-card:nth-child(3) { transform: rotate(-.6deg); }
.social-card:hover { background: var(--cream); color: var(--bordeaux); transform: rotate(0) translateY(-6px); }
.social-card__icon { width: 34px; height: 34px; }
.social-card__mark {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 20px; margin-bottom: .65rem; color: white;
  box-shadow: 3px 5px 0 rgba(0,0,0,.2);
}
.social-card--whatsapp .social-card__mark { background: #128c4a; }
.social-card--instagram .social-card__mark { background: linear-gradient(35deg, #f9b84b, #d92e77 48%, #7444c4); }
.social-card--tiktok .social-card__mark { background: #151515; }
.social-card--tiktok .social-card__icon { filter: drop-shadow(-1.5px 0 #25f4ee) drop-shadow(1.5px 1px #fe2c55); }
.social-card:focus-visible { outline: 3px solid var(--cream); outline-offset: 6px; }
.social-card[aria-disabled="true"] { cursor: default; }
.social-card__handle { font-weight: 700; font-size: .95rem; letter-spacing: .04em; }
.social-card__badge {
  font-family: var(--font-hand); font-size: .95rem; opacity: .65;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--dark);
  color: var(--cream);
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad) 2.5rem;
}
.footer__logo { width: clamp(220px, 40vw, 380px); aspect-ratio: 944.53 / 635.22; margin: 0 auto; color: var(--cream); }
.footer__addr { margin-top: 1.75rem; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; opacity: .8; }
.footer__contact { margin-top: 1rem; font-size: 1rem; }
.footer__contact a { color: inherit; text-underline-offset: .25em; }
.footer__slogan {
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--cream);
  transform: rotate(-1.5deg);
}
.footer__credits { margin-top: 2.5rem; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; opacity: .45; }

/* ============================================================
   REVEAL (GSAP acrescenta .is-visible como fallback)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }

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