 :root {
 --roxo-principal: #9333ea;
 --roxo-escuro: #7c3aed;
 --roxo-claro: rgba(147, 51, 234, 0.15);
 --bg-escuro: #050509;
 --bg-card: #0f0f1a;
 --bg-card-hover: #141424;
 --cinza-claro: #e5e5e5;
 --cinza: #a1a1aa;
 --cinza-escuro: #3f3f46;
 --verde: #10b981;
 --amarelo: #f59e0b;
 --vermelho: #ef4444;
 --azul: #3b82f6;
 --gradiente-bg: linear-gradient(180deg, #09090f, #050509);
 --gradiente-roxo: linear-gradient(135deg, #9333ea, #7c3aed);
 --gradiente-azul: linear-gradient(135deg, #3b82f6, #1d4ed8);
 --gradiente-verde: linear-gradient(135deg, #10b981, #059669);
 --sombra: 0 10px 25px rgba(0, 0, 0, 0.3);
 --sombra-destaque: 0 0 25px rgba(147, 51, 234, 0.4);
 }

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
 background: var(--gradiente-bg);
 color: #fff;
 min-height: 100vh;
 line-height: 1.6;
 overflow-x: hidden;
 position: relative;
 }

 /* FUNDO COM BOLINHAS ROXAS SE MOVENDO */
 #particles-background {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 pointer-events: none;
 overflow: hidden;
 }

 .particle {
 position: absolute;
 background: rgba(147, 51, 234, 0.15);
 border-radius: 50%;
 filter: blur(1px);
 animation: floatParticle linear infinite;
 }

 @keyframes floatParticle {
 0% {
  transform: translate(0, 0);
 }
 100% {
  transform: translate(var(--move-x), var(--move-y));
 }
 }

 /* Gradiente suave de fundo */
 .gradient-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: 
  radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.08) 0%, transparent 50%),
  radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.05) 0%, transparent 50%),
  radial-gradient(circle at 40% 40%, rgba(147, 51, 234, 0.03) 0%, transparent 50%);
 z-index: -2;
 }

 .container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 }

 /* MENU DE NAVEGAÇÃO */
 .menu-container {
 position: fixed;
 top: 20px;
 left: 0;
 right: 0;
 z-index: 1000;
 display: flex;
 justify-content: center;
 }

 .menu-principal {
 display: flex;
 gap: 10px;
 background: var(--bg-card);
 border-radius: 15px;
 padding: 10px;
 border: 1px solid rgba(147, 51, 234, 0.3);
 box-shadow: var(--sombra);
 backdrop-filter: blur(10px);
 }

 .menu-btn {
 padding: 12px 25px;
 border: none;
 background: transparent;
 color: var(--cinza);
 font-weight: 600;
 font-size: 1rem;
 border-radius: 10px;
 cursor: pointer;
 transition: all 0.3s ease;
 display: flex;
 align-items: center;
 gap: 10px;
 }

 .menu-btn.active {
 background: var(--gradiente-roxo);
 color: white;
 box-shadow: 0 5px 15px rgba(147, 51, 234, 0.3);
 }

 .menu-btn:hover:not(.active) {
 background: rgba(147, 51, 234, 0.1);
 color: var(--roxo-principal);
 }

 /* SEÇÕES */
 .secao {
 display: none;
 padding-top: 100px;
 min-height: calc(100vh - 200px);
 animation: fadeIn 0.5s ease;
 padding-bottom: 50px;
 }

 .secao.ativa {
 display: block;
 }

 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }

 /* TOPO PROFISSIONAL */
 .topbar {
 background: var(--bg-card);
 border-radius: 18px;
 padding: 25px;
 margin: 25px auto 15px;
 text-align: center;
 border: 1px solid rgba(147, 51, 234, 0.3);
 box-shadow: var(--sombra);
 position: relative;
 overflow: hidden;
 animation: slideDown 0.8s ease;
 }

 @keyframes slideDown {
 from {
  opacity: 0;
  transform: translateY(-30px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
 }

 .topbar::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: var(--gradiente-roxo);
 }

 .logo {
 font-size: 2.8rem;
 font-weight: 800;
 background: linear-gradient(135deg, #9333ea, #7c3aed, #a855f7);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 10px;
 letter-spacing: 1px;
 }

 .slogan {
 font-size: 1.1rem;
 color: var(--cinza);
 font-weight: 300;
 letter-spacing: 3px;
 text-transform: uppercase;
 margin-top: 5px;
 }

 /* TÍTULO PRINCIPAL */
 .titulo-principal {
 text-align: center;
 font-size: 2.5rem;
 font-weight: 700;
 margin: 20px 0;
 position: relative;
 width: 100%;
 }

 .titulo-principal::after {
 content: '';
 display: block;
 width: 100px;
 height: 4px;
 background: var(--gradiente-roxo);
 margin: 10px auto 0;
 border-radius: 2px;
 animation: expandWidth 1.5s ease;
 }

 @keyframes expandWidth {
 from { width: 0; }
 to { width: 100px; }
 }

 /* SWITCHER DE PLATAFORMA - CORRIGIDO */
 .plataforma-switcher {
 display: flex;
 justify-content: center;
 margin: 30px 0;
 position: relative;
 }

 .switcher-container {
 background: var(--bg-card);
 border-radius: 16px;
 padding: 6px;
 display: flex;
 box-shadow: var(--sombra);
 border: 1px solid rgba(147, 51, 234, 0.2);
 position: relative;
 width: fit-content;
 }

 .switcher-btn {
 width: 110px;
 padding: 10px 0;
 background: transparent;
 border: none;
 color: var(--cinza);
 font-size: 0.95rem;
 font-weight: 600;
 border-radius: 12px;
 cursor: pointer;
 transition: all 0.25s ease;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 position: relative;
 }

 .switcher-btn.active {
 color: white;
 }

 .switcher-indicator {
 position: absolute;
 top: 6px;
 left: 6px;
 width: 110px;
 height: calc(100% - 12px);
 background: var(--gradiente-roxo);
 border-radius: 12px;
 transition: left 0.3s ease;
 z-index: 1;
 }

 .switcher-indicator.lotus { left: 6px; }
 .switcher-indicator.termux { left: 116px; }

 /* SLIDER - CORRIGIDO */
 .slider-container {
 position: relative;
 overflow: hidden;
 margin-bottom: 20px;
 min-height: auto;
 height: auto;
 }

 .guia-slider {
 display: flex;
 transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 width: 200%;
 align-items: flex-start;
 }

 .guia-slide {
 width: 50%;
 flex-shrink: 0;
 padding: 0 15px;
 display: flex;
 flex-direction: column;
 }

 /* GUIA - CORRIGIDO (SEM ANIMAÇÃO DE SUBIR E BORDA ROXA NO TERMUX) */
 .guia {
 background: var(--bg-card);
 border-radius: 20px;
 padding: 0;
 overflow: hidden;
 border: 1px solid var(--cinza-escuro);
 transition: all 0.3s ease;
 height: auto;
 margin-bottom: 40px;
 flex: 1;
 display: flex;
 flex-direction: column;
 }

 /* REMOVER A ANIMAÇÃO QUE SOBE E CORTA - deixar só suave */
 .guia:hover {
 border-color: var(--roxo-principal);
 box-shadow: var(--sombra-destaque);
 }

 /* CORRIGIR: Termux NÃO deve ter borda roxa por padrão */
 .guia-termux { 
 border-top: 1px solid var(--cinza-escuro);
 }
 
 /* Apenas hover deve ativar a borda roxa */
 .guia-termux:hover {
 border-top: 1px solid var(--roxo-principal);
 }

 /* CABEÇALHO DO GUIA */
 .guia-header {
 padding: 25px;
 text-align: center;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 position: relative;
 }

 /* REMOVER BACKGROUND ROXO DO TERMUX */
 .guia-termux .guia-header {
 background: transparent;
 }

 .guia-icon {
 font-size: 3rem;
 margin-bottom: 15px;
 }

 .guia-termux .guia-icon {
 color: var(--cinza-claro);
 }

 .guia-title {
 font-size: 1.8rem;
 font-weight: 700;
 margin-bottom: 10px;
 }

 .guia-subtitle {
 color: var(--cinza);
 font-size: 0.95rem;
 }

 /* CONTEÚDO DO GUIA */
 .guia-content {
 padding: 25px;
 flex: 1;
 display: flex;
 flex-direction: column;
 }

 /* LOTUS */
 .lotus-servicos {
 padding: 20px;
 flex: 1;
 display: flex;
 flex-direction: column;
 }

 .servicos-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 25px;
 margin-bottom: 40px;
 }

 .servico-card {
 background: var(--bg-card);
 border-radius: 15px;
 padding: 25px;
 border: 1px solid rgba(147, 51, 234, 0.2);
 transition: all 0.3s ease;
 display: flex;
 flex-direction: column;
 height: 100%;
 }

 .servico-card:hover {
 border-color: var(--roxo-principal);
 box-shadow: 0 10px 20px rgba(147, 51, 234, 0.2);
 }

 .servico-icon {
 font-size: 2.5rem;
 color: var(--roxo-principal);
 margin-bottom: 15px;
 text-align: center;
 }

 .servico-card h4 {
 font-size: 1.3rem;
 margin-bottom: 15px;
 text-align: center;
 color: var(--cinza-claro);
 }

 .servico-linha {
 width: 50px;
 height: 3px;
 background: var(--gradiente-roxo);
 margin: 0 auto 20px;
 border-radius: 2px;
 }

 .servico-card ul {
 list-style: none;
 flex: 1;
 margin-bottom: 20px;
 }

 .servico-card ul li {
 margin-bottom: 10px;
 font-size: 0.9rem;
 color: var(--cinza);
 display: flex;
 align-items: center;
 gap: 10px;
 }

 .servico-card ul li i {
 color: var(--roxo-principal);
 font-size: 0.8rem;
 }

 .servico-btn {
 margin-top: auto;
 padding: 12px 20px;
 background: var(--gradiente-roxo);
 color: white;
 border: none;
 border-radius: 10px;
 font-weight: 600;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 transition: all 0.3s ease;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 }

 .servico-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(147, 51, 234, 0.3);
 }

 /* LOTUS - SOBRE E CONTATOS */
 .lotus-sobre {
 background: rgba(147, 51, 234, 0.05);
 border-radius: 15px;
 padding: 25px;
 margin-top: 30px;
 border: 1px solid rgba(147, 51, 234, 0.1);
 }

 .lotus-sobre h3 {
 font-size: 1.5rem;
 margin-bottom: 20px;
 color: var(--cinza-claro);
 display: flex;
 align-items: center;
 gap: 10px;
 }

 .lotus-sobre p {
 color: var(--cinza);
 line-height: 1.7;
 margin-bottom: 25px;
 font-size: 1rem;
 }

 .lotus-contatos {
 display: flex;
 flex-direction: column;
 gap: 15px;
 }

 .contato-item {
 display: flex;
 align-items: center;
 gap: 15px;
 padding: 12px 15px;
 background: rgba(255, 255, 255, 0.05);
 border-radius: 10px;
 transition: all 0.3s ease;
 border: 1px solid rgba(147, 51, 234, 0.2);
 }

 .contato-item:hover {
 background: rgba(147, 51, 234, 0.1);
 border-color: var(--roxo-principal);
 transform: translateX(5px);
 }

 .contato-item i {
 font-size: 1.3rem;
 color: var(--roxo-principal);
 min-width: 25px;
 text-align: center;
 }

 .contato-item span {
 color: var(--cinza-claro);
 font-size: 0.95rem;
 flex: 1;
 }

 .contato-item a {
 color: var(--cinza-claro);
 text-decoration: none;
 transition: color 0.3s ease;
 flex: 1;
 }

 .contato-item a:hover {
 color: var(--roxo-principal);
 }

 /* TERMUX - REMOVER ELEMENTOS ROXOS POR PADRÃO */
 .guia-downloads {
 background: rgba(255, 255, 255, 0.05);
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 25px;
 }

 .guia-downloads h4 {
 font-size: 1.2rem;
 margin-bottom: 15px;
 color: var(--cinza-claro);
 display: flex;
 align-items: center;
 gap: 10px;
 }

 .download-link {
 display: flex;
 align-items: center;
 gap: 15px;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid var(--cinza-escuro);
 padding: 15px;
 border-radius: 10px;
 text-decoration: none;
 color: var(--cinza-claro);
 transition: all 0.3s ease;
 margin-top: 15px;
 }

 .download-link:hover {
 background: rgba(147, 51, 234, 0.1);
 border-color: rgba(147, 51, 234, 0.3);
 transform: translateX(5px);
 }

 .download-link i {
 color: var(--cinza-claro);
 font-size: 1.5rem;
 }

 .download-link:hover i {
 color: var(--roxo-principal);
 }

 .etapas {
 counter-reset: etapa;
 flex: 1;
 }

 .etapa {
 background: rgba(255, 255, 255, 0.03);
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 15px;
 border-left: 4px solid var(--cinza-escuro);
 position: relative;
 transition: all 0.3s ease;
 }

 .etapa:hover {
 background: rgba(255, 255, 255, 0.05);
 border-left: 4px solid var(--roxo-principal);
 }

 .etapa::before {
 counter-increment: etapa;
 content: "Passo " counter(etapa);
 position: absolute;
 top: -10px;
 left: 15px;
 background: var(--cinza-escuro);
 color: white;
 padding: 4px 12px;
 border-radius: 15px;
 font-size: 0.8rem;
 font-weight: 600;
 }

 .etapa:hover::before {
 background: var(--gradiente-roxo);
 }

 .etapa h5 {
 font-size: 1.1rem;
 margin-bottom: 10px;
 color: var(--cinza-claro);
 display: flex;
 align-items: center;
 gap: 8px;
 }

 .etapa:hover h5 {
 color: var(--roxo-principal);
 }

 .etapa p {
 color: var(--cinza);
 font-size: 0.95rem;
 margin-bottom: 15px;
 line-height: 1.6;
 }

 .comando-container {
 position: relative;
 background: rgba(0, 0, 0, 0.3);
 border-radius: 8px;
 margin: 10px 0;
 border: 1px solid var(--cinza-escuro);
 overflow: hidden;
 }

 .comando {
 padding: 12px;
 color: #93c5fd;
 font-family: 'Courier New', monospace;
 font-size: 0.9rem;
 white-space: pre-wrap;
 word-break: break-all;
 overflow-x: auto;
 line-height: 1.5;
 }

 .btn-copiar {
 position: absolute;
 top: 8px;
 right: 8px;
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid var(--cinza-escuro);
 color: var(--cinza-claro);
 padding: 5px 10px;
 border-radius: 6px;
 cursor: pointer;
 font-size: 0.75rem;
 transition: all 0.3s ease;
 display: flex;
 align-items: center;
 gap: 5px;
 }

 .btn-copiar:hover {
 background: rgba(147, 51, 234, 0.2);
 border-color: rgba(147, 51, 234, 0.3);
 color: var(--roxo-principal);
 }

 .guia-aviso {
 background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
 border: 1px solid rgba(239, 68, 68, 0.2);
 border-radius: 12px;
 padding: 20px;
 margin-top: 25px;
 }

 .guia-aviso h5 {
 font-size: 1.2rem;
 margin-bottom: 15px;
 color: var(--amarelo);
 display: flex;
 align-items: center;
 gap: 10px;
 }

 .guia-aviso ul {
 list-style: none;
 padding-left: 5px;
 }

 .guia-aviso ul li {
 margin-bottom: 10px;
 color: var(--cinza-claro);
 font-size: 0.95rem;
 display: flex;
 align-items: center;
 gap: 10px;
 }

 .guia-aviso ul li:before {
 content: "•";
 color: var(--amarelo);
 font-size: 1.2rem;
 }

 .dificuldade {
 display: inline-block;
 padding: 4px 10px;
 border-radius: 12px;
 font-size: 0.75rem;
 font-weight: 600;
 margin-left: 10px;
 vertical-align: middle;
 }

 .facil {
 background: rgba(16, 185, 129, 0.2);
 color: #10b981;
 }

 .dica {
 background: rgba(59, 130, 246, 0.1);
 border-radius: 10px;
 padding: 15px;
 margin-top: 15px;
 border-left: 4px solid var(--azul);
 }

 .dica h6 {
 font-size: 1rem;
 margin-bottom: 10px;
 color: var(--azul);
 display: flex;
 align-items: center;
 gap: 8px;
 }

 /* ============ SEÇÃO LOJA ============ */
 /* AVISO IMPORTANTE */
 .aviso-importante {
 background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
 border: 2px solid var(--amarelo);
 border-radius: 15px;
 padding: 25px;
 margin-bottom: 40px;
 position: relative;
 overflow: hidden;
 }

 .aviso-importante::before {
 content: '⚠️';
 position: absolute;
 top: 15px;
 left: 20px;
 font-size: 1.5rem;
 }

 .aviso-titulo {
 color: var(--amarelo);
 font-size: 1.3rem;
 margin-bottom: 15px;
 padding-left: 40px;
 font-weight: 600;
 }

 .aviso-texto {
 color: var(--cinza-claro);
 padding-left: 40px;
 line-height: 1.6;
 }

 /* SELEÇÃO DINÂMICA DE REQUISIÇÕES - SUPER COMPACTA */
 .selecao-requisicoes {
 background: var(--bg-card);
 border-radius: 20px;
 padding: 30px;
 margin: 40px 0;
 border: 1px solid rgba(147, 51, 234, 0.2);
 box-shadow: var(--sombra);
 text-align: center;
 }
 
 .selecao-titulo {
 font-size: 1.6rem;
 margin-bottom: 10px;
 color: var(--cinza-claro);
 }
 
 .selecao-titulo i {
 color: var(--roxo-principal);
 margin-right: 10px;
 }
 
 .selecao-descricao {
 color: var(--cinza);
 margin-bottom: 25px;
 font-size: 1rem;
 line-height: 1.6;
 }
 
 .selecao-descricao strong {
 color: var(--roxo-principal);
 }

 /* CONTROLE SUPER COMPACTO */
 .controle-super-compacto {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 margin: 25px auto;
 max-width: 500px;
 background: rgba(147, 51, 234, 0.1);
 border: 2px solid var(--roxo-principal);
 border-radius: 12px;
 padding: 15px;
 }
 
 .btn-super-compacto {
 padding: 10px 15px;
 background: var(--gradiente-roxo);
 color: white;
 border: none;
 border-radius: 8px;
 font-weight: 600;
 font-size: 0.9rem;
 cursor: pointer;
 transition: all 0.3s ease;
 display: flex;
 align-items: center;
 gap: 6px;
 min-width: 90px;
 justify-content: center;
 }
 
 .btn-super-compacto:hover:not(:disabled) {
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(147, 51, 234, 0.3);
 }
 
 .btn-super-compacto:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 background: var(--cinza-escuro);
 }
 
 .numero-central {
 font-size: 1.8rem;
 font-weight: 700;
 color: var(--roxo-principal);
 line-height: 1;
 min-width: 120px;
 text-align: center;
 }
 
 /* Ajustes rápidos compactos */
 .ajustes-rapidos-simples {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
 margin: 20px 0;
 max-width: 500px;
 margin-left: auto;
 margin-right: auto;
 }
 
 .ajuste-btn-simples {
 padding: 8px 12px;
 background: rgba(147, 51, 234, 0.1);
 color: var(--cinza-claro);
 border: 1px solid rgba(147, 51, 234, 0.3);
 border-radius: 6px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 min-width: 55px;
 font-size: 0.85rem;
 }
 
 .ajuste-btn-simples:hover {
 background: var(--gradiente-roxo);
 color: white;
 transform: translateY(-2px);
 }
 
 /* Resumo simples */
 .resumo-simples {
 background: rgba(147, 51, 234, 0.05);
 border-radius: 10px;
 padding: 15px;
 margin: 20px auto;
 max-width: 400px;
 border: 1px solid rgba(147, 51, 234, 0.2);
 }
 
 .resumo-item-simples {
 display: flex;
 justify-content: space-between;
 margin-bottom: 10px;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(147, 51, 234, 0.1);
 }
 
 .resumo-item-simples:last-child {
 border-bottom: none;
 margin-bottom: 0;
 padding-bottom: 0;
 }
 
 .resumo-item-simples.total {
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--verde);
 }
 
 /* Botão de compra */
 .btn-comprar-simples {
 display: block;
 width: 100%;
 max-width: 400px;
 margin: 25px auto;
 padding: 15px;
 background: var(--gradiente-roxo);
 color: white;
 border: none;
 border-radius: 10px;
 font-weight: 700;
 font-size: 1.1rem;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 8px 20px rgba(147, 51, 234, 0.3);
 }
 
 .btn-comprar-simples:hover {
 transform: translateY(-3px);
 box-shadow: 0 12px 25px rgba(147, 51, 234, 0.4);
 }
 
 .btn-comprar-simples small {
 display: block;
 font-size: 0.8rem;
 opacity: 0.8;
 margin-top: 5px;
 font-weight: normal;
 }

 /* VERIFICAÇÃO DE KEY */
 .verificacao-section {
 background: var(--bg-card);
 border-radius: 20px;
 padding: 30px;
 margin: 40px 0;
 border: 1px solid rgba(147, 51, 234, 0.2);
 box-shadow: var(--sombra);
 }

 .verificacao-titulo {
 font-size: 1.6rem;
 margin-bottom: 20px;
 text-align: center;
 color: var(--cinza-claro);
 }

 .verificacao-titulo i {
 color: var(--roxo-principal);
 margin-right: 10px;
 }

 .verificacao-descricao {
 color: var(--cinza);
 text-align: center;
 margin-bottom: 20px;
 font-size: 1rem;
 }

 .verificacao-input {
 width: 100%;
 padding: 15px 20px;
 border-radius: 12px;
 border: 1px solid var(--cinza-escuro);
 background: rgba(255, 255, 255, 0.05);
 color: white;
 font-size: 1rem;
 transition: all 0.3s ease;
 text-align: center;
 letter-spacing: 2px;
 font-family: monospace;
 margin-bottom: 20px;
 }

 .verificacao-input:focus {
 outline: none;
 border-color: var(--roxo-principal);
 box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
 }

 #statusVerificacao {
 min-height: 60px;
 padding: 15px;
 border-radius: 12px;
 background: rgba(147, 51, 234, 0.05);
 border: 1px solid rgba(147, 51, 234, 0.1);
 text-align: center;
 transition: all 0.3s ease;
 }

 #statusVerificacao.loading {
 color: var(--cinza);
 border-color: var(--azul);
 background: rgba(59, 130, 246, 0.1);
 }

 #statusVerificacao.valid {
 color: var(--verde);
 border-color: var(--verde);
 background: rgba(16, 185, 129, 0.1);
 }

 #statusVerificacao.invalid {
 color: var(--vermelho);
 border-color: var(--vermelho);
 background: rgba(239, 68, 68, 0.1);
 }

 .info-simples {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 margin-top: 15px;
 }

 .info-item-simples {
 padding: 10px;
 background: rgba(147, 51, 234, 0.1);
 border-radius: 8px;
 text-align: center;
 }

 .info-label-simples {
 color: var(--cinza);
 font-size: 0.8rem;
 margin-bottom: 5px;
 }

 .info-value-simples {
 color: var(--cinza-claro);
 font-weight: 600;
 font-size: 1rem;
 }

 /* INFORMAÇÕES ADICIONAIS */
 .info-extra {
 background: var(--bg-card);
 border-radius: 20px;
 padding: 30px;
 margin: 50px 0;
 border: 1px solid rgba(147, 51, 234, 0.2);
 box-shadow: var(--sombra);
 }

 .info-titulo {
 font-size: 1.8rem;
 margin-bottom: 25px;
 text-align: center;
 font-weight: 700;
 position: relative;
 }

 .info-titulo::after {
 content: '';
 display: block;
 width: 80px;
 height: 4px;
 background: var(--gradiente-roxo);
 margin: 15px auto 0;
 border-radius: 2px;
 }

 .info-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 25px;
 margin-top: 30px;
 }

 .info-item-card {
 text-align: center;
 padding: 20px;
 background: rgba(147, 51, 234, 0.05);
 border-radius: 15px;
 border: 1px solid rgba(147, 51, 234, 0.1);
 transition: all 0.3s ease;
 }

 .info-item-card:hover {
 border-color: var(--roxo-principal);
 box-shadow: 0 10px 20px rgba(147, 51, 234, 0.2);
 }

 .info-item-card i {
 font-size: 2.2rem;
 color: var(--roxo-principal);
 margin-bottom: 15px;
 }

 .info-item-card h4 {
 font-size: 1.2rem;
 margin-bottom: 12px;
 color: var(--cinza-claro);
 }

 .info-item-card p {
 color: var(--cinza);
 font-size: 0.95rem;
 line-height: 1.6;
 }

 /* RODAPÉ */
 footer {
 text-align: center;
 padding: 40px 20px;
 font-size: 0.9rem;
 color: var(--cinza);
 border-top: 1px solid rgba(255, 255, 255, 0.05);
 margin-top: 20px;
 background: var(--bg-card);
 border-radius: 20px 20px 0 0;
 }

 .footer-logo {
 font-size: 1.8rem;
 font-weight: 700;
 margin-bottom: 10px;
 background: linear-gradient(135deg, #9333ea, #7c3aed, #a855f7);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }

 .footer-links {
 display: flex;
 justify-content: center;
 gap: 25px;
 margin: 20px 0;
 flex-wrap: wrap;
 }

 .footer-links a {
 color: var(--cinza);
 text-decoration: none;
 transition: color 0.3s ease;
 }

 .footer-links a:hover {
 color: var(--roxo-principal);
 }

 /* MODAL DE COMPRA */
 .modal-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.95);
 z-index: 10000;
 justify-content: center;
 align-items: center;
 padding: 20px;
 }

 .modal-compra {
 background: var(--bg-card);
 border-radius: 20px;
 padding: 25px;
 width: 95%;
 max-width: 450px;
 border: 2px solid var(--roxo-principal);
 box-shadow: var(--sombra-destaque);
 position: relative;
 }

 .modal-close {
 position: absolute;
 top: 15px;
 right: 15px;
 background: none;
 border: none;
 color: var(--cinza);
 font-size: 24px;
 cursor: pointer;
 }

 .modal-title {
 color: var(--cinza-claro);
 text-align: center;
 margin-bottom: 20px;
 font-size: 1.5rem;
 }

 .modal-produto-info {
 background: rgba(147, 51, 234, 0.1);
 padding: 15px;
 border-radius: 10px;
 margin-bottom: 20px;
 border: 1px solid rgba(147, 51, 234, 0.3);
 }

 .modal-form-simples {
 margin: 20px 0;
 }

 .modal-input-simples {
 width: 100%;
 padding: 14px;
 border-radius: 10px;
 border: 1px solid var(--cinza-escuro);
 background: rgba(255, 255, 255, 0.05);
 color: white;
 font-size: 1rem;
 text-align: center;
 font-weight: 500;
 }

 .modal-input-simples:focus {
 outline: none;
 border-color: var(--roxo-principal);
 box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
 }

 .modal-label-simples {
 display: block;
 color: var(--cinza-claro);
 margin-bottom: 10px;
 text-align: center;
 font-size: 1rem;
 }

 .modal-label-simples i {
 color: var(--roxo-principal);
 margin-right: 8px;
 }

 .modal-hint {
 color: var(--cinza);
 font-size: 0.85rem;
 text-align: center;
 margin-top: 10px;
 line-height: 1.5;
 }

 .modal-buttons {
 display: flex;
 gap: 12px;
 margin-top: 20px;
 }

 .btn-modal-primary {
 flex: 1;
 padding: 14px;
 background: var(--gradiente-roxo);
 color: white;
 border: none;
 border-radius: 10px;
 font-weight: 600;
 font-size: 1rem;
 cursor: pointer;
 transition: all 0.3s ease;
 }

 .btn-modal-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 20px rgba(147, 51, 234, 0.3);
 }

 .btn-modal-secondary {
 flex: 1;
 padding: 14px;
 background: rgba(239, 68, 68, 0.2);
 color: var(--vermelho);
 border: 1px solid var(--vermelho);
 border-radius: 10px;
 font-weight: 600;
 font-size: 1rem;
 cursor: pointer;
 transition: all 0.3s ease;
 }

 .btn-modal-secondary:hover {
 background: rgba(239, 68, 68, 0.3);
 transform: translateY(-2px);
 }

 /* PAGAMENTO PIX */
 .pagamento-section {
 margin-top: 20px;
 padding: 20px;
 background: rgba(147, 51, 234, 0.05);
 border-radius: 15px;
 border: 1px solid rgba(147, 51, 234, 0.2);
 }

 .pagamento-titulo {
 color: var(--verde);
 text-align: center;
 margin-bottom: 15px;
 font-size: 1.3rem;
 }

 .qr-code-container {
 text-align: center;
 margin: 20px 0;
 padding: 15px;
 background: white;
 border-radius: 12px;
 border: 2px solid var(--roxo-principal);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 position: relative;
 overflow: hidden;
 }

 .qr-code-container::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 4px;
 background: var(--gradiente-roxo);
 }

 .qr-code-container img {
 width: 200px;
 height: 200px;
 border-radius: 8px;
 border: 1px solid #ddd;
 }

 .qr-code-label {
 color: #333;
 font-weight: 600;
 margin-top: 12px;
 font-size: 1rem;
 }

 .qr-code-valor {
 color: #10b981;
 font-weight: 700;
 font-size: 1.2rem;
 margin-top: 5px;
 }

 .pix-code-container {
 margin: 20px 0;
 }

 .pix-code-label {
 color: var(--cinza-claro);
 margin-bottom: 8px;
 text-align: center;
 font-size: 0.9rem;
 }

 .pix-code-box {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid var(--cinza-escuro);
 border-radius: 8px;
 padding: 15px;
 font-family: 'Courier New', monospace;
 word-break: break-all;
 color: var(--cinza-claro);
 position: relative;
 padding-right: 80px;
 font-size: 0.8rem;
 line-height: 1.4;
 min-height: 50px;
 display: flex;
 align-items: center;
 }

 .btn-copiar-pix {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 background: var(--roxo-principal);
 color: white;
 border: none;
 border-radius: 6px;
 padding: 6px 10px;
 cursor: pointer;
 font-weight: 600;
 font-size: 0.75rem;
 transition: all 0.3s ease;
 min-width: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 height: 30px;
 }

 .btn-copiar-pix:hover {
 background: var(--roxo-escuro);
 }

 .status-pagamento {
 margin-top: 20px;
 padding: 15px;
 border-radius: 10px;
 text-align: center;
 font-weight: 600;
 font-size: 1rem;
 border: 2px solid transparent;
 }

 .status-pagamento.pendente {
 background: rgba(245, 158, 11, 0.1);
 color: var(--amarelo);
 border-color: var(--amarelo);
 }

 .status-pagamento.aprovado {
 background: rgba(16, 185, 129, 0.1);
 color: var(--verde);
 border-color: var(--verde);
 animation: pulse 2s infinite;
 }

 @keyframes pulse {
 0% { opacity: 1; }
 50% { opacity: 0.7; }
 100% { opacity: 1; }
 }

 /* KEY GERADA */
 .key-gerada-container {
 text-align: center;
 margin: 25px 0;
 padding: 25px;
 background: rgba(16, 185, 129, 0.1);
 border-radius: 12px;
 border: 2px solid var(--verde);
 }

 .key-gerada-titulo {
 color: var(--verde);
 font-size: 1.3rem;
 margin-bottom: 15px;
 }

 .key-instructions {
 color: var(--cinza-claro);
 margin-bottom: 15px;
 font-size: 1rem;
 }

 .key-gerada-code {
 background: rgba(0, 0, 0, 0.3);
 padding: 15px;
 border-radius: 8px;
 font-family: 'Courier New', monospace;
 font-size: 0.9rem;
 color: var(--cinza-claro);
 margin: 12px 0;
 word-break: break-all;
 border: 1px solid var(--cinza-escuro);
 position: relative;
 padding-right: 70px;
 min-height: 50px;
 display: flex;
 align-items: center;
 }

 .btn-copiar-key {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 background: var(--roxo-principal);
 color: white;
 border: none;
 padding: 6px 10px;
 border-radius: 6px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 min-width: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 height: 30px;
 font-size: 0.75rem;
 }

 .btn-copiar-key:hover {
 background: var(--roxo-escuro);
 }

 .key-info {
 color: var(--cinza-claro);
 margin-top: 12px;
 font-size: 0.85rem;
 }

 /* RESPONSIVIDADE */
 @media (max-width: 768px) {
 .secao {
  padding-top: 120px;
  min-height: calc(100vh - 150px);
 }
 
 .slider-container {
  min-height: auto;
 }
 
 .controle-super-compacto {
  flex-direction: row;
  gap: 8px;
  padding: 12px;
 }
 
 .btn-super-compacto {
  padding: 8px 12px;
  min-width: 80px;
  font-size: 0.85rem;
 }
 
 .numero-central {
  font-size: 1.5rem;
  min-width: 100px;
 }
 
 .ajustes-rapidos-simples {
  gap: 6px;
 }
 
 .ajuste-btn-simples {
  padding: 6px 10px;
  min-width: 50px;
  font-size: 0.8rem;
 }
 
 .servicos-grid {
  grid-template-columns: 1fr;
 }
 
 .info-grid {
  grid-template-columns: 1fr;
 }
 
 .modal-buttons {
  flex-direction: column;
 }
 
 .qr-code-container img {
  width: 180px;
  height: 180px;
 }
 
 .contato-item {
  flex-direction: column;
  text-align: center;
  gap: 10px;
 }
 
 .contato-item i {
  font-size: 1.5rem;
 }
 }

 @media (max-width: 480px) {
 .menu-btn {
  padding: 8px 12px;
  font-size: 0.8rem;
 }
 
 .logo {
  font-size: 1.8rem;
 }
 
 .slider-container {
  min-height: auto;
 }
 
 .btn-super-compacto {
  padding: 6px 10px;
  min-width: 70px;
  font-size: 0.8rem;
 }
 
 .numero-central {
  font-size: 1.3rem;
  min-width: 90px;
 }
 
 .btn-comprar-simples {
  font-size: 1rem;
  padding: 12px;
 }
 
 .verificacao-input {
  font-size: 0.9rem;
  padding: 12px;
 }
 
 .info-simples {
  grid-template-columns: 1fr;
 }
 
 .guia-content {
  padding: 15px;
 }
 
 .servico-card {
  padding: 20px;
 }
 }
 
.footer-copyright{
  color: red;
  margin-top: 40px;
} 

.link-hospedagem{
  color: #3b82f6; /* azul */
  font-weight: 600;
  text-decoration: none;
}

.link-hospedagem:hover{
  text-decoration: underline;
}

.botoes-compra{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-comprar-secundario{
  background: transparent;
  border: 2px solid #9333ea;
  color: #9333ea;
  padding: 14px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

.btn-comprar-secundario:hover{
  background: #9333ea;
  color: #fff;
}


