/*============================================================================== AgendaZ — Landing page (identidade "navy SaaS") Este arquivo e a folha de estilo COMPLETA da landing (resources/views/default/ index.blade.php). Ele entra depois do core do template e reescreve a aparencia da pagina inteira; o template continua carregado apenas pelo que e comportamento (grid, collapse, modal, dropdown, switch). Regras da casa: - nenhuma cor, raio, sombra ou duracao escrita na mao fora do bloco 1; - tudo que e componente le token semantico, entao o tema claro e so um bloco de sobrescritas no fim do bloco 1; - os seletores sao prefixados por `.az-page` (classe do ) quando precisam vencer o core do template sem recorrer a !important. ==============================================================================*/ /*============================================================================== 1. TOKENS ==============================================================================*/ :root { /* Marca */ --az-primary: #4a6cf7; --az-primary-hover: #3a5ae0; --az-primary-light: #8ba3fb; --az-accent: #22d3ee; /* Superficies — do fundo mais profundo ate o card */ --az-bg: #0b1120; --az-bg-secondary: #0e1626; --az-surface: #111b2e; --az-card: rgba(255, 255, 255, 0.035); --az-card-hover: rgba(255, 255, 255, 0.055); /* Tracos */ --az-border: rgba(255, 255, 255, 0.09); --az-border-hover: rgba(74, 108, 247, 0.45); /* Texto */ --az-text: #edf1fa; --az-text-muted: #98a6c4; /* Status — reaproveitados pelo painel de demonstracao */ --az-success: #34d399; --az-warning: #fbbf24; --az-danger: #fb7185; /* Dimensoes */ --az-radius-sm: 8px; --az-radius: 14px; --az-radius-lg: 20px; --az-radius-pill: 999px; --az-shell: 1200px; --az-header-h: 78px; /* Sombras: profundidade discreta, nunca fumaca */ --az-shadow-sm: 0 4px 16px -6px rgba(2, 6, 20, 0.6); --az-shadow: 0 18px 45px -22px rgba(2, 6, 20, 0.9); --az-shadow-lg: 0 40px 90px -40px rgba(2, 6, 20, 1); --az-glow: 0 10px 30px -10px rgba(74, 108, 247, 0.55); /* Movimento curto: acabamento, nao espera */ --az-fast: 160ms; --az-base: 280ms; --az-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --az-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Tema claro — acionado pelo seletor de tema que ja existia no cabecalho. Como todo componente le token, trocar estes onze valores troca a pagina. */ .az-page.light { --az-bg: #ffffff; /* No claro o "primary-light" deixa de ser um azul claro e vira um azul escuro: ele e o tom de TEXTO de destaque (titulos, links, itens de plano), e #8ba3fb sobre branco nao passa nem perto de legivel. */ --az-primary-light: #3355e8; --az-bg-secondary: #f3f6fd; --az-surface: #ffffff; --az-card: #ffffff; --az-card-hover: #ffffff; --az-border: rgba(11, 17, 32, 0.1); --az-border-hover: rgba(74, 108, 247, 0.4); --az-text: #0b1120; --az-text-muted: #5b6884; --az-shadow-sm: 0 4px 14px -6px rgba(11, 17, 32, 0.14); --az-shadow: 0 18px 40px -24px rgba(11, 17, 32, 0.28); --az-shadow-lg: 0 40px 80px -40px rgba(11, 17, 32, 0.3); } /*============================================================================== 2. BASE ==============================================================================*/ html { scroll-behavior: smooth; /* A ancora nao pode parar debaixo do cabecalho fixo. */ scroll-padding-top: calc(var(--az-header-h) + 16px); } body.az-page { background-color: var(--az-bg); color: var(--az-text); font-family: var(--az-font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Os brilhos radiais do fundo sao largos; sem isto eles criam barra horizontal em telas estreitas. */ overflow-x: hidden; } /* `:where()` zera a especificidade do seletor de elemento. Sem isto, o reset (`.az-page h2`, 0-1-1) venceria toda classe de componente (`.az-title`, 0-1-0) e as margens dos titulos seriam sempre zero. */ .az-page :where(h1, h2, h3, h4, h5, h6) { color: var(--az-text); font-family: var(--az-font); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; } .az-page :where(p) { margin: 0; color: var(--az-text-muted); } .az-page :where(a) { color: var(--az-primary-light); text-decoration: none; transition: color var(--az-fast) var(--az-ease); } .az-page :where(a):hover { color: var(--az-primary); } .az-page :where(img) { max-width: 100%; } .az-page ::selection { background: rgba(74, 108, 247, 0.35); color: #fff; } /*============================================================================== 3. LAYOUT ==============================================================================*/ .az-shell { width: 100%; max-width: var(--az-shell); margin-inline: auto; padding-inline: 20px; } .az-section { position: relative; padding-block: 96px; /* Os brilhos sao maiores que a faixa de proposito. Quem recorta e a secao: confiar no `overflow-x` do body nao funciona, porque esse valor e propagado para a viewport e o body volta a ser `visible`. */ overflow: hidden; } .az-section--tight { padding-block: 72px; } /* Faixa alternada: o degrade evita a emenda dura entre duas secoes escuras. */ .az-section--alt { background: linear-gradient(180deg, var(--az-bg) 0%, var(--az-bg-secondary) 22%, var(--az-bg-secondary) 78%, var(--az-bg) 100%); } /* Cabecalho de secao — selo, titulo e linha de apoio, sempre nesta ordem. */ .az-head { max-width: 660px; margin: 0 auto 60px; text-align: center; } .az-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; margin-bottom: 20px; border: 1px solid rgba(74, 108, 247, 0.3); border-radius: var(--az-radius-pill); background: rgba(74, 108, 247, 0.1); color: var(--az-primary-light); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .az-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--az-primary); box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.22); } .az-title { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.625rem); margin-bottom: 18px; } /* Palavra em destaque dentro do titulo. */ .az-title em { font-style: normal; color: var(--az-primary-light); } .az-lead { font-size: 1.0625rem; line-height: 1.75; } .az-head .az-lead { margin-inline: auto; } /*============================================================================== 4. FUNDO DECORATIVO Tudo aqui e `pointer-events: none` e fica atras do conteudo: nenhum brilho pode roubar clique nem baixar contraste de texto. ==============================================================================*/ .az-glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(90px); opacity: 0.5; } .az-glow--primary { background: radial-gradient(circle, rgba(74, 108, 247, 0.55), transparent 70%); } .az-glow--accent { background: radial-gradient(circle, rgba(34, 211, 238, 0.28), transparent 70%); } .az-page.light .az-glow { opacity: 0.35; } /* Malha tecnologica discreta — some no tema claro, onde vira sujeira. */ .az-grid-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); } .az-page.light .az-grid-bg::before { background-image: linear-gradient(rgba(11, 17, 32, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 17, 32, 0.04) 1px, transparent 1px); } /* O conteudo sobe acima dos enfeites. */ .az-section > .az-shell, .az-hero > .az-shell { position: relative; z-index: 1; } /*============================================================================== 5. BOTOES Uma unica familia. As classes Bootstrap que vem do PHP (btn-primary, btn-label-primary, btn-label-secondary) sao remapeadas para ela no bloco 15, para nao ser preciso mexer na regra de negocio dos planos. ==============================================================================*/ .az-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--az-radius-pill); font-family: var(--az-font); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color var(--az-fast) var(--az-ease), border-color var(--az-fast) var(--az-ease), color var(--az-fast) var(--az-ease), box-shadow var(--az-base) var(--az-ease), transform var(--az-fast) var(--az-ease); } .az-btn:focus-visible { outline: 2px solid var(--az-primary-light); outline-offset: 3px; } .az-btn--primary { background: var(--az-primary); color: #fff; box-shadow: var(--az-glow); } .az-btn--primary:hover { background: var(--az-primary-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(74, 108, 247, 0.7); } .az-btn--ghost { background: rgba(255, 255, 255, 0.05); border-color: var(--az-border); color: var(--az-text); } .az-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--az-border-hover); color: var(--az-text); transform: translateY(-2px); } .az-page.light .az-btn--ghost { background: rgba(11, 17, 32, 0.03); } .az-page.light .az-btn--ghost:hover { background: rgba(11, 17, 32, 0.06); } /* Sobre faixa colorida (suporte / CTA final) o fantasma precisa de vidro. */ .az-btn--onbrand { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); color: #fff; backdrop-filter: blur(6px); } .az-btn--onbrand:hover { background: #fff; border-color: #fff; color: var(--az-primary); transform: translateY(-2px); } .az-btn--lg { padding: 16px 34px; font-size: 1rem; } .az-btn--sm { padding: 10px 18px; font-size: 0.875rem; } .az-btn--block { width: 100%; } .az-btn.disabled, .az-btn:disabled { pointer-events: none; opacity: 0.55; } .az-btn__icon { flex: none; } /* Linha de botoes: empilha no celular sem depender de utilitario do template. */ .az-btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /*============================================================================== 6. CABECALHO ==============================================================================*/ .az-page .layout-navbar { position: fixed; inset: 0 0 auto 0; z-index: 1030; height: var(--az-header-h); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--az-base) var(--az-ease), border-color var(--az-base) var(--az-ease), box-shadow var(--az-base) var(--az-ease); } /* `.navbar-active` e posta pelo front-main.js a partir de 10px de rolagem. */ .az-page .layout-navbar.navbar-active { background: color-mix(in srgb, var(--az-bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--az-border); box-shadow: var(--az-shadow-sm); } /* Fallback para navegador sem color-mix. */ @supports not (background: color-mix(in srgb, red 50%, blue)) { .az-page .layout-navbar.navbar-active { background: rgba(11, 17, 32, 0.9); } } .az-page .landing-navbar { display: flex; align-items: center; width: 100%; padding: 0; gap: 12px; } /* O logotipo em si mora em brand.css, compartilhado com o menu lateral e as telas de conta. Aqui so o que e do cabecalho da landing. */ .az-page .layout-navbar .az-logo__text { color: var(--az-text); } .az-page .landing-footer .az-logo__text { color: var(--az-text); } /* Navegacao */ .az-page .landing-nav-menu .navbar-nav { gap: 4px; } .az-page .landing-nav-menu .nav-link { position: relative; padding: 8px 14px; border-radius: var(--az-radius-sm); color: var(--az-text-muted); font-size: 0.9375rem; font-weight: 500; transition: color var(--az-fast) var(--az-ease); } .az-page .landing-nav-menu .nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--az-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--az-base) var(--az-ease); } .az-page .landing-nav-menu .nav-link:hover, .az-page .landing-nav-menu .nav-link:focus, .az-page .landing-nav-menu .nav-link:active { color: #fff; } /* No tema claro o branco sumiria: la o realce e o azul da marca. */ .az-page.light .landing-nav-menu .nav-link:hover, .az-page.light .landing-nav-menu .nav-link:focus, .az-page.light .landing-nav-menu .nav-link:active { color: var(--az-primary); } .az-page .landing-nav-menu .nav-link:hover::after { transform: scaleX(1); } /* Acoes a direita */ .az-page .layout-navbar .navbar-nav.az-nav-actions { flex-direction: row; align-items: center; gap: 10px; margin-left: auto; } /* Seletor de tema — um botao so, sem menu suspenso. */ .az-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--az-border); border-radius: 50%; background: var(--az-card); color: var(--az-text-muted); font-size: 1.125rem; cursor: pointer; transition: border-color var(--az-fast) var(--az-ease), background-color var(--az-fast) var(--az-ease), color var(--az-fast) var(--az-ease), transform var(--az-fast) var(--az-ease); } .az-theme-toggle:hover { border-color: var(--az-border-hover); background: rgba(74, 108, 247, 0.14); color: #fff; transform: translateY(-1px); } .az-page.light .az-theme-toggle:hover { color: var(--az-primary); } .az-theme-toggle:focus-visible { outline: 2px solid var(--az-primary-light); outline-offset: 3px; } /* Botao hamburguer / fechar */ .az-page .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--az-border); border-radius: 10px; background: transparent; color: var(--az-text); box-shadow: none; } .az-page .navbar-toggler:focus { box-shadow: none; } /* Menu no celular: painel de vidro logo abaixo do cabecalho. */ @media (max-width: 991.98px) { .az-page .landing-nav-menu { position: absolute; top: calc(100% + 14px); left: 0; right: 0; padding: 0; border-radius: var(--az-radius); background: var(--az-surface); border: 1px solid var(--az-border); box-shadow: var(--az-shadow-lg); } /* O respiro vive na lista, nao no painel: assim a altura animada pelo collapse comeca em zero de verdade, sem pular no fim da transicao. O topo maior abre espaco para o botao de fechar. */ .az-page .landing-nav-menu .navbar-nav { gap: 2px; padding: 46px 12px 12px; } .az-page .landing-nav-menu .nav-link { padding: 12px 14px; font-size: 1rem; } .az-page .landing-nav-menu .nav-link::after { display: none; } .az-page .landing-nav-menu .nav-link:hover { background: rgba(74, 108, 247, 0.12); } /* O botao de fechar do menu vive dentro do painel. */ .az-page .landing-nav-menu > .navbar-toggler { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; color: var(--az-text-muted); } } /*============================================================================== 7. HERO ==============================================================================*/ .az-hero { position: relative; padding-top: calc(var(--az-header-h) + 72px); padding-bottom: 96px; overflow: hidden; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74, 108, 247, 0.22), transparent 60%), var(--az-bg); } .az-hero__glow-a { top: -160px; left: 50%; width: 720px; height: 520px; transform: translateX(-50%); } .az-hero__glow-b { top: 220px; right: -180px; width: 460px; height: 460px; } .az-hero__glow-c { top: 340px; left: -200px; width: 420px; height: 420px; } .az-hero__copy { max-width: 880px; margin-inline: auto; text-align: center; } .az-hero__title { font-size: clamp(1.75rem, 1rem + 3.6vw, 3.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; margin-bottom: 24px; } .az-hero__title .text-white { color: var(--az-text) !important; } .az-hero__subtitle { max-width: 720px; margin: 0 auto 36px; color: var(--az-text-muted) !important; font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); font-weight: 400; line-height: 1.7; } .az-hero__note { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--az-text-muted); font-size: 0.875rem; } /* --- Palco do painel de demonstracao ------------------------------------- */ .az-hero__stage { position: relative; margin-top: 72px; } .az-hero__stage::before { content: ""; position: absolute; left: 50%; top: 12%; width: min(760px, 90%); height: 70%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(74, 108, 247, 0.45), transparent 70%); filter: blur(70px); pointer-events: none; } /* `#heroWrapper` mantem o id e o clique que abrem o video. */ .az-page #heroWrapper { position: relative; display: block; width: 100%; max-width: 940px; margin-inline: auto; } .az-page #youtubeWrapper { border-radius: var(--az-radius-lg); overflow: hidden; box-shadow: var(--az-shadow-lg); } /* Botao de play: continua sendo o mesmo elemento, com aparencia nova. Os estilos inline do HTML foram trocados por estas regras. */ .az-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(74, 108, 247, 0.92); box-shadow: 0 0 0 10px rgba(74, 108, 247, 0.18), var(--az-glow); pointer-events: none; transition: transform var(--az-base) var(--az-ease), box-shadow var(--az-base) var(--az-ease); } .az-page #heroWrapper:hover .az-play { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 16px rgba(74, 108, 247, 0.16), var(--az-glow); } .az-play__triangle { width: 0; height: 0; margin-left: 6px; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; } /*============================================================================== 8. PAINEL DE DEMONSTRACAO (.az-mock) Portado do arquivo anterior. Continua sendo um app claro dentro de uma moldura escura: e assim que ele le como "print do produto" e nao como decoracao. ==============================================================================*/ .az-mock { position: relative; display: grid; grid-template-columns: 148px 1fr; width: 100%; aspect-ratio: 16 / 9.6; overflow: hidden; border: 1px solid var(--az-border); border-radius: var(--az-radius-lg); background: #f7f8fc; font-family: var(--az-font); text-align: left; box-shadow: var(--az-shadow-lg), 0 0 0 1px rgba(74, 108, 247, 0.16); user-select: none; } .az-mock__side { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; background: #0f1830; } .az-mock__brand { margin-bottom: 10px; padding: 0 6px; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; } .az-mock__brand span { color: var(--az-primary-light); } .az-mock__nav { padding: 6px 9px; border-radius: 6px; color: rgba(255, 255, 255, 0.6); font-size: 10px; font-weight: 500; } .az-mock__nav.is-active { background: var(--az-primary); color: #fff; font-weight: 600; } .az-mock__main { display: flex; flex-direction: column; gap: 8px; padding: 11px 13px; background: #f7f8fc; min-width: 0; } .az-mock__top { display: flex; align-items: center; justify-content: space-between; } .az-mock__hello { color: #4d5566; font-size: 10px; } .az-mock__hello b { color: #101828; } .az-mock__chip { padding: 3px 8px; border-radius: var(--az-radius-pill); background: rgba(74, 108, 247, 0.12); color: #2f49b8; font-size: 8.5px; font-weight: 600; } .az-mock__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .az-mock__kpi { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; border: 1px solid #e6e9f2; border-radius: 8px; background: #fff; } .az-mock__kpi span { color: #6b7488; font-size: 8px; } .az-mock__kpi b { color: #101828; font-size: 14px; letter-spacing: -0.02em; } .az-mock__kpi i { font-size: 8px; font-style: normal; font-weight: 600; } .az-mock__kpi i.up { color: #059669; } .az-mock__kpi i.down { color: #e11d48; } .az-mock__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; /* A linha de graficos pede mais altura que a lista; sem proporcao explicita as duas ficam iguais e sobra vazio embaixo. */ grid-template-rows: 1.45fr 1fr; gap: 7px; flex: 1; min-height: 0; } .az-mock__card { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px; border: 1px solid #e6e9f2; border-radius: 8px; background: #fff; min-width: 0; } .az-mock__grid > .az-mock__card:first-child { grid-column: 1 / 2; grid-row: 1 / 2; } .az-mock__grid > .az-mock__card:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; } .az-mock__grid > .az-mock__card:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; } .az-mock__grid > .az-mock__card:nth-child(4) { grid-column: 1 / 4; grid-row: 2 / 3; } .az-mock__card-head { color: #3a4152; font-size: 9px; font-weight: 600; } .az-mock__chart { width: 100%; flex: 1; min-height: 0; } .az-mock__grid-line { stroke: #eef0f6; stroke-width: 1; } .az-mock__line { fill: none; stroke: var(--az-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .az-mock__dot { fill: #fff; stroke: var(--az-primary); stroke-width: 2.4; } .az-mock__axis { display: flex; justify-content: space-between; color: #9aa3b8; font-size: 7px; } .az-mock__donut { width: 100%; max-height: 54px; transform: rotate(-90deg); } .az-mock__donut-bg { fill: none; stroke: #f1f3f9; stroke-width: 5; } .az-mock__seg { fill: none; stroke-width: 5; } .az-mock__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .az-mock__legend li { display: flex; align-items: center; gap: 5px; color: #4d5566; font-size: 7.5px; } .az-mock__legend i { width: 5px; height: 5px; border-radius: 50%; flex: none; } .az-mock__legend b { margin-left: auto; color: #101828; } .az-mock__bars { display: flex; align-items: flex-end; gap: 5px; flex: 1; min-height: 0; } .az-mock__bars span { flex: 1; border-radius: 3px 3px 0 0; background: rgba(74, 108, 247, 0.28); } .az-mock__bars span.is-top { background: var(--az-primary); } .az-mock__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .az-mock__list li { display: grid; grid-template-columns: 1.1fr 1.4fr auto auto; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; background: #f6f8fd; font-size: 8px; } .az-mock__list b { color: #101828; } .az-mock__list span { color: #6b7488; } .az-mock__list i { color: #3a4152; font-style: normal; font-weight: 600; } .az-mock__list em { padding: 2px 6px; border-radius: var(--az-radius-pill); font-style: normal; font-weight: 600; font-size: 7px; } .az-mock__list em.ok { background: #ecfdf5; color: #065f46; } .az-mock__list em.warn { background: #fffbeb; color: #92400e; } /* No celular o painel simplifica: barra lateral e a terceira coluna sairiam ilegiveis em 4px de fonte. */ @media (max-width: 767.98px) { /* Altura livre: com proporcao fixa o conteudo, que tem tamanhos em px, era recortado embaixo. */ .az-mock { grid-template-columns: 1fr; aspect-ratio: auto; } .az-mock__grid { grid-template-rows: auto auto; } .az-mock__chart { min-height: 74px; } .az-mock__bars { min-height: 58px; } .az-mock__donut { max-height: 62px; } .az-mock__side { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; overflow: hidden; } .az-mock__brand { margin: 0; } .az-mock__nav { display: none; } .az-mock__nav.is-active { display: block; } .az-mock__kpis { grid-template-columns: repeat(2, 1fr); } .az-mock__grid { grid-template-columns: 1fr 1fr; } .az-mock__grid > .az-mock__card:nth-child(3) { display: none; } .az-mock__grid > .az-mock__card:nth-child(4) { grid-column: 1 / 3; grid-row: 2 / 3; } .az-play { width: 64px; height: 64px; } .az-play__triangle { border-left-width: 17px; border-top-width: 10px; border-bottom-width: 10px; } } /*============================================================================== 9. CARDS — a linguagem unica de superficie da pagina ==============================================================================*/ .az-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--az-border); border-radius: var(--az-radius); background: var(--az-card); box-shadow: var(--az-shadow-sm); transition: transform var(--az-base) var(--az-ease), border-color var(--az-base) var(--az-ease), background-color var(--az-base) var(--az-ease), box-shadow var(--az-base) var(--az-ease); } .az-card--hover:hover { transform: translateY(-6px); border-color: var(--az-border-hover); background: var(--az-card-hover); box-shadow: var(--az-shadow); } /*============================================================================== 10. RECURSOS (grid de features) ==============================================================================*/ .az-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .az-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 22px; border: 1px solid rgba(74, 108, 247, 0.22); border-radius: var(--az-radius); background: linear-gradient(145deg, rgba(74, 108, 247, 0.2), rgba(74, 108, 247, 0.06)); transition: transform var(--az-base) var(--az-ease); } .az-feature__icon img { width: 34px; height: 34px; object-fit: contain; } .az-card--hover:hover .az-feature__icon { transform: translateY(-2px) scale(1.04); } .az-feature__title { font-size: 1.1875rem; margin-bottom: 12px; } .az-feature__text { font-size: 0.9375rem; line-height: 1.7; } /*============================================================================== 11. BLOCOS DE PRODUTO (texto + print, alternados) ==============================================================================*/ /* A coluna do print quase empata com a do texto: sao capturas de tela reais e, mais estreitas que isto, a interface dentro delas deixa de ser legivel. */ .az-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 56px; } /* Variante espelhada: no desktop o print vai para a direita. */ .az-split--reverse { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .az-split--reverse .az-split__media { order: 2; } .az-split--reverse .az-split__body { order: 1; } /* Moldura de navegador em volta dos prints do sistema. */ .az-frame { position: relative; border: 1px solid var(--az-border); border-radius: var(--az-radius); background: var(--az-surface); box-shadow: var(--az-shadow); overflow: hidden; transition: transform var(--az-base) var(--az-ease), box-shadow var(--az-base) var(--az-ease), border-color var(--az-base) var(--az-ease); } .az-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .az-frame:hover { transform: translateY(-4px); border-color: var(--az-border-hover); box-shadow: var(--az-shadow-lg); } .az-frame__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--az-border); background: rgba(255, 255, 255, 0.03); } .az-frame__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); flex: none; } .az-page.light .az-frame__dot { background: rgba(11, 17, 32, 0.14); } .az-frame__omni { flex: 1; height: 20px; margin-left: 10px; border-radius: var(--az-radius-pill); background: rgba(255, 255, 255, 0.05); } .az-page.light .az-frame__omni { background: rgba(11, 17, 32, 0.05); } .az-frame__shot { display: block; width: 100%; height: auto; cursor: pointer; } /* Brilho atras do print, para ele descolar do fundo. */ .az-split__media { position: relative; } .az-split__media::before { content: ""; position: absolute; inset: 12% -8% -12% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(74, 108, 247, 0.3), transparent 70%); filter: blur(60px); pointer-events: none; } /*============================================================================== 12. ACORDEOES (marcacao Bootstrap preservada) ==============================================================================*/ .az-page .accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--az-text); --bs-accordion-border-color: transparent; --bs-accordion-border-width: 0; --bs-accordion-border-radius: var(--az-radius); --bs-accordion-inner-border-radius: var(--az-radius); --bs-accordion-btn-color: var(--az-text); --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--az-text); --bs-accordion-btn-padding-y: 1.125rem; --bs-accordion-btn-padding-x: 1.375rem; --bs-accordion-body-padding-y: 0; --bs-accordion-body-padding-x: 1.375rem; --bs-accordion-btn-focus-box-shadow: none; display: grid; gap: 14px; } .az-page .accordion .accordion-item { border: 1px solid var(--az-border) !important; border-radius: var(--az-radius) !important; background: var(--az-card); box-shadow: none; overflow: hidden; transition: border-color var(--az-base) var(--az-ease), background-color var(--az-base) var(--az-ease); } .az-page .accordion .accordion-item:hover { border-color: var(--az-border-hover) !important; } /* `.active` e posta pelo front-main.js quando o item abre. */ .az-page .accordion .accordion-item.active { border-color: var(--az-border-hover) !important; background: var(--az-card-hover); box-shadow: var(--az-shadow-sm); } .az-page .accordion .accordion-header { margin: 0; } .az-page .accordion .accordion-button { gap: 14px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--az-text); box-shadow: none !important; } .az-page .accordion .accordion-button:not(.collapsed) { color: var(--az-primary-light); } /* Seta desenhada com borda: acompanha a cor do texto sem sprite nem SVG. */ .az-page .accordion .accordion-button::after { flex: none; width: 9px; height: 9px; margin-left: auto; margin-right: 4px; background-image: none !important; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--az-base) var(--az-ease); opacity: 0.75; } .az-page .accordion .accordion-button:not(.collapsed)::after { transform: rotate(-135deg) translate(-2px, -2px); opacity: 1; } .az-page .accordion .accordion-body { padding-bottom: 1.25rem; color: var(--az-text-muted); font-size: 0.9375rem; line-height: 1.75; } /*============================================================================== 13. FAIXA DE DESTAQUE (suporte) e CTA FINAL ==============================================================================*/ .az-band { position: relative; overflow: hidden; background: linear-gradient(135deg, #1a2a70 0%, #2f49b8 50%, var(--az-primary) 100%); color: #fff; } .az-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18), transparent 45%), radial-gradient(circle at 85% 80%, rgba(34, 211, 238, 0.22), transparent 45%); pointer-events: none; } .az-band .az-shell { position: relative; z-index: 1; } .az-band .az-title, .az-band h1, .az-band h2, .az-band h3, .az-band h4 { color: #fff; } .az-band .az-lead, .az-band p { color: rgba(255, 255, 255, 0.86); } .az-band .az-eyebrow { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.16); color: #fff; } .az-band .az-eyebrow::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } /* CTA final: caixa de vidro sobre o fundo navy, com brilho proprio. */ .az-cta { position: relative; overflow: hidden; } .az-cta__box { position: relative; padding: 64px 56px; border: 1px solid rgba(74, 108, 247, 0.35); border-radius: var(--az-radius-lg); background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(74, 108, 247, 0.24), transparent 65%), var(--az-surface); box-shadow: var(--az-shadow-lg); text-align: center; overflow: hidden; } .az-cta__box::before { content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--az-primary-light), transparent); } .az-cta__title { font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.375rem); margin-bottom: 16px; } .az-cta__subtitle { max-width: 620px; margin: 0 auto 40px; color: var(--az-text-muted); font-size: 1.0625rem; font-weight: 400; line-height: 1.7; } /* Lista de beneficios do CTA — duas colunas no desktop, alinhada a esquerda. */ .az-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; max-width: 900px; margin: 0 auto 44px; padding: 0; list-style: none; text-align: left; } .az-checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--az-text-muted); font-size: 0.9375rem; line-height: 1.6; } .az-checklist li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: linear-gradient(rgba(74, 108, 247, 0.18), rgba(74, 108, 247, 0.18)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6cf7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } /*============================================================================== 14. PLANOS ==============================================================================*/ .az-billing { display: flex; justify-content: center; margin-bottom: 56px; } .az-billing__inner { position: relative; display: inline-flex; align-items: center; padding: 10px 22px; border: 1px solid var(--az-border); border-radius: var(--az-radius-pill); background: var(--az-card); } /* O `.switch-toggle-slider` do template e absoluto sem `left`: ele cai na posicao estatica, logo apos o rotulo "Mensal". Transformar o `.switch` em flex quebraria isso — num container flex a posicao estatica de um filho absoluto passa a ser o inicio do content box, e o botao subiria por cima do primeiro rotulo. Por isso aqui so o espacamento e tocado. */ .az-page .az-billing .switch { margin: 0; } .az-page .az-billing .switch-label { color: var(--az-text); font-size: 0.9375rem; font-weight: 600; } .az-page .switch .switch-toggle-slider { background: rgba(255, 255, 255, 0.16) !important; box-shadow: none !important; color: transparent !important; } .az-page.light .switch .switch-toggle-slider { background: rgba(11, 17, 32, 0.12) !important; } .az-page .switch .switch-input:checked ~ .switch-toggle-slider { background: var(--az-primary) !important; box-shadow: var(--az-glow) !important; } /* Selo de desconto ao lado de "Anual". */ .az-page .discount-badge { position: static; display: inline-flex; align-items: center; margin-left: 10px; padding: 4px 12px; border: 1px solid rgba(52, 211, 153, 0.3); border-radius: var(--az-radius-pill); background: rgba(52, 211, 153, 0.14); white-space: nowrap; font-size: 0.8125rem; } .az-page .discount-badge .text-primary { color: var(--az-success) !important; } .az-page .discount-icon { width: 18px; height: 18px; opacity: 0.9; } /* Grade dos planos */ .az-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 26px; } .az-plan { position: relative; display: flex; flex-direction: column; height: 100%; padding: 36px 30px; border: 1px solid var(--az-border); border-radius: var(--az-radius-lg); background: var(--az-card); box-shadow: var(--az-shadow-sm); transition: transform var(--az-base) var(--az-ease), border-color var(--az-base) var(--az-ease), box-shadow var(--az-base) var(--az-ease); } .az-plan:hover { transform: translateY(-6px); border-color: var(--az-border-hover); box-shadow: var(--az-shadow); } /* Plano em destaque: borda viva, brilho e um degrade de topo. */ .az-plan--popular { border-color: rgba(74, 108, 247, 0.55); background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(74, 108, 247, 0.2), transparent 70%), var(--az-card); box-shadow: var(--az-shadow), 0 0 0 1px rgba(74, 108, 247, 0.2); } .az-plan--popular::before { content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--az-primary), transparent); } .az-plan__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 22px; border: 1px solid rgba(74, 108, 247, 0.2); border-radius: var(--az-radius); background: linear-gradient(145deg, rgba(74, 108, 247, 0.18), rgba(74, 108, 247, 0.05)); } .az-plan__icon img { width: 36px; height: 36px; object-fit: contain; } .az-plan__name { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; color: var(--az-text-muted); margin-bottom: 10px; } .az-plan__price { display: flex; align-items: baseline; gap: 6px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--az-border); } .az-plan__amount { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--az-text); } .az-plan__period { color: var(--az-text-muted); font-size: 0.9375rem; font-weight: 500; /* _{desceria a linha de base e desalinharia com o valor. */
vertical-align: baseline;
bottom: 0;
}

.az-plan__features {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: grid;
gap: 14px;
flex: 1;
}

.az-plan__features li {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--az-text-muted);
font-size: 0.9375rem;
line-height: 1.55;
}

.az-plan__check {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 50%;
background: rgba(74, 108, 247, 0.16);
color: var(--az-primary-light);
font-size: 12px;
}

.az-plan--popular .az-plan__check {
background: var(--az-primary);
color: #fff;
}

.az-plans__empty {
grid-column: 1 / -1;
padding: 26px;
border: 1px dashed var(--az-border);
border-radius: var(--az-radius);
background: var(--az-card);
color: var(--az-text-muted);
text-align: center;
}

/*==============================================================================
15. COMPATIBILIDADE — classes de botao vindas do PHP dos planos
==============================================================================*/

.az-page .az-plan .btn,
.az-page .az-plan-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 24px;
border: 1px solid transparent;
border-radius: var(--az-radius-pill);
font-family: var(--az-font);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
text-align: center;
transition: background-color var(--az-fast) var(--az-ease),
border-color var(--az-fast) var(--az-ease),
color var(--az-fast) var(--az-ease),
box-shadow var(--az-base) var(--az-ease),
transform var(--az-fast) var(--az-ease);
}

.az-page .az-plan .btn-primary {
background-color: var(--az-primary) !important;
border-color: var(--az-primary);
color: #fff !important;
box-shadow: var(--az-glow);
}

.az-page .az-plan .btn-primary:hover {
background-color: var(--az-primary-hover) !important;
transform: translateY(-2px);
}

.az-page .az-plan .btn-label-primary {
background-color: rgba(74, 108, 247, 0.14) !important;
border-color: rgba(74, 108, 247, 0.32);
color: var(--az-primary-light) !important;
}

.az-page .az-plan .btn-label-primary:hover {
background-color: rgba(74, 108, 247, 0.24) !important;
color: #fff !important;
transform: translateY(-2px);
}

/* Plano ja assinado: o `disabled` que vem do PHP continua bloqueando o clique. */
.az-page .az-plan .btn-label-secondary {
background-color: rgba(255, 255, 255, 0.06) !important;
border-color: var(--az-border);
color: var(--az-text-muted) !important;
}

.az-page .az-plan .btn.disabled {
pointer-events: none;
opacity: 0.6;
box-shadow: none;
}

/*==============================================================================
16. FAQ
==============================================================================*/

.az-faq {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: 56px;
}

.az-faq__art {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-lg);
background:
radial-gradient(ellipse 70% 70% at 50% 25%, rgba(74, 108, 247, 0.22), transparent 70%),
var(--az-card);
}

.az-faq__art img {
max-width: 340px;
width: 100%;
height: auto;
}

