/* Modo festivo (js/festas.js) — só vale quando o <html> tem a classe da festa (ex.: .festa-natal). */

/* ---------- Natal ---------- */
/* (o botão flutuante do WhatsApp já é position: fixed — não pode virar relative, senão sai do canto direito) */
.topo-logo.com-gorro, main h2.com-gorro { position: relative; }
.gorro { position: absolute; pointer-events: none; height: auto; max-width: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.topo-logo .gorro-logo { width: 34px; left: -9px; top: -6px; transform: rotate(-18deg); }
@media (max-width: 760px) { .topo-logo .gorro-logo { width: 28px; left: -8px; top: -4px; } }
.festa-natal main h2.com-gorro { display: inline-block; }
.gorro-titulo { width: .95em; left: -.42em; top: -.5em; transform: rotate(-22deg); }
.gorro-wpp { width: 34px; left: 4px; top: -20px; transform: rotate(-20deg); }

/* pisca-pisca nas cores da marca, pendurado embaixo do menu */
.pisca-pisca { position: absolute; left: 0; right: 0; bottom: -10px; height: 22px; pointer-events: none; }
.pisca-pisca svg { position: absolute; inset: 0 0 auto 0; width: 100%; height: 12px; overflow: visible; }
.pisca-pisca path { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.lampada {
  position: absolute; top: 7px; width: 7px; height: 11px; margin-left: -3.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--cor); box-shadow: 0 0 10px 2px var(--cor); animation: acende 1.4s ease-in-out infinite alternate;
}
.lampada::before { content: ""; position: absolute; left: 1.5px; top: -3px; width: 4px; height: 4px; border-radius: 1px; background: #3a3f52; }
.lampada.c0 { --cor: var(--ciano); }
.lampada.c1 { --cor: var(--magenta); }
.lampada.c2 { --cor: var(--amarelo); }
.lampada.c3 { --cor: #ff3b47; }
@keyframes acende { from { opacity: .25; box-shadow: 0 0 2px 0 var(--cor); } to { opacity: 1; box-shadow: 0 0 12px 3px var(--cor); } }

.neve { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* faixa de oferta da época (acima dos botões do contato) */
.oferta-festa {
  position: relative; max-width: 720px; margin: 0 auto 40px; padding: 34px 28px; border-radius: var(--raio); text-align: center;
  background: radial-gradient(500px 200px at 50% 0%, rgba(255,59,71,.22), transparent), rgba(255,255,255,.04);
  border: 1px solid rgba(255,59,71,.4); box-shadow: 0 20px 60px rgba(255,59,71,.12);
}
.oferta-festa h3 { font-size: clamp(22px, 3vw, 30px); }
.oferta-festa p { color: var(--suave); margin: 0 auto 22px; max-width: 520px; font-size: 16px; }
.selo-festa {
  display: inline-block; padding: 5px 14px; margin-bottom: 14px; border-radius: 999px; font-size: 12px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(90deg, #ff3b47, var(--amarelo)); color: var(--noite);
}

@media (prefers-reduced-motion: reduce) { .lampada { animation: none; opacity: 1; } }

/* botão da música de Natal (canto inferior esquerdo; o WhatsApp fica no direito) */
.musica-festa {
  position: fixed; left: 18px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); cursor: pointer;
  background: rgba(5,7,15,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font: 900 13px "Montserrat", sans-serif; transition: border-color .2s, box-shadow .2s;
}
.musica-festa:hover { border-color: #ff3b47; }
.musica-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ff3b47; font-size: 15px; }
.musica-festa.ligada { border-color: #ff3b47; box-shadow: 0 0 24px rgba(255,59,71,.45); }
.musica-festa.ligada .musica-ico { animation: balanca 0.84s ease-in-out infinite alternate; }
@keyframes balanca { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@media (max-width: 760px) { .musica-texto { display: none; } .musica-festa { padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .musica-festa.ligada .musica-ico { animation: none; } }

/* ---------- Black Friday ---------- */
/* faixa da contagem regressiva, presa embaixo do menu */
.contagem-bf {
  position: absolute; left: 0; right: 0; top: 100%; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 7px 16px; background: #000; border-block: 1px solid rgba(255,236,120,.35);
  font-size: 13px; color: var(--amarelo); letter-spacing: .04em;
}
.contagem-bf strong { text-transform: uppercase; font-weight: 900; }
.contagem-relogio { font: 800 15px "Exo 2", sans-serif; color: #fff; font-variant-numeric: tabular-nums; min-width: 12ch; }
.contagem-botao {
  padding: 4px 14px; border-radius: 999px; background: var(--amarelo); color: #000; text-decoration: none; font-weight: 900; font-size: 12px;
  text-transform: uppercase;
}
.contagem-botao:hover { box-shadow: 0 0 18px rgba(255,236,120,.6); }
@media (max-width: 760px) { .contagem-bf strong { display: none; } .contagem-bf { gap: 10px; } }

/* letreiro revelado pelo facho do holofote */
.letreiro-bf {
  position: relative; overflow: hidden; text-align: center; padding: clamp(70px, 10vw, 120px) 16px clamp(50px, 7vw, 80px);
  background: #000; border-top: 1px solid rgba(255,236,120,.15); z-index: 2;
}
.letreiro-facho {
  position: absolute; left: 50%; top: -100%; width: 90vw; height: 260%; margin-left: -45vw; pointer-events: none; /* holofote fica acima, fora da tela */
  background: linear-gradient(rgba(255,236,120,.38), rgba(255,236,120,.06) 70%, transparent);
  clip-path: polygon(49.5% 0, 50.5% 0, 68% 100%, 32% 100%); filter: blur(8px);
  transform-origin: 50% 0; animation: facho 4.5s ease-in-out infinite alternate;
}
@keyframes facho { from { transform: rotate(36deg); } to { transform: rotate(-36deg); } } /* esquerda → direita, junto com o brilho das letras */
.letreiro-selo {
  position: relative; display: table; margin: 0 auto 14px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--amarelo); color: var(--amarelo); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
}
.letreiro-texto {
  position: relative; display: inline-block; margin: 0; padding: 0 .1em; font: italic 900 clamp(44px, 10vw, 130px)/1 "Exo 2", sans-serif;
  text-transform: uppercase; color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 200% 100%;
  /* faixa de luz no meio do degradê: com 200%, posição 100% → 0 leva a luz da esquerda até a direita do texto */
  background-image: linear-gradient(100deg, #2b2f3d 34%, #fff 44%, var(--amarelo) 50%, #fff 56%, #2b2f3d 66%);
  animation: revela 4.5s ease-in-out infinite alternate;
}
@keyframes revela { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* etiquetas nos cartões de serviço */
.etiqueta-bf {
  position: absolute; top: 14px; right: 14px; z-index: 3; padding: 4px 10px; border-radius: 6px; background: #000;
  border: 1px solid var(--amarelo); color: var(--amarelo); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}

/* caixa de oferta no contato, em preto e amarelo */
.festa-blackfriday .oferta-festa {
  background: radial-gradient(500px 200px at 50% 0%, rgba(255,236,120,.16), transparent), #000;
  border-color: rgba(255,236,120,.5); box-shadow: 0 20px 60px rgba(255,236,120,.1);
}
.festa-blackfriday .selo-festa { background: var(--amarelo); }

@media (prefers-reduced-motion: reduce) {
  .letreiro-facho { animation: none; transform: none; }
  .letreiro-texto { animation: none; background-position: 50% 0; }
}

/* tabela de descontos por quantidade (Black Friday) */
.faixas-desconto { list-style: none; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0; margin: 0 0 26px; }
.faixas-desconto li {
  display: flex; flex-direction: column; align-items: center; min-width: 130px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid rgba(255,236,120,.3); background: rgba(255,236,120,.05);
}
.faixas-desconto li:last-child { border-color: var(--amarelo); background: rgba(255,236,120,.12); box-shadow: 0 0 30px rgba(255,236,120,.18); }
.faixa-qtd { color: var(--suave); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.faixa-desc { font: italic 900 30px/1.1 "Exo 2", sans-serif; color: var(--amarelo); }