*, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font: 1.0625rem/1.65 var(--font-body); background: var(--bg); color: var(--ink); overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-title); line-height: 1.15; margin: 0 0 .6em; font-weight: 600; font-optical-sizing: auto; } h1 { font-size: clamp(2.4rem, 5.5vw, 4.25rem); } h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); } h3 { font-size: 1.35rem; } p { margin: 0 0 1em; } img, svg { max-width: 100%; display: block; } a { color: inherit; } .container { width: min(1140px, 100% - 2.5rem); margin-inline: auto; } /* Tarefa 10: 40px no celular (era 48px); a partir de 800px nada muda */ .section { padding-block: clamp(2.5rem, 6vw, 5rem); position: relative; } .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); box-shadow: var(--shadow-glass); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .9rem 1.5rem; border-radius: 999px; border: 2px solid transparent; font: 700 1rem/1.2 var(--font-body); text-align: center; /* texto longo que quebra em 2 linhas no celular fica centralizado */ text-decoration: none; cursor: pointer; transition: transform .2s ease-out, box-shadow .2s ease-out, background .2s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 31, 60, .18); } .btn--primary { background: var(--ink); color: #fff; } .btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; } /* foco: verde-água escurecido (--focus) garante 3:1 contra o fundo claro */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } /* .reveal só esconde quando o JS está ativo (html.js, ver ); sem JS o conteúdo aparece normalmente */ .reveal { transition: opacity .8s, transform .8s; } .js .reveal { opacity: 0; transform: translateY(24px); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; } }