/*==============================================================================
17. CONTATO
==============================================================================*/

.az-contact {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: stretch;
gap: 26px;
}

.az-contact__aside {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}

.az-contact__art {
position: relative;
padding: 20px 20px 0;
background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(74, 108, 247, 0.2), transparent 70%);
}

.az-contact__art img {
display: block;
width: 100%;
height: auto;
border-radius: var(--az-radius);
}

.az-contact__ways {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding: 24px;
}

.az-way {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 20px 14px;
border: 1px solid var(--az-border);
border-radius: var(--az-radius);
background: rgba(255, 255, 255, 0.02);
text-align: center;
transition: border-color var(--az-base) var(--az-ease), background-color var(--az-base) var(--az-ease);
}

.az-way:hover {
border-color: var(--az-border-hover);
background: var(--az-card-hover);
}

.az-way__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 6px;
border-radius: var(--az-radius-sm);
font-size: 1.5rem;
}

.az-way__icon--mail {
background: rgba(74, 108, 247, 0.16);
color: var(--az-primary-light);
}

.az-way__icon--phone {
background: rgba(52, 211, 153, 0.16);
color: var(--az-success);
}

.az-way__label {
color: var(--az-text-muted);
font-size: 0.8125rem;
}

.az-way__value {
font-size: 0.9375rem;
font-weight: 600;
word-break: break-word;
}

.az-way__value a {
color: var(--az-text);
}

.az-way__value a:hover {
color: var(--az-primary-light);
}

/* Formulario */
.az-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

.az-form__row--full {
grid-column: 1 / -1;
}

.az-page .az-form .form-label {
display: block;
margin-bottom: 8px;
color: var(--az-text);
font-size: 0.875rem;
font-weight: 600;
}

.az-page .az-form .form-control {
width: 100%;
padding: 13px 16px;
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
background: rgba(255, 255, 255, 0.03);
color: var(--az-text);
font-family: var(--az-font);
font-size: 0.9375rem;
transition: border-color var(--az-fast) var(--az-ease), box-shadow var(--az-fast) var(--az-ease);
}

.az-page.light .az-form .form-control {
background: #fff;
}

.az-page .az-form .form-control::placeholder {
color: var(--az-text-muted);
opacity: 0.7;
}

.az-page .az-form .form-control:focus {
border-color: var(--az-primary);
background: rgba(74, 108, 247, 0.06);
box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.18);
color: var(--az-text);
outline: none;
}

.az-page .alert {
border: 1px solid var(--az-border);
border-radius: var(--az-radius-sm);
background: var(--az-card);
color: var(--az-text);
padding: 14px 16px;
font-size: 0.9375rem;
}

.az-page .alert-success {
border-color: rgba(52, 211, 153, 0.4);
background: rgba(52, 211, 153, 0.12);
}

.az-page .alert-danger {
border-color: rgba(251, 113, 133, 0.4);
background: rgba(251, 113, 133, 0.12);
}

.az-page .alert-info {
border-color: rgba(74, 108, 247, 0.4);
background: rgba(74, 108, 247, 0.12);
}

/*==============================================================================
18. RODAPE
==============================================================================*/

.az-page .landing-footer {
position: relative;
background: var(--az-bg-secondary);
border-top: 1px solid var(--az-border);
overflow: hidden;
}

.az-page .landing-footer::before {
content: "";
position: absolute;
top: -220px;
left: 50%;
width: 780px;
height: 420px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(ellipse, rgba(74, 108, 247, 0.22), transparent 70%);
filter: blur(80px);
pointer-events: none;
}

.az-footer-top {
position: relative;
z-index: 1;
padding-block: 72px 56px;
}

.az-footer-grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
gap: 48px;
}

.az-footer__about {
margin-top: 20px;
max-width: 400px;
font-size: 0.9375rem;
line-height: 1.75;
}

.az-footer__title {
margin-bottom: 22px;
font-size: 1rem;
font-weight: 700;
}

.az-footer__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
}

