:root{
  --coral:#FF4F5E; --coral-texto:#B4202F; --tinta:#1C1B2E; --tinta-2:#26253A;
  --creme:#FFF4EE; --cinza:#5E5C6E; --cinza-escuro:#A9A8B8; --branco:#FFFFFF;
  --raio:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--tinta);font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-0.01em}
a{color:inherit}
button{font:inherit;cursor:pointer}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-9999px}
.pular:focus{left:12px;top:12px;z-index:10;background:var(--branco);padding:10px 14px;border-radius:10px}
:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}

/* Topo coral */
.topo{position:relative;overflow:hidden;background:var(--coral);border-radius:0 0 32px 32px}
.brilho{position:absolute;fill:var(--branco)}
.b1{display:none;width:34px;top:96px;left:5%}
.b2{display:none;width:44px;bottom:84px;right:4%;fill:var(--tinta)}
.cab{position:relative;max-width:1200px;margin:0 auto;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo img{height:30px;width:auto}
.btn-cab{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--tinta);color:var(--branco);text-decoration:none;font-weight:600;font-size:15px}
.hero{position:relative;max-width:920px;margin:0 auto;padding:32px 16px 48px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.selo-radar{margin:0;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--branco);border-radius:999px;font-size:14px;font-weight:600}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--tinta)}
.hero h1{font-size:clamp(36px,7vw,76px);line-height:1.02;font-weight:800;letter-spacing:-0.03em}
.sub{margin:0;font-size:clamp(17px,2vw,20px);max-width:600px}
.busca{width:100%;max-width:620px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;background:var(--branco);border-radius:999px;margin-top:4px}
.busca input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--tinta);outline:none;padding:12px 0}
.busca button{flex:none;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:var(--tinta);color:var(--branco);font-weight:700}
.pills{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:14px}
.pills span{font-weight:600}
.pill{border:0;padding:7px 14px;border-radius:999px;background:var(--branco);color:var(--tinta);font-weight:500;min-height:36px}

/* Seções */
main{max-width:1200px;margin:0 auto;padding:0 16px}
.secao{margin-top:44px}
.titulo h2,.calendario h2{font-size:clamp(26px,3vw,36px);font-weight:800}
.titulo p,.calendario>p{margin:2px 0 0;color:var(--cinza)}
.chips{display:flex;gap:8px;overflow-x:auto;margin:16px -16px 16px;padding:0 16px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--tinta);background:transparent;color:var(--tinta);font-size:14px;font-weight:500}
.chip.ativo{background:var(--tinta);color:var(--branco);font-weight:600}
.titulo + .grade{margin-top:16px}

