/* ========================================================================== SIMX — site de vendas (consumidor final) Editorial escuro: ink + violeta, Space Grotesk (display) + Inter (corpo) ========================================================================== */ /* ---------- Tokens ---------- */ :root { --ink: #0A0A0D; --surface: #141418; --surface-2: #1C1C21; --violet-700: #4C0A7A; --violet-600: #5B0E91; --violet-500: #7A1FD0; --violet-450: #8F3BEB; --violet-400: #A24BFF; --violet-300: #C9A3FF; --border-control: #6B6588; --border-soft: rgba(245, 244, 247, 0.08); --text: #F5F4F7; --text-2: #B9B6C4; --surface-light: #F5F4F7; /* superfície clara intencional (pílula de logos de operadora) */ --whats: #25D366; --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --container: 72rem; --radius: 16px; --radius-sm: 10px; --space-section: clamp(4.5rem, 3rem + 5vw, 8.5rem); --dur: 300ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Reset básico ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p { margin: 0; } h1, h2, h3, .passo-num, .plano-gb, .plano-preco { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; } /* Âncoras não entram sob o header sticky (72px + folga) */ [id] { scroll-margin-top: 88px; } /* Inter 700 não é carregada — usa o 600 real em vez de faux-bold sintetizado */ strong { font-weight: 600; } /* ---------- Reveal (animação de entrada) ---------- Gate de JS: só esconde conteúdo quando tem a classe .js (script inline no ). Se o app.js falhar, nada fica invisível. Estado escondido via :not(.visivel): o estado final não declara transform, então os translateY de :hover (.vantagem, .contato-card) voltam a funcionar. Declarado ANTES dos componentes: transições próprias (ex.: .vantagem) vencem a cascata. */ @media (prefers-reduced-motion: no-preference) { .js :where(.reveal) { transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .js .reveal:not(.visivel) { opacity: 0; transform: translateY(18px); } } /* Foco visível em tudo */ :focus-visible { outline: 2px solid var(--violet-300); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--violet-500); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; text-decoration: none; font-weight: 600; } .skip-link:focus-visible { left: 0; } .container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; } /* ---------- Texto com gradiente (assinatura) ---------- */ .grad-text { background: linear-gradient(100deg, var(--violet-300), var(--violet-400)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.75rem 1.5rem; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(120deg, var(--violet-500), var(--violet-450)); color: #fff; box-shadow: 0 8px 28px rgba(122, 31, 208, 0.35); } .btn-primary:hover { box-shadow: 0 12px 36px rgba(143, 59, 235, 0.45); } .btn-whats { background: var(--whats); color: var(--ink); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25); } .btn-whats:hover { filter: brightness(1.06); } .ico-whats { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 13, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); } .header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; } .brand { display: inline-flex; align-items: center; min-height: 44px; } .brand-mark { width: auto; height: 26px; } .site-nav { display: flex; gap: 0.25rem; margin-left: auto; } .site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 999px; text-decoration: none; color: var(--text-2); font-weight: 500; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .site-nav a:hover { color: var(--text); background: var(--surface-2); } .btn-header { min-height: 44px; padding: 0.5rem 1.2rem; font-size: 0.95rem; } /* CTA "Ver planos" só aparece no header mobile (troca com o CTA WhatsApp — o flutuante permanece) */ .btn-header-planos { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(3.5rem, 2rem + 6vw, 7.5rem) 0 var(--space-section); background-image: url("assets/circuit.svg"); background-size: 200px 200px; } .hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to bottom, transparent, var(--ink)); pointer-events: none; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; } .eyebrow { display: inline-block; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-300); border: 1px solid var(--border-control); border-radius: 999px; padding: 0.45rem 1rem; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem); font-weight: 700; max-width: 14ch; } .hero-sub { margin-top: 1.4rem; max-width: 46ch; color: var(--text-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; } .hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 2.4rem; color: var(--text-2); font-size: 0.9rem; } .hero-tags li { display: flex; align-items: center; gap: 0.5rem; } .hero-tags li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet-400); flex: 0 0 auto; } /* Placa do chip: assinatura em gradiente roxo */ .chip-plate { position: relative; border-radius: 24px; padding: clamp(1.5rem, 3vw, 2.75rem); background: url("assets/circuit.svg"), radial-gradient(120% 120% at 15% 10%, var(--violet-450) 0%, var(--violet-600) 45%, var(--violet-700) 100%); background-size: 200px 200px, cover; box-shadow: 0 30px 80px rgba(91, 14, 145, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); transform: rotate(-2deg); transition: transform 500ms var(--ease); } .chip-plate:hover { transform: rotate(0deg) translateY(-4px); } .chip-img { width: 100%; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.55)); } /* ---------- Seções ---------- */ .section { padding: var(--space-section) 0; } .section-head { max-width: 44rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); } .section-index { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet-300); /* AA: 9.6:1 no ink, 8.9:1 no surface (violet-400 reprovava no surface) */ margin-bottom: 0.9rem; } .section-head h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 700; } .section-sub { margin-top: 0.9rem; color: var(--text-2); font-size: 1.05rem; } /* ---------- Planos: tabs ---------- */ .tabs { display: inline-flex; gap: 0.35rem; padding: 0.35rem; border: 1px solid var(--border-control); border-radius: 999px; background: var(--surface); margin-bottom: 2.25rem; } .tab { min-height: 44px; padding: 0.55rem 1.6rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-family: var(--font-display); font-size: 1rem; font-weight: 600; cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { background: linear-gradient(120deg, var(--violet-500), var(--violet-450)); color: #fff; } /* ---------- Planos: cards ---------- */ .grid-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; } .plano-card { position: relative; display: flex; flex-direction: column; gap: 0.4rem; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.5rem; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .plano-card:hover { transform: translateY(-4px); border-color: var(--violet-450); box-shadow: 0 18px 44px rgba(122, 31, 208, 0.22); } .plano-card.destaque { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(140deg, var(--violet-400), var(--violet-600)) border-box; border: 1px solid transparent; box-shadow: 0 18px 48px rgba(122, 31, 208, 0.28); } .plano-topo { display: flex; flex-wrap: wrap; /* pílula Rede + badge não estouram o card na largura mínima da grid */ align-items: center; justify-content: space-between; gap: 0.5rem; row-gap: 0.4rem; margin-bottom: 0.6rem; } .plano-rede { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--border-control); border-radius: 999px; padding: 0.25rem 0.7rem; } .plano-badge { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg, var(--violet-500), var(--violet-450)); border-radius: 999px; padding: 0.3rem 0.75rem; } .plano-gb { font-size: clamp(3.2rem, 2.6rem + 2vw, 4.2rem); font-weight: 700; letter-spacing: -0.04em; background: linear-gradient(160deg, #FFFFFF 30%, var(--violet-300)); -webkit-background-clip: text; background-clip: text; color: transparent; } .plano-gb .gb-unid { font-size: 0.42em; letter-spacing: 0; font-weight: 600; } .plano-preco { font-size: 1.45rem; font-weight: 600; color: var(--text); margin-top: 0.1rem; } .plano-preco .preco-mes { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--text-2); } .plano-features { margin-top: 0.9rem; margin-bottom: 1.3rem; display: grid; gap: 0.45rem; color: var(--text-2); font-size: 0.94rem; } .plano-features li { display: flex; align-items: baseline; gap: 0.55rem; } .plano-features li::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--violet-400); flex: 0 0 auto; transform: translateY(-2px) rotate(45deg); } .plano-cta { margin-top: auto; width: 100%; } /* Fallback sem JavaScript (os cards de plano são renderizados pelo app.js) */ .nojs-aviso { padding: 1.1rem 1.4rem; border-left: 3px solid var(--violet-450); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-2); max-width: 46rem; } .nojs-aviso a { color: var(--text); font-weight: 600; } /* ---------- Como funciona ---------- */ .section-passos { background: var(--surface); border-block: 1px solid var(--border-soft); } .passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: passo; } .passo { position: relative; background: var(--ink); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.75rem 1.5rem 1.6rem; overflow: hidden; } .passo-num { display: block; font-size: clamp(3.4rem, 3rem + 2vw, 4.6rem); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--violet-400); margin-bottom: 0.9rem; } .passo h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; } .passo p { color: var(--text-2); font-size: 0.96rem; } .passos-nota { margin-top: 2rem; padding: 1.1rem 1.4rem; border-left: 3px solid var(--violet-450); background: var(--ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-2); max-width: 46rem; } .passos-nota strong { color: var(--text); } /* ---------- Cobertura ---------- */ .section-cobertura { background: var(--surface); border-block: 1px solid var(--border-soft); } .cobertura-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .mapa-wrap { position: relative; margin: 0; max-width: 30rem; } .mapa-img { width: 100%; } .mapa-selo { position: absolute; left: 0.9rem; bottom: 0.9rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-300); background: rgba(10, 10, 13, 0.85); border: 1px solid var(--border-control); border-radius: 999px; padding: 0.4rem 0.95rem; } .rede-cards { display: grid; gap: 1.25rem; } .rede-card { background: var(--ink); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.6rem 1.5rem; } /* Logos coloridos das operadoras: pílula clara garante legibilidade sobre o escuro */ .rede-logo-pill { display: inline-flex; align-items: center; background: var(--surface-light); border-radius: var(--radius-sm); padding: 0.45rem 0.9rem; margin-bottom: 1rem; } .rede-logo-pill img { height: 38px; width: auto; } .rede-card h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.4rem; } .rede-card p { color: var(--text-2); font-size: 0.96rem; max-width: 46ch; } .rede-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.4rem; color: var(--violet-300); font-weight: 600; text-decoration: none; } .rede-link:hover { text-decoration: underline; } /* ---------- Vantagens ---------- */ .grid-vantagens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .vantagem { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.6rem 1.5rem; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .vantagem:hover { border-color: var(--border-control); transform: translateY(-3px); } /* Bento: a vantagem-âncora (WhatsApp ilimitado) ocupa 2 colunas com tratamento display */ .vantagem-destaque { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(140deg, var(--violet-400), var(--violet-600)) border-box; border: 1px solid transparent; } .vantagem-destaque h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -0.02em; } .vantagem-destaque p { font-size: 1.02rem; max-width: 34rem; } .vantagem-destaque:hover { border-color: transparent; } .vantagem h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; padding-top: 0.85rem; position: relative; } .vantagem h3::before { content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--violet-400), var(--violet-600)); } .vantagem p { color: var(--text-2); font-size: 0.96rem; } /* Vantagens amplas (atendimento humano, eSIM): 2 colunas com título maior */ .vantagem-ampla { grid-column: span 2; } .vantagem-ampla h3 { font-size: 1.45rem; letter-spacing: -0.02em; } .vantagem-ampla p { max-width: 40rem; } /* ---------- Sua operadora (B2B) ---------- */ .b2b-plate { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; border-radius: 24px; padding: clamp(1.75rem, 4vw, 3.5rem); background: url("assets/circuit.svg"), radial-gradient(130% 130% at 12% 8%, var(--violet-450) 0%, var(--violet-600) 48%, var(--violet-700) 100%); background-size: 200px 200px, cover; box-shadow: 0 30px 80px rgba(91, 14, 145, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .b2b-pitch { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff; max-width: 24ch; } .b2b-sub { margin-top: 1rem; color: var(--text); font-size: 1.02rem; max-width: 48ch; } .b2b-bullets { margin-top: 1.4rem; display: grid; gap: 0.55rem; color: #fff; font-weight: 500; } .b2b-bullets li { display: flex; align-items: baseline; gap: 0.6rem; } .b2b-bullets li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: #fff; flex: 0 0 auto; transform: translateY(-1px) rotate(45deg); } .b2b-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; } .btn-light { background: #fff; color: var(--violet-700); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); } .btn-light:hover { filter: brightness(0.94); } /* width:100% + teto de 340px: sem estourar a placa no mobile (max-width sozinho anularia o 100% global) */ .b2b-visual img { width: 100%; max-width: 340px; margin-inline: auto; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.55)); } /* ---------- Contato ---------- */ .section-contato { position: relative; background-image: url("assets/circuit.svg"); background-size: 200px 200px; } .contato-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 52rem; } .contato-card { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius); padding: 1.6rem 1.5rem; min-height: 44px; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease); } .contato-card:hover { transform: translateY(-4px); border-color: var(--violet-400); box-shadow: 0 16px 40px rgba(122, 31, 208, 0.2); } .contato-rotulo { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); } .contato-valor { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); font-weight: 600; overflow-wrap: anywhere; } .contato-acao { margin-top: 0.7rem; font-weight: 600; color: var(--violet-300); font-size: 0.95rem; } .contato-acao.whats-acao { color: var(--whats); } /* ---------- Rodapé ---------- */ .site-footer { border-top: 1px solid var(--border-soft); background: var(--surface); padding-top: 3rem; padding-bottom: 5.5rem; /* reserva espaço para o botão flutuante de WhatsApp não cobrir o © */ } .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; } .footer-mark { height: 22px; margin-bottom: 1rem; } .footer-brand p { color: var(--text-2); font-size: 0.95rem; } .footer-endereco { margin-top: 0.2rem; } .footer-contatos { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; } .footer-contatos a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; transition: color var(--dur) var(--ease); } .footer-contatos a:hover { color: var(--text); } .footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; border-top: 1px solid var(--border-soft); padding-block: 1.4rem; color: var(--text-2); font-size: 0.85rem; } .footer-legal p { margin: 0; } /* ---------- Botão flutuante WhatsApp ---------- */ .whats-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--whats); color: var(--ink); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .whats-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px rgba(37, 211, 102, 0.45), 0 6px 16px rgba(0, 0, 0, 0.4); } .whats-float svg { width: 30px; height: 30px; } /* Reveal: bloco movido para o topo do arquivo (gate .js + fix de cascata) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- Responsivo ---------- */ @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 30rem; } .passos { grid-template-columns: 1fr; } .grid-vantagens { grid-template-columns: repeat(2, 1fr); } /* Nav com 5 itens: o CTA do header sai no tablet (o flutuante permanece) */ .btn-header.btn-whats { display: none; } .cobertura-grid { grid-template-columns: 1fr; } .mapa-wrap { margin-inline: auto; } .vantagem-ampla { grid-column: auto; } .vantagem-ampla h3 { font-size: 1.25rem; } .b2b-plate { grid-template-columns: 1fr; } .b2b-visual { max-width: 18rem; margin-inline: auto; } } @media (max-width: 700px) { .site-nav { display: none; } .btn-header { margin-left: auto; } /* No mobile o header prioriza "Ver planos"; o WhatsApp fica no botão flutuante permanente */ .btn-header-planos { display: inline-flex; } .grid-vantagens { grid-template-columns: 1fr; } .vantagem-destaque { grid-column: auto; } .contato-cards { grid-template-columns: 1fr; } .footer-grid { flex-direction: column; } .tabs { width: 100%; } .tab { flex: 1; } } @media (max-width: 420px) { .hero-ctas .btn, .b2b-ctas .btn { width: 100%; } }