.az-page .footer-link {
color: var(--az-text-muted);
font-size: 0.9375rem;
transition: color var(--az-fast) var(--az-ease), padding-left var(--az-fast) var(--az-ease);
}

.az-page .footer-link:hover {
color: var(--az-primary-light);
padding-left: 4px;
}

.az-footer__apps {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}

.az-footer__apps a {
display: inline-flex;
border-radius: var(--az-radius-sm);
transition: transform var(--az-fast) var(--az-ease), opacity var(--az-fast) var(--az-ease);
opacity: 0.9;
}

.az-footer__apps a:hover {
transform: translateY(-2px);
opacity: 1;
}

.az-footer-bottom {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 24px;
border-top: 1px solid var(--az-border);
color: var(--az-text-muted);
font-size: 0.875rem;
}

.az-footer-bottom a {
color: var(--az-text);
}

.az-footer-bottom a:hover {
color: var(--az-primary-light);
}

.az-footer-bottom .az-sep {
margin-inline: 8px;
color: var(--az-border);
}

.az-social {
display: flex;
align-items: center;
gap: 10px;
}

.az-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--az-border);
border-radius: 50%;
background: var(--az-card);
transition: border-color var(--az-fast) var(--az-ease), background-color var(--az-fast) var(--az-ease),
transform var(--az-fast) var(--az-ease);
}

