/* ═══════════════════════════════════════════════════ BASE — partilhado por todas as páginas Variáveis, reset, tipografia, botões, foco, reveal e regras de toque. Carregado antes do CSS de cada página. Mexer aqui afeta o site todo. ═══════════════════════════════════════════════════ */ :root{ --ink:#16232E; /* slate-navy quase preto */ --navy:#1F3140; /* secções escuras */ --navy-deep:#101B24; /* rodapé */ --champ:#A88B57; /* champagne — acento contido */ --champ-soft:#C9AE82; --paper:#F7F5EF; /* marfim quente */ --stone:#ECE6DA; /* faixa neutra */ --line:#DCD4C5; --text:#252C33; --muted:#6A727B; --white:#FFFFFF; --ok:#1D5C3C; /* Botão primário. Por defeito escuro (ByMG); os temas de marca (ver css/themes.css) trocam para a cor da rede — ex.: vermelho RE/MAX, dourado Century 21 — com o texto no tom certo para contraste. */ --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bg-hover: var(--navy); --fs-display: clamp(2.6rem, 5.4vw, 4.4rem); --fs-h2: clamp(1.85rem, 3.3vw, 2.8rem); /* Largura do contentor. Bem larga, para o conteúdo ir de canto a canto em ecrãs grandes em vez de ficar numa coluna central. Em portáteis (largura < maxw) o contentor passa a ser o ecrã menos o gutter, ficando mesmo encostado às bordas. As larguras de texto por elemento (em ch) mantêm a leitura confortável mesmo aqui. */ --maxw: 1720px; --pad: clamp(1.25rem, 5vw, 4rem); --r: 2px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } body{ font-family:"Figtree",system-ui,sans-serif; background:var(--paper); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,.serif{font-family:"Marcellus",Georgia,serif;font-weight:400;line-height:1.1;letter-spacing:.005em} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .eyebrow{ font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--champ);display:inline-flex;align-items:center;gap:.7rem; } .eyebrow::before{content:"";width:30px;height:1px;background:currentColor} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:"Figtree",sans-serif;font-weight:600;font-size:.95rem; padding:.95rem 1.7rem;border-radius:var(--r);cursor:pointer;border:1px solid transparent; transition:transform .2s ease, background .2s ease, border-color .2s ease;line-height:1; } /* Estados de hover vivem todos no bloco @media (hover:hover) lá em baixo, para não colarem em ecrãs táteis. */ .btn-ink{background:var(--btn-bg);color:var(--btn-fg)} .btn-paper{background:var(--paper);color:var(--ink)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} :focus-visible{outline:2px solid var(--champ);outline-offset:3px;border-radius:2px} /* ---------- REVEAL ---------- Repare no prefixo .js: NÃO é decorativo, é um seguro. O .reveal esconde 42 elementos (opacity:0) e conta com o JS para os mostrar. Se o JS morrer — erro de sintaxe, browser antigo, script bloqueado — metade da página fica invisível e ninguém percebe porquê. Já aconteceu durante a construção desta página. A classe .js é posta por um script inline no . Sem JS, a regra nunca casa e o conteúdo aparece normalmente, sem animação. Falha cosmética em vez de catastrófica. */ .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .js .reveal{opacity:1;transform:none;transition:none} .q-step{animation:none} } /* ---------- TOQUE vs RATO ---------- Efeitos de hover só onde há mesmo um rato. Em ecrã tátil o :hover "cola" depois do toque e o cartão fica levantado até se tocar noutro sítio — parece bug e é. */ @media (hover:hover) and (pointer:fine){ .btn-ink:hover{background:var(--btn-bg-hover);transform:translateY(-2px)} .btn-paper:hover{background:var(--white);transform:translateY(-2px)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)} .card:hover{transform:translateY(-6px);border-color:var(--champ);box-shadow:0 26px 44px -30px rgba(16,27,36,.35)} .card.is-vendido:hover{opacity:.85;transform:none;box-shadow:none;border-color:var(--line)} .wa-float:hover{transform:scale(1.07)} } @media (hover:none){ .btn-ink:hover,.btn-paper:hover,.btn-ghost:hover,.card:hover{transform:none} .card:hover{box-shadow:none;border-color:var(--line)} /* feedback tátil: resposta imediata ao dedo, em vez de hover pendurado */ .btn:active{transform:scale(.98)} .card .see:active,.card .wa:active,.q-opt:active,.fchip:active{opacity:.7} }