/* ============================================================
   DOVA — Landing de captura
   Paleta e tipografia conforme brandbook (Análise de KV)
   ============================================================ */

:root{
  --red:#BD1914;
  --red-dark:#8f120e;
  --black:#0A0908;
  --cream:#F4DFC2;
  --cream-lt:#FBEFDD;
  --kraft:#C69970;
  --kraft-soft:#EAD6B6;
  --ink:#211a16;

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --cond:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;

  --wrap:468px;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--cond);
  color:var(--ink);
  background:var(--cream);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Grão de papel sobre toda a página (nunca liso demais) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.055;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

a{ color:inherit; text-decoration:none; }

.page{
  position:relative;
  z-index:2;
  max-width:var(--wrap);
  margin:0 auto;
  padding:26px 18px 0;
}

/* ---------- Moldura dupla estilo selo postal ---------- */
.stamp{
  position:relative;
  border:1.6px solid var(--red);
  border-radius:2px;
  background:var(--cream-lt);
}
.stamp::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid var(--red);
  border-radius:1px;
  pointer-events:none;
}

/* ---------- Faixa xadrez ---------- */
.checker{
  height:22px;
  background:
    conic-gradient(var(--red) 90deg, var(--cream-lt) 0 180deg,
                   var(--red) 0 270deg, var(--cream-lt) 0) 0 0 / 22px 22px;
}

/* ============================================================
   HEADER
   ============================================================ */
.header{ text-align:center; padding-top:6px; }

.logo img{
  display:block;
  width:min(58%, 236px);
  height:auto;
  margin:0 auto;
}

.tagline{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:1.18rem;
  line-height:1.28;
  color:var(--black);
  margin:16px auto 22px;
  max-width:16em;
}

/* Carrossel de fotos dentro da moldura */
.carousel{
  overflow:hidden;
  margin-bottom:24px;
}
.carousel__track{
  display:flex;
  align-items:flex-start;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  outline:none;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__slide{
  flex:0 0 100%;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  scroll-snap-align:center;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.carousel__dots{
  display:flex;
  justify-content:center;
  gap:7px;
  padding:11px 0 3px;
  background:var(--cream-lt);
}
.carousel__dot{
  width:9px; height:9px;
  padding:0;
  border-radius:50%;
  border:1.4px solid var(--red);
  background:transparent;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}
.carousel__dot[aria-selected="true"]{ background:var(--red); transform:scale(1.05); }

.hero-arc{
  font-family:var(--cond);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.62rem;
  color:var(--red);
  text-align:center;
  padding:9px 14px 10px;
  background:var(--cream-lt);
  border-top:1px solid var(--red);
}

.header .checker{ margin:2px 0 26px; }

/* ============================================================
   BOTÕES PRINCIPAIS
   ============================================================ */
.links{
  display:flex;
  flex-direction:column;
  gap:13px;
}

.btn{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:68px;
  padding:10px 18px;
  border:1.6px solid transparent;
  border-radius:3px;
  cursor:pointer;
  position:relative;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  will-change:transform;
}

/* badge circular — carimbo com borda dupla */
.btn__badge{
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--cream);
  border:1.5px solid var(--red);
  color:var(--red);
  position:relative;
}
.btn__badge::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid var(--red);
  border-radius:50%;
}
.ic{ width:24px; height:24px; display:block; }

/* Tile de logo das plataformas de delivery (wordmark nas cores DOVA) */
.btn__logo{
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:10px;
  background:var(--cream);
  border:1.5px solid var(--red);
  display:grid; place-items:center;
  position:relative;
}
.btn__logo::before{
  content:"";
  position:absolute; inset:3px;
  border:1px solid var(--red);
  border-radius:7px;
}
.btn__logo-mark{
  font-family:'Fredoka', var(--cond);
  font-weight:600;
  color:var(--red);
  font-size:12.5px;
  line-height:1;
  letter-spacing:-.01em;
  position:relative;
}
.btn__logo-mark--99{ font-size:19px; letter-spacing:-.03em; }

.btn__label{
  flex:1 1 auto;
  font-family:var(--cond);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:1.22rem;
  line-height:1.05;
}

/* Botão-CTA principal (canal próprio — cardápio oficial) */
.btn--hero{ min-height:76px; }
.btn__stack{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.btn__stack .btn__label{ flex:0 0 auto; }
.btn__sub{
  font-family:var(--cond);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.7rem;
  font-weight:500;
  line-height:1;
  opacity:.95;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.btn__promo{
  background:var(--cream);
  color:var(--red);
  font-weight:700;
  letter-spacing:.04em;
  padding:2px 8px 3px;
  border-radius:20px;
}

/* chevron */
.btn__chev{
  flex:0 0 auto;
  width:9px; height:9px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.85;
  margin-right:2px;
}

.btn--red{
  background:var(--red);
  color:var(--cream);
  border-color:var(--red-dark);
}
.btn--black{
  background:var(--black);
  color:var(--cream);
  border-color:rgba(244,223,194,.22);
}

.btn:hover{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 8px 20px rgba(10,9,8,.22);
}
.btn:active{ transform:translateY(0) scale(.995); }

.btn:focus-visible{
  outline:3px solid var(--black);
  outline-offset:3px;
}

/* ============================================================
   ENDEREÇO
   ============================================================ */
.address{
  margin:30px 0 8px;
  padding:14px 20px 22px;
  background:var(--kraft-soft);
  text-align:center;
}
.address::before{ border-color:var(--red); }

.seal{
  width:112px; height:112px;
  display:block;
  margin:-44px auto 6px;
  color:var(--cream);        /* define currentColor do emblema central */
  filter:drop-shadow(0 4px 10px rgba(10,9,8,.28));
}
.seal use{ stroke-width:1.4; }
.seal-text{
  fill:var(--cream);
  font-family:var(--cond);
  font-weight:600;
  font-size:9px;
  letter-spacing:2px;
  text-anchor:middle;
}

.address__eyebrow{
  font-family:var(--cond);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:600;
  color:var(--red);
  margin-bottom:8px;
}
.address__text{
  font-family:var(--cond);
  font-weight:500;
  font-size:1.12rem;
  letter-spacing:.02em;
  color:var(--black);
  margin-bottom:16px;
}

.btn--outline{
  background:transparent;
  color:var(--black);
  border-color:var(--red);
  min-height:60px;
}
.btn--outline .btn__label{ color:var(--black); }
.btn--outline:hover{ background:rgba(189,25,20,.06); }

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer{
  margin-top:34px;
  text-align:center;
  padding-bottom:30px;
}
.footer .checker{ margin-bottom:22px; }

.footer__claim{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:1.18rem;
  line-height:1.3;
  color:var(--black);
  max-width:16em;
  margin:0 auto 16px;
}
.footer__credit{
  font-family:var(--cond);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:500;
  color:var(--kraft);
}

/* ============================================================
   Ajustes finos de tela maior / desktop
   ============================================================ */
@media (min-width:520px){
  .tagline{ font-size:1.3rem; }
  .btn__label{ font-size:1.3rem; }
}

@media (prefers-reduced-motion:reduce){
  .btn{ transition:none; }
  .btn:hover{ transform:none; }
}