/* Hub da plataforma de cardápios (marca VendeoClip): amarelo, preto, letras recortadas, bordas grossas e sombra dura. */
:root {
  --amarelo: #FEC608; --tinta: #111111; --papel: #FFFFFF; --lima: #CCF211; --rosa: #FC62AE; --vermelho: #F9240E; --azul: #1F4BFF; --zap: #25D366;
  --cinza: #5E5A52; --creme: #FFF4C7;
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --borda: 3px solid var(--tinta);
  --sombra: 5px 6px 0 var(--tinta);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--amarelo); color: var(--tinta); font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(17, 17, 17, 0.1) 1.4px, transparent 1.6px); background-size: 22px 22px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 4px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--mono); font-weight: 800; letter-spacing: 0.02em; }

/* marca: letras recortadas */
.wm { display: inline-flex; align-items: center; gap: 0; font-family: var(--display); font-weight: 900; line-height: 1; text-decoration: none; }
.wm i { font-style: normal; display: inline-grid; place-items: center; padding: 0.06em 0.1em 0.02em; margin-left: -0.02em; font-size: 24px; box-shadow: 0 2px 0 rgba(17, 17, 17, 0.35); }
.wm i:nth-child(1) { background: #fff; transform: rotate(-4deg); }
.wm i:nth-child(2) { background: var(--lima); transform: rotate(3deg) translateY(1px); }
.wm i:nth-child(3) { background: #fff; transform: rotate(-2deg); }
.wm i:nth-child(4) { background: var(--azul); color: #fff; transform: rotate(4deg); }
.wm i:nth-child(5) { background: var(--vermelho); color: #fff; transform: rotate(-3deg) translateY(1px); }
.wm i:nth-child(6) { background: var(--tinta); color: #fff; transform: rotate(2deg); }
.wm i:nth-child(7) { background: var(--rosa); transform: rotate(-4deg); }
.wm i:nth-child(8) { background: #fff; transform: rotate(3deg); }
.wm i:nth-child(9) { background: var(--azul); color: #fff; transform: rotate(-2deg) translateY(1px); }
.wm i:nth-child(10) { background: var(--lima); transform: rotate(4deg); }

/* topo */
.topo { position: sticky; top: 0; z-index: 40; background: var(--amarelo); border-bottom: var(--borda); }
.topo .wrap { display: flex; align-items: center; gap: 14px; padding-block: 10px; }
.topo .em { margin-left: 10px; font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; background: var(--tinta); color: var(--amarelo); padding: 5px 9px; text-transform: uppercase; display: none; }
.topo nav { margin-left: auto; display: none; gap: 22px; font-weight: 800; font-size: 16px; }
.topo nav a { text-decoration: none; white-space: nowrap; }
.topo nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.topo .pill { margin-left: auto; padding: 11px 16px; font-size: 15px; }
@media (min-width: 900px) { .topo nav { display: flex; } .topo .pill { margin-left: 8px; } .topo .em { display: inline-block; } }

/* botões */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); font-weight: 900; font-size: 18px; line-height: 1; color: #fff; background: var(--azul); border: var(--borda); border-radius: 14px; padding: 15px 22px; text-decoration: none; cursor: pointer; box-shadow: 4px 5px 0 var(--tinta); transition: transform 0.12s, box-shadow 0.12s; }
.pill:hover { transform: translate(-1px, -2px); box-shadow: 6px 8px 0 var(--tinta); }
.pill:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--tinta); }
.pill.red { background: var(--vermelho); }
.pill.lime { background: var(--lima); color: var(--tinta); }
.pill.ink { background: var(--tinta); color: var(--amarelo); }
.pill.white { background: #fff; color: var(--tinta); }
.pill.zap { background: var(--zap); color: var(--tinta); }
.pill.grande { font-size: 21px; padding: 18px 28px; }
.pill[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 4px 5px 0 var(--tinta); }

/* títulos em tiras */
.tira { display: inline-block; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; background: var(--tinta); color: var(--amarelo); padding: 0.14em 0.3em 0.08em; transform: rotate(-1.2deg); }
.tira.lima { background: var(--lima); color: var(--tinta); transform: rotate(0.8deg); }
.tira.branca { background: #fff; color: var(--tinta); }
.tira.rosa { background: var(--rosa); color: var(--tinta); transform: rotate(0.6deg); }
.rotulo { display: inline-block; font-family: var(--mono); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; background: #fff; border: 2.5px solid var(--tinta); padding: 5px 10px; transform: rotate(-1.5deg); }
h1, h2, h3 { font-family: var(--display); font-weight: 900; margin: 0; line-height: 1; text-wrap: balance; }
h2.cab { font-size: clamp(34px, 6vw, 62px); display: grid; gap: 8px; justify-items: start; }
.lede { max-width: 56ch; font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; margin: 16px 0 0; }

section.bloco { padding: 72px 0; }
.papel { background: var(--papel); border-top: var(--borda); border-bottom: var(--borda); }

/* cartões */
.card { background: #fff; border: var(--borda); border-radius: 22px; box-shadow: var(--sombra); padding: 20px; }
.tile { width: 58px; height: 58px; border: var(--borda); border-radius: 16px; display: grid; place-items: center; box-shadow: 3px 4px 0 var(--tinta); transform: rotate(-3deg); font-size: 28px; }
.tile svg { width: 32px; height: 32px; }

/* formulários */
.campo { display: grid; gap: 6px; font-family: var(--mono); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.campo input, .campo select { font-family: var(--display); text-transform: none; letter-spacing: 0; width: 100%; border: var(--borda); border-radius: 14px; background: #fff; padding: 14px 16px; font-weight: 700; font-size: 18px; box-shadow: 3px 4px 0 var(--tinta); }
.campo input:focus, .campo select:focus { outline: 4px solid var(--azul); outline-offset: 2px; }
.campo small { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--cinza); }
.campo .erro, .msg-erro { color: var(--vermelho); font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: none; letter-spacing: 0; }

/* rodapé */
.rodape { background: var(--tinta); color: #fff; border-top: var(--borda); padding: 36px 0 44px; font-weight: 600; font-size: 16px; }
.rodape .wrap { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; justify-content: space-between; }
.rodape a { color: var(--amarelo); }
.rodape small { color: #bdbab0; display: block; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }