/* ===== Alvélos Alimentos — estilo compartilhado ===== */
:root{
  --vermelho:#B4232A;
  --vermelho-escuro:#8C171D;
  --amarelo:#E3B93C;
  --amarelo-claro:#EBC96A;
  --preto:#211d1a;
  --cinza:#5a5350;
  --branco:#ffffff;
  --sombra:0 6px 20px rgba(0,0,0,.12);
  --raio:16px;
  --fonte:'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--fonte);
  color:var(--preto);
  background:var(--amarelo);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ===== Topbar ===== */
.topbar{
  background:var(--vermelho);
  color:var(--branco);
  font-size:.9rem;
  text-align:center;
  padding:8px 16px;
}
.topbar a{font-weight:600;text-decoration:underline}

/* ===== Header / Nav ===== */
.header{
  background:var(--vermelho);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.nav{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:56px;width:56px;border-radius:50%;background:var(--amarelo)}
.brand span{color:var(--amarelo);font-weight:800;font-size:1.3rem;letter-spacing:.5px}
.menu{display:flex;gap:6px;list-style:none;align-items:center}
.menu a{
  color:var(--branco);font-weight:600;padding:10px 14px;border-radius:10px;
  transition:.2s;
}
.menu a:hover,.menu a.ativo{background:var(--amarelo);color:var(--vermelho)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.8rem;cursor:pointer}

/* ===== Hero (vermelho em cima, amarelo embaixo) ===== */
.hero{
  background:linear-gradient(152deg, var(--vermelho) 0%, var(--vermelho) 32%, #C15A1C 60%, var(--amarelo) 92%);
  padding:60px 20px 70px;
  text-align:center;
}
.hero .logo-grande{
  height:150px;width:150px;border-radius:50%;margin:0 auto 24px;
  box-shadow:var(--sombra);border:5px solid #fff;background:var(--amarelo);
}
.hero h1{color:#fff;font-size:2.6rem;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35)}
.hero p{color:#fff;font-size:1.15rem;max-width:640px;margin:14px auto 0;opacity:1;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.hero .destaque-amarelo{color:var(--vermelho);margin-top:26px}

/* ===== Botões ===== */
.btn{
  display:inline-block;font-weight:600;padding:13px 26px;border-radius:8px;
  transition:.2s;cursor:pointer;border:0;font-size:.98rem;letter-spacing:.2px;
}
.btn-wpp{background:#25D366;color:#fff;box-shadow:var(--sombra)}
.btn-wpp:hover{background:#1da851;transform:translateY(-2px)}
.btn-vermelho{background:var(--vermelho);color:#fff}
.btn-vermelho:hover{background:var(--vermelho-escuro)}
.btn-amarelo{background:var(--amarelo);color:var(--vermelho);border:2px solid var(--vermelho)}
.btn-amarelo:hover{background:#fff}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ===== Seções ===== */
.secao{max-width:1200px;margin:0 auto;padding:60px 20px}
.secao-titulo{text-align:center;margin-bottom:40px}
.secao-titulo h2{font-size:2rem;color:var(--vermelho);font-weight:800}
.secao-titulo p{color:var(--cinza);margin-top:8px}
.faixa-branca{background:#fff}
.faixa-amarela{background:var(--amarelo)}

/* ===== Cards de categoria ===== */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:#fff;border-radius:var(--raio);padding:28px 22px;text-align:center;
  box-shadow:var(--sombra);transition:.2s;border-top:5px solid var(--vermelho);
}
.card:hover{transform:translateY(-6px)}
.card .icone{font-size:2.6rem;margin-bottom:12px}
.card h3{color:var(--vermelho);margin-bottom:6px}
.card p{color:var(--cinza);font-size:.95rem}

/* ===== Ofertas ===== */
.oferta{
  background:#fff;border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);
  display:flex;flex-direction:column;
}
.oferta .tag{background:var(--vermelho);color:#fff;font-weight:700;padding:8px 14px;font-size:.85rem}
.oferta .corpo{padding:22px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center}
.oferta .produto{font-weight:700;font-size:1.1rem;margin-bottom:4px}
.oferta .preco{font-size:2rem;font-weight:800;color:var(--vermelho)}
.oferta .preco small{font-size:1rem}
.oferta .de{color:#999;text-decoration:line-through;font-size:.9rem}

/* Encarte */
.encarte{
  background:#fff;border-radius:var(--raio);box-shadow:var(--sombra);
  padding:30px;text-align:center;border:3px dashed var(--vermelho);
}
.encarte h3{color:var(--vermelho);font-size:1.4rem;margin-bottom:8px}

/* ===== Info / contato ===== */
.info-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.info-card{background:#fff;border-radius:var(--raio);padding:26px;box-shadow:var(--sombra)}
.info-card h3{color:var(--vermelho);margin-bottom:10px;display:flex;gap:8px;align-items:center}
.info-card p{color:var(--cinza)}
.mapa{border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);border:0;width:100%;min-height:320px}

/* ===== Sobre ===== */
.sobre-flex{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.sobre-flex .texto p{margin-bottom:14px;color:var(--cinza)}
.sobre-flex .texto h2{color:var(--vermelho);margin-bottom:14px}
.numeros{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px}
.numero{background:var(--vermelho);color:#fff;border-radius:var(--raio);padding:18px 22px;text-align:center;flex:1;min-width:120px}
.numero b{display:block;font-size:1.8rem}

/* ===== CTA faixa ===== */
.cta{background:var(--vermelho);color:#fff;text-align:center;padding:56px 20px}
.cta h2{font-size:1.9rem;margin-bottom:10px}
.cta p{opacity:.95;margin-bottom:24px}

/* ===== Rodapé ===== */
.footer{background:var(--preto);color:#ddd;padding:44px 20px 20px}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.footer h4{color:var(--amarelo);margin-bottom:12px}
.footer a{color:#ddd;display:block;padding:3px 0}
.footer a:hover{color:var(--amarelo)}
.footer .creditos{text-align:center;border-top:1px solid #333;margin-top:30px;padding-top:18px;font-size:.85rem;color:#999}

/* ===== WhatsApp flutuante ===== */
.wpp-float{
  position:fixed;bottom:22px;right:22px;z-index:200;
  background:#25D366;color:#fff;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  box-shadow:0 6px 18px rgba(0,0,0,.3);transition:.2s;
}
.wpp-float:hover{transform:scale(1.1)}

/* ===== CONTRASTE ENTRE SEÇÕES ===== */
.faixa-amarela{background:linear-gradient(135deg,#E7BE45 0%,#EBC96A 55%,#E0B233 100%)}
.cta{background:linear-gradient(135deg,#C4262E 0%,var(--vermelho) 45%,var(--vermelho-escuro) 100%)}
/* Divisor diagonal entre seções — contraste forte na troca de cor */
.divisor{display:block;width:100%;height:72px;margin:-1px 0}
@media(max-width:600px){.divisor{height:44px}}

/* ===== CARROSSEL DE OFERTAS (com setas) ===== */
.ofertas-carrossel{background:linear-gradient(135deg,#8C171D,#B4232A 60%,#7a1418);padding:60px 20px}
.ofertas-carrossel .secao-titulo h2{color:#FFD24D;font-size:2.4rem}
.ofertas-carrossel .secao-titulo p{color:#ffe6a3;font-size:1.05rem}
.carrossel{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px}
.carrossel-vp{overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carrossel-vp::-webkit-scrollbar{display:none}
.carrossel-track{display:flex;gap:20px;padding:4px 2px}
.nav-seta{width:58px;height:58px;flex:none;border:0;border-radius:50%;background:var(--amarelo);color:var(--vermelho);
  font-size:2rem;font-weight:800;line-height:1;cursor:pointer;box-shadow:var(--sombra);transition:.2s;
  display:flex;align-items:center;justify-content:center}
.nav-seta:hover:not(:disabled){transform:scale(1.08)}
.nav-seta:disabled{background:#bdbdbd;color:#7d7d7d;cursor:not-allowed;box-shadow:none;opacity:.55}
.chip{background:#fff;border-radius:16px;overflow:hidden;width:280px;min-width:280px;max-width:280px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;border-bottom:6px solid var(--vermelho);flex:0 0 auto;scroll-snap-align:start;transition:transform .2s ease}
.chip:hover{transform:translateY(-5px)}
.chip-foto{height:240px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid #f0eadb}
.chip-foto img{max-width:100%;max-height:100%;object-fit:contain}
.chip .p{font-weight:700;color:#3a3a3a;font-size:1.08rem;line-height:1.3;padding:16px 20px 0;min-height:58px}
.chip .v{font-size:2.1rem;font-weight:800;color:var(--vermelho);padding:4px 20px 18px}
.chip .v small{font-size:1rem;font-weight:600}
@media(max-width:600px){
  .ofertas-carrossel{padding:40px 10px}
  .carrossel{gap:4px}
  .carrossel-track{gap:10px}
  .nav-seta{width:38px;height:38px;font-size:1.4rem}
  .chip-foto{height:132px;padding:8px}
  .chip .p{font-size:.82rem;padding:10px 10px 0;min-height:44px}
  .chip .v{font-size:1.3rem;padding:2px 10px 12px}
  .chip .v small{font-size:.72rem}
}

/* ===== INDICADOR DE SCROLL ===== */
.scroll-ind{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-top:28px;
  color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.5px;cursor:pointer;text-transform:uppercase}
.scroll-ind .seta{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;
  border:2px solid rgba(255,255,255,.7);animation:floatY 1.5s ease-in-out infinite}
.scroll-ind:hover .seta{background:var(--amarelo);color:var(--vermelho);border-color:#fff}

/* ===== EFEITOS / ANIMAÇÕES ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulseWpp{0%{box-shadow:0 6px 18px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 6px 18px rgba(0,0,0,.3),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 6px 18px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,0)}}
@keyframes shine{0%{left:-60%}60%,100%{left:130%}}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes gradientMove{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes glowSelo{0%,100%{box-shadow:var(--sombra)}50%{box-shadow:0 0 0 4px rgba(255,210,77,.5),var(--sombra)}}

/* Reveal on scroll (aplicado via efeitos.js) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.visivel{opacity:1;transform:none}

/* Entrada do hero */
.hero .logo-grande{animation:pop .7s ease both, floatY 5s ease-in-out 1s infinite}
.hero h1{animation:fadeUp .7s ease .05s both}
.hero p{animation:fadeUp .7s ease .18s both}
.hero .btns{animation:fadeUp .7s ease .3s both}

/* Botões com brilho deslizante */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg)}
.btn:hover::after{animation:shine 1s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Cards com brilho e ícone que pula */
.card{transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 16px 34px rgba(180,35,42,.18)}
.card:hover .icone{animation:floatY 1.2s ease infinite}
.card .icone{transition:transform .25s ease}

/* Info cards e números */
.info-card{transition:transform .25s ease,box-shadow .25s ease}
.info-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.14)}
.numero{transition:transform .25s ease}
.numero:hover{transform:translateY(-5px) scale(1.03)}

/* Ofertas */
.oferta{transition:transform .25s ease,box-shadow .25s ease}
.oferta:hover{transform:translateY(-8px);box-shadow:0 18px 36px rgba(180,35,42,.20)}
.oferta:hover .foto img{transform:scale(1.06)}
.oferta .foto img{transition:transform .35s ease}
.oferta .selo-preco{animation:glowSelo 2.4s ease-in-out infinite}

/* Título de seção com risco animado */
.secao-titulo h2{position:relative;display:inline-block}
.secao-titulo h2::after{content:"";position:absolute;left:50%;bottom:-10px;width:0;height:4px;
  background:linear-gradient(90deg,var(--vermelho),var(--amarelo));border-radius:4px;transition:width .5s ease,left .5s ease}
.reveal.visivel .secao-titulo h2::after,.secao-titulo:hover h2::after{width:70px;left:calc(50% - 35px)}

/* WhatsApp flutuante pulsando */
.wpp-float{animation:pulseWpp 2.4s infinite}

/* Header link com sublinhado que cresce */
.menu a{position:relative}
.menu a::before{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--amarelo);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.menu a:hover::before{transform:scaleX(1)}
.menu a.ativo::before{display:none}

/* ===== Arraiá / Festa Junina ===== */
.arraia{
  position:relative;overflow:hidden;text-align:center;
  padding:70px 20px 80px;
  background:
    linear-gradient(rgba(122,20,24,.74), rgba(140,23,29,.82)),
    url("arraia.jpg") center/cover no-repeat,
    linear-gradient(160deg,#7a1418 0%,#B4232A 55%,#8C171D 100%);
}
/* Heros com foto IA (fundo com overlay para legibilidade) */
.hero-foto{
  background:
    linear-gradient(rgba(122,20,24,.68), rgba(140,23,29,.80)),
    var(--bg-foto) center/cover no-repeat !important;
}
.hero-foto h1,.hero-foto p{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.hero-foto .logo-grande{border-color:#fff}
.hero-produtos{--bg-foto:url("produtos.jpg")}
/* Bandeirinhas */
.bandeirinhas{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-bottom:26px}
.bandeirinhas .flag{
  width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;
  border-top:26px solid;margin:0 2px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25));
  transform-origin:top center;animation:sway 3.5s ease-in-out infinite;
}
.bandeirinhas .flag:nth-child(even){animation-delay:.5s}
.bandeirinhas .flag:nth-child(3n){animation-delay:1s}
.arraia .selo{animation:floatY 3.5s ease-in-out infinite}
.arraia .emojis{animation:floatY 4s ease-in-out .5s infinite}
.flag.c1{border-top-color:#F4C430}
.flag.c2{border-top-color:#3FA34D}
.flag.c3{border-top-color:#2f74b5}
.flag.c4{border-top-color:#E86A2B}
.flag.c5{border-top-color:#EFEFEF}
.arraia h1{
  color:#FFD24D;font-size:3rem;font-weight:900;letter-spacing:1px;
  text-shadow:0 3px 0 #7a1418,0 5px 10px rgba(0,0,0,.45);
}
.arraia .sub{
  color:#fff;font-size:1.2rem;max-width:640px;margin:14px auto 0;font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.arraia .emojis{font-size:2rem;margin-top:18px;letter-spacing:8px}
.arraia .selo{
  display:inline-block;margin-top:22px;background:#FFD24D;color:#7a1418;
  font-weight:800;padding:8px 20px;border-radius:50px;box-shadow:var(--sombra);
}
/* Foto do produto na oferta */
.oferta .foto{
  background:#fff;display:flex;align-items:center;justify-content:center;
  height:190px;padding:14px;border-bottom:1px solid #f0eadb;
}
.oferta .foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.oferta .selo-preco{
  position:absolute;top:10px;right:10px;background:var(--vermelho);color:#fff;
  font-weight:800;border-radius:50%;width:66px;height:66px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--sombra);
  border:3px solid #fff;line-height:1;
}
.oferta{position:relative}
.oferta .selo-preco small{font-size:.6rem;font-weight:600}
.oferta .selo-preco b{font-size:1.05rem}

/* stack do encarte no mobile */
.encarte-grid{display:grid;gap:22px;grid-template-columns:1fr 1.4fr;align-items:center}
@media(max-width:820px){.encarte-grid{grid-template-columns:1fr}}

/* ===== Responsivo ===== */
@media(max-width:820px){
  .menu{
    display:none;position:absolute;top:78px;left:0;right:0;background:var(--vermelho);
    flex-direction:column;padding:12px;gap:4px;
  }
  .menu.aberto{display:flex}
  .menu-btn{display:block}
  .sobre-flex{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
}

/* ===================================================================
   TEMAS SAZONAIS  (o painel define config.tema -> render.js coloca
   data-tema no <body>; aqui trocamos cores, banner e decorações)
   =================================================================== */

/* Paleta por tema (base/junina usam a paleta padrão do :root) */
body[data-tema="natal"]{ --amarelo:#D9B44A; --amarelo-claro:#EAD08A; }
body[data-tema="halloween"]{ --vermelho:#E4711C; --vermelho-escuro:#B0530C; --amarelo:#F2A93B; --amarelo-claro:#F7C877; }
body[data-tema="anonovo"]{ --amarelo:#E7C64B; --amarelo-claro:#F1D982; }
body[data-tema="carnaval"]{ --amarelo:#F2C14E; --amarelo-claro:#F7D782; }

/* Banner sazonal (.arraia) por tema */
body[data-tema="base"] .arraia{
  background:linear-gradient(135deg,#8C171D,#B4232A 60%,#7a1418);
}
body[data-tema="natal"] .arraia{
  background:
    linear-gradient(rgba(10,54,28,.55), rgba(120,20,24,.68)),
    url("tema-natal.jpg") center/cover no-repeat,
    linear-gradient(135deg,#0d5c2c,#B4232A);
}
body[data-tema="halloween"] .arraia{
  background:
    linear-gradient(rgba(40,10,55,.5), rgba(80,35,10,.55)),
    url("tema-halloween.jpg") center/cover no-repeat,
    linear-gradient(135deg,#3a1750,#7a3a10);
}
body[data-tema="anonovo"] .arraia{
  background:
    linear-gradient(rgba(8,14,40,.5), rgba(8,14,40,.6)),
    url("tema-anonovo.jpg") center/cover no-repeat,
    linear-gradient(135deg,#0b1230,#243b6e);
}
body[data-tema="carnaval"] .arraia{
  background:
    linear-gradient(rgba(90,20,90,.4), rgba(20,50,110,.4)),
    url("tema-carnaval.jpg") center/cover no-repeat,
    linear-gradient(135deg,#7a1e6e,#2452a3);
}

/* As bandeirinhas e os emojis do arraiá só aparecem na Festa Junina */
body:not([data-tema="junina"]) .bandeirinhas,
body:not([data-tema="junina"]) .arraia .emojis{ display:none; }

/* Decoração no logo por tema (gorro de Natal etc.) */
.brand{position:relative}
.deco-logo{position:absolute;left:20px;top:-10px;width:38px;height:38px;pointer-events:none;display:none;
  background-position:center;background-repeat:no-repeat;background-size:contain;z-index:3}
body[data-tema="natal"] .deco-logo{display:block;background-image:url("deco-natal.svg");transform:rotate(-16deg)}