/* Estilos exclusivos das páginas internas — a home não carrega este arquivo */ /* =========================================================== Responsividade em telas estreitas (< 900px e < 400px) O styles.css tem um único breakpoint (900px) e dentro dele fixa o tamanho dos títulos grandes em 3.35rem / 3.5rem (~54 e ~56px). Isso não encolhe mais: num aparelho de 320-360px o título estoura a largura e cria rolagem lateral. Aqui esses tamanhos viram fluidos, com clamp(). =========================================================== */ @media(max-width:900px){ .intro-statement h2{font-size:clamp(2rem,9.5vw,3.35rem)} .treat-content h2,.doctor h2,.space h2,.contact h2{font-size:clamp(2rem,9.5vw,3.5rem)} .quote-band blockquote{font-size:clamp(1.55rem,7.2vw,2.6rem)} .doctor-card h3{font-size:clamp(1.8rem,8vw,2.4rem)} .page-cta h2{font-size:clamp(2rem,9.5vw,3.5rem)} .inner-hero h1{font-size:clamp(1.9rem,9vw,3.4rem)} .prose h2,.cards-head h2,.steps-head h2,.proc-head h2,.timeline-head h2{font-size:clamp(1.9rem,8.5vw,3rem)} .proc-group h3{font-size:clamp(1.6rem,7.5vw,2.1rem)} /* palavras longas (ex.: "especialização", "Lipoaspiração") não cortam a tela */ h1,h2,h3,blockquote{overflow-wrap:break-word} /* O botão redondo tinha largura fixa e o rótulo "FALE COM NOSSA EQUIPE" (~155px) vazava para fora do círculo. Agora o círculo acompanha a tela e o rótulo quebra em duas linhas dentro dele. */ .contact-button{width:min(190px,60vw);height:min(190px,60vw);padding:0 24px;gap:10px;font-size:.6rem;letter-spacing:.1em;line-height:1.55;margin:48px auto 26px} /* align-items:center faz o item do flex adotar a largura do próprio conteúdo; sem width:100% o rótulo não enxerga a caixa e nunca quebra de linha. */ .contact-button span{display:block;width:100%} .contact-button b{font-size:1.15rem} /* Sem a margem negativa: o link fica logo abaixo do botão, centralizado, e o vão de 30px entre texto e seta encolhe para não esticar a linha. */ .cta-sub{margin:0 0 58px} .cta-sub .text-link{margin-top:0;gap:14px;font-size:.6rem;letter-spacing:.12em} } @media(max-width:400px){ .reference-intro{padding:70px 20px} .doctor{padding:70px 20px} .quote-band{padding:70px 20px} .contact{padding:70px 20px} .space-copy{left:20px;width:calc(100% - 40px)} .reference-hero{min-height:540px} .prose,.cards,.steps,.proc,.timeline,.page-cta{padding-left:20px;padding-right:20px} .crumb{padding-left:20px;padding-right:20px} .card,.step,.tl-item{padding-left:24px;padding-right:24px} } /* ---- Rodapé no celular ---- O styles.css alinha tudo à esquerda, mas a logo é um bloco de 220px com o desenho centralizado dentro dele: ela nunca encosta na margem em que o texto encosta, e o conjunto parece torto. Centralizando, fica proposital. */ @media(max-width:900px){ footer{align-items:center;text-align:center;gap:30px;padding:56px 24px 46px} footer .footer-logo-link{width:200px;height:100px} footer>div{flex-direction:row;justify-content:center;gap:30px} footer>p{width:100%;margin:0;padding-top:26px;border-top:1px solid rgba(243,238,227,.16);opacity:.62;letter-spacing:.1em} } @media(max-width:400px){ footer{padding:48px 20px 40px;gap:26px} footer .footer-logo-link{width:176px;height:88px} footer>div{gap:22px} } /* Rede de segurança: o styles.css já esconde o transbordo no body, mas em alguns navegadores a rolagem lateral escapa pelo html. */ html{overflow-x:hidden} /* Com o menu aberto, o styles.css sobe a topbar para z-index 80 (acima do menu, que é 60) só para manter o "X" de fechar visível. Como a topbar tem 130px de altura e ocupa a largura toda, ela cobria o seletor de idioma (que fica a 78px do topo) e engolia o clique — no desktop sempre, no celular só em parte. Solução: a topbar deixa de receber cliques; só o botão de fechar recebe. */ body.menu-open .site-header{pointer-events:none} body.menu-open .menu-toggle{pointer-events:auto} /* Seletor de idioma. O padding aumenta a área de toque (o alvo original tinha ~18x10px, impossível de acertar no dedo); a margem negativa cancela o padding para o visual não mudar. */ .language-picker button{cursor:pointer;transition:opacity .25s;padding:16px 8px;margin:-16px -8px;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .language-picker button:hover{opacity:.8} .language-picker button:active{opacity:1;transform:scale(.94)} .language-picker button.active,.language-picker button.active:hover{opacity:1} .language-picker button[disabled]{opacity:.22;cursor:not-allowed} .language-picker button[disabled]:active{transform:none} /* Evita ver o português piscar antes da tradução entrar */ .i18n-wait body{visibility:hidden} /* Hero curto das internas */ .inner-hero{position:relative;min-height:56svh;background:var(--green);color:var(--gold);border-top:9px solid var(--gold);display:grid;place-items:center;text-align:center;padding:170px 7vw 95px;overflow:hidden} .inner-hero>img{position:absolute;inset:0;height:100%;object-fit:cover;filter:brightness(.42) saturate(.9)} .inner-hero .inner-hero-body{position:relative;z-index:2;max-width:720px} .inner-hero .eyebrow{color:var(--sand);margin-bottom:24px} .inner-hero h1{font:clamp(2.5rem,6vw,5.2rem)/1.02 "Italiana";letter-spacing:.02em;margin:0} .inner-hero p{color:var(--cream);line-height:1.85;font-size:.95rem;margin:30px 0 0} /* Voltar */ .crumb{background:var(--paper);padding:26px 9vw;font-size:.6rem;letter-spacing:.2em;font-weight:500} .crumb a{color:var(--ink);border-bottom:1px solid rgba(17,25,31,.35);padding-bottom:4px} .crumb a:hover{color:var(--accent);border-color:var(--accent)} /* Bloco de texto corrido */ .prose{background:var(--paper);padding:110px 9vw} .prose-inner{max-width:760px;margin:0 auto} .prose h2{font:clamp(2.4rem,4vw,3.6rem)/1.05 "Italiana";letter-spacing:-.02em;margin:0 0 30px} .prose h3{font:1.5rem/1.3 "Italiana";margin:50px 0 14px} .prose p{line-height:1.85;margin:0 0 20px} .prose ul{margin:0 0 26px;padding-left:20px} .prose li{line-height:1.85;margin-bottom:10px} .prose small{display:block;margin-top:45px;font-size:.68rem;line-height:1.9;opacity:.65} /* Passos numerados */ .steps{background:var(--cream);padding:120px 9vw} .steps-head{max-width:620px;margin:0 0 70px} .steps-head h2{font:clamp(2.4rem,4.4vw,4rem)/1 "Italiana";letter-spacing:-.03em;margin:0 0 25px} .steps-head p{line-height:1.8;margin:0} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .step{background:var(--cream);padding:42px 32px 48px} .step b{display:block;font:500 .58rem "DM Sans";letter-spacing:.22em;color:var(--green);margin-bottom:26px} .step h3{font:1.6rem/1.15 "Italiana";margin:0 0 14px} .step p{font-size:.85rem;line-height:1.75;margin:0} /* Cartões lado a lado */ .cards{background:var(--paper);padding:120px 9vw} .cards-head{max-width:620px;margin:0 0 60px} .cards-head h2{font:clamp(2.4rem,4.4vw,4rem)/1 "Italiana";letter-spacing:-.03em;margin:0 0 25px} .cards-head p{line-height:1.8;margin:0} .cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .card{background:var(--cream);padding:44px 34px 50px;border-top:2px solid var(--gold)} .card h3{font:1.7rem/1.15 "Italiana";margin:0 0 16px} .card p{font-size:.87rem;line-height:1.8;margin:0} /* Mapa */ .map-wrap{background:var(--paper);padding:0 9vw 110px} .map-frame{width:100%;height:470px;border:0;display:block;filter:grayscale(.3) contrast(1.03)} /* Grupos de procedimentos */ .proc{background:var(--paper);padding:120px 9vw} .proc-head{max-width:640px;margin:0 0 75px} .proc-head h2{font:clamp(2.4rem,4.4vw,4rem)/1 "Italiana";letter-spacing:-.03em;margin:0 0 25px} .proc-head p{line-height:1.8;margin:0} .proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px 70px} .proc-group b{display:block;font:500 .58rem "DM Sans";letter-spacing:.22em;color:var(--green);margin-bottom:18px} .proc-group h3{font:clamp(1.9rem,2.6vw,2.4rem)/1.1 "Italiana";letter-spacing:-.01em;margin:0} .proc-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)} .proc-list li{border-bottom:1px solid var(--line);padding:20px 0} .proc-list strong{display:block;font-weight:500;font-size:.93rem;margin-bottom:7px} .proc-list span{display:block;font-size:.83rem;line-height:1.75;opacity:.78} .proc-note{margin:80px 0 0;padding-top:40px;border-top:1px solid var(--line);max-width:760px;line-height:1.85;font-size:.9rem} /* Linha do tempo da formação */ .timeline{background:var(--cream);padding:120px 9vw} .timeline-head{max-width:640px;margin:0 0 70px} .timeline-head h2{font:clamp(2.4rem,4.4vw,4rem)/1 "Italiana";letter-spacing:-.03em;margin:0 0 25px} .timeline-head p{line-height:1.8;margin:0} .timeline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .tl-item{background:var(--cream);padding:42px 30px 48px} .tl-item b{display:block;font:1.9rem/1 "Italiana";color:var(--green);margin-bottom:22px} .tl-item h3{font:1.35rem/1.2 "Italiana";margin:0 0 12px} .tl-item p{font-size:.84rem;line-height:1.75;margin:0} /* Dois links de texto lado a lado */ .link-row{display:flex;flex-wrap:wrap;gap:16px 44px} /* Link secundário sob o botão redondo de contato */ /* Só no desktop: puxa o link para debaixo do botão redondo, que tem 90px de margem inferior. No celular o botão é fluido e essa margem negativa jogava o link para dentro do círculo — lá vale a regra do bloco de 900px. */ @media(min-width:901px){ .cta-sub{margin:-58px 0 80px} .cta-sub .text-link{margin-top:0} } /* Faixa final de chamada */ .page-cta{background:var(--sand);text-align:center;padding:120px 9vw} .page-cta h2{font:clamp(2.6rem,5vw,4.6rem)/.95 "Italiana";letter-spacing:-.03em;margin:0} .page-cta h2 em{font-weight:400;color:var(--muted)} .page-cta .contact-button{margin:55px auto 0} @media(max-width:900px){ .inner-hero{min-height:0;padding:130px 24px 70px} .crumb{padding:22px 24px} .prose{padding:80px 24px} .steps,.cards{padding:80px 24px} .steps-grid{grid-template-columns:1fr} .proc,.timeline{padding:80px 24px} .proc-grid{grid-template-columns:1fr;gap:60px} .proc-head,.timeline-head{margin-bottom:50px} .timeline-grid{grid-template-columns:1fr} .proc-note{margin-top:55px} .link-row{flex-direction:column;gap:0} .cards-grid{grid-template-columns:1fr;gap:20px} .map-wrap{padding:0 24px 80px} .map-frame{height:340px} .page-cta{padding:85px 24px} .treat-content{padding:70px 24px} } /* =========================================================== PALETA OFICIAL DA MARCA (manual do Dr. Paulo Monteiro) PANTONE 4269 C ......... #AB927A fendi médio PANTONE 7528 C ......... #C5B9AB fendi claro PANTONE GOLDEN EGG ..... #BB9D6D dourado WARM GRAY 1 C .......... #D7D3CC cinza quente BLACK 6 C .............. #11191F preto Todas as cores do site saem daqui. O styles.css continua com os valores antigos no :root dele; este bloco vem depois e vence — nenhum outro arquivo precisa ser tocado para mudar a paleta. REGRA (dono, 2026-08-31): SÓ AS 5 CORES ACIMA. Nada de tom derivado, clareado ou escurecido — já tentamos e deu errado duas vezes: clarear o 4269 C com branco vira BEGE (a saturação sobe junto), e escurecer vira um marrom que não está no manual. Se faltar um tom, a resposta é redistribuir as 5 cores entre as áreas, nunca criar a sexta. FENDI É A COR PREDOMINANTE. Por isso o 4269 C ocupa as áreas grandes de destaque (abertura da home, bloco de contato, cartão do especialista) e o WARM GRAY 1 C fica só como fundo de leitura. Antes era o contrário — o cinza ocupava tudo e o fendi aparecia em detalhe, e o site lia como cinza. Repartição: WARM GRAY 1 C = fundo base | 7528 C = blocos alternados, cartões e menu | 4269 C = abertura, contato, cartão do especialista e os rótulos | GOLDEN EGG = filetes e o dourado do logo | BLACK 6 C = texto, abertura, topos das internas, faixa de citação, rodapé e os véus sobre foto. Contrastes a vigiar (fundo WARM GRAY 1 C é mais escuro que o branco de antes): rótulos .eyebrow em 4269 C ficam em ~2:1 e itálicos dos títulos também. É escolha estética da marca; se o dono reclamar de legibilidade, a saída é passar esses rótulos para BLACK 6 C, não inventar um tom novo. O hover de link é BLACK 6 C — em 4269 C ou no dourado o link some. =========================================================== */ :root{ --green:#C5B9AB; /* PANTONE 7528 C — abertura, topos das internas, galeria */ --deep:#C5B9AB; /* PANTONE 7528 C — faixa de citação e rodapé */ --gold:#BB9D6D; /* PANTONE GOLDEN EGG — dourado da marca (mesmo do logo) */ --taupe:#AB927A; /* PANTONE 4269 C — rótulos, numerais, itálicos */ --sand:#AB927A; /* PANTONE 4269 C — bloco de contato e chamada final */ --cream:#C5B9AB; /* PANTONE 7528 C — blocos alternados e cartões */ --mist:#AB927A; /* PANTONE 4269 C — abertura da home, em fendi cheio */ --paper:#D7D3CC; /* WARM GRAY 1 C — fundo base do site */ --ink:#11191F; /* BLACK 6 C — texto */ --line:rgba(17,25,31,.2); --hero-bg:#C5B9AB; /* PANTONE 7528 C — fundo atrás do vídeo do topo */ --menu-bg:#C5B9AB; /* PANTONE 7528 C — menu lateral */ --menu-ink:#11191F; /* BLACK 6 C — texto do menu lateral */ --card-warm:#AB927A; /* PANTONE 4269 C — cartão do especialista na home */ --accent:#11191F; /* BLACK 6 C — hover de links (o único que garante leitura) */ --muted:#AB927A; /* PANTONE 4269 C — itálicos dentro dos títulos */ } /* Pontos em que o styles.css usava cor fixa (verde ou marrom) */ .reference-intro{background:var(--mist);color:var(--ink)} .reference-hero{background:var(--hero-bg)} .mobile-menu{background:var(--menu-bg);color:var(--menu-ink)} .language-picker span{background:rgba(17,25,31,.3)} .menu-toggle.open i{background:var(--menu-ink)} .mobile-menu nav a:hover{color:var(--accent)} .menu-toggle{background:rgba(17,25,31,.25)} .doctor-card{background:var(--card-warm)} .treat-content h2 em,.doctor h2 em{color:var(--ink);opacity:.5} .space h2 em{color:var(--sand)} .hero-dark{background:linear-gradient(180deg,rgba(17,25,31,.62) 0%,rgba(17,25,31,.34) 30%,rgba(17,25,31,.46) 52%,rgba(11,17,21,.62) 100%)} .space-overlay{background:linear-gradient(90deg,rgba(17,25,31,.94) 0%,rgba(17,25,31,.72) 34%,rgba(17,25,31,.32) 60%,transparent 80%)} /* Rótulos e numerais decorativos no fendi médio, em vez do preto do texto. Se ficarem claros demais na tela, escurecer só esta linha (ex.: #8E7660). */ .eyebrow,.step b,.proc-group b,.tl-item b,.intro-statement span{color:var(--taupe)} .inner-hero .eyebrow{color:var(--sand)} .contact-grid{border-top-color:var(--line)} .contact-grid>div{border-left-color:var(--line)} .crumb a{border-bottom-color:rgba(17,25,31,.35)} .crumb a:hover{color:var(--accent);border-color:var(--accent)} /* =========================================================== Rodapé: endereço fixo (São Conrado · The Green Offices) e redes sociais =========================================================== */ .footer-addr{max-width:340px;margin:0;font-size:.62rem;line-height:2;letter-spacing:.05em;opacity:.82} footer>div{flex-wrap:wrap} /* Bloco de contato: quarta coluna com as redes sociais */ @media(min-width:901px){ .contact-grid{grid-template-columns:repeat(4,1fr)} } .social-row{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .social-row a,.inline-link{border-bottom:1px solid rgba(17,25,31,.35);padding-bottom:2px} .social-row a:hover,.inline-link:hover{color:var(--accent);border-color:var(--accent)} /* Menu com nove itens: rola sozinho em telas baixas */ .mobile-menu nav{overflow-y:auto;-webkit-overflow-scrolling:touch} /* =========================================================== Página Equipe — perfis individuais (entram quando as fotos chegarem) =========================================================== */ .team{background:var(--paper);padding:0 9vw 120px} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .team-member{background:var(--cream);border-top:2px solid var(--gold);padding-bottom:34px} .team-member img{aspect-ratio:4/5;object-fit:cover} .team-member h3{font:1.6rem/1.15 "Italiana";margin:26px 30px 6px} .team-role{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin:0 30px 16px;opacity:.7} .team-member p:not(.team-role){font-size:.86rem;line-height:1.8;margin:0 30px} /* Linha do tempo: suporte a foto dentro do item (aguardando as imagens reais) */ .tl-item figure{margin:0 0 22px} .tl-item figure img{aspect-ratio:4/3;object-fit:cover} @media(max-width:900px){ .team{padding:0 24px 80px} .team-grid{grid-template-columns:1fr;gap:20px} .footer-addr{max-width:none} } /* =========================================================== Chamada da Experiência VIP na home (usa o layout dividido de .treatments) As alturas ficam no bloco de 901px+ porque o styles.css já define a versão de celular dentro do media query dele — uma regra solta aqui venceria a dele. =========================================================== */ /* Chamada da Experiência VIP: WARM GRAY 1 C (dono, 2026-08-31). Fica entre o bloco com foto (.space) e o "Comece sua jornada" em 7528 C — o cinza quente aqui é o que separa os dois sem repetir cor. */ .vip-home{background:var(--paper)} .vip-list{list-style:none;margin:0 0 42px;padding:0;border-top:1px solid var(--line);max-width:490px} .vip-list li{position:relative;border-bottom:1px solid var(--line);padding:15px 0 15px 26px;font-size:.87rem;line-height:1.6} .vip-list li:before{content:"";position:absolute;left:0;top:24px;width:11px;height:1px;background:var(--gold)} /* A legenda vertical usa writing-mode:vertical-rl — quando o texto quebra, a segunda linha vai para a ESQUERDA e sai da imagem. Trava numa linha só. */ .vip-home .treat-image>span{white-space:nowrap} @media(min-width:901px){ /* Altura fixa deixava um vazio embaixo da foto quando a coluna de texto ficava mais alta. Aqui a foto acompanha a altura do texto: o container é esticado pelo grid e a imagem preenche por dentro, em posição absoluta. */ .vip-home .treat-image{height:auto;min-height:620px} .vip-home .treat-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%} .vip-home .treat-content{padding:110px 8vw} } @media(max-width:900px){ .vip-home .treat-image{height:430px} } /* =========================================================== AS FAIXAS QUE ERAM PRETAS AGORA SÃO 7528 C (dono, 2026-08-31) Abertura, topos das internas, galeria, faixa de citação e rodapé saíram do BLACK 6 C. Como o fundo virou claro, o texto que era creme/dourado ficaria ilegível: aqui ele passa para BLACK 6 C. O dourado sobrevive só onde há FOTO por trás (hero da home e topos internos com imagem), porque ali o véu escuro continua. Filete dourado no topo separa as faixas quando duas seções vizinhas caem na mesma cor. =========================================================== */ .quote-band{color:var(--ink);border-top:1px solid var(--gold)} .quote-band>span{opacity:.72} /* RODAPÉ = BLACK 6 C (dono, 2026-08-31: "o preto embaixo"). É o único fundo preto grande do site; o logo dourado do rodapé é justamente onde o GOLDEN EGG fica mais forte. --deep segue no 7528 C porque a faixa de citação, que compartilha o token, continua clara. */ footer{background:var(--ink);color:var(--cream);border-top:1px solid var(--gold)} footer>p{opacity:.62} @media(max-width:900px){ footer>p{border-top-color:rgba(197,185,171,.18)} } /* Topo interno SEM foto (privacidade): o fundo 7528 C aparece de verdade, então título e texto vão para o preto da marca. Nas páginas com foto o brightness(.42) mantém o fundo escuro e o dourado segue valendo. */ .inner-hero.inner-hero-solid{color:var(--ink)} .inner-hero.inner-hero-solid .eyebrow{color:var(--ink);opacity:.62} .inner-hero.inner-hero-solid p{color:var(--ink);opacity:.8} /* =========================================================== "Comece sua jornada" no 7528 C (dono, 2026-08-31: "o bege em cima") O bloco de fecho — .contact na home e .page-cta nas internas — é claro e o RODAPÉ logo abaixo é o preto: a inversão de um para o outro é o contraste que fecha a página. Como o fundo é claro, texto, botão redondo e filetes ficam no BLACK 6 C. Cuidado: 4269 C sobre 7528 C dá 1,3:1 — rótulo ou itálico em fendi aqui dentro SOME; por isso eles vão de preto rebaixado. =========================================================== */ .contact,.page-cta{background:var(--cream);color:var(--ink);border-top:1px solid var(--gold)} .contact .eyebrow,.page-cta .eyebrow{color:var(--ink);opacity:.66} .contact h2 em,.page-cta h2 em{color:var(--ink);opacity:.5} .contact-button{border-color:var(--ink)} .contact-button:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)} .contact .text-link,.page-cta .text-link{color:var(--ink)} .contact-grid{border-top-color:rgba(17,25,31,.28)} .contact-grid>div{border-left-color:rgba(17,25,31,.28)} .contact .social-row a,.contact .inline-link{border-bottom-color:rgba(17,25,31,.4)} .contact .social-row a:hover,.contact .inline-link:hover{color:var(--accent);border-color:var(--accent)} @media(max-width:900px){ .contact-grid>div{border-left:0;border-bottom-color:rgba(17,25,31,.28)} } /* Abertura da página: fundo no WARM GRAY 1 C (dono, 2026-08-31). É só o loader — as outras faixas seguem no 7528 C. O logo é dourado e fica tom sobre tom neste fundo (1,7:1): existe UM único arquivo de logo (assets/logo-paulo-monteiro.png, dourado). Se pedirem o desenho mais firme, gerar uma versão em BLACK 6 C — não trocar o fundo por uma cor fora do manual. */ .page-loader{background:var(--paper)} /* =========================================================== LEGIBILIDADE depois que as superfícies ficaram claras Com --cream no 7528 C e a abertura no 4269 C, tudo que era 4269 C POR CIMA dessas áreas caiu para ~1,3:1 e sumiu (fendi sobre fendi). Nos fundos claros esses rótulos passam para BLACK 6 C; o 4269 C continua sendo a cor dos rótulos onde o fundo é preto (bloco "Comece sua jornada"), que é onde ele rende 5,4:1. Nada aqui sai das 5 cores do manual. =========================================================== */ .eyebrow,.step b,.proc-group b,.tl-item b,.intro-statement span{color:var(--ink);opacity:.66} .tl-item b{opacity:1} .contact .eyebrow,.page-cta .eyebrow{color:var(--taupe);opacity:1} .inner-hero .eyebrow{color:var(--gold);opacity:1} .inner-hero.inner-hero-solid .eyebrow{color:var(--ink);opacity:.62} /* Botão de abertura da home: ficava 7528 C sobre o 4269 C do bloco. */ .intro-copy a{border-color:var(--ink);color:var(--ink)} .intro-copy a:hover{background:var(--ink);color:var(--cream)} /* Hover do botão MENU: fundo dourado com texto 7528 C não se lia. */ .menu-toggle:hover{background:var(--gold);color:var(--ink)}