/* Cartões (Modelo 3): grade de 2 no celular e 4 no computador */
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--branco);border-radius:20px}
.card[hidden],.sempre[hidden]{display:none}
.thumb{position:relative;height:130px;border-radius:14px;background:var(--cor,#F4F1EE);display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb .icone{width:56px;height:56px}
.thumb .foto{width:100%;height:100%;object-fit:contain;background:var(--branco)}
.selo{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#FFE3E5;color:var(--coral-texto)}
.selo.escuro{background:var(--tinta);color:var(--branco)}
.info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding:2px 4px 4px}
.meta{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 6px;font-size:11.5px;color:var(--cinza)}
.sobe{color:var(--coral-texto);font-weight:700}
.fixo{color:var(--tinta);font-weight:600}
.card h3{font-size:14.5px;font-weight:600;line-height:1.3}
.motivo{margin:0;font-size:12.5px;color:var(--cinza);line-height:1.4}
.preco{margin:auto 0 0;padding-top:2px;font-size:13px}
.preco strong{font-size:19px}
.preco s{margin-left:6px;color:var(--cinza);font-size:12px}
.preco span{display:block;font-size:11px;color:var(--cinza)}
.preco-loja{font-weight:600;color:var(--tinta)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:12px;background:var(--tinta);color:var(--branco);text-decoration:none;font-weight:700;font-size:14px}
.btn-oferta{width:100%;border-radius:14px;padding:0 10px;margin-top:4px}
.btn-sec{background:transparent;color:var(--tinta);border:1.5px solid var(--tinta)}
.btn-branco{background:var(--branco);color:var(--tinta)}
.afiliado{margin:0;font-size:11px;color:var(--cinza);text-align:center}
.vazio{text-align:center;color:var(--cinza);padding:24px 0}

/* Sempre vale a pena: cartões compactos */
.grade-sempre{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.sempre{display:flex;align-items:center;gap:14px;padding:12px;background:var(--branco);border-radius:20px;color:var(--tinta);text-decoration:none}
.sempre-ic{flex:none;width:64px;height:64px;border-radius:16px;background:var(--cor);display:flex;align-items:center;justify-content:center}
.sempre-ic img{width:36px;height:36px}
.sempre-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.sempre-nome{font-weight:600;font-size:15px;line-height:1.3}
.sempre-loja{font-size:13px;color:var(--cinza)}
.sempre-preco{font-size:14px;font-weight:700;margin-top:2px}

/* Banner de campanha: estilo cupom */
.banner{margin-top:-28px;position:relative;z-index:1;display:flex;flex-direction:column;background:var(--creme);border:2.5px dashed var(--coral);border-radius:26px;overflow:hidden;box-shadow:0 10px 30px rgba(28,27,46,.14)}
.bn-canhoto{position:relative;background:var(--coral);padding:20px 20px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bn-grande{display:block;font-size:46px;font-weight:800;line-height:.95;letter-spacing:-0.04em;color:var(--tinta)}
.bn-grande.longo{font-size:34px}
.bn-falta{display:block;margin-top:6px;font-size:15px;font-weight:700;color:var(--tinta)}
.bn-etiqueta{flex:none;width:76px;height:76px}
.bn-corpo{padding:20px;display:flex;flex-direction:column;gap:10px}
.banner h2{font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.1;color:var(--tinta)}
.bn-sub{margin:0;font-size:15px;color:var(--cinza)}
.bn-icones{display:flex;gap:8px}
.bn-ic{width:54px;height:54px;border-radius:14px;background:var(--branco);display:flex;align-items:center;justify-content:center}
.bn-ic img{width:30px;height:30px}
.bn-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--tinta);color:var(--branco);font-weight:700;font-size:15px}

/* Calendário */
.calendario{background:var(--tinta);color:var(--creme);border-radius:28px;padding:24px 18px}
.calendario h2{color:var(--branco)}
.calendario>p{color:var(--cinza-escuro)}
.datas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.data{background:var(--tinta-2);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:4px}
.dia{font-size:30px;font-weight:800;line-height:1;color:#FF6B78}
.evento{font-weight:700;color:var(--branco);line-height:1.25}
.afeta{font-size:13px;color:var(--cinza-escuro)}
.falta{margin-top:6px;align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--coral);color:var(--tinta);font-size:12px;font-weight:700}

/* Chamada final */
.cta{background:var(--coral);border-radius:28px;padding:24px 18px;display:flex;flex-direction:column;gap:18px}
.cta h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;line-height:1.1}
.cta p{margin:8px 0 0;font-size:17px}
.cta-botoes{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn{min-height:48px;padding:0 22px;border-radius:999px;font-size:15px}

/* Rodapé */
.rodape{margin-top:56px;background:var(--tinta);color:var(--creme)}
.rodape-in{max-width:1200px;margin:0 auto;padding:36px 16px 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.rodape-marca{grid-column:1/-1}
.rodape-marca img{height:28px;width:auto}
.rodape-marca p{margin:10px 0 0;color:var(--cinza-escuro);font-size:14px}
.rodape nav{display:flex;flex-direction:column;gap:2px}
.rodape nav strong{font-size:15px;margin-bottom:4px}
.rodape nav a{color:var(--creme);text-decoration:none;font-size:15px;padding:8px 0}
.aviso-legal{grid-column:1/-1;border-top:1px solid #2E2D42;padding-top:18px;font-size:13px;color:var(--cinza-escuro)}
.aviso-legal p{margin:0 0 8px}


/* Tema de Natal: ligado sozinho pelo gerador entre o fim de novembro e 25/12 */
.natal{--verde:#1E6B45;--ouro:#F4C542}
.natal .topo{background:var(--coral) radial-gradient(rgba(255,255,255,.35) 1.5px,transparent 1.6px) 0 0/26px 26px}
.natal .faixa-natal{display:block}
.faixa-natal{display:none;background:var(--verde);color:var(--branco);text-align:center;font-weight:700;font-size:14px;padding:9px 16px}
.faixa-natal span{color:var(--ouro)}
.natal .calendario{background:var(--verde)}
.natal .data{background:rgba(0,0,0,.18)}
.natal .dia{color:var(--ouro)}
.natal .falta{background:var(--ouro)}
.natal .banner{border-color:var(--verde)}
.natal .bn-canhoto{background:var(--verde)}
.natal .bn-grande,.natal .bn-falta{color:var(--branco)}
.natal .bn-btn{background:var(--verde)}
.natal .cta{background:var(--verde);color:var(--branco)}
.natal .cta .btn{background:var(--ouro);color:var(--tinta)}
.natal .cta .btn-branco{background:var(--branco)}
.natal .sobe{color:var(--verde)}

/* Páginas de texto */
.pagina{max-width:760px;margin:0 auto;padding:32px 16px}
.pagina h1{font-size:clamp(30px,5vw,44px);font-weight:800;margin-bottom:16px}
.pagina h2{font-size:22px;margin:28px 0 8px}
.pagina p,.pagina li{font-size:17px}
.cab-simples{background:var(--coral)}

/* Computador */
@media (min-width:720px){
  .grade-sempre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .datas{grid-template-columns:repeat(4,minmax(0,1fr))}
  .calendario,.cta{padding:40px}
  .banner{flex-direction:row;margin-top:-40px}
  .bn-canhoto{flex:none;width:300px;flex-direction:column;align-items:flex-start;justify-content:center;padding:28px}
  .bn-grande{font-size:76px}
  .bn-grande.longo{font-size:48px}
  .bn-etiqueta{position:absolute;right:20px;bottom:18px;width:64px;height:64px}
  .bn-corpo{flex:1;padding:28px 32px;display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:end}
  .banner h2,.bn-sub{grid-column:1}
  .bn-btn{grid-column:1;justify-self:start}
  .bn-icones{grid-column:2;grid-row:1/span 3;align-self:end}
  .cta{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1000px){
  .grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .grade-sempre{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card{padding:10px}
  .thumb{height:150px}
  .thumb .icone{width:68px;height:68px}
  .card h3{font-size:16px}
  .motivo{font-size:13px}
  .meta{font-size:12px}
  .cab{padding:20px}
  .logo img{height:34px}
  .hero{padding-bottom:72px}
  .b1{display:block;width:42px}
  .b2{display:block;width:56px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.chip,.pill{transition:transform .12s ease}
  .btn:active,.chip:active,.pill:active{transform:scale(.97)}
}