:root { --fundo: #FFFFFF; --superficie: #F5F6FA; --texto-primario: #1C2B4A; --texto-secundario: #8292AA; --marca: #152251; --marca-claro: #E6E8F0; --acao: #FF6B00; --acao-hover: #E66000; --texto-sobre-acao: #1C2B4A; --radius-tecnico: 4px; --shadow-sutil: 0 2px 4px rgba(28, 43, 74, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--fundo); color: var(--texto-primario); line-height: 1.6; -webkit-font-smoothing: antialiased; background-image: radial-gradient(var(--marca-claro) 0.5px, transparent 0.5px); background-size: 32px 32px; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } a:focus-visible, button:focus-visible { outline: 2px solid var(--acao); outline-offset: 4px; border-radius: 2px; } h1, h2, h3 { color: var(--marca); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } h1 { font-size: 3.5rem; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; font-weight: 600; letter-spacing: 0; } p { max-width: 65ch; color: var(--texto-secundario); } .site-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--marca-claro); position: sticky; top: 0; z-index: 1000; padding: 1rem 0; } .site-header .container { display: flex; align-items: center; justify-content: space-between; } .logo-img { height: 32px; width: auto; } .nav-list { display: flex; list-style: none; gap: 2rem; } .nav-link { text-decoration: none; color: var(--texto-secundario); font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; position: relative; padding: 0.5rem 0; } .nav-link:hover { color: var(--marca); } html[data-pagina-atual="/"] a[href="/"], html[data-pagina-atual="/funcionalidades"] a[href="/funcionalidades"], html[data-pagina-atual="/precos"] a[href="/precos"], html[data-pagina-atual="/termos-de-uso"] a[href="/termos-de-uso"] { color: var(--marca); font-weight: 600; } html[data-pagina-atual="/"] a[href="/"]::after, html[data-pagina-atual="/funcionalidades"] a[href="/funcionalidades"]::after, html[data-pagina-atual="/precos"] a[href="/precos"]::after, html[data-pagina-atual="/termos-de-uso"] a[href="/termos-de-uso"]::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--acao); } .btn-cta-header { background: var(--acao); color: var(--texto-sobre-acao); text-decoration: none; padding: 0.75rem 1.5rem; border-radius: var(--radius-tecnico); font-weight: 600; font-size: 0.875rem; transition: background 0.2s ease, transform 0.1s ease; } .btn-cta-header:hover { background: var(--acao-hover); } .site-footer { background: var(--fundo); border-top: 1px solid var(--marca-claro); padding: 5rem 0 2rem; margin-top: 5rem; } .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem; } .footer-logo { height: 28px; margin-bottom: 1.5rem; } .footer-nav-group h6 { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--marca); margin-bottom: 1.5rem; } .footer-nav-group ul { list-style: none; } .footer-nav-group a { text-decoration: none; color: var(--texto-secundario); font-size: 0.875rem; display: block; margin-bottom: 0.75rem; transition: color 0.2s; } .footer-nav-group a:hover { color: var(--acao); } .footer-bottom { border-top: 1px solid var(--marca-claro); padding-top: 2rem; text-align: center; font-size: 0.75rem; color: var(--texto-secundario); } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .menu-toggle span { display: block; width: 20px; height: 2px; background: var(--marca); position: relative; } .menu-toggle span::before, .menu-toggle span::after { content: ''; position: absolute; width: 20px; height: 2px; background: var(--marca); left: 0; } .menu-toggle span::before { top: -6px; } .menu-toggle span::after { bottom: 6px; } @media (max-width: 768px) { .main-nav { display: none; } .menu-toggle { display: block; } .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer-info { grid-column: span 2; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } }