/* ==========================================================================
   Webmax · camada do visual novo para as páginas feitas com Bootstrap
   Vem depois de todo o CSS da página (inclusive do <style> embutido) e vale só em <body class="wm-legado">.
   Não muda conteúdo nem marcação: aponta as variáveis antigas (design-system.css e Bootstrap) para os tokens
   do novo-visual.css e redesenha os componentes repetidos (hero, botões, cartões, acordeões, selos, formulários)
   no mesmo padrão da home: fundos chapados, roxo só como destaque, Poppins, raios e curvas da skill.
   ========================================================================== */

body.wm-legado {
  /* Tokens antigos do design-system.css: degradês viram cor chapada */
  --primary-purple: #6A0DAD;
  --text-dark: var(--wm-text);
  --text-light: var(--wm-text-muted);
  --text-muted: var(--wm-text-muted);
  --bg-page: var(--wm-bg-soft);
  --gradient-hero: var(--wm-accent-strong);
  --gradient-cta: var(--wm-accent);
  --gradient-cta-hover: var(--wm-accent-hover);
  --gradient-mesh: var(--wm-bg-soft);
  --gradient-aurora: var(--wm-accent);
  --gradient-text-gold: var(--wm-accent);
  --shadow-soft: var(--wm-shadow-md);
  --shadow-elevated: var(--wm-shadow-md);
  --shadow-purple-glow: none;
  --shadow-gold-glow: none;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease-out-soft: var(--wm-ease);

  /* Bootstrap 5.3 */
  --bs-body-font-family: var(--wm-font);
  --bs-body-color: var(--wm-text);
  --bs-emphasis-color: var(--wm-text);
  --bs-secondary-color: var(--wm-text-muted);
  --bs-border-color: var(--wm-border);
  --bs-primary: #6A0DAD;
  --bs-primary-rgb: 106, 13, 173;
  --bs-link-color: #6A0DAD;
  --bs-link-color-rgb: 106, 13, 173;
  --bs-link-hover-color: #4B0082;
  --bs-link-hover-color-rgb: 75, 0, 130;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 16px;
  --bs-border-radius-xxl: 24px;

  font-family: var(--wm-font);
  color: var(--wm-text);
  background: var(--wm-bg-soft);
  padding-top: 96px; /* menu flutuante: 16px do topo + 58px de altura + respiro */
  overflow-x: clip; /* linhas do Bootstrap fora de .container estouravam a tela no celular */
  -webkit-font-smoothing: antialiased;
}
.wm-legado h1, .wm-legado h2, .wm-legado h3, .wm-legado h4, .wm-legado h5, .wm-legado h6,
.wm-legado .h1, .wm-legado .h2, .wm-legado .h3, .wm-legado .h4, .wm-legado .h5, .wm-legado .h6 {
  font-family: var(--wm-font); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance;
}
.wm-legado p { text-wrap: pretty; }
.wm-legado .fw-bolder, .wm-legado .fw-black { font-weight: 700 !important; }
/* Fontes antigas presas em style="" */
.wm-legado [style*="Montserrat"], .wm-legado [style*="Plus Jakarta"], .wm-legado [style*="Space Grotesk"], .wm-legado [style*="'Inter'"] { font-family: var(--wm-font) !important; }
.wm-legado :focus-visible { outline: 2px solid var(--wm-accent); outline-offset: 2px; }

/* Decoração antiga (bolhas desfocadas, malhas, grades) sai: fundo chapado */
.wm-legado .gradient-orb, .wm-legado .grid-overlay, .wm-legado .orb-purple, .wm-legado .orb-gold, .wm-legado .orb-green { display: none !important; }
.wm-legado .mesh-bg::before, .wm-legado .aurora-bg::before, .wm-legado .aurora-bg::after { display: none !important; }
.wm-legado .glass, .wm-legado .glass-strong { background: var(--wm-bg); border: 1px solid var(--wm-border); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wm-legado .text-gradient-gold, .wm-legado .text-gradient-purple { background: none !important; -webkit-text-fill-color: currentColor; }
.wm-legado .text-gradient-gold { color: var(--accent-gold, #FFD700) !important; }   /* dourado nos fundos roxos */
.wm-legado .text-gradient-purple { color: var(--wm-accent) !important; }
.wm-legado .divider-purple { display: none; }

/* Títulos de seção, como na home */
.wm-legado .section-title {
  font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--wm-text); background: none; -webkit-text-fill-color: currentColor;
}
@media (min-width: 768px) { .wm-legado .section-title { font-size: 36px; line-height: 40px; } }
.wm-legado .tracking-wide { letter-spacing: 0; text-transform: none !important; }

/* ---------- Heros das páginas: claros, como o da home ---------- */
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) {
  background: transparent !important;
  color: var(--wm-text) !important;
  padding-top: 32px !important;

  box-shadow: none !important;
  isolation: auto;
}
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao)::before,
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao)::after { display: none !important; }
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) :is(h1, .h1, h2, .hero-title) {
  color: var(--wm-text) !important; text-shadow: none !important;
  font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
    .equip-hero, .clube-hero, .hero-indicacao) :is(h1, .h1, .hero-title) { font-size: 48px; line-height: 1; }
}
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) :is(p, .lead, li, small, .hero-subtitle) {
  color: var(--wm-text-muted) !important; text-shadow: none !important;
}
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) :is(.text-white, .text-light, [style*="color: #fff"], [style*="color:#fff"], [style*="color: white"], [style*="color:white"]):not(.btn):not(.btn *):not(.badge) {
  color: var(--wm-text) !important;
}
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) :is(.text-white-50, .opacity-75) { color: var(--wm-text-muted) !important; opacity: 1 !important; }
/* Selo e "pílulas" de número do hero */
.wm-legado .hero-badge, .wm-legado .stars-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px !important; border: 0 !important; border-radius: var(--wm-r-full) !important;
  background: var(--wm-accent-soft) !important; color: var(--wm-accent) !important;
  font-size: 12px; line-height: 16px; font-weight: 600;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
.wm-legado .hero-badge i, .wm-legado .hero-badge * { color: var(--wm-accent) !important; }
.wm-legado .stat-pill {
  background: var(--wm-bg) !important; border: 1px solid var(--wm-border) !important; color: var(--wm-text) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.wm-legado .stat-pill i { color: var(--wm-accent) !important; }
.wm-legado .cobertura-breadcrumb, .wm-legado .cobertura-breadcrumb a { color: var(--wm-text-muted) !important; }
.wm-legado .cobertura-breadcrumb .current { color: var(--wm-text) !important; }
/* Botões claros pensados para fundo roxo viram os botões do padrão novo */
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) :is(.btn-light, .btn-warning) {
  background: var(--wm-accent) !important; border-color: var(--wm-accent) !important; color: #FFFFFF !important;
}
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) .btn-outline-light {
  background: var(--wm-bg) !important; border-color: var(--wm-border-strong) !important; color: var(--wm-text) !important;
}

/* ---------- Botões ---------- */
.wm-legado .btn {
  --bs-btn-font-family: var(--wm-font);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 8px;
  --bs-btn-focus-box-shadow: 0 0 0 2px var(--wm-accent);
  border-radius: 8px !important;
  font-family: var(--wm-font);
  font-weight: 600;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color var(--wm-dur-ui) var(--wm-ease), border-color var(--wm-dur-ui) var(--wm-ease), color var(--wm-dur-ui) var(--wm-ease), transform var(--wm-dur-press) var(--wm-ease) !important;
}
.wm-legado .btn:hover { transform: none !important; }
.wm-legado .btn:active { transform: scale(0.97) !important; }
.wm-legado .btn-lg { padding: 12px 24px; font-size: 16px; }
.wm-legado :is(.btn-primary, .btn-purple-gradient, .btn-cta-primary, .btn-glow, .btn-purple, .btn-warning) {
  background: var(--wm-accent) !important; border: 1px solid var(--wm-accent) !important; color: #FFFFFF !important;
}
.wm-legado :is(.btn-outline-purple, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-light) {
  background: var(--wm-bg) !important; border: 1px solid var(--wm-border-strong) !important; color: var(--wm-text) !important;
}
.wm-legado :is(.btn-whatsapp, .btn-cta-whatsapp, .btn-success) {
  background: var(--wm-whatsapp) !important; border: 1px solid var(--wm-whatsapp) !important; color: #FFFFFF !important;
}
.wm-legado .btn-link-whatsapp { color: var(--wm-whatsapp) !important; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .wm-legado :is(.btn-primary, .btn-purple-gradient, .btn-cta-primary, .btn-glow, .btn-purple, .btn-warning):hover { background: var(--wm-accent-hover) !important; border-color: var(--wm-accent-hover) !important; }
  .wm-legado :is(.btn-outline-purple, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-light):hover { border-color: var(--wm-accent) !important; color: var(--wm-accent) !important; }
  .wm-legado :is(.btn-whatsapp, .btn-cta-whatsapp, .btn-success):hover { background: #0E7A3F !important; border-color: #0E7A3F !important; }
}
/* Animações antigas que chamavam atenção sem propósito */
.wm-legado :is(.pulse-animation, .float-anim, .btn-glow) { animation: none !important; }

/* ---------- Cartões e superfícies ---------- */
.wm-legado .card {
  --bs-card-border-color: var(--wm-border);
  --bs-card-border-radius: 16px;
  --bs-card-inner-border-radius: 15px;
  border: 1px solid var(--wm-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  background-color: var(--wm-bg);
}
.wm-legado .shadow-sm { box-shadow: 0 1px 2px rgba(31, 19, 48, 0.06) !important; }
.wm-legado .shadow, .wm-legado .shadow-lg { box-shadow: var(--wm-shadow-md) !important; }
.wm-legado .rounded-3 { border-radius: 12px !important; }
.wm-legado .rounded-4 { border-radius: 16px !important; }
.wm-legado .rounded-5 { border-radius: 24px !important; }
.wm-legado .bg-light { background-color: var(--wm-bg-soft) !important; }
.wm-legado .bg-purple, .wm-legado .bg-primary { background-color: var(--wm-accent) !important; }
.wm-legado .text-primary { color: var(--wm-accent) !important; }
.wm-legado .border-purple { border-color: var(--wm-accent) !important; }
/* Faixa colorida só de um lado sai: borda inteira e neutra (regra da skill) */
.wm-legado .border-start.border-4, .wm-legado .border-start.border-5 { border: 1px solid var(--wm-border) !important; }
.wm-legado :is(.hover-lift, .transform-hover, .hover-scale) { transition: border-color var(--wm-dur-ui) var(--wm-ease), box-shadow 300ms var(--wm-ease) !important; }
.wm-legado :is(.hover-lift, .transform-hover, .hover-scale):hover { transform: none !important; }

/* Cartões de plano do design-system */
.wm-legado .card-plano {
  background: var(--wm-bg) !important; border: 1px solid var(--wm-border) !important; border-radius: 24px !important;
  box-shadow: none !important; transform: none !important;
}
.wm-legado .card-plano.destaque { border-color: var(--wm-accent) !important; box-shadow: 0 0 0 1px var(--wm-accent), var(--wm-shadow-lg) !important; }
.wm-legado .card-plano :is(.plano-header, .header-destaque) { background: transparent !important; color: var(--wm-text) !important; }
.wm-legado .card-plano :is(.plano-header, .header-destaque) h3 { color: var(--wm-text) !important; font-weight: 600; }
.wm-legado .plano-price .value { font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wm-legado :is(.selo-mais-vendido, .badge-fibra, .badge-fibra-white, .plano-selo) {
  border-radius: var(--wm-r-full) !important; box-shadow: none !important;
  font-size: 12px; line-height: 16px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.wm-legado .selo-mais-vendido, .wm-legado .plano-selo { background: var(--wm-accent) !important; color: #FFFFFF !important; }
.wm-legado :is(.badge-fibra, .badge-fibra-white) { background: var(--wm-accent-soft) !important; color: var(--wm-accent) !important; border: 0 !important; }

/* Cartões de cidade e bairro (páginas de cobertura) */
.wm-legado :is(.bairro-card, .cidade-card) {
  background: var(--wm-bg) !important; border: 1px solid var(--wm-border) !important; border-radius: 16px !important;
  box-shadow: none !important; transform: none !important;
  transition: border-color var(--wm-dur-ui) var(--wm-ease), box-shadow 300ms var(--wm-ease) !important;
}
@media (hover: hover) and (pointer: fine) { .wm-legado :is(.bairro-card, .cidade-card):hover { border-color: var(--wm-accent) !important; box-shadow: var(--wm-shadow-md) !important; } }
.wm-legado :is(.bairro-card, .cidade-card) .icon-box { background: var(--wm-accent-soft) !important; color: var(--wm-accent) !important; border-radius: 8px !important; box-shadow: none !important; }
.wm-legado :is(.bairro-card, .cidade-card) h3 { font-weight: 600; color: var(--wm-text); }

/* ---------- Selos (badge) ---------- */
.wm-legado .badge { border-radius: var(--wm-r-full); font-weight: 600; letter-spacing: 0; }
.wm-legado .badge[style*="linear-gradient"] { background: var(--wm-accent) !important; }

/* ---------- Perguntas frequentes (acordeão do Bootstrap) ---------- */
.wm-legado .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--wm-border);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--wm-text);
  --bs-accordion-btn-color: var(--wm-text);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--wm-accent);
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  box-shadow: none !important;
  border-top: 1px solid var(--wm-border);
}
.wm-legado .accordion-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--wm-border) !important; border-radius: 0 !important; }
.wm-legado .accordion-button {
  padding: 24px 0; background: transparent !important; color: var(--wm-text) !important;
  font-family: var(--wm-font); font-size: 18px; line-height: 28px; font-weight: 600 !important; box-shadow: none !important;
}
.wm-legado .accordion-button:focus-visible { outline: 2px solid var(--wm-accent); outline-offset: 2px; }
.wm-legado .accordion-body { padding: 0 0 24px; color: var(--wm-text-muted) !important; }

/* ---------- Formulários ---------- */
.wm-legado :is(.form-control, .form-select) {
  border: 1px solid var(--wm-border-strong); border-radius: 8px; font-family: var(--wm-font);
  transition: border-color var(--wm-dur-ui) var(--wm-ease), box-shadow var(--wm-dur-ui) var(--wm-ease);
}
.wm-legado :is(.form-control, .form-select):focus { border-color: var(--wm-accent); box-shadow: 0 0 0 1px var(--wm-accent); }
.wm-legado .form-check-input:checked { background-color: var(--wm-accent); border-color: var(--wm-accent); }

/* ---------- Abas do Bootstrap (nav-pills) ---------- */
.wm-legado .nav-pills .nav-link {
  border: 1px solid var(--wm-border-strong); border-radius: var(--wm-r-full); margin: 0 8px 8px 0;
  color: var(--wm-text-muted); font-weight: 500;
}
.wm-legado .nav-pills .nav-link.active { background: var(--wm-accent); border-color: var(--wm-accent); color: #FFFFFF; }

/* ---------- Barra de ligar/WhatsApp no celular ---------- */
.wm-legado .mobile-cta-bar {
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--wm-border) !important; box-shadow: none !important;
  gap: 8px; padding: 12px var(--wm-gutter) calc(12px + env(safe-area-inset-bottom)) !important;
}
.wm-legado .mobile-cta-btn {
  border-radius: 8px !important; box-shadow: none !important; font-family: var(--wm-font); font-weight: 600;
  min-height: 48px;
}
.wm-legado .mobile-cta-btn.call { background: var(--wm-bg) !important; color: var(--wm-text) !important; border: 1px solid var(--wm-border-strong) !important; }
.wm-legado .mobile-cta-btn.whats { background: var(--wm-whatsapp) !important; color: #FFFFFF !important; border: 1px solid var(--wm-whatsapp) !important; }

/* ---------- Artigos do blog ---------- */
.wm-legado .artigo-corpo { font-size: 16px; line-height: 28px; }
.wm-legado .artigo-corpo > h1, .wm-legado .artigo-corpo > h3:first-of-type { color: var(--wm-text) !important; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
@media (min-width: 768px) { .wm-legado .artigo-corpo > h1, .wm-legado .artigo-corpo > h3:first-of-type { font-size: 36px; line-height: 40px; } }
.wm-legado .artigo-corpo :is(h2, h4, h5) { color: var(--wm-text); margin-top: 32px; }
.wm-legado .artigo-corpo p[style*="line-height"] { line-height: 28px !important; }
.wm-legado .artigo-corpo table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wm-legado .artigo-corpo :is(th, td) { padding: 12px; border-bottom: 1px solid var(--wm-border); text-align: left; }
.wm-legado .ponte-comercial { background: var(--wm-bg) !important; border: 1px solid var(--wm-border) !important; border-radius: 16px !important; }

/* ---------- Movimento antigo no padrão novo ---------- */
.wm-legado .fade-in-up { animation-timing-function: var(--wm-ease) !important; animation-duration: 700ms !important; }
@media (prefers-reduced-motion: reduce) {
  .wm-legado .fade-in-up, .wm-legado .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .wm-legado .btn:active { transform: none !important; }
}

/* Cartões de empresas parceiras (páginas de bairro): nome longo quebra linha em vez de estourar a tela no celular */
.wm-legado .empresa-card, .wm-legado .empresa-info { min-width: 0; }
.wm-legado .empresa-info h4, .wm-legado .empresa-card h4 { overflow-wrap: anywhere; }

/* Botões "de vidro" (branco translúcido) feitos para o hero roxo antigo: no hero claro viram o botão secundário */
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) .btn:is([style*="rgba(255,255,255"], [style*="rgba(255, 255, 255"]) {
  background: var(--wm-bg) !important; border: 1px solid var(--wm-border-strong) !important; color: var(--wm-text) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Destaque dourado no título dos heros (pensado para o roxo antigo): no hero claro vira o roxo de destaque.
   Fora dos heros o dourado continua, porque lá ele está sobre fundos roxos. */
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) :is([style*="accent-gold"], [style*="accent-yellow"], [style*="#FFD700"], [style*="#ffd700"], .text-warning, .text-gradient-gold) {
  color: var(--wm-accent) !important;
}
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) .stat-pill i { color: var(--wm-accent) !important; }

/* No hero, o botão de WhatsApp é a ação principal da página: verde (o mesmo de todos os botões de WhatsApp) */
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) .btn:has(.fa-whatsapp) {
  background: var(--wm-whatsapp) !important; border: 1px solid var(--wm-whatsapp) !important; color: #FFFFFF !important;
}
.wm-legado :is(.cobertura-hero, .business-hero, .hero-maxplay, .chip-hero, .fixo-hero, .page-header, .segment-hero,
  .equip-hero, .clube-hero, .hero-indicacao) .btn:has(.fa-whatsapp) * { color: #FFFFFF !important; }

/* Quem rola a página é o <html>: é nele que o corte da sobra lateral segura a largura no celular */
html:has(> body.wm-legado) { overflow-x: clip; }

/* Divisor em onda no fim do hero (promo-reativacao): nunca teve CSS (aparecia como uma faixa preta); no visual chapado ele sai */
.wm-legado [class*="custom-shape-divider"] { display: none; }