/* Tema da Dom Cheff Pizzaria — tirado das artes dela: fundo carvão, vermelho e dourado dos cartazes, o tricolor
   italiano do logo, letra serifada (como "Dom Cheff") e dourado cursivo (como o "Cardápio" dos cartazes).
   Vale para a página inicial (body.dc), o pedido e o painel: estes só trocam as variáveis de cor e as fontes. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,700&family=Montserrat:wght@400;500;600;700;800&family=Dancing+Script:wght@700&display=swap');

:root {
  --bg: #121212;
  --bg-2: #1b1b1b;
  --surface: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .12);
  --text: #f7f4ee;
  --muted: #b7b1a7;
  --accent: #e0282f;
  --accent-2: #f2c230;
  --red: #b5141c;
  --green: #4cc27a;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --accent-rgb: 224, 40, 47;
  --accent-2-rgb: 242, 194, 48;
  --red-rgb: 181, 20, 28;
  --green-rgb: 76, 194, 122;
  --brasa-rgb: 224, 40, 47;
  --laranja-rgb: 242, 194, 48;
  --bg-rgb: 18, 18, 18;
  --bg-2-rgb: 27, 27, 27;
  --escuro-rgb: 8, 8, 8;
  --tinta-rgb: 255, 255, 255;
  --tinta-2-rgb: 255, 255, 255;
  --quente: #2c2c2c;
  --quente-2: #171717;
  --quente-3: #262626;
  /* da marca */
  --verde: #1f9d55;
  --branco: #f4f1ea;
  --vermelho: #e0282f;
  --tijolo: #d4572a;
  --papel: #f5efe2;
  --papel-tinta: #3d2214;
  --script: 'Dancing Script', cursive;
}

/* painel: a foto da entrada é a da pizzaria */
.entrada { background: linear-gradient(rgba(18, 18, 18, .8), rgba(18, 18, 18, .96)), url('../img/foto-pepperoni.webp') center / cover; }
.entrada-logo { width: 190px; }

/* ===================================================== PÁGINA INICIAL (body.dc) */
.dc { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.dc *, .dc *::before, .dc *::after { box-sizing: border-box; }
html:has(.dc) { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
.dc h1, .dc h2, .dc h3, .dc p { margin: 0; }
.dc a { color: inherit; text-decoration: none; }
.dc img { max-width: 100%; height: auto; display: block; }
.dc [hidden] { display: none !important; }
.dc a:focus-visible, .dc button:focus-visible, .dc input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 10px; }

/* faixa tricolor (do logo) */
.tricolor { display: flex; height: 5px; }
.tricolor i { flex: 1; }
.tricolor i:nth-child(1) { background: var(--verde); }
.tricolor i:nth-child(2) { background: var(--branco); }
.tricolor i:nth-child(3) { background: var(--vermelho); }

.dc .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 800 15px/1 var(--font-body); letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--vermelho), var(--red));
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), .35); transition: transform .2s, box-shadow .2s; }
.dc .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--accent-rgb), .45); }
.dc .btn.contorno { background: transparent; border: 1.5px solid rgba(255, 255, 255, .35); box-shadow: none; }
.dc .btn.contorno:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.dc .btn svg { width: 20px; height: 20px; flex: none; }

/* -------------------------------------------------------------- cabeçalho */
.dc-nav { position: fixed; inset: 0 0 auto; z-index: 30; transition: background .3s, box-shadow .3s; }
.dc-nav-in { display: flex; align-items: center; gap: 22px; max-width: 1180px; margin: 0 auto; padding: 12px 20px; }
.dc-nav.solida { background: rgba(18, 18, 18, .92); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.dc-nav-logo img { height: 52px; width: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.dc-nav-links { display: flex; gap: 26px; margin-left: auto; font-weight: 600; font-size: 14.5px; color: #ddd7cc; }
.dc-nav-links a:hover { color: #fff; }
.dc-nav .btn { height: 44px; padding: 0 20px; font-size: 14px; }
@media (max-width: 760px) {
  .dc-nav-links { display: none; }
  .dc-nav .btn { margin-left: auto; }
  .dc-nav-logo img { height: 44px; }
}

/* ------------------------------------------------------------------- hero */
.dc-hero { position: relative; overflow: hidden; padding: 120px 20px 70px;
  background: radial-gradient(70% 60% at 85% 30%, rgba(var(--accent-rgb), .16), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(31, 157, 85, .12), transparent 70%), var(--bg); }
.dc-hero-in { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.dc-olho { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2); }
.dc-olho::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.dc-hero h1 { margin: 18px 0 18px; font: 800 clamp(44px, 6.4vw, 84px)/.98 var(--font-display); letter-spacing: -.01em; }
.dc-hero h1 em { display: block; font: 700 1.05em/1.05 var(--script); color: var(--accent-2); }
.dc-hero-texto { max-width: 470px; font-size: 18px; color: #d9d3c8; }
.dc-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dc-dias { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.dc-dias::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); }
.dc-dias.aberto::before { background: var(--green); box-shadow: 0 0 0 4px rgba(var(--green-rgb), .2); }
.dc .acompanhar { display: flex; align-items: center; gap: 12px; max-width: 470px; margin-top: 22px; padding: 12px 16px; border-radius: 16px;
  background: rgba(var(--accent-2-rgb), .12); border: 1px solid rgba(var(--accent-2-rgb), .4); }
.dc .acompanhar span { flex: 1; display: grid; }
.dc .acompanhar small { color: var(--muted); }
.dc .acompanhar i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); }
.dc-hero-pedidos { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--muted); }
.dc-hero-pedidos b { color: var(--text); border-bottom: 1px solid var(--accent-2); }

/* foto no arco do forno (o forno de tijolos do logo) */
.dc-forno { position: relative; justify-self: center; width: min(100%, 470px); }
.dc-arco { position: relative; aspect-ratio: 4 / 4.6; border-radius: 999px 999px 26px 26px; overflow: hidden;
  border: 10px solid var(--tijolo); box-shadow: 0 0 0 3px #8e2f12, 0 40px 80px rgba(0, 0, 0, .55), 0 0 120px rgba(var(--accent-rgb), .25);
  background: #000; }
.dc-arco img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.dc-selo { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); width: 46%; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); }
@media (max-width: 900px) {
  .dc-hero { padding: 104px 20px 80px; }
  .dc-hero-in { grid-template-columns: 1fr; gap: 50px; text-align: center; }
  .dc-hero-texto, .dc .acompanhar { margin-left: auto; margin-right: auto; }
  .dc-acoes { justify-content: center; }
  .dc-forno { width: min(100%, 380px); }
}
@media (max-width: 480px) {
  .dc-acoes .btn { flex: 1 1 100%; }
}

/* ----------------------------------------------------------------- seções */
.dc-secao { padding: 96px 20px; }
.dc-secao-in { max-width: 1080px; margin: 0 auto; }
.dc-titulo { text-align: center; margin-bottom: 38px; }
.dc-titulo .script { display: block; font: 700 clamp(46px, 7vw, 76px)/1 var(--script); color: var(--accent-2); }
.dc-titulo h2 { margin-top: 6px; font: 800 clamp(26px, 3.6vw, 38px)/1.15 var(--font-display); }
.dc-titulo p { max-width: 560px; margin: 12px auto 0; color: var(--muted); }
.dc-filete { display: flex; width: 120px; height: 4px; margin: 18px auto 0; border-radius: 4px; overflow: hidden; }
.dc-filete i { flex: 1; }
.dc-filete i:nth-child(1) { background: var(--verde); } .dc-filete i:nth-child(2) { background: var(--branco); } .dc-filete i:nth-child(3) { background: var(--vermelho); }

