/* Atacadista Fut — balcão de atacado de verdade: foto colada com fita, etiqueta escrita a marcador,
   folha de pedido, bilhete amarelo. Azul profundo + amarelo, com textura de papel. */
:root{
  --navy: #102A43;
  --navy-2: #0B1F33;
  --blue: #1664D8;
  --yellow: #FFC928;
  --ice: #F6F8FB;
  --graphite: #18212F;
  --paper: #FFFFFF;
  --line: #D6DEE8;
  --muted: #56636F;
  --display: 'Archivo Black', 'Archivo', 'Arial Black', system-ui, sans-serif;
  --head: 'Archivo', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Permanent Marker', 'Comic Sans MS', cursive;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--ice); color:var(--graphite); font-family:var(--body); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::after{ content:""; position:fixed; inset:0; z-index:200; pointer-events:none; background-image:var(--grain); opacity:.07; mix-blend-mode:multiply; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
.wrap{ max-width:1160px; margin:0 auto; padding-inline:20px; }
.skip{ position:absolute; left:-9999px; top:8px; background:var(--yellow); color:var(--navy); padding:8px 14px; font-weight:700; z-index:100; }
.skip:focus{ left:12px; }
.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.marker{ font-family:var(--hand); font-weight:400; letter-spacing:.01em; }
section{ padding-block:76px; }
@media (min-width:960px){ section{ padding-block:120px; } }
h2{ font-family:var(--display); font-size:clamp(32px, 4.4vw, 54px); line-height:1.02; letter-spacing:-.015em; color:var(--navy); }

/* botões */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--head); font-weight:800; font-stretch:110%; letter-spacing:.05em; text-decoration:none; white-space:nowrap; border-radius:4px; border:2px solid transparent; transition:background .15s, transform .15s, box-shadow .15s; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-yellow{ background:var(--yellow); color:var(--navy); box-shadow:0 4px 0 #C99A0E; }
.btn-yellow:hover{ background:#ffd651; box-shadow:0 6px 0 #C99A0E; }
.btn-navy{ background:var(--navy); color:#fff; box-shadow:0 4px 0 var(--navy-2); }
.btn-navy:hover{ box-shadow:0 6px 0 var(--navy-2); }
.btn-sm{ padding:9px 14px; font-size:12.5px; box-shadow:none; }
.btn-sm:hover{ box-shadow:none; }
.btn-lg{ padding:18px 28px; font-size:16.5px; min-height:60px; }
.btn-lg .ic{ width:22px; height:22px; stroke-width:2.4; }
.btn-block{ width:100%; padding:16px; font-size:16px; min-height:54px; box-shadow:none; }

/* topo */
.topbar{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:30; background:var(--navy); border-bottom:3px solid var(--yellow); }
.topbar-in{ display:flex; align-items:center; gap:24px; min-height:64px; }
.logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-family:var(--head); font-weight:900; font-stretch:115%; font-size:17px; letter-spacing:.04em; }
.logo b{ color:var(--yellow); }
.logo-tag{ width:34px; height:24px; }
.nav{ display:none; gap:28px; margin-left:auto; }
.nav a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:14.5px; font-weight:500; }
.nav a:hover{ color:#fff; }
.topbar .btn{ margin-left:auto; }
@media (min-width:960px){ .nav{ display:flex; } .topbar .btn{ margin-left:8px; } }
@media (max-width:420px){ .topbar .btn{ display:none; } }

/* HERO */
.hero{ position:relative; background:var(--navy); color:#fff; padding-block:44px 72px; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.18; mix-blend-mode:overlay; pointer-events:none; }
.hero-grid{ position:relative; display:grid; gap:30px; grid-template-areas:"head" "video" "body"; }
.hero-head{ grid-area:head; }
.hero-video{ grid-area:video; }
.hero-body{ grid-area:body; display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
@media (min-width:960px){
  .hero{ padding-block:84px 120px; }
  .hero-grid{ grid-template-columns:1.2fr .8fr; grid-template-areas:"head video" "body video"; column-gap:72px; row-gap:30px; align-items:end; }
  .hero-body{ align-self:start; }
}
.eyebrow{ font-family:var(--head); font-weight:800; font-stretch:110%; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin-bottom:18px; }
h1{ font-family:var(--display); font-size:clamp(40px, 6.4vw, 80px); line-height:.98; letter-spacing:-.02em; }
h1 .hl{ display:block; color:var(--yellow); }
.lead{ font-size:clamp(17px, 1.5vw, 19.5px); color:rgba(255,255,255,.84); max-width:42ch; }
.micro{ font-size:13.5px; color:rgba(255,255,255,.6); }
@media (max-width:620px){ .hero-body .btn{ width:100%; } }

/* foto do vídeo colada com fita */
.hero-video{ position:relative; justify-self:center; width:min(100%, 340px); padding:14px 10px 10px; }
.photo{ position:relative; background:var(--paper); padding:10px 10px 14px; transform:rotate(-2.2deg); box-shadow:0 30px 50px -24px rgba(0,0,0,.6); }
.video{ position:relative; aspect-ratio:9 / 16; overflow:hidden; background:var(--navy-2); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-poster{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; }
.video-poster img{ width:100%; height:100%; object-fit:cover; }
.play{ position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; display:grid; place-items:center; background:var(--yellow); color:var(--navy); box-shadow:0 10px 24px rgba(0,0,0,.35); transition:transform .2s; }
.play .ic{ width:28px; height:28px; fill:currentColor; margin-left:4px; }
.video-poster:hover .play{ transform:scale(1.07); }
.photo-caption{ padding-top:10px; text-align:center; font-family:var(--hand); font-size:17px; color:var(--navy); }
.tape{ position:absolute; z-index:2; width:110px; height:30px; background:rgba(255,201,40,.82); box-shadow:0 2px 6px rgba(0,0,0,.15); }
.tape::before, .tape::after{ content:""; position:absolute; top:0; bottom:0; width:6px; background:inherit; }
.tape-tl{ left:-26px; top:14px; transform:rotate(-38deg); clip-path:polygon(3% 0, 100% 6%, 97% 100%, 0 94%); }
.box-label{ position:absolute; z-index:3; right:-16px; top:58%; display:grid; gap:2px; padding:12px 16px 10px; background:#fff; color:var(--navy); border:1.5px solid var(--navy); border-radius:3px; transform:rotate(4deg); box-shadow:0 12px 22px -12px rgba(0,0,0,.6); }
.box-label-row{ display:flex; align-items:baseline; gap:10px; }
.box-label small{ font-family:var(--head); font-weight:800; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); min-width:34px; }
.box-label b{ font-size:19px; line-height:1.25; color:var(--blue); }
.strike{ position:relative; color:var(--muted) !important; }
.strike::after{ content:""; position:absolute; left:-4px; right:-6px; top:52%; height:3px; background:var(--graphite); border-radius:3px; transform:rotate(-4deg); }
@media (max-width:420px){ .box-label{ right:-4px; } }

/* 02 — folha de pedido + bilhete */
.who-grid{ display:grid; gap:44px; }
@media (min-width:960px){ .who-grid{ grid-template-columns:1.1fr .9fr; grid-template-areas:"title title" "order notice"; column-gap:56px; row-gap:56px; align-items:start; } .who-title{ grid-area:title; } .order{ grid-area:order; } .notice{ grid-area:notice; margin-top:48px; } }
.who-title{ max-width:18ch; }
.under{ position:relative; display:inline; }
.under svg{ position:absolute; left:0; bottom:-.18em; width:100%; height:.32em; fill:none; stroke:var(--yellow); stroke-width:5; stroke-linecap:round; z-index:-1; overflow:visible; }
.who-title{ position:relative; z-index:0; }
.order{ position:relative; background:var(--paper); padding:26px 24px 30px 56px; border-radius:2px; box-shadow:0 20px 40px -26px rgba(16,42,67,.45); background-image:linear-gradient(90deg, transparent 38px, rgba(22,100,216,.28) 38px 39.5px, transparent 39.5px), repeating-linear-gradient(transparent 0 47px, #E3E9F1 47px 48px); background-position:0 0, 0 18px; transform:rotate(-.6deg); }
.order-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.order-head b{ font-family:var(--display); font-size:22px; color:var(--navy); }
.order-head .marker{ color:var(--blue); font-size:16px; transform:rotate(-4deg); }
.order-list{ list-style:none; margin:0; padding:0; columns:1; }
@media (min-width:560px){ .order-list{ columns:2; column-gap:28px; } }
.order-list li{ position:relative; display:flex; align-items:center; gap:12px; min-height:48px; font-size:17px; font-weight:500; break-inside:avoid; }
.mk{ width:28px; height:28px; flex:none; fill:none; stroke:var(--blue); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.order-list li:nth-child(2n) .mk{ transform:rotate(8deg); }
.order-list li:nth-child(3n) .mk{ transform:rotate(-6deg) scale(.92); }
.notice{ position:relative; background:var(--yellow); color:var(--navy); padding:34px 28px 30px; transform:rotate(1.6deg); box-shadow:0 22px 34px -22px rgba(16,42,67,.6); }
.notice::before{ content:""; position:absolute; left:50%; top:-14px; width:96px; height:28px; margin-left:-48px; background:rgba(214,222,232,.85); transform:rotate(-3deg); }
.notice-x{ width:46px; height:46px; fill:none; stroke:var(--navy); stroke-width:3.4; stroke-linecap:round; margin-bottom:14px; }
.notice h3{ font-family:var(--display); font-size:clamp(24px, 2.4vw, 30px); line-height:1.1; margin-bottom:12px; }
.notice p{ font-size:16.5px; }

/* 03 — celular + lista marcada */
.counter{ background:var(--paper); }
.counter-grid{ display:grid; gap:56px; }
@media (min-width:960px){ .counter-grid{ grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; } }
.counter-phone{ position:relative; justify-self:center; padding:70px 10px 10px 10px; }
.phone{ width:250px; max-width:100%; aspect-ratio:736 / 1600; border-radius:36px; border:9px solid var(--graphite); overflow:hidden; background:var(--graphite); box-shadow:0 34px 60px -30px rgba(16,42,67,.6); transform:rotate(-2deg); }
.phone img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.hand-note{ position:absolute; right:-96px; top:0; display:flex; flex-direction:column; align-items:flex-start; color:var(--blue); transform:rotate(6deg); }
.hand-note .marker{ font-size:20px; line-height:1.1; max-width:8ch; }
.hand-note svg{ width:90px; height:52px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; transform:scaleX(-1) rotate(-10deg); margin:4px 0 0 -30px; }
.pillars{ margin:36px 0 0; display:grid; }
.pillars div{ display:grid; gap:4px; padding:20px 0; border-top:1.5px solid var(--line); }
@media (min-width:600px){ .pillars div{ grid-template-columns:200px 1fr; gap:24px; align-items:baseline; } }
.pillars dt{ font-family:var(--display); font-size:26px; letter-spacing:.01em; text-transform:uppercase; color:var(--navy); justify-self:start; background:linear-gradient(transparent 58%, rgba(255,201,40,.75) 58% 88%, transparent 88%); padding-inline:2px; }
.pillars dd{ margin:0; color:var(--muted); font-size:17px; }

/* 04 — rota desenhada */
.steps{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.steps::before{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.18; mix-blend-mode:overlay; pointer-events:none; }
.steps h2{ color:#fff; max-width:16ch; position:relative; }
.route{ position:relative; list-style:none; margin:56px 0 0; padding:0; display:grid; gap:34px; }
.route::before{ content:""; position:absolute; left:27px; top:20px; bottom:20px; border-left:3px dashed rgba(255,201,40,.55); }
.route li{ position:relative; padding-left:80px; }
.route .n{ position:absolute; left:0; top:-6px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--yellow); color:var(--navy); font-family:var(--display); font-size:20px; box-shadow:0 0 0 6px var(--navy); }
.route li:nth-child(2) .n{ transform:rotate(-8deg); }
.route li:nth-child(3) .n{ transform:rotate(6deg); }
.route li:nth-child(4) .n{ transform:rotate(-4deg); }
.route h3{ font-family:var(--head); font-weight:900; font-stretch:115%; font-size:22px; letter-spacing:.06em; margin-bottom:4px; }
.route p{ color:rgba(255,255,255,.75); max-width:26ch; }
@media (min-width:860px){
  .route{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; }
  .route::before{ left:28px; right:28px; top:28px; bottom:auto; height:30px; border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 30' preserveAspectRatio='none'%3E%3Cpath d='M0 14C120 4 200 26 330 15S560 2 670 16 880 26 1000 12' fill='none' stroke='%23FFC928' stroke-opacity='.6' stroke-width='3' stroke-dasharray='10 9'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
  .route li{ padding:84px 0 0; }
  .route .n{ top:0; }
  .route li:nth-child(even){ margin-top:22px; }
}

/* CTA final */
.final{ background:var(--yellow); color:var(--navy); overflow:hidden; }
.final-grid{ display:grid; gap:40px; align-items:center; }
@media (min-width:960px){ .final-grid{ grid-template-columns:auto 1fr auto; gap:64px; } }
.polaroid{ margin:0; justify-self:center; width:200px; background:#fff; padding:10px 10px 0; transform:rotate(-5deg); box-shadow:0 26px 40px -24px rgba(16,42,67,.6); }
.polaroid img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:center 30%; }
.polaroid figcaption{ padding:10px 4px 14px; text-align:center; font-size:16px; color:var(--navy); }
@media (max-width:959px){ .polaroid{ display:none; } }
.final h2{ font-size:clamp(34px, 4.6vw, 58px); margin-bottom:14px; }
.final p{ font-size:18px; max-width:40ch; margin-bottom:28px; }
@media (max-width:620px){ .final .btn{ width:100%; } }
.qr{ display:none; }
@media (min-width:960px){
  .qr{ display:flex; flex-direction:column; align-items:center; gap:10px; background:#fff; padding:20px 18px 14px; transform:rotate(2.5deg); box-shadow:0 26px 40px -24px rgba(16,42,67,.6); }
  .qr-code svg{ width:160px; height:160px; display:block; }
  .qr p{ font-family:var(--hand); font-size:15px; text-align:center; max-width:16ch; margin:0; line-height:1.25; }
}

/* FAQ */
.faq-grid{ display:grid; gap:32px; }
@media (min-width:960px){ .faq-grid{ grid-template-columns:.7fr 1.3fr; gap:64px; } .faq-grid h2{ position:sticky; top:110px; align-self:start; } }
.faq-list{ border-top:2px solid var(--navy); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 2px; font-family:var(--head); font-weight:800; font-size:18px; color:var(--navy); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:4px; background:var(--navy); color:var(--yellow); font-size:20px; font-weight:700; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 2px 22px; color:var(--muted); max-width:60ch; }

/* rodapé */
.footer{ background:var(--graphite); color:rgba(255,255,255,.72); padding-block:52px 120px; font-size:14px; }
@media (min-width:960px){ .footer{ padding-block:56px; } }
.footer-in{ display:grid; gap:28px; }
@media (min-width:960px){ .footer-in{ grid-template-columns:1fr 1.1fr auto; gap:48px; align-items:start; } }
.footer-note{ margin-top:10px; }
.footer-company strong{ color:#fff; font-weight:700; letter-spacing:.03em; }
.footer-links{ display:flex; flex-wrap:wrap; gap:10px 22px; }
@media (min-width:960px){ .footer-links{ flex-direction:column; } }
.footer-links a{ color:#fff; text-decoration:none; font-weight:600; }
.footer-links a:hover{ color:var(--yellow); }

/* CTA fixo no celular */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--navy); border-top:1px solid rgba(255,255,255,.12); }
@media (min-width:960px){ .sticky-cta{ display:none; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .btn, .play{ transition:none; } }
@media (max-width:959px){ .hand-note{ display:none; } .counter-phone{ padding-top:10px; } }


/* ---------- revisão: regras de interface (toque, âncoras, foco) ---------- */
html{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(255,201,40,.25); }
main [id]{ scroll-margin-top:84px; }
@media (max-width:959px){ html{ scroll-padding-bottom:96px; } }

/* chamado final: botão secundário do canal no WhatsApp */
.final-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-ghost{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 2px var(--navy); }
.btn-ghost:hover{ background:rgba(16,42,67,.08); }
@media (max-width:620px){ .final-actions .btn{ width:100%; } }