.az-social a:hover {
border-color: var(--az-border-hover);
background: rgba(74, 108, 247, 0.16);
transform: translateY(-2px);
}

.az-social img {
width: 18px;
height: 18px;
}

/* Os SVG sociais tem cor propria fixa. Em vez de depender dela, o icone e
achatado para preto e depois clareado conforme o tema — assim ele aparece
nos dois, sem precisar de dois arquivos. */
.az-page .az-social img {
filter: brightness(0);
opacity: 0.6;
transition: opacity var(--az-fast) var(--az-ease);
}

.az-page:not(.light) .az-social img {
filter: brightness(0) invert(1);
opacity: 0.75;
}

.az-page .az-social a:hover img {
opacity: 1;
}

/*==============================================================================
19. VOLTAR AO TOPO
==============================================================================*/

.az-page #scrollTopBtn {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 1040;
display: none;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 0;
border: 1px solid rgba(74, 108, 247, 0.5);
border-radius: 50%;
background: var(--az-primary) !important;
color: #fff;
box-shadow: var(--az-glow);
transition: transform var(--az-fast) var(--az-ease), background-color var(--az-fast) var(--az-ease);
}

.az-page #scrollTopBtn:hover {
background: var(--az-primary-hover) !important;
transform: translateY(-4px);
}

.az-page #scrollTopBtn svg {
width: 22px;
height: 22px;
}

/*==============================================================================
20. MODAIS (marcacao Bootstrap preservada)
==============================================================================*/

.az-page .modal-backdrop.show {
background: #04070f;
opacity: 0.86;
}

.az-page .modal-body img {
border-radius: var(--az-radius);
box-shadow: var(--az-shadow-lg);
}

.az-page .az-modal .modal-content {
position: relative;
}

.az-page .az-modal__close {
position: absolute;
top: -14px;
right: -14px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--az-border);
border-radius: 50%;
background: var(--az-surface);
color: var(--az-text);
font-size: 1.125rem;
cursor: pointer;
box-shadow: var(--az-shadow);
transition: background-color var(--az-fast) var(--az-ease), transform var(--az-fast) var(--az-ease);
}

.az-page .az-modal__close:hover {
background: var(--az-primary);
color: #fff;
transform: scale(1.05);
}

@media (max-width: 767.98px) {
.az-page .az-modal__close {
top: -12px;
right: 0;
width: 36px;
height: 36px;
}
}

/*==============================================================================
21. ANIMACOES

O estado inicial so existe quando o JS assume a pagina (`.az-anim` no body):
sem script, nada fica invisivel.
==============================================================================*/

.az-anim .az-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 620ms var(--az-ease), transform 620ms var(--az-ease);
will-change: opacity, transform;
}

.az-anim .az-reveal.is-in {
opacity: 1;
transform: none;
}

.az-anim .az-reveal[data-delay="1"] { transition-delay: 80ms; }
.az-anim .az-reveal[data-delay="2"] { transition-delay: 160ms; }
.az-anim .az-reveal[data-delay="3"] { transition-delay: 240ms; }
.az-anim .az-reveal[data-delay="4"] { transition-delay: 320ms; }
.az-anim .az-reveal[data-delay="5"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

.az-anim .az-reveal,
.az-anim .az-reveal.is-in {
opacity: 1;
transform: none;
transition: none;
}

.az-page *,
.az-page *::before,
.az-page *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}

/*==============================================================================
22. RESPONSIVO

O celular nao e a versao encolhida do desktop: as grades caem para uma coluna,
os blocos alternados perdem o espelhamento (imagem sempre antes do texto) e o
ritmo vertical diminui.
==============================================================================*/

@media (max-width: 1199.98px) {
.az-split,
.az-faq {
gap: 40px;
}
}

@media (max-width: 991.98px) {
:root {
--az-header-h: 68px;
}

.az-section {
padding-block: 72px;
}

.az-section--tight {
padding-block: 56px;
}

.az-head {
margin-bottom: 44px;
}

.az-hero {
padding-top: calc(var(--az-header-h) + 52px);
padding-bottom: 72px;
}

.az-hero__stage {
margin-top: 52px;
}

.az-features {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.az-plans {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.az-split,
.az-split--reverse,
.az-faq,
.az-contact {
grid-template-columns: minmax(0, 1fr);
gap: 36px;
}

/* No empilhado a midia vem sempre primeiro, nas duas variantes. */
.az-split--reverse .az-split__media { order: 1; }
.az-split--reverse .az-split__body { order: 2; }

.az-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}

.az-cta__box {
padding: 48px 32px;
}
}

@media (max-width: 767.98px) {
.az-section {
padding-block: 56px;
}

.az-shell {
padding-inline: 18px;
}

.az-features,
.az-plans,
.az-checklist,
.az-contact__ways,
.az-form,
.az-footer-grid {
grid-template-columns: minmax(0, 1fr);
}

.az-card,
.az-plan {
padding: 26px 22px;
}

.az-btn-row {
flex-direction: column;
align-items: stretch;
}

.az-btn-row .az-btn {
width: 100%;
}

.az-cta__box {
padding: 40px 22px;
}

.az-faq__art {
padding: 28px;
}

.az-footer-bottom {
justify-content: center;
text-align: center;
}

.az-page #scrollTopBtn {
right: 16px;
bottom: 16px;
width: 46px;
height: 46px;
}
}

@media (max-width: 400px) {
.az-shell {
padding-inline: 14px;
}

.az-page .az-billing__inner {
flex-direction: column;
gap: 10px;
border-radius: var(--az-radius);
}

.az-page .discount-badge {
margin-left: 0;
}
}}