/* =================================================================== Cores e efeitos reais do site atual, medidos via getComputedStyle() diretamente no site em produção (não são classes Tailwind puras — o CSS do bundle já vem "podado" só com o que o site antigo usa). =================================================================== */ /* Fundos de seção. Toda seção tem uma linha bem sutil no topo (border-top) — só pra o olho perceber a transição entre seções, sem chamar atenção. "section-light-alt" é um cinza levemente diferente de "section-light" (e "section-dark-alt" é a versão escura equivalente) — use a variante "-alt" quando duas seções da mesma cor de fundo (as duas claras, ou as duas escuras) ficarem uma embaixo da outra, pra dar uma pista visual de que mudou de seção mesmo sem trocar de cor. */ .section-dark { background: #0B0F14; border-top: 1px solid rgba(255,255,255,0.04); } .section-dark-alt { background: #111820; border-top: 1px solid rgba(255,255,255,0.05); } .section-light { background: #F5F7F5; border-top: 1px solid rgba(0,0,0,0.05); } .section-light-alt { background: #EDF0EC; border-top: 1px solid rgba(0,0,0,0.05); } /* Header fixo. Começa levemente transparente (sobre o gradiente verde do Hero) e, a partir do momento que a página rola (classe "header-glass-- scrolled" adicionada por JS no fim do arquivo), fica com um fundo escuro translúcido — assim continua legível em cima de qualquer seção (clara ou escura) sem virar um preto 100% sólido. */ .header-glass { background: rgba(0, 0, 0, 0.2); transition: background-color 0.25s ease; } .header-glass--scrolled { background: rgba(6, 10, 15, 0.92); backdrop-filter: blur(6px); box-shadow: 0 2px 20px rgba(0,0,0,0.25); } /* Painel do menu mobile (some/aparece com o botão de hambúrguer) */ .mobile-menu-panel { background: rgba(6, 10, 15, 0.98); border-top: 1px solid rgba(255,255,255,0.08); } .mobile-menu-link { padding: 0.75rem 0.5rem; border-radius: 0.5rem; color: #F0F4F8; font-weight: 700; font-size: 0.95rem; } .mobile-menu-link:hover { background: rgba(255,255,255,0.06); } /* Campos de formulário (Receba uma ligação, Preencha para indicar, Fale conosco): toda classe "form-input" tem uma borda cinza visível — sem isso, em fundo claro o campo fica praticamente invisível, principalmente no celular. Fica verde ao focar. */ .form-input { border: 1.5px solid #D1D5DB; } .form-input:focus { border-color: #58AC4A; box-shadow: 0 0 0 3px rgba(88,172,74,0.15); } /* Hero: gradiente diagonal + camadas decorativas. PARA AJUSTAR A INTENSIDADE: as 3 cores abaixo vão do verde mais escuro (início) ao mais claro (fim). Se ficar um contraste forte demais entre as pontas (uma faixa clara muito "chapada" no meio da tela), aproxime os tons das 3 cores entre si. */ .hero-gradient { background: linear-gradient(135deg, #1F4D18 0%, #2C6B22 45%, #3D7A2E 100%); } .hero-dots { background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,1) 1px, transparent 1px); background-size: 60px 60px; background-repeat: repeat; } .hero-glow-light { background: radial-gradient(circle, #9DE88C 0%, transparent 70%); } .hero-glow-dark { background: radial-gradient(circle, #1A3D12 0%, transparent 70%); } /* Escurece levemente o final do Hero (só o suficiente pra dar profundidade). CUIDADO: a seção logo abaixo do Hero (barra de indicadores) é verde claro, não escura — se essa camada escurecer demais, cria um "degradê pro preto" seguido de verde claro de novo, uma transição estranha. */ .hero-fade-bottom { background: linear-gradient(rgba(13,26,13,0) 0%, rgba(13,26,13,0.35) 100%); } .hero-span-highlight { color: #D4F5CC; } .btn-hero-dark { background: #0B0F14; color: #58AC4A; } .btn-hero-glass { background: rgba(255,255,255,0.15); color: #fff; } .star-gold path, .star-gold { fill: #FFD700; } /* Header buttons */ .btn-header-outline { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); } /* Cards de planos: fundo claro mesmo em seção escura */ .plan-card { background: #F0F2F5; border: 1px solid #D1D5DB; } .plan-card--highlight { border: 2px solid #58AC4A; } .plan-mega-number { color: #58AC4A; } .plan-subtitle { color: #6B7280; } .plan-price { color: #111827; } .plan-check-badge { background: rgba(88,172,74,0.12); color: #374151; } .plan-btn { background: #58AC4A; color: #fff; } .plan-highlight-badge { background: rgba(88,172,74,0.1); color: #58AC4A; } .plan-feature-pill { background: rgba(17,24,39,0.06); color: #374151; } /* Cards claros (diferenciais, FAQ, formulários) */ .card-light { background: #fff; border: 1.5px solid #E2E8F0; } .diferenciais-number { color: rgba(88,172,74,0.15); } /* TV */ .tv-box { background: linear-gradient(135deg, #0D1A0D 0%, #111820 60%, #0F1A0F 100%); border: 1px solid rgba(88,172,74,0.18); } .tv-row { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .tv-row--highlight { background: linear-gradient(135deg, #1A3D12, #2A6B1E); border: 1px solid rgba(88,172,74,0.4); } /* Avaliações */ .avaliacao-card { background: #161D27; border: 1px solid rgba(255,255,255,0.07); } .avaliacao-badge { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); } /* Card de pacote de TV — fundo branco, "estilo ingresso" (selo por canal com faixa colorida na base — ver ".canal-selo" mais abaixo). */ .tv-pacote-card { background: #fff; border: none; box-shadow: 0 18px 40px rgba(0,0,0,0.28); } .tv-pacote-card--destaque { box-shadow: 0 18px 40px rgba(88,172,74,0.35); } /* ==================================================================== SLIDE/CARROSSEL dos pacotes de TV — em vez de uma grade 2x2 que obriga rolar a página inteira pra comparar os 4 pacotes, dá pra arrastar/ deslizar de um pro outro (funciona igual no celular, é o comportamento nativo de "overflow-x-auto" + toque) ou usar as setas/bolinhas no desktop. Cada card tem uma largura fixa parecida com a dos cards de "Escolha sua velocidade", pra não ficar gigante na tela. ==================================================================== */ .overflow-x-auto { overflow-x: auto; } .tv-slider-track { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* IMPORTANTE: "align-items: flex-start" é obrigatório aqui. Sem ele, o flex estica TODOS os cards pra ficarem da mesma altura do mais alto (comportamento padrão "stretch" do flexbox) — um pacote com poucas categorias (fechado) fica com uma sobra enorme de espaço vazio embaixo só pra igualar o pacote mais cheio ao lado. Com "flex-start", cada card usa só a altura do próprio conteúdo (fechado ou expandido pelo "Ver todos os canais"). */ align-items: flex-start; } .tv-slider-track::-webkit-scrollbar { display: none; } .tv-slide { scroll-snap-align: start; flex: 0 0 auto; width: min(85vw, 320px); } @media (min-width: 768px) { .tv-slide { width: 340px; } } /* Setas do carrossel: fixas perto do topo (alinhadas com o cabeçalho do card, "top:50%" + "translateY(-50%)" recentraliza sozinho conforme o card cresce ao expandir "Ver todos os canais"). Estilo escuro translúcido, discreto — não usar branco sólido aqui, senão a seta chama atenção demais em cima do card branco. */ .tv-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(13,17,23,0.55); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.15); transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; z-index: 10; } .tv-slider-arrow:hover { color: #fff; background: rgba(13,17,23,0.85); border-color: rgba(255,255,255,0.3); } .tv-slider-arrow--prev { left: -14px; } .tv-slider-arrow--next { right: -14px; } /* Setas do slide de avaliações: círculo escuro translúcido com borda fina — discreto, quase invisível até o usuário passar o mouse perto. Usa um estilo diferente das setas do slide de TV (que são sobre card branco) de propósito: um círculo branco sólido aqui ficaria chamativo demais em cima dos cards escuros de avaliação. */ .avaliacao-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(22,29,39,0.85); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.12); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; z-index: 10; } .avaliacao-slider-arrow:hover { color: #fff; border-color: rgba(255,255,255,0.3); background: rgba(22,29,39,0.98); } .avaliacao-slider-arrow--prev { left: -14px; } .avaliacao-slider-arrow--next { right: -14px; } @media (max-width: 767px) { .avaliacao-slider-arrow { display: none; } } @media (max-width: 767px) { .tv-slider-arrow { display: none; } } .tv-slider-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,0.2); border: none; cursor: pointer; transition: background 0.2s ease, width 0.2s ease; } .tv-slider-dot--ativo { background: #58AC4A; width: 24px; } /* Slide de avaliações — mesma mecânica do slide de TV (reaproveita .tv-slider-track e .tv-slider-arrow), só muda a largura do card. */ .avaliacao-slide { scroll-snap-align: start; flex: 0 0 auto; width: min(85vw, 300px); } @media (min-width: 768px) { .avaliacao-slide { width: 320px; } } .avaliacao-placeholder { border: 1.5px dashed rgba(255,255,255,0.25); } /* PLANOS RESIDENCIAIS — regra geral do site: no mobile, o que não cabe na largura da tela vira slide (arrasta), em vez de empilhar verticalmente. No celular os 4 cards viram slide horizontal sem seta (o usuário descobre arrastando, vendo o próximo card espiando na borda). A partir do tablet (md) volta a virar uma grade normal, sem slide, porque todos os cards já cabem/quase cabem lado a lado. Esse mesmo padrão pode ser reaproveitado em outra grade que precise do mesmo comportamento. */ .planos-grid { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .planos-grid::-webkit-scrollbar { display: none; } .planos-grid > * { flex: 0 0 auto; width: min(78vw, 270px); scroll-snap-align: start; } @media (min-width: 768px) { .planos-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); overflow-x: visible; gap: 1rem; } .planos-grid > * { width: auto; } } @media (min-width: 1024px) { .planos-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } .from-\[\#A78BFA\] { --tw-gradient-from: #A78BFA; --tw-gradient-to: rgb(167 139 250 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-\[\#7C3AED\] { --tw-gradient-to: #7C3AED; } .from-\[\#FB923C\] { --tw-gradient-from: #FB923C; --tw-gradient-to: rgb(251 146 60 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-\[\#EA580C\] { --tw-gradient-to: #EA580C; } .from-\[\#34D399\] { --tw-gradient-from: #34D399; --tw-gradient-to: rgb(52 211 153 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-\[\#059669\] { --tw-gradient-to: #059669; } .from-\[\#F472B6\] { --tw-gradient-from: #F472B6; --tw-gradient-to: rgb(244 114 182 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-\[\#DB2777\] { --tw-gradient-to: #DB2777; } /* ==================================================================== CATEGORIAS E CANAIS DE TV — layout "tipo ingresso/selo": 1) Caixa de categoria = estilo
/: borda arredondada com o nome da categoria "cortando" a borda superior (span posicionado em absolute por cima da borda, com fundo branco igual ao card, pra simular o recorte). Cor da borda muda por categoria (classe ".categoria-box--{aovivo|vod|aluguel}"). 2) Canal = "selo de ingresso": mini-card com moldura colorida (2px, sólida ou tracejada) e uma faixa preenchida na base com o nome da SUB-categoria (TV Aberta, Esportes, Filmes e Séries, Watch Free, Variedades/Notícias/Infantil, Aluguel) — cor da faixa = cor da moldura (classe ".canal-selo--{aberta|esporte|filme|free|variedade|aluguel}"). PARA ADICIONAR UM CANAL: copie um bloco
...
inteiro pra dentro do ".categoria-box" certo e troque ícone/nome. PARA ADICIONAR UMA CATEGORIA NOVA: copie um ".categoria-box" inteiro. ==================================================================== */ .categoria-box { position: relative; border-width: 2px; border-radius: 1rem; padding: 1.1rem 0.6rem 0.65rem; margin-bottom: 1.1rem; } .categoria-box:last-child { margin-bottom: 0; } .categoria-box--aovivo { border-color: #9333EA; } .categoria-box--vod { border-color: #E11D48; border-style: dashed; } .categoria-box--aluguel { border-color: #0891B2; } .categoria-legend { position: absolute; top: -0.65rem; left: 50%; transform: translateX(-50%); background: #fff; padding: 0 0.6rem; font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .categoria-legend--aovivo { color: #9333EA; } .categoria-legend--vod { color: #E11D48; } .categoria-legend--aluguel { color: #0891B2; } /* Selo do canal: moldura colorida (2px) + zona da logo (contida, nunca distorcida/cortada) + faixa colorida na base com a sub-categoria. */ .canal-selo { border-radius: 0.6rem; overflow: visible; border-width: 2px; border-color: #D1D5DB; background: #fff; display: flex; flex-direction: column; transition: transform 0.15s ease; position: relative; outline: none; } .canal-selo:hover { transform: translateY(-2px); } .canal-selo--tracejado { border-style: dashed; } /* Nome do canal (tooltip): como alguns logos ficam pequenos e difíceis de reconhecer, o nome aparece num balão ao passar o mouse (desktop) — e como ".canal-selo" tem tabindex="0" no HTML, também aparece ao TOCAR no celular (o toque em elemento focável dispara ":focus", sem precisar de nenhum JS). Usa "attr(data-nome)" — o texto vem do próprio atributo "data-nome" no HTML, não precisa duplicar em outro lugar. Pra mudar o nome exibido de um canal, edite só o "data-nome" daquele canal no HTML. */ .canal-selo::after { content: attr(data-nome); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #0D1117; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.25; padding: 0.3rem 0.5rem; border-radius: 0.4rem; width: max-content; max-width: 100px; text-align: center; white-space: normal; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 30; box-shadow: 0 4px 10px rgba(0,0,0,0.25); } .canal-selo:hover::after, .canal-selo:focus::after { opacity: 1; } .canal-selo-logo { width: 100%; height: 2.5rem; padding: 0.2rem; display: flex; align-items: center; justify-content: center; } .canal-selo-logo svg { width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: 100%; display: block; } /* IMPORTANTE: ".canal-selo" usa "overflow:visible" (não "hidden") pra o balão de nome (tooltip acima) poder aparecer por cima da borda. Como consequência, a faixa colorida de baixo não é recortada automaticamente pelo card — por isso o arredondado dela é definido manualmente aqui, só nos dois cantos de baixo, pra bater com o "border-radius" do card pai. */ .canal-selo-tag { padding: 0.15rem 0.1rem; text-align: center; border-radius: 0 0 0.45rem 0.45rem; } .canal-selo-tag span { font-size: 8px; font-weight: 800; color: #fff; text-transform: uppercase; line-height: 1.15; display: block; } .canal-selo--aberta { border-color: #22C55E; } .canal-selo--aberta .canal-selo-tag { background: #22C55E; } .canal-selo--esporte { border-color: #0B2E6B; } .canal-selo--esporte .canal-selo-tag { background: #0B2E6B; } .canal-selo--filme { border-color: #9F1239; } .canal-selo--filme .canal-selo-tag { background: #9F1239; } .canal-selo--free { border-color: #9333EA; } .canal-selo--free .canal-selo-tag { background: #9333EA; } .canal-selo--variedade { border-color: #DB2777; } .canal-selo--variedade .canal-selo-tag { background: #DB2777; } .canal-selo--aluguel { border-color: #0891B2; } .canal-selo--aluguel .canal-selo-tag { background: #0891B2; } /* "Ver todos os canais" — some pacotes (ex.: Watch Black Premium) ficam MUITO altos mesmo compactados. Mostra só uma prévia com um degradê esmaecendo embaixo + botão pra expandir o resto. IMPORTANTE: o "padding-top: 12px" abaixo é obrigatório. A legenda de cada ".categoria-box" fica posicionada com "top:-0.65rem" (sobe pra fora da caixa, criando o efeito de "cortar" a borda — ver ".categoria-legend" mais acima). Como este wrap usa "overflow:hidden", sem esse respiro no topo a legenda "AO VIVO" da primeira caixa fica com o topo das letras cortado pelo próprio wrap. */ .tv-canais-wrap { max-height: 472px; overflow: hidden; position: relative; transition: max-height 0.35s ease; padding-top: 12px; } .tv-canais-wrap.tv-canais-wrap--aberto { max-height: 5000px; } .tv-canais-fade { height: 48px; margin-top: -48px; position: relative; z-index: 2; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; } .tv-canais-wrap.tv-canais-wrap--aberto + .tv-canais-fade { display: none; } .tv-canais-btn { display: block; width: 100%; margin-top: 0.9rem; padding: 0.6rem; border-radius: 0.65rem; border: 1.5px solid #D1D5DB; background: #fff; color: #0D1117; font-size: 12px; font-weight: 700; } .tv-canais-btn:hover { border-color: #58AC4A; color: #58AC4A; } /* Cabeçalho do card: título centralizado; badge de contagem de canais em pílula com CONTORNO roxo (não preenchida), numa linha própria acima do título pra não disputar espaço com nomes de plano compridos. IMPORTANTE: não adicione um subtítulo "AO VIVO" embaixo do título — como a primeira caixa de categoria (".categoria-box--aovivo") já se chama "AO VIVO" logo abaixo, os dois textos ficam quase colados (mesma cor, mesma fonte) e leem como uma duplicação estranha bem em cima da borda da caixa. */ .tv-canais-count-badge { background: #fff; border: 2px solid #9333EA; color: #9333EA; font-size: 10px; font-weight: 900; padding: 0.3rem 0.7rem; border-radius: 9999px; white-space: nowrap; text-transform: uppercase; } /* Rodapé do card: selo "streaming by watch" + preço no estilo do material de referência ("POR APENAS" pequeno + valor gigante em negrito). */ .tv-card-footer-brand { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #9CA3AF; } .tv-card-footer-brand strong { color: #EA580C; font-weight: 900; } .tv-card-preco-label { font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; } .tv-card-preco-valor { font-weight: 900; color: #0D1117; } .justify-end { justify-content: flex-end; } .text-\[\#9CA3AF\] { color: #9CA3AF; } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* IMPORTANTE: a seção "Aproveite ao máximo" (ícones de app) usa a classe base "grid-cols-4" acima + "sm:grid-cols-6" e "md:grid-cols-12" abaixo pra abrir em menos linhas conforme a tela cresce. As 3 classes precisam existir juntas — se qualquer uma for removida, a grade fica presa em 4 colunas em qualquer tamanho de tela. */ @media (min-width: 640px) { .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 768px) { .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } /* pt-10 — usado só no cabeçalho do card "Mais Completo" de TV, pra dar espaço pro selo "MAIS COMPLETO" que fica absoluto por cima do card. Seletor combinado (.p-5.pt-10) de propósito: a classe ".p-5" mais abaixo neste mesmo arquivo define "padding" (shorthand, todos os lados) e vence por ordem de origem se a especificidade for igual — combinando as duas classes aqui o "padding-top" da regra mais específica sempre ganha. */ .p-5.pt-10 { padding-top: 2.5rem; } @media (min-width: 640px) { .sm\:items-center { align-items: center; } } @media (min-width: 768px) { .md\:w-auto { width: auto; } } .text-\[\#6B7280\] { color: #6B7280; } .tracking-\[0\.1em\] { letter-spacing: 0.1em; } .gap-x-5 { column-gap: 1.25rem; } .hover\:text-\[\#58AC4A\]:hover { color: #58AC4A; } @media (min-width: 640px) { .sm\:col-span-2 { grid-column: span 2 / span 2; } } .gap-y-2 { row-gap: 0.5rem; } .w-2\.5 { width: 0.625rem; } .h-2\.5 { height: 0.625rem; } .w-1\.5 { width: 0.375rem; } .h-1\.5 { height: 0.375rem; } .h-6 { height: 1.5rem; } .invisible { visibility: hidden; } .block { display: block; } .left-3 { left: 0.75rem; } .top-3 { top: 0.75rem; } @media (min-width: 768px) { .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } } /* ==================================================================== Planos para Empresa (seção "empresas") — verde-floresta bem escuro (mais escuro que o Hero), cards em vidro fosco, badge de destaque flutuante e preço alinhado pela baseline. ==================================================================== */ /* Fundo verde-floresta bem escuro (quase preto), com uma nuance sutil de esmeralda saindo das pontas — mais escuro que o ".hero-gradient" do Hero (esse aqui é quase preto no centro, só um verde bem discreto nas bordas). */ .empresa-gradient { background: radial-gradient(ellipse 900px 500px at 15% 0%, rgba(46,158,79,0.16), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 100%, rgba(46,158,79,0.12), transparent 55%), #040D07; } /* Badge "PARA EMPRESAS": pílula com contorno (não mais linha+texto) */ .empresa-pill-badge { background: rgba(88,172,74,0.08); border: 1px solid rgba(88,172,74,0.4); color: #6EE7A0; } /* Barra de features (topo, embaixo do parágrafo) e barra final (embaixo dos cards) — mesmo estilo visual: fundo bem translúcido + borda verde escura fina, ícone circular verde. */ .empresa-features-bar, .empresa-footer-bar { background: rgba(255,255,255,0.02); border: 1px solid #1A3D1A; } .empresa-feature-icon-wrap { background: rgba(88,172,74,0.12); color: #58AC4A; } .empresa-card { background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); border: 1px solid #1A3D1A; } .empresa-card--destaque { border: 2px solid #58AC4A; box-shadow: 0 0 25px rgba(88,172,74,0.3); } .empresa-badge { background: #D4F5CC; color: #0B0F14; } /* Selo "★ MAIS CONTRATADO" flutua atravessando a borda de cima do card (position:absolute, metade dentro/metade fora — mesmo truque do selo "MAIS COMPLETO" nos cards de TV, mas centralizado ao invés de canto). */ .empresa-badge-destaque-float { background: #58AC4A; color: #040D07; } /* Botões outline dos planos sem destaque — só o plano "Mais Contratado" fica preenchido, os demais viram contorno pra não competir visualmente. */ .empresa-btn-outline { background: transparent; border: 1.5px solid #58AC4A; color: #58AC4A; } .empresa-btn-outline:hover { background: #58AC4A; color: #fff; } .empresa-btn-destaque { background: #58AC4A; color: #040D07; } /* Utilitários novos usados nas seções Empresas / Pacotes de TV que não existiam no bundle Tailwind original */ .bg-white\/40 { background-color: rgba(255,255,255,0.4); } .text-white\/85 { color: rgba(255,255,255,0.85); } .text-white\/90 { color: rgba(255,255,255,0.9); } .max-w-2xl { max-width: 42rem; } .mt-16 { margin-top: 4rem; } .mt-6 { margin-top: 1.5rem; } .mt-auto { margin-top: auto; } .p-5 { padding: 1.25rem; } /* Contato */ .contato-whatsapp-card { background: #25D366; } .contato-ligue-card { background: #58AC4A; } .contato-metodos-panel { background: #0D1117; } .hover\:bg-white\/5:hover { background-color: rgba(255,255,255,0.05); } /* IMPORTANTE: "hover:border-white/40" não vem no CSS base (index.css) — está definida aqui de propósito. Se usar essa classe num elemento novo, ela já funciona; só não remova essa regra achando que é sobra. O botão CONTRATAR da seção Telefonia depende da classe "plan-card" (não "gturbo-plan-card") pra herdar o efeito de hover da linha abaixo — ao copiar esse botão pra outro lugar, mantenha a classe "plan-card" no elemento pai. */ .hover\:border-white\/40:hover { border-color: rgba(255,255,255,0.4); } .plan-card:hover .gturbo-plan-btn { transform: scale(1.03); } /* Indique e ganhe / TV / Telefonia — caixas escuras elevadas dentro de seção escura */ .box-dark-elevated { background: #161D27; } .box-dark-elevated-alt { background: rgba(255,255,255,0.05); } /* =================================================================== Componentes/keyframes específicos (extraídos do