/* INTERAÇÃO E ACESSIBILIDADE (2026-11-08, correções do júri /jury). Comum a todas as páginas; carregar por ÚLTIMO,
   depois do <style> da página e do padrao-v3.css, porque reescreve o :hover e o :focus-visible de lá. */

/* atalho: primeiro foco da página, escondido até receber foco */
.pular{position:fixed;left:16px;top:10px;z-index:1000;padding:10px 18px;border-radius:9999px;background:#1d1d1f;color:#fff;font-size:15px;font-weight:600;text-decoration:none;transform:translateY(-160%)}
.pular:focus{transform:none}

/* foco: anel de 2 px a 2 px de distância, no laranja da marca */
:focus-visible{outline:2px solid #E8590C;outline-offset:2px}
/* vídeo mora em caixa com overflow:hidden, que corta o anel: o anel vai para a caixa */
:has(>video:focus-visible){outline:2px solid #E8590C;outline-offset:2px}
video:focus-visible{outline:none}
/* cartão que entra com a rolagem: se o foco chega antes, ele já aparece */
.anima .entra:focus-within{opacity:1;transition:none}
.anima .entra:focus-within>*{transform:none}

/* hover dos botões: o preenchimento corre da esquerda (primário escurece, contorno vira laranja cheio) */
.pill{--varre:#C2410C;background-repeat:no-repeat;background-position:0 0;background-size:0 100%;transition:transform .12s,background-size .35s cubic-bezier(.22,1,.36,1),color .2s,border-color .2s,box-shadow .3s}
.pill,.pill:hover,.escuro .pill:hover{background-image:linear-gradient(var(--varre),var(--varre))}
.pill-ghost{--varre:#E8590C}
.pill-primary:hover{background-color:#E8590C;background-size:100% 100%;box-shadow:0 8px 22px -10px rgba(232,89,12,.8)}
.pill-ghost:hover,.escuro .pill-ghost:hover{background-color:transparent;background-size:100% 100%;color:#fff;border-color:#E8590C;box-shadow:0 8px 22px -10px rgba(232,89,12,.8)}
.pill:disabled:hover{background-size:0 100%;box-shadow:none}

/* logo e links do menu: sublinhado laranja que cresce da esquerda */
.marca,#nav a{background-image:linear-gradient(#E8590C,#E8590C);background-repeat:no-repeat;background-origin:content-box;background-position:0 100%;background-size:0 2px;transition:background-size .3s cubic-bezier(.22,1,.36,1),color .2s}
.marca:hover,#nav a:not([aria-current]):hover{background-size:100% 2px}

/* "Ver o pedido completo": a seta avança 4 px no sentido em que abre */
html.js .pedido .ver:hover .ico{transform:translateY(4px)}
html.js .pedido.aberto .ver:hover .ico{transform:rotate(180deg) translateY(4px)}

@media (prefers-reduced-motion:reduce){
  .pill,.marca,#nav a,html.js .pedido .ver .ico{transition:none}
}

/* contraste: texto pequeno em laranja sobre branco usa o laranja de texto miúdo (#C2410C, 5,18:1) */
.selo-servico small,.fone .item.vivo small{color:var(--acento-miudo,#C2410C)}