/* NOSSO CHOPE — Chope Delivery */
:root{
  --amarelo:#ffbd24;
  --amarelo-2:#f9cc0a;
  --grad-a:#ffd324;
  --grad-b:#e9a402;
  --preto:#171717;
  --marrom:#1a0e04;
  --texto:#262626;
  --cinza:#6b6b6b;
  --linha:#e7e3da;
  --creme:#fbf8f1;
  --branco:#fff;
  --verde:#127a3d;
  --verde-bg:#e8f6ed;
  --vermelho:#b3132f;
  --vermelho-bg:#fdebee;
  --raio:16px;
  --sombra:0 1px 2px rgba(26,14,4,.06),0 12px 32px rgba(26,14,4,.08);
  --f-titulo:"Montserrat",system-ui,sans-serif;
  --f-texto:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--texto);font-family:var(--f-texto);font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
svg{width:1em;height:1em;flex:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

/* Topo */
.topo{background:linear-gradient(120deg,var(--grad-a),var(--grad-b))}
.topo__in{max-width:960px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.logo img{width:88px;height:auto}
.selo-topo{background:var(--preto);color:var(--amarelo);font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.06em;padding:8px 14px;border-radius:999px}

/* Progresso + cronômetro */
.progresso{position:sticky;top:0;z-index:20;background:var(--preto);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.progresso__in{max-width:960px;margin:0 auto;padding:10px 16px 10px}
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.passos button{all:unset;display:flex;align-items:center;gap:8px;width:100%;cursor:default;font-family:var(--f-titulo);font-weight:700;font-size:13px;color:#8c8c8c}
.passos .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid #4a4a4a;font-size:12px;flex:none;transition:.2s}
.passos li.ativo button{color:#fff}
.passos li.ativo .n{background:var(--amarelo);border-color:var(--amarelo);color:var(--preto);box-shadow:0 0 0 4px rgba(255,189,36,.25)}
.passos li.feito button{color:#d9d9d9;cursor:pointer}
.passos li.feito .n{background:#2e2e2e;border-color:var(--amarelo);color:var(--amarelo)}
.passos li.feito button:focus-visible{outline:2px solid var(--amarelo);outline-offset:3px;border-radius:6px}
.barra{height:6px;background:#333;border-radius:99px;margin:10px 0 8px;overflow:hidden}
.barra span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amarelo-2),var(--amarelo));border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.cronometro{display:flex;align-items:center;gap:12px;font-size:13px}
.cronometro__etapa{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--amarelo)}
.cronometro__tempo{display:inline-flex;align-items:center;gap:5px;color:#d9d9d9;font-variant-numeric:tabular-nums}
.cronometro__tempo svg{color:var(--amarelo)}
.cronometro__falta{margin-left:auto;background:#2a2a2a;padding:3px 10px;border-radius:99px;color:#f2f2f2;font-weight:600}

/* Palco */
.palco{max-width:960px;margin:0 auto;padding:20px 16px 40px}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:24px;background:linear-gradient(150deg,var(--grad-a),var(--grad-b));border-radius:24px;padding:28px;margin-bottom:22px;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 60%);pointer-events:none}
.hero__txt{}
.tarjas{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;line-height:1;font-size:clamp(20px,3.4vw,30px)}
.tarjas span{background:var(--preto);color:#fff;padding:7px 12px 6px;border-radius:6px}
.tarjas .tarja-grande{background:#fff;color:var(--preto);font-size:1.22em;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--preto)}
.hero__sub{margin:18px 0 0;max-width:430px;color:var(--marrom);font-size:15px}
.hero__img{position:relative;align-self:stretch;min-height:250px}
.chopeira{position:absolute;right:0;top:0;bottom:24px;width:84%;height:calc(100% - 24px);object-fit:contain;object-position:50% 50%;border-radius:20px;border:6px solid #fff;box-shadow:0 18px 40px rgba(26,14,4,.28);transform:rotate(2.5deg);background:#e6e6e7}
.barril-hero{position:absolute;left:0;bottom:12px;width:30%;max-width:120px;height:auto;aspect-ratio:120/170;filter:drop-shadow(0 10px 12px rgba(26,14,4,.35));transform:rotate(-6deg)}

/* Etapas */
.etapa{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);padding:26px 24px;animation:entra .35s ease both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.etapa__cab{margin-bottom:18px}
.etiqueta{display:inline-block;background:var(--preto);color:var(--amarelo);font-family:var(--f-titulo);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:5px;transform:rotate(-2deg)}
.etapa h2{font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;font-size:clamp(20px,3vw,26px);line-height:1.1;margin:10px 0 4px;color:var(--preto)}
.etapa__cab p{margin:0;color:var(--cinza)}

/* Campos */
.grade{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 14px}
.c-12{grid-column:span 12}.c-9{grid-column:span 9}.c-7{grid-column:span 7}.c-6{grid-column:span 6}.c-5{grid-column:span 5}.c-3{grid-column:span 3}.c-2{grid-column:span 2}
.campo{display:flex;flex-direction:column;gap:6px}
.campo>span{font-weight:600;font-size:14px;color:var(--preto)}
.campo em{font-style:normal;color:var(--cinza);font-weight:500}
.campo input,.campo textarea,.contador input{font:inherit;font-size:16px;color:var(--preto);background:#fff;border:2px solid var(--linha);border-radius:12px;padding:12px 14px;transition:border-color .15s,box-shadow .15s;width:100%}
.campo textarea{resize:vertical;min-height:70px}
.campo input:focus,.campo textarea:focus,.contador input:focus{outline:none;border-color:var(--amarelo);box-shadow:0 0 0 4px rgba(255,189,36,.25)}
.campo.invalido input,.campo.invalido textarea{border-color:var(--vermelho)}
.campo .ajuda{color:var(--cinza);font-size:12.5px}
.campo .ajuda a{color:var(--marrom)}
.erro{color:var(--vermelho);font-size:13px;font-weight:600;min-height:0}
.erro:empty{display:none}
.erro-bloco{display:block;margin-top:10px}
.subtitulo{display:flex;align-items:center;gap:8px;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.05em;color:var(--marrom);margin-top:6px;padding-top:14px;border-top:1px dashed var(--linha)}
.subtitulo svg{color:var(--grad-b);width:18px;height:18px}
.cep-status{align-self:center;font-size:13.5px;color:var(--cinza);padding-top:18px}
.cep-status.carregando::before{content:"";display:inline-block;width:12px;height:12px;border:2px solid var(--amarelo);border-right-color:transparent;border-radius:50%;margin-right:8px;vertical-align:-1px;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* Cobertura */
.cobertura{margin-top:18px;border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-size:15px}
.cobertura svg{width:22px;height:22px;margin-top:1px}
.cobertura.ok{background:var(--verde-bg);color:var(--verde)}
.cobertura.nao{background:var(--vermelho-bg);color:var(--vermelho);border:2px solid #f5c2cb}
.cobertura.nao strong{display:block;font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;font-size:15px;margin-bottom:2px}
.cobertura.nao p{margin:2px 0 8px;color:#6e1020}
.cobertura .link{color:var(--vermelho)}

/* Botões */
.acoes{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:24px;flex-wrap:wrap}
.acoes--centro{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;padding:15px 22px;font-family:var(--f-titulo);font-weight:800;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s,background .15s}
.btn svg{width:18px;height:18px}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--preto);color:var(--amarelo);margin-left:auto;box-shadow:0 4px 0 #000}
.btn--primario:hover{background:#000}
.btn--primario:disabled{opacity:.6;cursor:wait}
.btn--grande{padding:17px 26px;font-size:16px}
.btn--fantasma{background:transparent;color:var(--preto);border:2px solid var(--linha)}
.btn--fantasma:hover{border-color:var(--preto)}
.btn--whats{background:#25d366;color:#fff}
.link{all:unset;cursor:pointer;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--marrom)}

/* Contadores */
.contadores{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contador{background:var(--creme);border:2px solid var(--linha);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.contador__rot{font-weight:700;font-size:14px;color:var(--preto);text-align:center}
.contador__ctl{display:flex;align-items:center;gap:8px}
.contador input{width:110px;text-align:center;font-family:var(--f-titulo);font-weight:900;font-size:30px;padding:8px 6px;-moz-appearance:textfield}
.contador input::-webkit-outer-spin-button,.contador input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.contador__suf{font-size:13px;color:var(--cinza);margin-top:-4px}
.pm{width:46px;height:46px;border-radius:50%;border:0;background:var(--preto);color:var(--amarelo);font-size:24px;font-weight:700;cursor:pointer;line-height:1}
.pm:hover{background:#000}

.calculo{margin-top:16px;background:var(--preto);color:#fff;border-radius:16px;padding:20px 22px;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden}
.calculo::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,189,36,.35),transparent 65%)}
.calculo__num{display:flex;flex-direction:column;line-height:1}
.calculo__num b{font-family:var(--f-titulo);font-weight:900;font-size:46px;color:var(--amarelo);font-variant-numeric:tabular-nums}
.calculo__num span{font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-top:4px}
.calculo__regra{margin:0;color:#d4d4d4;font-size:14px;position:relative;z-index:1}
.calculo__regra strong{color:#fff}
.calculo.pulsa .calculo__num b{animation:pulsa .35s ease}
@keyframes pulsa{50%{transform:scale(1.08)}}

/* Opções */
.ajuste-rapido{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-4px 0 16px;font-size:13px;color:var(--cinza)}
.chip{border:1.5px solid var(--linha);background:#fff;border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--preto)}
.opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.opcao{position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;background:#fff;border:2.5px solid var(--linha);border-radius:18px;padding:18px 16px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.opcao:hover{border-color:#c9c2b3;transform:translateY(-2px)}
.opcao[aria-checked="true"]{border-color:var(--preto);box-shadow:0 0 0 4px rgba(255,189,36,.55)}
.opcao__selo{position:absolute;top:-12px;left:14px;background:var(--amarelo);color:var(--preto);font-family:var(--f-titulo);font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:5px;transform:rotate(-2deg)}
.opcao__selo--preto{background:var(--preto);color:var(--amarelo)}
.opcao__nome{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:13px;color:var(--cinza);letter-spacing:.04em}
.opcao__litros{font-family:var(--f-titulo);font-weight:900;font-size:34px;line-height:1;color:var(--preto)}
.opcao__litros small{font-size:15px;font-weight:800}
.opcao__barris{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px;min-height:46px}
.opcao__barris svg{width:auto;height:44px;aspect-ratio:120/170}
.opcao__barris svg.b30{height:32px}
.opcao__barris svg.cons{opacity:.95;filter:drop-shadow(0 0 0 transparent)}
.opcao__barris .mais{font-weight:800;font-size:12px;color:var(--cinza);align-self:center;padding:0 4px}
.opcao__desc{font-size:13px;color:var(--cinza);margin:0}
.opcao__txt{font-size:14px;color:var(--texto);margin:0;line-height:1.45}
.opcao__preco{margin-top:auto;padding-top:10px;border-top:1px dashed var(--linha)}
.opcao__preco b{font-family:var(--f-titulo);font-weight:900;font-size:22px;color:var(--preto)}
.opcao__preco span{display:block;font-size:12px;color:var(--cinza)}
.opcao__dif{font-size:12.5px;font-weight:700;border-radius:8px;padding:4px 8px;align-self:flex-start}
.dif-abaixo{background:#fff4d6;color:#7a5200}
.dif-ok{background:var(--verde-bg);color:var(--verde)}
.dif-folga{background:#eef2ff;color:#2f3d8f}
.cons-toggle{display:flex;align-items:center;gap:6px;background:var(--creme);padding:4px;border-radius:10px;border:1.5px solid var(--linha)}
.cons-toggle__rot{font-size:12px;font-weight:700;color:var(--cinza);padding-left:6px;white-space:nowrap}
.cons-toggle button{flex:1;white-space:nowrap;border:0;background:transparent;border-radius:7px;padding:7px 6px;font-weight:800;font-family:var(--f-titulo);font-size:13px;cursor:pointer}
.cons-toggle button[aria-pressed="true"]{background:var(--preto);color:var(--amarelo)}
.cons-info{font-size:12.5px;background:var(--verde-bg);color:var(--verde);padding:8px 10px;border-radius:10px;margin:0}
.opcoes-vazio{grid-column:1/-1;background:var(--creme);border-radius:14px;padding:20px;text-align:center;color:var(--cinza)}

.regras{margin-top:18px;background:var(--creme);border:2px dashed #e2d8c2;border-radius:16px;padding:16px 18px}
.regras h3{margin:0 0 8px;font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;font-size:14px}
.regras ul{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:6px;font-size:14px}
.regras li{display:flex;gap:8px;align-items:flex-start}
.regras li svg{color:var(--verde);margin-top:3px}
.extra-consignado{margin-top:16px;background:#fff8e3;border:2px solid var(--amarelo);border-radius:16px;padding:16px}

/* Pagamento */
.aviso-seguro{display:flex;gap:14px;align-items:flex-start;background:var(--preto);color:#fff;border-radius:16px;padding:16px 18px;margin-bottom:18px}
.aviso-seguro svg{width:30px;height:30px;color:var(--amarelo)}
.aviso-seguro strong{color:var(--amarelo)}
.aviso-seguro p{margin:4px 0 0;color:#d4d4d4;font-size:14px}
.aviso-seguro--claro{background:var(--creme);color:var(--texto);margin-top:18px;font-size:14px;text-align:left}
.aviso-seguro--claro strong{color:var(--preto)}
.aviso-seguro--claro svg{color:var(--verde)}
.pagamentos{border:0;padding:0;margin:0 0 4px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pagamentos legend{font-weight:700;color:var(--preto);margin-bottom:10px;font-size:15px}
.pag{position:relative;cursor:pointer}
.pag input{position:absolute;opacity:0;inset:0}
.pag span{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;height:100%;min-height:62px;border:2.5px solid var(--linha);border-radius:14px;padding:10px;font-size:13px;color:var(--cinza);transition:.15s}
.pag b{color:var(--preto);font-size:14.5px}
.pag input:checked+span{border-color:var(--preto);background:#fff8e3;box-shadow:0 0 0 3px rgba(255,189,36,.5)}
.pag input:focus-visible+span{outline:2px solid var(--preto);outline-offset:2px}
.etapa[data-etapa="4"] .grade{margin-top:18px}
.nota{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:13.5px;color:var(--marrom);background:#fff8e3;border-radius:10px;padding:10px 12px}
.nota svg{color:var(--grad-b);width:18px;height:18px;margin-top:1px}

.resumo{margin-top:20px;border:2px solid var(--preto);border-radius:16px;overflow:hidden}
.resumo h3{margin:0;background:var(--preto);color:var(--amarelo);font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.06em;padding:10px 16px}
.resumo dl{margin:0;padding:6px 16px 12px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.resumo dt{color:var(--cinza)}
.resumo dd{margin:0;text-align:right;font-weight:600;color:var(--preto)}
.resumo .total{border-top:2px dashed var(--linha);padding-top:10px;margin-top:4px}
.resumo .total dd{font-family:var(--f-titulo);font-weight:900;font-size:22px}
.resumo .sub{font-size:12.5px;color:var(--verde);grid-column:1/-1;text-align:right;margin-top:-4px}

/* Fim */
.etapa--fim{text-align:center;padding-top:34px}
.fim__selo{width:72px;height:72px;border-radius:50%;background:var(--amarelo);color:var(--preto);display:grid;place-items:center;margin:0 auto 12px;box-shadow:0 0 0 10px rgba(255,189,36,.25)}
.fim__selo svg{width:38px;height:38px}
.numero-pedido{display:inline-block;font-family:var(--f-titulo);font-weight:900;font-size:clamp(34px,7vw,48px);letter-spacing:.04em;background:var(--preto);color:var(--amarelo);padding:10px 24px;border-radius:12px;margin:6px 0 10px;transform:rotate(-1.5deg)}
.fim__txt{color:var(--cinza);max-width:460px;margin:6px auto 0}
.etapa--fim .resumo{text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
.etapa--fim .aviso-seguro{max-width:520px;margin-left:auto;margin-right:auto}

/* Modal */
.modal{border:0;border-radius:20px;padding:0;max-width:540px;width:calc(100% - 32px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.modal::backdrop{background:rgba(23,23,23,.6)}
.modal__cx{padding:24px}
.modal h3{margin:0 0 12px;font-family:var(--f-titulo);font-weight:900;text-transform:uppercase}
.modal ol{padding-left:20px;margin:0 0 18px;display:grid;gap:8px;font-size:15px}

.rodape{text-align:center;font-size:12.5px;color:var(--cinza);padding:10px 16px 30px}
.rodape p{margin:4px 0}

/* Responsivo */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:22px 20px 24px;gap:18px}
  .hero__img{min-height:170px}
  .tarjas{font-size:19px}
  .hero__sub{font-size:14px;margin-top:12px}
  .chopeira{width:80%}
  .barril-hero{width:26%}
  .opcoes{grid-template-columns:1fr}
  .pagamentos{grid-template-columns:1fr 1fr}
  .c-9,.c-7,.c-6,.c-5{grid-column:span 12}
  .c-3{grid-column:span 4}.c-9{grid-column:span 8}
  .m-9{grid-column:span 9}.m-3{grid-column:span 3}
  .cep-status{padding-top:0}
  .etapa{padding:22px 18px}
  .passos .t{display:none}
  .passos{grid-template-columns:repeat(4,auto);justify-content:space-between}
}
@media (max-width:420px){
  .contadores{grid-template-columns:1fr}
  .cronometro__falta{font-size:12px}
  .acoes .btn{flex:1}
  .btn--primario{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}