/* cardápio: no papel creme, como o cardápio impresso da casa */
.dc-papel { position: relative; padding: 34px 34px 26px; border-radius: 26px; color: var(--papel-tinta);
  background: radial-gradient(120% 80% at 0% 0%, #fbf7ee, var(--papel)); box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.cl-topo { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cl-abas { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-abas button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: 700 14px/1 var(--font-body); color: var(--papel-tinta); background: transparent; border: 1.5px solid rgba(61, 34, 20, .25); }
.cl-abas button i { font-style: normal; font-size: 12px; padding: 3px 7px; border-radius: 99px; background: rgba(61, 34, 20, .1); }
.cl-abas button.ativa { color: #fff; background: #151515; border-color: #151515; }
.cl-abas button.ativa i { background: var(--accent-2); color: #151515; }
.cl-busca { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; min-width: min(100%, 290px); border-radius: 999px; background: #fff; border: 1.5px solid rgba(61, 34, 20, .2); color: #8a6c5a; }
.cl-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 14.5px var(--font-body); color: var(--papel-tinta); }
.cl-cab, .cl-item { display: grid; grid-template-columns: 1fr repeat(var(--cols, 2), 96px); gap: 10px; align-items: start; }
.cl-cab { position: sticky; top: 76px; z-index: 2; padding: 10px 0; background: var(--papel); border-bottom: 2px solid #151515; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cl-cab span:not(:first-child) { text-align: right; color: #a3790f; }
.cl-lista ul { list-style: none; margin: 0; padding: 0; }
.cl-item { padding: 14px 0; border-bottom: 1px dashed rgba(61, 34, 20, .22); }
.cl-nome strong { font: 700 18px/1.25 var(--font-display); }
.cl-nome em { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px; vertical-align: 3px; font: 800 10.5px/1.5 var(--font-body); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--vermelho); }
.cl-nome small { display: block; margin-top: 3px; font-size: 13.5px; color: #6f5546; }
.cl-preco { text-align: right; font-weight: 800; font-size: 16px; white-space: nowrap; }
.cl-preco s { display: block; font-size: 12.5px; font-weight: 600; color: #9b8576; }
.cl-preco b { color: var(--papel-tinta); }
.cl-preco s + b { color: var(--vermelho); }
.cl-vazio { padding: 30px 0; text-align: center; color: #8a6c5a; }
.dc-papel-acao { display: flex; justify-content: center; margin-top: 26px; }
@media (max-width: 640px) {
  .dc-papel { padding: 22px 16px 18px; border-radius: 20px; margin: 0 -4px; }
  .cl-cab, .cl-item { grid-template-columns: 1fr repeat(var(--cols, 2), 70px); gap: 6px; }
  .cl-preco { font-size: 14.5px; }
  .cl-nome strong { font-size: 16.5px; }
  .cl-busca { flex: 1 1 100%; }
  .cl-cab { top: 68px; }
}

/* promoção */
.dc-promo { background: linear-gradient(180deg, var(--bg), #1a1414 50%, var(--bg)); }
.dc-promo-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; max-width: 1000px; margin: 0 auto; }
.dc-promo-arte { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, .55); transform: rotate(-2deg); }
.dc-promo-txt .dc-titulo { text-align: left; margin-bottom: 18px; }
.dc-promo-txt .dc-filete { margin-left: 0; }
.dc-preco-grande { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; font: 800 64px/1 var(--font-display); color: var(--accent-2); }
.dc-preco-grande small { font: 700 20px var(--font-body); color: var(--text); }
.dc-promo-txt p { color: #d9d3c8; }
.dc-promo-txt .btn { margin-top: 26px; }
@media (max-width: 820px) {
  .dc-promo-in { grid-template-columns: 1fr; gap: 36px; }
  .dc-promo-arte { max-width: 420px; margin: 0 auto; }
  .dc-promo-txt, .dc-promo-txt .dc-titulo { text-align: center; }
  .dc-promo-txt .dc-filete { margin-left: auto; }
  .dc-preco-grande { justify-content: center; }
}

/* a casa: foto da bancada e a frase deles */
.dc-casa-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1080px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #191919; border: 1px solid var(--line); }
.dc-casa-in img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.dc-casa-txt { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px 44px; }
.dc-casa-txt blockquote { margin: 0; font: 700 italic clamp(24px, 3vw, 32px)/1.3 var(--font-display); }
.dc-casa-txt blockquote::before { content: '“'; display: block; height: 40px; font: 800 80px/1 var(--font-display); color: var(--accent-2); }
.dc-casa-txt cite { font-style: normal; font-weight: 700; color: var(--muted); }
@media (max-width: 760px) {
  .dc-casa-in { grid-template-columns: 1fr; }
  .dc-casa-in img { min-height: 0; aspect-ratio: 4 / 3.4; }
  .dc-casa-txt { padding: 32px 24px 36px; }
}

/* onde estamos */
.dc-contato { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dc-cartao { padding: 26px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.dc-cartao h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 800 12.5px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); }
.dc-cartao h3 svg { width: 20px; height: 20px; }
.dc-cartao .forte { font: 700 20px/1.3 var(--font-display); }
.dc-cartao p + p { margin-top: 4px; color: var(--muted); }
.dc-cartao .link { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--accent-2); }
.dc-cartao .fone { display: block; font: 700 20px/1.5 var(--font-display); }
.dc-cartao .fone:hover, .dc-cartao .link:hover { text-decoration: underline; }
.dc-cartao small { display: block; color: var(--muted); font-size: 13px; }
.dc-cartao .h-linha { display: block; }
.dc-cartao .h-linha + .h-linha { margin-top: 8px; }
.dc-cartao .h-linha small { font: 600 15px/1.4 var(--font-body); }
@media (max-width: 820px) { .dc-contato { grid-template-columns: 1fr; } }

/* rodapé */
.dc-rodape { padding: 46px 20px 36px; text-align: center; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.dc-rodape img { width: 150px; margin: 0 auto 16px; }
.dc-rodape p + p { margin-top: 10px; font-size: 13px; }
.dc-rodape a { color: var(--text); font-weight: 700; }

/* botão de pedido fixo no celular */
.dc-fixo { display: none; }
@media (max-width: 760px) {
  .dc-fixo { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 25; display: flex; }
  .dc-fixo .btn { width: 100%; }
  .dc-rodape { padding-bottom: 96px; }
}

/* entrada das seções ao rolar (js/landing.js) */
.dc .revela { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .9, .3, 1); }
.dc .revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dc .revela { opacity: 1; transform: none; transition: none; }
  html:has(.dc) { scroll-behavior: auto; }
}