/* ============================================================ BASE — reset, tipografia e primitivos ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--f-corpo); font-size: var(--t-base); line-height: var(--lh-corpo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } /* Onde a
é que define a caixa (proporção fixa + recorte), o precisa sair do fluxo: sem isso o height:100% da não tem altura de pai contra a qual resolver e ela volta à proporção natural, ora sobrando ora faltando dentro da moldura. */ .topo .fundo picture, .sala-capa picture, .cartao-sala picture, .grade-fotos picture { display: contents; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; letter-spacing: var(--ls-titulo); line-height: var(--lh-titulo); margin: 0; text-wrap: balance; } h1 { font-size: var(--t-4xl); line-height: var(--lh-justo); } h2 { font-size: var(--t-3xl); } h3 { font-size: var(--t-2xl); } p { margin: 0; max-width: var(--medida); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: var(--r-sm); } /* ---- primitivos ------------------------------------------ */ .faixa { background: var(--fundo); color: var(--texto); padding-block: var(--secao-y); } .wrap { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem-x); } .etiqueta { display: block; font-family: var(--f-corpo); font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--acento); } .lead { font-size: var(--t-lg); color: var(--texto-2); max-width: 54ch; } /* marca escrita — o logotipo em fonte, não em imagem */ .marca { display: inline-flex; flex-direction: column; line-height: 1; color: var(--texto); } .marca .espaco { font-family: var(--f-corpo); font-size: .62em; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; margin-left: .3em; color: var(--acento); } .marca .pensare { font-family: var(--f-marca); font-size: 2.05em; margin-top: -.04em; } /* ---- botões ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); padding: 14px 26px; border: 1px solid transparent; border-radius: var(--r-pilula); background: var(--btn-fundo); color: var(--btn-texto); font-family: var(--f-corpo); font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: transform var(--mov-rapido), box-shadow var(--mov-rapido), background var(--mov-rapido), color var(--mov-rapido); } .btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); } .btn:active { transform: translateY(0); } .btn-vazado { background: transparent; color: var(--texto); border-color: var(--linha-forte); } [data-base="bordo"] .btn-vazado { border-color: var(--linha-sobre-bordo); } .btn-vazado:hover { border-color: var(--acento); color: var(--acento); } .btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; } /* ---- revelação ao rolar ---------------------------------- */ /* A opacidade zero só vale quando o JS está vivo (classe .js no ). Sem JS, o conteúdo aparece normalmente em vez de deixar a página em branco. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--mov-lento), transform var(--mov-lento); } .js .reveal.visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }