/* =========================================================== ALK Support — camada de design =========================================================== Carrega DEPOIS de style.css e redefine a aparência do site inteiro: as cores, os componentes novos (parede animada, navegador que rola, grade de trabalhos) e o aviso de cookies por categoria. Os valores aqui não foram redigitados: são os mesmos das prévias aprovadas, extraídos delas. O único ajuste foi escopo — as duas páginas usam `.capa` para coisas diferentes, então cada uma vive sob a classe do seu `` (.pg-home e .pg-trabalhos). Gerado por scratchpad/montar_css.js =========================================================== */ /* ============================================================ Base: tokens, cabeçalho, rodapé, botões, esteira de logos ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :root{ --preto:#08070b;--carvao:#111016;--linha:rgba(255,255,255,.1); --tinta:#f5f3f7;--fraco:#9b98a8;--rubro:#e3142a;--quente:#ff6a3d; } body{background:var(--preto);color:var(--tinta);font:16px/1.62 'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden} .faixa{width:min(1320px,93%);margin-inline:auto} h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.038em} .chama{background:linear-gradient(100deg,var(--rubro),var(--quente)); -webkit-background-clip:text;background-clip:text;color:transparent} .voltar{position:fixed;bottom:26px;right:88px;z-index:99;font:600 12px/1 system-ui,sans-serif; background:#fff;color:#111;padding:9px 13px;border-radius:99px;opacity:.5} .voltar:hover{opacity:1} @media(max-width:520px){.voltar{right:auto;left:14px;bottom:18px;font-size:11px}} .zap{position:fixed;right:20px;bottom:20px;z-index:99;width:56px;height:56px;border-radius:50%; background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5)} .zap svg{width:29px;height:29px} header{position:sticky;top:0;z-index:60;background:rgba(8,7,11,.72);backdrop-filter:blur(16px); border-bottom:1px solid var(--linha)} .topo{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0} .marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.03em} .marca img{width:30px} nav{display:flex;gap:25px;font-size:14px;color:var(--fraco)} nav a:hover{color:var(--tinta)} .btn{display:inline-block;background:var(--rubro);color:#fff;padding:12px 21px;border-radius:99px; font-weight:700;font-size:14px;transition:.2s} .btn:hover{background:#b30f21;transform:translateY(-1px)} .btn-linha{background:transparent;border:1px solid var(--linha);color:var(--tinta)} .btn-linha:hover{background:rgba(255,255,255,.07);border-color:var(--tinta)} .btn-claro{background:var(--tinta);color:var(--preto)} .btn-claro:hover{background:#fff} /* ============================================================ Home ============================================================ */ .pg-home /* ============================================================ 1. A PAREDE ============================================================ */ .capa{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden; padding:70px 0 60px} .pg-home .parede{position:absolute;inset:-8% -2%;display:grid;grid-template-columns:repeat(3,1fr); gap:18px;transform:rotate(-7deg) scale(1.22);opacity:.30;pointer-events:none;z-index:0} .pg-home .col{display:flex;flex-direction:column;gap:18px;will-change:transform} .pg-home .col img{border-radius:12px;border:1px solid rgba(255,255,255,.1);width:100%} .pg-home .col-0{animation:sobe 58s linear infinite} .pg-home .col-1{animation:desce 72s linear infinite} .pg-home .col-2{animation:sobe 64s linear infinite} @keyframes sobe{from{transform:translateY(0)}to{transform:translateY(-50%)}} @keyframes desce{from{transform:translateY(-50%)}to{transform:translateY(0)}} .pg-home /* o veu escurece a parede o suficiente para o texto ter contraste de leitura */ .veu{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(70% 60% at 30% 45%,rgba(8,7,11,.94),rgba(8,7,11,.72) 55%,rgba(8,7,11,.9)), linear-gradient(180deg,rgba(8,7,11,.8),transparent 22%,transparent 74%,var(--preto))} .pg-home .capa .faixa{position:relative;z-index:2} .pg-home .selo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--tinta); background:rgba(255,255,255,.07);border:1px solid var(--linha); border-radius:99px;padding:7px 15px;margin-bottom:24px} .pg-home .pulso{width:7px;height:7px;border-radius:50%;background:#3ddc84;animation:pulsar 2.2s ease-in-out infinite} @keyframes pulsar{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,220,132,.6)} 50%{opacity:.75;box-shadow:0 0 0 7px rgba(61,220,132,0)}} .pg-home .capa h1{font-size:clamp(2.7rem,7.4vw,6rem);max-width:16ch} .pg-home .capa h1 .l{display:inline-block;opacity:0;transform:translateY(.5em); animation:entra .75s cubic-bezier(.22,1,.36,1) forwards} @keyframes entra{to{opacity:1;transform:none}} .pg-home .capa p{color:var(--fraco);max-width:52ch;font-size:1.1rem;margin:26px 0 32px; opacity:0;animation:entra .8s .55s cubic-bezier(.22,1,.36,1) forwards} .pg-home .acoes{display:flex;gap:12px;flex-wrap:wrap;opacity:0; animation:entra .8s .7s cubic-bezier(.22,1,.36,1) forwards} .pg-home /* ============================================================ 2. A MOLDURA ============================================================ */ .palco{padding:96px 0} .pg-home .palco-grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center} .pg-home .rotulo{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--rubro);margin-bottom:12px} .pg-home .palco h2{font-size:clamp(1.9rem,3.9vw,3.1rem);margin-bottom:16px} .pg-home .palco .desc{color:var(--fraco);margin-bottom:26px} .pg-home .legenda{min-height:76px;position:relative;margin-bottom:24px} .pg-home .rot{position:absolute;inset:0;opacity:0} .pg-home .rot strong{display:block;font-size:1.24rem;font-weight:800;letter-spacing:-.02em} .pg-home .rot span{color:var(--fraco);font-size:.92rem} .pg-home .rot a{color:var(--rubro);font-size:.88rem;font-weight:700} @keyframes trocar{0%{opacity:0}3%{opacity:1}30%{opacity:1}34%,100%{opacity:0}} .pg-home .navegador{--janela:420px; background:#1b1a22;border:1px solid var(--linha);border-radius:15px;overflow:hidden; box-shadow:0 34px 80px rgba(0,0,0,.6)} .pg-home .barra{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#24232c; border-bottom:1px solid var(--linha)} .pg-home .bola{width:11px;height:11px;border-radius:50%} .pg-home .b1{background:#ff5f57} .pg-home .b2{background:#febc2e} .pg-home .b3{background:#28c840} .pg-home .url{flex:1;margin-left:9px;background:#15141b;border-radius:7px;padding:5px 12px; font-size:11px;color:var(--fraco);text-align:center;position:relative;min-height:25px} .pg-home .url span{position:absolute;inset:0;display:grid;place-items:center;opacity:0} .pg-home .janela{position:relative;height:var(--janela);overflow:hidden;background:#fff} .pg-home .pag{position:absolute;inset:0;opacity:0} .pg-home .pag img{width:100%;will-change:transform} .pg-home .pag-0{animation:trocar 27s 0s infinite;} .pg-home .pag-0 img{animation:rolar-0 27s 0s infinite;} @keyframes rolar-0{ 0%,2%{transform:translateY(0)} 22%{transform:translateY(calc(-100% + var(--janela)))} 26%,100%{transform:translateY(calc(-100% + var(--janela)))} } .pg-home .rot-0{animation:trocar 27s 0s infinite;} .pg-home .pag-1{animation:trocar 27s 9s infinite;} .pg-home .pag-1 img{animation:rolar-1 27s 9s infinite;} @keyframes rolar-1{ 0%,2%{transform:translateY(0)} 22%{transform:translateY(calc(-100% + var(--janela)))} 26%,100%{transform:translateY(calc(-100% + var(--janela)))} } .pg-home .rot-1{animation:trocar 27s 9s infinite;} .pg-home .pag-2{animation:trocar 27s 18s infinite;} .pg-home .pag-2 img{animation:rolar-2 27s 18s infinite;} @keyframes rolar-2{ 0%,2%{transform:translateY(0)} 22%{transform:translateY(calc(-100% + var(--janela)))} 26%,100%{transform:translateY(calc(-100% + var(--janela)))} } .pg-home .rot-2{animation:trocar 27s 18s infinite;} .pg-home /* ============================================================ 3. Servicos, .pg-home numeros, .pg-home logos ============================================================ */ section{padding:88px 0} .pg-home .cabeca{margin-bottom:38px} .pg-home .cabeca h2{font-size:clamp(1.9rem,3.9vw,3.1rem)} .pg-home .cabeca p{color:var(--fraco);margin-top:12px;max-width:56ch} .pg-home .servicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px; background:var(--linha);border:1px solid var(--linha);border-radius:16px;overflow:hidden} .pg-home .serv{background:var(--carvao);padding:30px 26px;display:flex;flex-direction:column;gap:12px; min-height:210px;position:relative;overflow:hidden;transition:background .25s} .pg-home .serv::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s; background:radial-gradient(110% 90% at 0% 0%,rgba(227,20,42,.22),transparent 62%)} .pg-home .serv:hover::before{opacity:1} .pg-home .serv:hover{background:#16151d} .pg-home .ico{width:46px;height:46px;border-radius:12px;background:rgba(227,20,42,.14);color:var(--rubro); display:grid;place-items:center;position:relative;z-index:1} .pg-home .ico svg{width:23px;height:23px} .pg-home .serv h3{font-size:1.12rem;position:relative;z-index:1} .pg-home .serv p{color:var(--fraco);font-size:.89rem;flex:1;position:relative;z-index:1} .pg-home .serv b{color:var(--rubro);font-size:.84rem;position:relative;z-index:1; opacity:0;transform:translateX(-6px);transition:.25s} .pg-home .serv:hover b{opacity:1;transform:none} .pg-home .dupla{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .pg-home .prod{background:var(--carvao);border:1px solid var(--linha);border-radius:16px;padding:24px; display:flex;gap:16px;align-items:flex-start;transition:.25s} .pg-home .prod:hover{border-color:rgba(227,20,42,.5);transform:translateY(-3px)} .pg-home .prod img{width:52px;height:52px;object-fit:contain;flex-shrink:0} .pg-home .prod h3{font-size:1.08rem;margin-bottom:4px} .pg-home .prod p{color:var(--fraco);font-size:.88rem} .pg-home .numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha); border:1px solid var(--linha);border-radius:18px;overflow:hidden} .pg-home .numeros div{background:var(--carvao);padding:36px 28px} .pg-home .numeros strong{display:block;font-size:clamp(2.3rem,5vw,3.8rem);letter-spacing:-.045em;line-height:1; background:linear-gradient(100deg,var(--rubro),var(--quente));-webkit-background-clip:text; background-clip:text;color:transparent} .pg-home .numeros span{font-size:.8rem;color:var(--fraco);letter-spacing:.05em} .pg-home .esteira-wrap{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .pg-home .esteira{display:flex;gap:13px;width:max-content;animation:corre 50s linear infinite} .pg-home .esteira-wrap:hover .esteira{animation-play-state:paused} @keyframes corre{to{transform:translateX(-50%)}} .pg-home .logo{flex:0 0 152px;height:82px;background:#fbfbfd;border-radius:12px;display:grid; place-items:center;padding:12px} .pg-home .logo img{max-height:46px;width:auto;object-fit:contain} .pg-home .fechamento{position:relative;border-radius:24px;overflow:hidden;padding:72px 40px;text-align:center; background:linear-gradient(120deg,var(--rubro),#8e0b18 70%)} .pg-home .fechamento h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:14px} .pg-home .fechamento p{color:rgba(255,255,255,.86);margin-bottom:28px} .pg-home footer{border-top:1px solid var(--linha);padding:54px 0 30px;font-size:.9rem;color:var(--fraco)} .pg-home .pe{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px} .pg-home .pe h4{color:var(--tinta);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase; margin-bottom:13px;font-weight:800} .pg-home .pe a{display:block;padding:4px 0} .pg-home .pe a:hover{color:var(--tinta)} .pg-home .social{display:flex;gap:10px;margin-top:15px} .pg-home .social a{width:36px;height:36px;border:1px solid var(--linha);border-radius:10px; display:grid;place-items:center;padding:0} .pg-home .social svg{width:17px;height:17px} .pg-home .rodape{border-top:1px solid var(--linha);margin-top:36px;padding-top:20px;font-size:.82rem} /* ============================================================ Trabalhos ============================================================ */ .pg-trabalhos /* ---- cabecalho da pagina ---- */ .capa{padding:66px 0 40px;position:relative} .pg-trabalhos .capa::before{content:'';position:absolute;inset:-40% 40% 40% -10%;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,rgba(227,20,42,.16),transparent 70%)} .pg-trabalhos .capa .faixa{position:relative} .pg-trabalhos .selo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.07); border:1px solid var(--linha);border-radius:99px;padding:7px 15px;margin-bottom:22px} .pg-trabalhos .pulso{width:7px;height:7px;border-radius:50%;background:#3ddc84;animation:pulsar 2.2s ease-in-out infinite} @keyframes pulsar{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,220,132,.6)} 50%{opacity:.75;box-shadow:0 0 0 7px rgba(61,220,132,0)}} .pg-trabalhos .capa h1{font-size:clamp(2.6rem,6.6vw,5rem)} .pg-trabalhos .pe-capa{display:flex;justify-content:space-between;align-items:flex-end;gap:34px; margin-top:26px;flex-wrap:wrap} .pg-trabalhos .capa p{color:var(--fraco);max-width:52ch;font-size:1.06rem} .pg-trabalhos .acoes{display:flex;gap:11px;flex-wrap:wrap} .pg-trabalhos /* ---- a grade ---- Captura de site e imagem clara. Sobre preto, .pg-trabalhos cada cartao vira uma janela acesa -- o contraste faz o trabalho aparecer, .pg-trabalhos e nao se dissolver no fundo. */ .obras{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:20px} .pg-trabalhos .obra{display:block;background:var(--carvao);border:1px solid var(--linha);border-radius:16px; overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .25s} .pg-trabalhos .obra:hover{transform:translateY(-6px);border-color:rgba(227,20,42,.55); box-shadow:0 24px 54px rgba(0,0,0,.6)} .pg-trabalhos .tela{aspect-ratio:16/10;overflow:hidden;background:#191822;border-bottom:1px solid var(--linha)} .pg-trabalhos .tela img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease} .pg-trabalhos .obra:hover .tela img{transform:scale(1.04)} .pg-trabalhos figcaption{padding:16px 18px;display:flex;flex-direction:column;gap:3px} .pg-trabalhos .tipo{font-size:.69rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rubro)} .pg-trabalhos figcaption strong{font-size:1.06rem;letter-spacing:-.025em} .pg-trabalhos .abrir{font-size:.83rem;color:var(--fraco);margin-top:3px} .pg-trabalhos .abrir i{font-style:normal;display:inline-block;transition:transform .25s} .pg-trabalhos .obra:hover .abrir{color:var(--tinta)} .pg-trabalhos .obra:hover .abrir i{transform:translate(3px,-3px)} .pg-trabalhos .fora{font-size:.83rem;color:#6b6877;margin-top:3px} .pg-trabalhos .obra-fora{opacity:.55} .pg-trabalhos .obra-fora .tela img{filter:grayscale(1)} .pg-trabalhos .mais{text-align:center;padding:32px 0 0;color:var(--fraco);font-size:.92rem} /* A aba precisa de .numeros e .cabeca fora do escopo da home. */ .numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha); border:1px solid var(--linha);border-radius:18px;overflow:hidden} .numeros div{background:var(--carvao);padding:36px 28px} .numeros strong{display:block;font-size:clamp(2.3rem,5vw,3.8rem);letter-spacing:-.045em;line-height:1; background:linear-gradient(100deg,var(--rubro),var(--quente));-webkit-background-clip:text; background-clip:text;color:transparent} .numeros span{font-size:.8rem;color:var(--fraco);letter-spacing:.05em} .pg-trabalhos .numeros{margin-top:46px} nav a.aqui{color:var(--tinta)} /* ============================================================ Revelar ao rolar, telas pequenas, movimento reduzido ============================================================ */ /* revelar ao rolar */ .rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)} .rev.vis{opacity:1;transform:none} @media(max-width:980px){ nav{display:none} .pg-home .palco-grade{grid-template-columns:1fr;gap:34px} .pg-home .navegador{--janela:340px} .dupla,.pe,.numeros{grid-template-columns:1fr} .pg-home .parede{grid-template-columns:repeat(2,1fr);opacity:.22} .pg-home .capa{min-height:auto;padding:54px 0 50px} .fechamento{padding:48px 22px} } /* Movimento continuo de fundo causa mal-estar em quem tem sensibilidade vestibular. Aqui tudo para, e a pagina continua vendendo parada. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .col,.esteira{transform:none!important} .capa h1 .l,.capa p,.acoes,.rev{opacity:1!important;transform:none!important} .pag-0,.rot-0{opacity:1!important} .obras{grid-template-columns:1fr} .pg-home .parede{opacity:.18} } /* ============================================================ Aviso de cookies — categorias ============================================================ */ .cookie-cats{display:grid;gap:10px;margin-top:14px;padding-top:14px; border-top:1px solid var(--linha)} .cookie-cat{display:flex;gap:11px;align-items:flex-start;cursor:pointer; background:rgba(255,255,255,.03);border:1px solid var(--linha); border-radius:10px;padding:11px 13px} .cookie-cat:hover{background:rgba(255,255,255,.06)} .cookie-cat input{margin-top:3px;width:17px;height:17px;accent-color:var(--rubro);flex-shrink:0} .cookie-cat-fixa{cursor:default;opacity:.8} .cookie-cat-txt{display:grid;gap:2px} .cookie-cat-txt strong{font-size:.9rem;color:var(--tinta)} .cookie-cat-txt strong em{font-style:normal;font-weight:500;color:var(--fraco);font-size:.8rem} .cookie-cat-txt span{font-size:.82rem;color:var(--fraco);line-height:1.5} .cookie-actions .btn{flex:1 1 auto;text-align:center} @media(max-width:520px){.cookie-actions{flex-direction:column}.cookie-actions .btn{width:100%}} /* ============================================================ Ponte com style.css ============================================================ style.css continua servindo as páginas antigas, o FAQ, os cartões do blog e as páginas legais. Se os tokens dele ficassem nos valores antigos, metade do site ficaria num preto e metade em outro — perto o bastante para parecer defeito em vez de escolha. A ponte realinha tudo num valor só. ============================================================ */ :root{ --background:var(--preto); --surface:#0f0e14; --surface-2:var(--carvao); --border:var(--linha); --text:var(--tinta); --text-muted:var(--fraco); --primary:var(--rubro); --primary-dark:#b30f21; --accent:var(--quente); --radius:14px; } body{background:var(--preto);color:var(--tinta)} /* ---- menu no celular ---- Marcação própria (.cab, .menu, .menu-btn) em vez de .header/.nav: os nomes antigos já têm regras em style.css que venceriam estas por especificidade, e o resultado seria um cabeçalho meio novo e meio velho. */ .menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px;gap:5px; flex-direction:column;width:40px} .menu-btn span{display:block;height:2px;background:var(--tinta);border-radius:2px; transition:transform .25s,opacity .2s} .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:980px){ .menu-btn{display:flex} .menu{position:fixed;inset:57px 0 auto 0;background:rgba(8,7,11,.97); backdrop-filter:blur(16px);border-bottom:1px solid var(--linha); flex-direction:column;align-items:stretch;gap:0;padding:8px 5vw 20px; display:none} .menu.aberto{display:flex} .menu a{padding:14px 2px;border-bottom:1px solid var(--linha);font-size:15px} .menu a:last-child{border-bottom:none;margin-top:12px;text-align:center} } /* ---- cartões do blog, no tom novo ---- */ #artigos{padding:88px 0} #artigos .posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} #artigos .post-card{background:var(--carvao);border:1px solid var(--linha);border-radius:16px; overflow:hidden;transition:transform .25s,border-color .25s;display:block} #artigos .post-card:hover{transform:translateY(-4px);border-color:rgba(227,20,42,.5)} #artigos .post-thumb{width:100%;aspect-ratio:16/10;object-fit:cover} #artigos .post-thumb-fallback{aspect-ratio:16/10;display:grid;place-items:center; background:#17161f;color:var(--fraco);font-weight:800} #artigos .post-body{padding:18px} #artigos .post-date{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--rubro)} #artigos .post-body h3{font-size:1.02rem;margin:7px 0;letter-spacing:-.02em;line-height:1.25} #artigos .post-excerpt{color:var(--fraco);font-size:.88rem} #artigos .post-readmore{color:var(--rubro);font-size:.85rem;font-weight:700; display:inline-block;margin-top:11px} #artigos .cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:20px} @media(max-width:700px){#artigos .cabeca{flex-direction:column;align-items:flex-start}} /* ---- FAQ no tom novo ---- */ .faq-list{display:grid;gap:10px} .faq-item{background:var(--carvao);border:1px solid var(--linha);border-radius:13px; padding:18px 22px} .faq-item summary{cursor:pointer;font-weight:700;list-style:none;display:flex; justify-content:space-between;gap:18px;color:var(--tinta)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';color:var(--rubro);font-size:1.3rem;line-height:1} .faq-item[open] summary::after{content:'\2013'} .faq-answer p{color:var(--fraco);margin-top:11px;font-size:.93rem} .faq-answer a{color:var(--quente)} /* ---- bloco sobre ---- */ .sobre{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start} .dif{border-top:1px solid var(--linha);padding-top:16px;margin-bottom:20px} .dif h3{font-size:1.02rem;margin-bottom:4px} .dif p{color:var(--fraco);font-size:.92rem} @media(max-width:980px){.sobre{grid-template-columns:1fr;gap:30px}} /* ---- páginas antigas: só o suficiente para não destoarem ---- */ .legal-main a,.legal-main strong{color:var(--tinta)} .legal-main a{color:var(--quente)} .cookie-box{background:var(--carvao);border-color:var(--linha); max-height:min(86vh,760px);overflow-y:auto} .cookie-box a{color:var(--quente)} /* display explícito vence o atributo hidden — sem esta linha as categorias apareciam antes de alguém pedir para personalizar. */ .cookie-cats[hidden]{display:none} /* As páginas antigas continuam com o main.js, que alterna a classe `open`. O alias evita ter de mexer no script que já funciona nelas. */ .menu.open{display:flex}