/* Ajustes do site (27/10/2026). Para desfazer: apagar este arquivo e a linha dele no index.html. */

/* ===== Botão de teste grátis (no lugar do cupom) ===== */
.desconto-right a.botao-teste {display: inline-flex; align-items: center; gap: 10px; max-width: 100%;}
.icone-whatsapp {width: 1em; height: 1em; fill: currentColor; flex: none;}
.botao-teste .icone-whatsapp {width: 30px; height: 30px;}

/* ===== Planos: botão "Assinar" (WhatsApp) e economia ===== */
.menseal-col {display: flex;}
.menseal-item {display: flex; flex-direction: column; width: 100%;}
.plano-rodape {margin-top: auto; padding-top: 14px;} /* botões alinhados embaixo em todos os cards */
.plano-economia {display: block; margin-bottom: 12px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); color: #ffffff; font-size: 13px; font-weight: 300; line-height: 1.4;}
.plano-economia strong {font-weight: 700;}
.plano-assinar {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 16px; border-radius: 8px; background: #ffffff; color: #5b21b6; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; transition: background-color 0.2s ease;}
.plano-assinar:hover,
.plano-assinar:focus-visible {background: #f3e8ff; color: #5b21b6;}
.plano-assinar .icone-whatsapp {width: 20px; height: 20px;}

/* ===== Celular, celular dobrável e tablet ===== */
@media (max-width: 767px) {
	.botao-teste .icone-whatsapp {width: 24px; height: 24px;}
}
@media (max-width: 360px) {
	.desconto-right a.botao-teste {font-size: 20px;}
	.internet-item {padding: 22px 22px;}
}

/* ===== Animação ===== */
/* Abertura: o título e o botão de teste entram em sequência; o banner de baixo "liga" como uma TV quando aparece.
   Só acontece com o JavaScript (classes "anima" no <html>); sem ele, tudo aparece normal. */
html.anima-topo .smart-area .container > * {opacity: 0; transform: translateY(16px);}
html.anima-topo .smart-area .container > .entrou {opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--atraso, 0ms), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--atraso, 0ms);}
html.anima .tela-desligada {opacity: 0;} /* escondido só com opacidade: assim o navegador percebe quando ele aparece na tela */
html.anima .tela-desligada.ligando {opacity: 1; animation: ligarTela 1s cubic-bezier(0.16, 1, 0.3, 1) both;}
@keyframes ligarTela {
	0% {clip-path: inset(49.6% 50% 49.6% 50% round 20px); filter: brightness(3);}
	30% {clip-path: inset(49.6% 0 49.6% 0 round 20px); filter: brightness(2.2);}
	100% {clip-path: inset(0 0 0 0 round 20px); filter: brightness(1);}
}
/* Planos: entram um a um quando aparecem na tela */
html.anima .revelar {opacity: 0; transform: translateY(24px);}
html.anima .revelar.visivel {opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--atraso, 0ms), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--atraso, 0ms);}
/* Quem pede menos movimento no aparelho: só um aparecer suave, sem deslocar */
@media (prefers-reduced-motion: reduce) {
	html.anima-topo .smart-area .container > *,
	html.anima .revelar {transform: none;}
	html.anima .tela-desligada {opacity: 0;}
	html.anima .tela-desligada.ligando {animation: aparecer 0.4s ease both;}
}
@keyframes aparecer {from {opacity: 0;} to {opacity: 1;}}
@media print {
	html.anima .revelar,
	html.anima .tela-desligada,
	html.anima-topo .smart-area .container > * {opacity: 1 !important; transform: none !important; clip-path: none !important;}
}