/* ============================================================================ ARANUZ — Home.css — VERSÃO ATUAL: V636 (27/07/2026) V636 — 27/07/2026 (BUGFIX CRÍTICO, pedido do cliente, "seção Sobre não respeita a margem da página"): a regra ".about-grid { display:grid; ...; max-width:1180px; margin:0 auto; }" tinha sumido do arquivo — foi apagada sem querer durante a correção do bug do comentário de HTML na V631 (o comentário quebrado ficava bem em cima dela, e a linha da regra foi removida junto por engano). Sem essa regra, o texto e os cards de estatística da seção "Sobre" caíam no comportamento padrão de bloco (100% da largura da seção, empilhados), em vez de 2 colunas lado a lado, centralizadas e limitadas a 1180px como o resto da página. Restaurada — ver comentário mais detalhado bem em cima da regra, mais abaixo neste arquivo. V631 — 27/07/2026 (pedido do cliente): cards de plano +15% de altura (520px→598px); about-stats com só 2 cards (removido o "30d"), esticados (align-items:stretch + flex:1) pra bater com a altura do texto ao lado. BUGFIX: comentário com sintaxe de HTML () corrigido pra /* */ — estava corrompendo o parser na frente da regra .about-grid (mesmo tipo de erro das V617/V618). Changelog completo desta rodada (textos/visibilidade de cards) no topo do index.html. V610 — 26/07/2026 (Rodada 4, pedido do cliente): (1) .hero-grid align-items:center → start, corrigindo vão vazio esquisito abaixo do link "Ou pule direto pro teste grátis". (2) .hm-plano-card-full com min-height:440px e padding maior — cards estavam baixos demais. ============================================================================ */ /* ============================================================================ ARANUZ — Home.css — VERSÃO ANTERIOR: V604 (26/07/2026) V604 — 26/07/2026 (Rodada 1, pedido do cliente): .hm-planos-grid trocado de grid fixo de 4 colunas pra flex centralizado — com 2 ou 3 planos ativos, o grid antigo ficava alinhado à esquerda com espaço vazio sobrando à direita; agora a linha sempre centraliza sozinha. ============================================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-main: #f6f7fb; --bg-card: #ffffff; --bg-dark: #14181f; --border-color: #e4e6ee; --text-primary: #10131a; --text-secondary: #666d80; --text-muted: #9aa1b2; --accent-blue: #2f5eea; --accent-blue-dark: #2249c2; --accent-blue-glow: rgba(47,94,234,.08); --accent-teal: #22c1b3; --accent-violet: #7c3aed; --accent-green: #059669; --accent-red: #dc2626; --brand-gradient: linear-gradient(135deg, var(--accent-teal), var(--accent-violet)); --radius-lg: 16px; --radius-md: 10px; --radius-sm: 8px; --mono: 'JetBrains Mono', ui-monospace, monospace; } html { scroll-behavior: smooth; } /* V619 — 26/07/2026 (BUGFIX, pedido do cliente, "me leva pro topo da página"): "height: 100%" aqui limitava a altura rolável do exatamente à altura da tela — se a pessoa estivesse rolada lá embaixo (ex: na seção de Planos) no exato momento em que o modal abria, o navegador não tinha mais "espaço" pra manter aquela posição de rolagem (o document ficou "mais curto" que a rolagem atual) e forçava a volta pro topo. "overflow: hidden" sozinho já impede rolagem nova enquanto o modal está aberto, sem precisar mexer na altura — removido. */ html.hm-scroll-lock, html.hm-scroll-lock body { overflow: hidden; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-main); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, .brand { font-family: 'Poppins', sans-serif; } a { color: inherit; } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* V595 — 25/07/2026 (pedido do cliente, redesign completo da Home): container principal alargado de 1080px pra 1560px — em telas grandes a página parava de "esticar" bem antes da borda da janela, sobrando uma faixa enorme de fundo liso dos dois lados (era a origem do "não está na largura total"). --wide é usado nas seções novas/redesenhadas; .container (1080px) continua existindo pra não quebrar nada que ainda dependa dele. */ .wide { max-width: 1320px; margin: 0 auto; padding: 0 32px; } /* Etiqueta estilo claquete/timecode — usada nos "eyebrows" das seções no lugar do pill genérico. Referência direta ao universo de produção audiovisual (slate/claquete de cena), não decoração. */ .slate-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-blue); background: var(--accent-blue-glow); border: 1px solid rgba(47,94,234,.18); padding: 6px 14px 6px 10px; border-radius: 20px; margin-bottom: 18px; } .slate-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gradient); flex-shrink: 0; } .slate-tag.on-dark { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); } /* ===== NAV ===== */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(246,247,251,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 40px; width: 100%; max-width: 1800px; margin: 0 auto; } .brand { font-weight: 900; font-size: 22px; letter-spacing: -0.5px; color: var(--text-primary); } .brand-wrap { display: flex; align-items: center; text-decoration: none; } .brand-logo-full { height: 34px; width: auto; max-width: 100%; max-height: 34px; object-fit: contain; display: block; flex-shrink: 0; } /* V603 — 25/07/2026 (pedido do cliente, bug no celular): max-width/max-height/flex-shrink:0 adicionados como reforço contra a imagem "vazar" do tamanho certo em qualquer cenário de cache/viewport. */ .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a.nav-link { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; } .nav-links a.nav-link:hover { color: var(--accent-blue); } .nav-ctas { display: flex; align-items: center; gap: 10px; } /* ===== BOTÕES ===== */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius-md); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; border: none; transition: transform .15s, opacity .15s, background .15s; } .btn-primary { background: var(--accent-blue); color: #fff; } .btn-primary:hover { background: var(--accent-blue-dark); transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .btn-sm { padding: 9px 18px; font-size: 13px; } /* ===== HERO ===== */ .hero { padding: 64px 32px 0; overflow: hidden; } /* V618 — 26/07/2026 (BUGFIX CRÍTICO — ironia: o comentário da V617 que EXPLICAVA o bug anterior cometia o MESMO tipo de erro): o texto da V617 citava a sintaxe de comentário de CSS por extenso dentro da prosa — e como comentário de CSS termina no primeiro "fecha-comentário" que aparecer, aquela citação early fechava ESTE comentário no meio da frase, expondo o resto do texto como CSS de verdade de novo — o mesmo sintoma (.hero-grid virava display:block, sem grid nenhum) continuava do mesmo jeito. Reescrito sem citar a sintaxe literalmente, só descrevendo em palavras, pra nunca mais acontecer. Resumo do bug de verdade (histórico, V610/V617): um comentário antigo usava sintaxe de comentário de HTML (abre com menor-que-exclamação-traço-traço) em vez de comentário de CSS — isso não existe em CSS, e corrompia o parser bem na frente da regra .hero-grid seguinte, fazendo o navegador descartar essa regra inteira. Sem grid nenhum aplicado, .hero-copy e .hero-visual viravam blocos empilhados, cada um ocupando 100% da largura — o "esticado" relatado. Corrigido definitivamente aqui. V610 — 26/07/2026 (pedido do cliente, "espaçamento esquisito"): align-items:center centralizava .hero-copy (mais curto) verticalmente contra .hero-visual (460px de altura fixa) — como o texto/CTAs são mais baixos que a coluna da direita, isso sobrava um vão vazio embaixo do link "Ou pule direto pro teste grátis", bem antes da faixa de confiança começar. Trocado pra align-items:start — a coluna de texto agora fica alinhada no topo, sem vão esquisito embaixo. */ .hero-grid { max-width: 1320px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; } .hero-copy h1 { font-size: 3.15rem; font-weight: 900; letter-spacing: -1.6px; line-height: 1.08; margin-bottom: 20px; } .hero-copy h1 span { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-copy p.lead { font-size: 1.1rem; color: var(--text-secondary); max-width: 520px; margin-bottom: 32px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero-note { margin-top: 18px; font-size: 12.5px; color: var(--text-muted); } /* ----- visual do hero: "o caos virando sistema" (elemento de assinatura da página) ----- */ .hero-visual { position: relative; height: 460px; } .chaos-item { position: absolute; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 30px rgba(16,19,26,.08); padding: 12px 14px; font-size: 12px; color: var(--text-secondary); font-weight: 600; } .chaos-whats { top: 6%; left: 0%; transform: rotate(-9deg); color: #1a1d26; display: flex; align-items: center; gap: 8px; } .chaos-whats .ico { width: 20px; height: 20px; border-radius: 50%; background: #25D366; flex-shrink: 0; } .chaos-sheet { bottom: 10%; left: 2%; transform: rotate(7deg); font-family: var(--mono); font-size: 11px; line-height: 1.7; } .chaos-sticky { top: 34%; right: 2%; transform: rotate(6deg); background: #fff4c2; border-color: #f0e08a; color: #6b5b00; } .chaos-item, .app-window { animation: hm-float 6.5s ease-in-out infinite; } .chaos-sheet { animation-delay: .4s; } .chaos-sticky { animation-delay: .9s; } @keyframes hm-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } } .chaos-whats { --r: -9deg; } .chaos-sheet { --r: 7deg; } .chaos-sticky { --r: 6deg; } .app-window { position: absolute; inset: 12% 6%; background: var(--bg-dark); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px rgba(16,19,26,.28), 0 0 0 1px rgba(255,255,255,.04); display: flex; z-index: 2; } .app-window::before { content: ''; position: absolute; inset: -2px; border-radius: 18px; padding: 2px; z-index: -1; background: var(--brand-gradient); opacity: .55; filter: blur(2px); } .aw-side { width: 30%; background: #101319; padding: 18px 12px; display: flex; flex-direction: column; gap: 10px; } .aw-logo { width: 20px; height: 20px; border-radius: 6px; background: #fff; margin-bottom: 6px; } .aw-nav-item { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); } .aw-nav-item.on { background: rgba(255,255,255,.22); } .aw-main { flex: 1; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; } .aw-topline { height: 8px; width: 40%; border-radius: 4px; background: rgba(255,255,255,.12); } .aw-cards { display: flex; gap: 10px; } .aw-card { flex: 1; height: 54px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); } .aw-chart { flex: 1; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); display: flex; align-items: flex-end; gap: 6px; padding: 12px; } .aw-bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--brand-gradient); opacity: .8; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { height: 340px; margin-top: 24px; } } /* ===== FAIXA DE CONFIANÇA ===== */ .trust-strip { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--bg-card); padding: 20px 32px; } .trust-strip-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; font-size: 13.5px; color: var(--text-secondary); flex-wrap: wrap; } .trust-strip-inner strong { color: var(--text-primary); } .section { padding: 72px 32px; } .section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; } .section-head h2 { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.9px; margin-bottom: 14px; } .section-head p { color: var(--text-secondary); font-size: 1.05rem; } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 18px; max-width: 1320px; margin: 0 auto; } .feature-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px 26px; transition: box-shadow .2s, transform .2s, border-color .2s; } .feature-card:hover { box-shadow: 0 12px 28px rgba(16,19,26,.07); transform: translateY(-3px); border-color: #d7dcf0; } .feature-card.big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; background: var(--bg-dark); border-color: var(--bg-dark); position: relative; overflow: hidden; } .feature-card-chart { flex: 1; display: flex; align-items: flex-end; gap: 10px; padding: 28px 26px 0; min-height: 120px; } .fc-bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--brand-gradient); opacity: .75; } .feature-card.big h3, .feature-card.big p { color: #fff; } .feature-card.big p { color: #9aa1b2; } .feature-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-blue-glow); color: var(--accent-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; } .feature-card.big .feature-icon { background: rgba(255,255,255,.08); color: #fff; width: 48px; height: 48px; } .feature-icon svg { width: 21px; height: 21px; } .feature-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; } .feature-card.big h3 { font-size: 1.4rem; } .feature-card p { font-size: 13.5px; color: var(--text-secondary); } @media (max-width: 980px) { .features-grid { grid-template-columns: repeat(2, 1fr); } .feature-card.big { grid-column: span 2; grid-row: span 1; } } @media (max-width: 620px) { .features-grid { grid-template-columns: 1fr; } .feature-card.big { grid-column: span 1; } } /* ===== FERRAMENTAS (portais/gestão de projetos — diferenciais do plano Black) ===== */ .tools-strip { max-width: 1320px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .tool-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 26px; } .tool-card .tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-violet); margin-bottom: 10px; display: block; } .tool-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; } .tool-card p { font-size: 13px; color: var(--text-secondary); } @media (max-width: 860px) { .tools-strip { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .tools-strip { grid-template-columns: 1fr; } } /* ===== COMO FUNCIONA ===== */ .steps { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .step { text-align: left; padding: 28px 24px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); } .step-num { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; color: var(--accent-blue); margin-bottom: 14px; display: block; } .step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } .step p { font-size: 13.5px; color: var(--text-secondary); } /* ===== PLANOS (preview na landing page) ===== V4.16 — 18/07/2026 (pedido do cliente): mesma classe .hm-planos-grid/.hm-plano-card-full já usada na página cheia de planos (ver mais abaixo, .hm-planos-overlay) — só precisa de um contêiner com largura própria aqui dentro da landing page (as outras seções usam max-width: 1080px; os cards de plano ficam um pouco apertados nesse tamanho, por isso 1200px). */ .hm-planos-inline-wrap { max-width: 1320px; margin: 0 auto; } .hm-planos-inline-rodape { text-align: center; margin-top: 36px; font-size: 13.5px; } .hm-planos-inline-rodape a { color: var(--accent-blue); font-weight: 700; text-decoration: underline; cursor: pointer; } /* ===== SOBRE / DIFERENCIAL ===== */ .about-band { background: var(--bg-dark); color: #f1f5f9; } .about-band .section-head h2 { color: #fff; } .about-band .section-head p { color: #9aa1b2; } /* V631 — 27/07/2026 (pedido do cliente, "aumentar altura dos cards 100%/+ de 8 pra bater com o texto"): align-items voltou pro padrão (stretch, em vez de start) — as 2 colunas do grid (texto e stats) passam a ter sempre a MESMA altura (a do conteúdo mais alto, no caso o texto). Dentro de .about-stats, cada .about-stat virou flex:1 — os 2 cards se esticam pra preencher esse espaço por igual, com o conteúdo centralizado (justify-content:center). */ /* V636 — 27/07/2026 (BUGFIX, pedido do cliente, "seção Sobre não respeita a margem do resto da página"): esta regra tinha sumido por engano na V631 — ao corrigir o comentário com sintaxe de HTML que tinha entrado aqui por cima dela (ver changelog da V631), a linha de baixo foi apagada junto sem querer, deixando .about-grid sem "display:grid"/"max-width" nenhum — o texto e os cards de estatística caíam no comportamento padrão de bloco (100% da largura da seção, empilhados um embaixo do outro), em vez de 2 colunas lado a lado, centralizadas e limitadas a 1180px como o resto da página. Restaurada. */ .about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; max-width: 1180px; margin: 0 auto; align-items: stretch; } .about-grid p { color: #c3c8d6; font-size: 15px; margin-bottom: 14px; } .about-stats { display: flex; flex-direction: column; gap: 14px; } .about-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: 22px 24px; display: flex; align-items: center; gap: 18px; flex: 1; } .about-stat .num { font-size: 1.9rem; font-weight: 900; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; flex-shrink: 0; min-width: 76px; } .about-stat .lbl { font-size: 13px; color: #9aa1b2; line-height: 1.4; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } } /* ===== CTA FINAL ===== */ .cta-final { text-align: center; padding: 72px 32px; background: var(--bg-card); border-top: 1px solid var(--border-color); } .cta-final h2 { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.7px; margin-bottom: 14px; } .cta-final p { color: var(--text-secondary); margin-bottom: 32px; } /* ===== FOOTER ===== */ .footer { background: var(--bg-dark); color: #9aa1b2; padding: 56px 32px 28px; } .footer-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); } .footer-brand .brand { color: #fff; } .footer-brand p { font-size: 13px; color: #7c8296; margin-top: 12px; max-width: 260px; line-height: 1.6; } .footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-bottom: 14px; } .footer-col a { display: block; font-size: 13.5px; color: #9aa1b2; text-decoration: none; margin-bottom: 10px; cursor: pointer; } .footer-col a:hover { color: #fff; } .footer-bottom { max-width: 1320px; margin: 0 auto; padding-top: 24px; text-align: center; font-size: 12px; color: #6b7180; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ===== V2.79: MODAL DE CADASTRO (trazido do antigo MHub_Cadastro.html) ===== V4.02 — 18/07/2026 (Rodada 2): z-index subiu de 999 pra 1800 — este modal (e-mail/senha e sucesso) agora precisa aparecer POR CIMA da página cheia de planos (.hm-planos-overlay, z-index 1500). */ .hm-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1800; align-items: center; justify-content: center; padding: 20px; } .hm-modal-overlay.aberto { display: flex; } .hm-modal-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 36px 32px; width: 100%; max-width: 360px; text-align: center; position: relative; max-height: 90vh; overflow-y: auto; } /* V4.02 — 18/07/2026 (Rodada 2, pedido do cliente — planos viraram página cheia, não modal): a janela de dados (e-mail/senha) voltou a ser um modal simples e compacto, do tamanho do conteúdo — não precisa mais ter o mesmo tamanho de outra janela, porque a escolha de plano agora acontece na página cheia #planos (ver .hm-planos-overlay), não dentro do modal. */ .hm-modal-card.hm-dados { max-width: 420px; } /* V598 — 25/07/2026 (pedido do cliente): 2 botões lado a lado no lugar do resumo de texto — "Comece no plano Free" (selecionado por padrão) e "Escolha outro plano" (abre a página cheia de planos por cima deste modal). O botão ativo fica com fundo/borda do accent-blue; o outro fica neutro. A notinha do plano escolhido só aparece quando "Escolha outro plano" está ativo. */ .hm-plano-toggle { display: flex; gap: 8px; margin-bottom: 10px; } .hm-plano-toggle-btn { flex: 1; padding: 11px 6px; font-size: 12.5px; font-weight: 700; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color); background: var(--bg-main); color: var(--text-secondary); cursor: pointer; transition: var(--transition, all .15s ease); text-align: center; line-height: 1.3; white-space: nowrap; } .hm-plano-toggle-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .hm-plano-toggle-btn.ativo { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; } .hm-plano-outro-nota { font-size: 11.5px; color: var(--text-secondary); background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; text-align: left; } .hm-plano-outro-nota strong { color: var(--text-primary); } .hm-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px; width: auto; } .hm-modal-card label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: left; margin-bottom: 4px; } .hm-modal-card input { width: 100%; padding: 12px; font-size: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--bg-main); color: var(--text-primary); text-align: left; font-family: inherit; } .hm-modal-card input:focus { outline: 2px solid var(--accent-blue); outline-offset: -1px; } .hm-modal-card button.btn-primary { width: 100%; } /* V4.14 — 18/07/2026 (Cadastro com Google, pedido do cliente): botão branco no padrão visual do Google (mesmo estilo usado no login do App-Principal_V4.51) + divisor "ou" entre ele e o formulário de e-mail/senha de sempre. V4.16 — 18/07/2026 (pedido do cliente: "maior e mais bonito, bordas arredondadas"): mesmo padding/altura/arredondamento do .btn-primary (13px 26px, border-radius: --radius-md, antes esse botão usava o padding padrão bem mais apertado dos