:root{--p:#0b1b6b;--s:#f2b705;--d:#d93a2b;--bg:#f7f8fc;--tx:#222}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tx);background:var(--bg);line-height:1.5}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.topbar{background:var(--p);color:#fff;font-size:14px;padding:6px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
header.main{background:#fff;border-bottom:1px solid #e5e5e0;position:sticky;top:0;z-index:50}
header.main .wrap{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--p);text-decoration:none}
.logo img,.custom-logo{height:46px;width:46px;border-radius:50%;object-fit:cover}
nav.menu{flex:1}
nav.menu ul{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
nav.menu a{text-decoration:none;font-weight:600;font-size:15px}
nav.menu a:hover{color:var(--p)}
.menu-toggle{display:none;background:var(--p);color:#fff;border:0;padding:8px 14px;border-radius:6px;font-weight:700}
.busca{display:flex}
.busca input{padding:8px 10px;border:1px solid #ccc;border-radius:6px 0 0 6px;min-width:0}
.busca button{padding:8px 12px;border:0;background:var(--p);color:#fff;border-radius:0 6px 6px 0;cursor:pointer}
.btn{display:inline-block;background:var(--s);color:#222;padding:10px 18px;border-radius:6px;font-weight:700;text-decoration:none;border:0}
.btn.az{background:var(--p);color:#fff}
.carrossel{background:var(--p);color:#fff;min-height:280px;display:flex;align-items:center}
.carrossel .slide{padding:48px 16px}
.carrossel h1{font-size:2.2rem;margin:0 0 8px}
section.bloco{padding:34px 0}
section.bloco h1,section.bloco h2,.pagina h1{color:var(--p);margin:0 0 16px}
.sub{color:#666;margin-top:-8px}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e3e5ef;border-radius:10px;padding:14px;text-align:center}
.card .img{height:140px;background:#eef0f7;border-radius:6px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;color:#999;font-size:13px;overflow:hidden;text-decoration:none}
.card .img img{max-height:100%;width:auto;object-fit:contain}
.card .img img.logo-f{border-radius:50%;height:120px;width:120px;object-fit:cover}
.card h3{font-size:16px;margin:4px 0}.card h3 a{text-decoration:none}
.card small{color:#666}
.tag{display:inline-block;font-size:12px;background:var(--s);padding:2px 8px;border-radius:10px;margin-top:6px}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filtros a{border:1px solid var(--p);color:var(--p);padding:6px 14px;border-radius:20px;text-decoration:none;font-size:14px}
.filtros a.ativo{background:var(--p);color:#fff}
.filtros.sec a{border-color:var(--d);color:var(--d)}
.filtros.sec a.ativo{background:var(--d);color:#fff}
.info{background:#fff;border:1px solid #e3e5ef;border-radius:10px;padding:16px;margin:12px 0}
.logo-grande img{height:110px;width:110px;border-radius:50%;object-fit:cover}
.pagina{padding:34px 16px;max-width:900px}
.produto-det{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:24px}
.produto-det .img{background:#eef0f7;border-radius:10px;min-height:240px;display:flex;align-items:center;justify-content:center;color:#999}
.vazio{color:#777;padding:12px 0}
.pagination,.nav-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.page-numbers{padding:6px 12px;border:1px solid #ccd;border-radius:6px;text-decoration:none;background:#fff}
.page-numbers.current{background:var(--p);color:#fff}
footer.rodape{background:#070f3d;color:#e8ecf7;padding:32px 0;margin-top:40px;font-size:14px}
footer.rodape .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
footer.rodape h4{margin:0 0 8px}
footer.rodape p{margin:4px 0}
footer.rodape ul{list-style:none;margin:0;padding:0}
@media(max-width:700px){
  .menu-toggle{display:inline-block;margin-left:auto}
  nav.menu{display:none;width:100%;order:3}
  nav.menu.aberto{display:block}
  nav.menu ul{flex-direction:column;gap:8px}
  .produto-det{grid-template-columns:1fr}
}

/* RCAs: mapa e ranking */
.mapa-rcas{width:100%;border:1px solid #e3e5ef;border-radius:10px;overflow:hidden;z-index:0}
.rca-pino span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--p);color:#fff;border:3px solid var(--s);font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rca-popup{margin:6px 0 0;padding-left:18px}
.mapa-lista{columns:2 240px;margin:14px 0;padding-left:18px;color:#444}
.ranking{margin:18px 0}
.rank-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rank-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e3e5ef;border-radius:10px;padding:10px 14px}
.rank-pos{min-width:38px;text-align:center;font-weight:800;color:var(--p);font-size:18px}
.rank-item.pos-1 .rank-pos{color:#b8860b}.rank-item.pos-2 .rank-pos{color:#7d8590}.rank-item.pos-3 .rank-pos{color:#a0522d}
.rank-item.pos-1{border-color:var(--s);box-shadow:0 0 0 2px rgba(242,183,5,.25)}
.rank-foto{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.rank-foto.ini{display:flex;align-items:center;justify-content:center;background:var(--p);color:#fff;font-weight:800}
.rank-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rank-info small{color:#666}
.rank-barra{height:6px;background:#e8eaf3;border-radius:4px;overflow:hidden;margin-top:4px}
.rank-barra i{display:block;height:100%;background:var(--s)}
.rank-valor{font-weight:700;color:var(--p);white-space:nowrap}

/* Ícones de WhatsApp e Instagram */
.ic{flex:none;width:20px;height:20px}
.com-icone{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.com-icone:hover span{text-decoration:underline}
.topbar .com-icone .ic{color:#4ade80}
footer.rodape .com-icone .ic-whatsapp{color:#4ade80}
footer.rodape .com-icone .ic-instagram{color:#f9a8d4}
.btn .ic{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.btn-zap{background:#128c7e;color:#fff}
.btn-insta{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff}

/* Encartes: movimento ao passar o mouse e janela de ampliação */
.card-encarte .img{height:300px;position:relative}
.card-encarte .img img{max-height:100%;width:auto;max-width:100%;object-fit:contain;transition:transform .25s ease}
.card-encarte .img.img-zoom{cursor:zoom-in}
.card-encarte{transition:transform .25s ease,box-shadow .25s ease}
.card-encarte:hover,.card-encarte:focus-within{transform:translateY(-4px);box-shadow:0 10px 24px rgba(11,27,107,.18)}
.card-encarte .img-zoom:hover img,.card-encarte .img-zoom:focus-visible img{transform:scale(1.06)}
.zoom-dica{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(11,27,107,.88);color:#fff;border-radius:6px;padding:5px 8px;font-size:12px;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.card-encarte .img-zoom:hover .zoom-dica,.card-encarte .img-zoom:focus-visible .zoom-dica{opacity:1;transform:none}
.sem-capa{color:#999;font-size:13px}
.lb{position:fixed;inset:0;z-index:9999;background:rgba(5,10,40,.86);display:flex;align-items:center;justify-content:center;padding:16px}
.lb[hidden]{display:none}
.lb-corpo{position:relative;max-width:min(96vw,900px);max-height:96vh;display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:10px;padding:12px;animation:lb-entra .2s ease}
.lb-img{display:block;max-width:100%;max-height:calc(96vh - 110px);margin:0 auto;object-fit:contain}
.lb-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lb-fechar{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--s);color:#222;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
html.lb-aberto{overflow:hidden}
@keyframes lb-entra{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card-encarte,.card-encarte .img img,.zoom-dica,.lb-corpo{transition:none;animation:none}.card-encarte:hover{transform:none}.card-encarte .img-zoom:hover img{transform:none}}

/* Celular: cabeçalho que não ocupa a tela e alvos de toque de pelo menos 44 px */
@media(max-width:700px){
  header.main{position:static}
  .menu-toggle{min-height:44px;padding:8px 18px}
  .busca{flex:1 1 100%}
  .busca input{flex:1;min-height:44px}
  .busca button{min-height:44px;padding:8px 16px}
  nav.menu ul{gap:0}
  nav.menu a{display:block;padding:12px 4px;border-bottom:1px solid #eef0f7}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .topbar .wrap{flex-direction:column;gap:0}
  .topbar a,.topbar span{display:inline-flex;align-items:center;min-height:32px}
  footer.rodape p{margin:0}
  footer.rodape a{display:inline-flex;align-items:center;min-height:40px}
  .carrossel h1{font-size:1.8rem}
}

/* Banners da página inicial (carrossel) */
.carrossel{position:relative;display:block;min-height:0;overflow:hidden}
.slide-item{display:none;position:relative;align-items:center;min-height:clamp(380px,27vw,540px);background-color:var(--p);background-size:cover;background-position:75% 40%}
.slide-item.ativo{display:flex;animation:car-entra .6s ease}
.slide-item::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,12,60,.78) 0%,rgba(5,12,60,.4) 46%,rgba(5,12,60,0) 72%)}
.slide-item .slide{position:relative;width:100%;padding:48px 16px 56px}
.slide-item .slide>*{max-width:560px}
.slide-titulo{font-size:2.2rem;font-weight:700;line-height:1.2;margin:0 0 8px}
.car-pontos{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:14px;z-index:2}
.car-pontos button{position:relative;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer}
.car-pontos button::after{content:"";position:absolute;inset:-16px}
.car-pontos button.ativo{background:var(--s);border-color:var(--s)}
@keyframes car-entra{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.slide-item{min-height:320px;background-position:72% center}.slide-item::before{background:rgba(5,12,60,.74)}.slide-titulo{font-size:1.8rem}}
@media (prefers-reduced-motion:reduce){.slide-item.ativo{animation:none}}

/* Telas grandes: conteúdo um pouco mais largo e menu em uma linha só */
@media(min-width:1280px){
  header.main .wrap,.topbar .wrap,footer.rodape .wrap,section.bloco>.wrap,.carrossel .wrap,.faixa-mascotes .wrap{max-width:1240px}
  header.main .wrap{flex-wrap:nowrap}
  nav.menu ul{gap:14px;flex-wrap:nowrap}
  nav.menu a{font-size:14.5px;white-space:nowrap}
  .busca input{width:170px}
}

/* Desktop: a arte do banner aparece inteira (sem cortar nem esticar) e o excedente à esquerda fica no azul da própria arte */
@media(min-width:701px){
  .slide-item{background-size:auto 100%;background-repeat:no-repeat;background-position:right center;background-color:#050c3c}
}

/* Celular: banner com a imagem em cima (bem visível) e o texto embaixo; cabeçalho mais compacto */
@media(max-width:700px){
  .slide-item{min-height:0;padding-top:210px;background-color:#050c3c;background-size:auto 210px;background-repeat:no-repeat;background-position:right top}
  .slide-item::before{inset:0 0 auto 0;height:210px;background:linear-gradient(180deg,rgba(5,12,60,0) 0,rgba(5,12,60,0) 120px,#050c3c 210px)}
  .slide-item .slide{padding:6px 16px 54px}
  .slide-item .slide>*{max-width:none}
  .slide-item h1,.slide-titulo{font-size:1.5rem;line-height:1.25}
  .slide-item .slide p:not(.slide-titulo){font-size:15px;margin:0 0 12px}
  header.main .wrap{gap:10px}
  .busca{order:1;flex:1 1 0;min-width:0}
  .menu-toggle{order:2;margin-left:0}
  nav.menu{order:3;flex:0 0 100%}
  .topbar{font-size:13px}
}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important}

/* Mascotes (Zé Cereal e Chef Carimbó) em pé sobre o rodapé */
.faixa-mascotes{margin-top:24px}
.faixa-mascotes .wrap{display:flex;align-items:flex-end;justify-content:flex-start;gap:16px 36px;flex-wrap:wrap}
.faixa-mascotes+footer.rodape{margin-top:0}
.faixa-texto{flex:0 1 460px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:32px}
.faixa-texto strong{font-size:22px;color:var(--p);line-height:1.2}
.faixa-texto span{color:#444;max-width:420px}
.faixa-texto .btn{margin-top:4px}
.faixa-figuras{display:flex;align-items:flex-end;gap:6px;margin-bottom:-1px}
.faixa-figuras img{height:180px;width:auto;display:block;transform-origin:50% 100%;transition:transform .25s ease}
.faixa-figuras img:hover{transform:translateY(-6px) rotate(-2deg)}
@media(max-width:700px){
  .faixa-mascotes .wrap{flex-direction:column;align-items:center;text-align:center}
  .faixa-texto{align-items:center;padding-bottom:12px;flex-basis:auto;order:1}
  .faixa-figuras{order:2}
  .faixa-figuras img{height:130px}
}
@media(prefers-reduced-motion:reduce){.faixa-figuras img{transition:none}.faixa-figuras img:hover{transform:none}}

/* Dois mascotes: Zé Cereal à esquerda, texto no meio, Chef Carimbó à direita */
.faixa-dupla .wrap{justify-content:space-between}
.faixa-dupla .faixa-texto{flex:1 1 320px;max-width:520px;align-items:center;text-align:center}
@media(max-width:700px){
  .faixa-mascotes.faixa-dupla .wrap{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px 16px}
  .faixa-dupla .faixa-texto{flex:1 1 100%;max-width:none;order:1}
  .faixa-dupla .faixa-figuras{order:2}
}

/* Telas largas (só desktop): outra arte do carrossel preenche o vazio à esquerda do texto */
.slide-esq{display:none}
@media(min-width:1800px){
  .slide-esq{display:block;position:absolute;left:0;top:0;bottom:0;width:min(calc((100% - 1240px)/2),780px);background-repeat:no-repeat;background-size:auto 100%;background-position:left center;-webkit-mask-image:linear-gradient(to right,#000 0,#000 50%,transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 50%,transparent 100%);pointer-events:none}
}

/* Ofertas e destaques (modelo: título em duas linhas, carrossel com setas, cartões com preço) */
section.bloco.sec-prod{padding:40px 0}
section.bloco.sec-prod.alt{background:linear-gradient(#ececec,#fff 85%)}
section.bloco .sec-cab{text-align:center;margin-bottom:22px}
.sec-cab span{display:block;font-size:1.5rem;color:#333;line-height:1.2}
section.bloco .sec-cab h2{margin:0;color:var(--d);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;line-height:1.15}
.trilho-wrap{position:relative;padding:0 44px}
.trilho{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 8px}
.trilho::-webkit-scrollbar{display:none}
.trilho .card-prod{flex:0 0 calc((100% - 64px)/5);scroll-snap-align:start}
.trilho-seta{position:absolute;top:38%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.2);color:var(--p);font-size:28px;line-height:1;padding:0 0 3px;cursor:pointer}
.trilho-seta.ant{left:0}.trilho-seta.prox{right:0}
.trilho-seta[disabled]{opacity:.3;cursor:default}
.grade-prod{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.card-prod{background:#fff;border:1px solid #e6e8f0;border-radius:10px;padding:0 12px 16px;text-align:center;display:flex;flex-direction:column;min-width:0}
.card-prod .cp-img{display:block;aspect-ratio:1/1;margin:0 -12px;border-radius:10px 10px 0 0;overflow:hidden;background:#fff}
.card-prod .cp-img img{width:100%;height:100%;object-fit:contain;display:block}
.cp-nome{font-size:12.5px;text-transform:uppercase;font-weight:600;line-height:1.3;margin:6px 0 4px;min-height:3.9em;display:flex;align-items:center;justify-content:center}
.cp-nome a{color:#222;text-decoration:none}
.cp-emb{font-size:12px;font-style:italic;color:#666;margin:0 0 12px;min-height:1.4em}
.cp-preco{margin-top:auto;align-self:center;display:inline-block;background:var(--p);color:#fff;border-radius:22px 22px 4px 22px;padding:8px 20px;font-weight:700;font-size:15px;white-space:nowrap}
.cp-preco b{font-size:19px}
.cp-preco small{font-size:10px;font-weight:700;text-transform:uppercase;opacity:.9}
@media(max-width:1000px){
  .trilho .card-prod{flex-basis:calc((100% - 32px)/3)}
  .grade-prod{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .trilho-wrap{padding:0}
  .trilho-seta{display:none}
  .trilho .card-prod{flex-basis:calc((100% - 16px)/2)}
  .grade-prod{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-cab span{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){.trilho{scroll-behavior:auto}}

/* Movimento ao passar o mouse nos cartões de produto */
.card-prod{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card-prod .cp-img img{transition:transform .35s ease}
.cp-preco{transition:transform .25s ease,box-shadow .25s ease}
.card-prod:hover,.card-prod:focus-within{transform:translateY(-6px);box-shadow:0 12px 26px rgba(11,27,107,.18);border-color:#cfd5ea}
.card-prod:hover .cp-img img,.card-prod:focus-within .cp-img img{transform:scale(1.09) rotate(-1.5deg)}
.card-prod:hover .cp-preco,.card-prod:focus-within .cp-preco{transform:scale(1.06);box-shadow:0 6px 14px rgba(11,27,107,.3)}
.trilho-seta[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.card-prod,.card-prod .cp-img img,.cp-preco{transition:none}.card-prod:hover,.card-prod:focus-within{transform:none}.card-prod:hover .cp-img img,.card-prod:focus-within .cp-img img,.card-prod:hover .cp-preco,.card-prod:focus-within .cp-preco{transform:none}}

/* Vitrine dos Parceiros VIP */
.vitrine .trilho-wrap{padding:0}
.vitrine .trilho{justify-content:safe center;padding:10px 4px 14px}
.card-parc{flex:0 0 calc((100% - 80px)/6);scroll-snap-align:start;display:flex;align-items:center;justify-content:center;height:122px;padding:14px 16px;background:#fff;border:1px solid #e3e6ef;border-radius:10px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card-parc img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s ease}
a.card-parc:hover,a.card-parc:focus-visible,.card-parc:hover{transform:translateY(-6px);box-shadow:0 12px 26px rgba(11,27,107,.18);border-color:#cfd5ea}
.card-parc:hover img,a.card-parc:focus-visible img{transform:scale(1.1) rotate(-2deg)}
.pontos{display:flex;justify-content:center;gap:9px;margin-top:4px}
.pontos button{position:relative;width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#cdd5e3;cursor:pointer;transition:background .2s,transform .2s}
.pontos button::after{content:"";position:absolute;inset:-9px}
.pontos button.ativo{background:var(--p);transform:scale(1.3)}
@media(max-width:1000px){.card-parc{flex-basis:calc((100% - 48px)/4)}}
@media(max-width:700px){.card-parc{flex-basis:calc((100% - 16px)/2.4);height:100px}}
@media(prefers-reduced-motion:reduce){.card-parc,.card-parc img,.pontos button{transition:none}.card-parc:hover,a.card-parc:focus-visible{transform:none}.card-parc:hover img,a.card-parc:focus-visible img{transform:none}}