/* ============================================================ Clínica Pulsar · folha de estilo do site Fontes self-hosted, zero requisição externa. Este arquivo é compartilhado pelas 4 páginas: /, /dra-tatiana-magalhaes, /dr-marcelo-s-andrade e /a-clinica. O /404.html continua com estilo próprio embutido, para nunca depender de outro arquivo para renderizar. O ?v=1 das fontes é a chave do cache de um ano. Ao regerar os subsets com tools/scripts/build-fonts.mjs, suba o número nos 3 @font-face abaixo e nos preloads do de cada página. ============================================================ */ /* ---------- Fontes (geradas por tools/scripts/build-fonts.mjs) ---------- */ @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-display-latin-wght.woff2?v=1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/playfair-display-latin-500-italic.woff2?v=1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/montserrat-latin-wght.woff2?v=1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Fallbacks métricos. Reduzem o CLS da troca de fonte. */ @font-face{font-family:'Playfair Display Fallback';font-style:normal;font-weight:500;src:local('Georgia');size-adjust:102.30%;ascent-override:105.77%;descent-override:24.54%;line-gap-override:0.00%} @font-face{font-family:'Playfair Display Fallback';font-style:italic;font-weight:500;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:96.61%;ascent-override:111.99%;descent-override:25.98%;line-gap-override:0.00%} @font-face{font-family:'Montserrat Fallback';font-style:normal;font-weight:400;src:local('Arial'),local('ArialMT');size-adjust:110.88%;ascent-override:87.30%;descent-override:22.64%;line-gap-override:0.00%} @font-face{font-family:'Montserrat Fallback';font-style:normal;font-weight:500;src:local('Arial'),local('ArialMT');size-adjust:112.56%;ascent-override:85.99%;descent-override:22.30%;line-gap-override:0.00%} @font-face{font-family:'Montserrat Fallback';font-style:normal;font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:107.45%;ascent-override:90.09%;descent-override:23.36%;line-gap-override:0.00%} /* ---------- Tokens ---------- */ :root{ --font-display:'Playfair Display','Playfair Display Fallback',Georgia,'Times New Roman',serif; --font-text:'Montserrat','Montserrat Fallback',Arial,'Helvetica Neue',sans-serif; /* Paleta do brand board */ --areia:#F5F3EE; --suvinil:#E6E3D5; --papel:#FDFCF8; --pinus:#2F4638; --pinus-claro:#37503F; --pinus-tinta:#0C2E1E; --oliva:#7A7D4D; --oliva-texto:#575A31; /* oliva escurecida mantendo R e G próximos, como na marca */ --salvia:#B8BA9D; --areia-suave:#D8DAC8; /* texto secundário sobre Verde Pinus, medido acima de 6:1 */ --salvia-clara:#C6C8AC; /* sálvia clareada: 5,2:1 no pico da textura do rodapé */ --caramelo:#C47A3A; --tinta:#1F2A22; --tinta-2:#4C554A; --linha:rgba(47,70,56,.15); --linha-forte:rgba(47,70,56,.30); --sombra-1:0 1px 1px rgba(47,70,56,.04),0 6px 18px -12px rgba(47,70,56,.35); --sombra-2:0 2px 3px rgba(47,70,56,.05),0 16px 30px -16px rgba(47,70,56,.4); --raio:16px; --coluna:28rem; --gutter:clamp(20px,5.6vw,30px); --secao:clamp(34px,8.4vw,46px); /* Recorte do lockup oficial /assets/brand/pulsar-logo.svg (viewBox 833.5 x 599.5). Guardamos emblema e PULSAR; os filetes e a linha de especialidades viram texto vivo logo abaixo, legível até 320 px. Se o SVG for regerado, confira o corte. */ --lockup:clamp(212px,62vw,258px); --lockup-vb-largura:833.5; --lockup-vb-corte:553; --textura:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%232F4638' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M0 16q30-10 60 0t60 0t60 0t60 0'/%3E%3Cpath d='M0 46q30 8 60 0t60 0t60 0t60 0'/%3E%3Cpath d='M0 76q30-11 60 0t60 0t60 0t60 0'/%3E%3Cpath d='M0 106q30 9 60 0t60 0t60 0t60 0'/%3E%3C/g%3E%3C/svg%3E"); --textura-clara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23F5F3EE' stroke-opacity='.1' stroke-width='1'%3E%3Cpath d='M0 16q30-10 60 0t60 0t60 0t60 0'/%3E%3Cpath d='M0 46q30 8 60 0t60 0t60 0t60 0'/%3E%3Cpath d='M0 76q30-11 60 0t60 0t60 0t60 0'/%3E%3Cpath d='M0 106q30 9 60 0t60 0t60 0t60 0'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background-color:var(--areia)} body{ position:relative; margin:0; background-color:var(--areia); color:var(--tinta); font-family:var(--font-text); font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* Sem esta linha, uma classe com display:flex anula o atributo hidden e o botão de compartilhar apareceria vivo e mudo em quem não tem JavaScript. */ [hidden]{display:none !important} /* Só para leitor de tela. Recebe o aviso de "Link copiado" fora do botão, para o nome acessível do botão não mudar embaixo do foco de quem acabou de clicar. */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} img,svg{display:block;max-width:100%} p{margin:0} h1,h2,h3{margin:0;font-weight:500} ul{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} address{font-style:normal} ::selection{background:var(--salvia);color:var(--pinus-tinta)} :focus-visible{outline:2px solid var(--pinus-tinta);outline-offset:3px;border-radius:6px} .pular{ position:absolute;left:50%;top:8px;transform:translate(-50%,-180%); z-index:70;background:var(--pinus);color:var(--areia); padding:12px 20px;border-radius:999px;font-size:13px;font-weight:600; letter-spacing:.04em;box-shadow:var(--sombra-2); } .pular:focus{transform:translate(-50%,0)} /* ---------- Estrutura ---------- */ .folha{ position:relative;z-index:1; max-width:var(--coluna); margin-inline:auto; background-color:var(--areia); background-image:var(--textura); background-size:240px 120px; overflow:hidden; } .wrap{padding-inline:var(--gutter)} main{display:block} .secao{margin-top:var(--secao)} /* ---------- Marca ---------- */ .topo{padding-top:clamp(34px,9.5vw,52px);text-align:center} .marca{display:flex;flex-direction:column;align-items:center} .marca__lockup{ width:var(--lockup); height:calc(var(--lockup) * var(--lockup-vb-corte) / var(--lockup-vb-largura)); object-fit:cover;object-position:top center; } /* O flex-wrap não muda nada no tamanho normal, onde a linha sobra 58px. Ele serve para a fonte mínima do navegador: sem ele a linha passa da coluna e o overflow:hidden da folha come o fim de CARDIOLOGIA sem avisar. */ .marca__especialidades{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px; margin-top:clamp(9px,2.6vw,12px); font-size:clamp(9.5px,2.9vw,11px); font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--oliva-texto); padding-left:.22em; } .marca__especialidades::before,.marca__especialidades::after{ content:"";display:block;height:1px;width:clamp(16px,5vw,26px); background:var(--oliva);opacity:.75; } .marca__ponto{color:var(--oliva);letter-spacing:0} .tagline{ margin:clamp(18px,5vw,24px) auto 0; font-family:var(--font-display);font-weight:500; font-size:clamp(19px,5.4vw,23px);line-height:1.34; color:var(--pinus); } .tagline span{display:block} .tagline i{font-style:italic} .local{ display:inline-flex;align-items:center;gap:7px; margin-top:clamp(13px,3.6vw,17px); font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--tinta-2); } .local svg{width:13px;height:13px;color:var(--oliva)} /* ---------- CTA principal ---------- */ .cta-bloco{margin-top:clamp(22px,6vw,30px)} .cta{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center;gap:11px; min-height:58px;padding:16px 20px; border-radius:14px; background:linear-gradient(168deg,#375040 0%,#2F4638 46%,#233729 100%); color:var(--areia); font-size:clamp(15px,4.1vw,16px);font-weight:600;letter-spacing:.015em; box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 22px -14px rgba(12,46,30,.9),0 2px 4px rgba(12,46,30,.12); } .cta::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 18% 0%,rgba(245,243,238,.16),rgba(245,243,238,0) 62%); } .cta > span,.cta > svg{position:relative} .cta svg{width:22px;height:22px;flex:none} .cta-nota{margin-top:11px;text-align:center;font-size:13.5px;color:var(--tinta-2)} #agendar{scroll-margin-top:24px} /* ---------- Divisor ---------- Um ramo em linha fina entre dois filetes. O traçado de eletrocardiograma saiu a pedido da clínica: a marca é a árvore da vida, escolhida justamente para não ancorar a Pulsar só na cardiologia. */ .divisor{display:flex;align-items:center;gap:13px;margin:calc(var(--secao) * .86) 0;color:var(--oliva)} .divisor__filete{flex:1;height:1px;background:currentColor;opacity:.4} .divisor__folha{width:26px;height:26px;flex:none;opacity:.75} /* ---------- Cabeça de seção ---------- */ .cabeca{margin-bottom:clamp(15px,4vw,19px)} .olho{ display:flex;align-items:center;gap:9px; font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--oliva-texto); } .olho::before{ content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--caramelo); } h2{ margin-top:7px; font-family:var(--font-display);font-weight:500; font-size:clamp(21px,5.8vw,25px);line-height:1.24; color:var(--pinus-tinta); text-wrap:balance; } /* ---------- Cartões ---------- */ .cartao{ background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra-1); } /* ---------- Profissionais ---------- */ .medicos{display:grid;gap:14px} /* min-width:0 nos itens do grid. Sem isso o item herda min-width:auto, o cartão fica mais largo que a coluna quando o navegador força uma fonte mínima e o overflow:hidden da folha corta o CRM e o RQE em silêncio. */ .medico{display:flex;flex-direction:column;min-width:0;padding:clamp(16px,4.4vw,19px);scroll-margin-top:16px} .medico__topo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(13px,3.6vw,16px);align-items:center} /* O arco cita a porta em arco e o nicho iluminado da clínica de verdade. Ele é a moldura do retrato; sem foto, segura o monograma. */ .arco{ position:relative; width:clamp(72px,22vw,86px);aspect-ratio:37/46; border-radius:999px 999px 11px 11px; background: repeating-linear-gradient(90deg,rgba(112,76,36,.16) 0 1px,rgba(112,76,36,0) 1px 7px), linear-gradient(168deg,#EFE3CD 0%,#E2D4B6 54%,#D2CDAE 100%); box-shadow:inset 0 0 0 1px rgba(47,70,56,.18),inset 0 -7px 14px -8px rgba(47,70,56,.2),inset 0 6px 12px -8px rgba(255,255,255,.95); display:grid;place-items:center;flex:none; overflow:hidden; } .arco::after{ content:"";position:absolute;inset:0;pointer-events:none; border:1px solid rgba(196,122,58,.34); border-radius:inherit; } .arco__foto{width:100%;height:100%;object-fit:cover;object-position:center top} .arco__inicial{ position:relative; font-family:var(--font-display);font-weight:500; font-size:clamp(19px,5.4vw,21px);letter-spacing:.07em; color:var(--pinus);padding-left:.07em; } .medico__especialidade{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oliva-texto)} .medico__nome{ margin-top:4px; font-family:var(--font-display);font-weight:500; font-size:clamp(19px,5.2vw,21px);line-height:1.22; color:var(--pinus-tinta);text-wrap:balance; } /* Registro profissional em pílula: o dado exigido pelo CFM fica escaneável. */ .registros{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px} .registros li{ padding:4px 10px;border-radius:999px;line-height:1.5; background:var(--suvinil); font-size:12.5px;font-weight:600;letter-spacing:.01em; font-variant-numeric:tabular-nums;color:#3D4C42; } .medico__sobre{margin-top:12px;font-size:15px;line-height:1.6;color:var(--tinta-2)} .servicos{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .servicos li{ padding:4px 11px;border-radius:999px; border:1px solid rgba(122,125,77,.34); background:rgba(184,186,157,.14); font-size:12.5px;line-height:1.5;color:var(--oliva-texto); } .medico__acoes{display:grid;gap:9px;margin-top:auto;padding-top:14px} .botao{ display:flex;align-items:center;justify-content:center;gap:9px; min-width:0;min-height:48px;padding:12px 16px;border-radius:12px; font-size:14px;font-weight:600;letter-spacing:.015em; } .botao svg{width:18px;height:18px;flex:none} .botao--primario{background:var(--pinus);color:var(--areia);box-shadow:0 6px 14px -10px rgba(12,46,30,.9)} .botao--linha{ background:var(--areia);border:1px solid var(--linha-forte);color:var(--oliva-texto); font-weight:500;font-size:13.5px; } .botao--linha span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- Links ---------- */ .links{display:grid;gap:10px} /* Estas linhas são componentes clicáveis e a borda é o único limite delas, então ela usa a versão forte do traço. */ .linha{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px; width:100%;text-align:left;min-height:66px;padding:13px 15px; border-color:var(--linha-forte); } .linha__icone{ width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px; background:linear-gradient(160deg,#EFEDE3,#E6E3D5); box-shadow:inset 0 0 0 1px rgba(47,70,56,.1); color:var(--pinus); } .linha__icone svg{width:19px;height:19px} .linha__nome{font-size:15.2px;font-weight:600;color:var(--tinta)} .linha__sub{display:block;margin-top:2px;font-size:13px;color:var(--tinta-2)} /* Na linha "Salvar contato" a seta é a flecha de baixar, o único sinal visual de que ali começa um download. Por isso ela usa a oliva, medida em 4,2:1. */ .linha__seta{width:15px;height:15px;color:var(--oliva);flex:none} /* ---------- Sobre ---------- */ .sobre__citacao{ font-family:var(--font-display);font-style:italic;font-weight:500; font-size:clamp(17px,4.7vw,19px);line-height:1.45; color:var(--pinus);text-wrap:balance; } .sobre__texto{margin-top:13px;font-size:15px;line-height:1.68;color:var(--tinta-2)} .valores{ display:grid;grid-template-columns:1fr 1fr; margin-top:clamp(20px,5.4vw,26px); border:1px solid var(--linha);border-radius:var(--raio); background:var(--papel);box-shadow:var(--sombra-1); overflow:hidden; } .valor{display:flex;flex-direction:column;align-items:center;gap:9px;padding:clamp(15px,4.4vw,18px) 10px;text-align:center} .valor:nth-child(odd){border-right:1px solid var(--linha)} .valor:nth-child(-n+2){border-bottom:1px solid var(--linha)} .valor svg{width:24px;height:24px;color:var(--oliva)} .valor span{font-size:13px;font-weight:500;line-height:1.35;color:var(--tinta-2);max-width:15ch} /* ---------- Endereço ---------- */ .endereco{display:flex;flex-direction:column;gap:16px;padding:clamp(16px,4.4vw,20px)} .endereco__topo{display:flex;gap:13px;align-items:flex-start} .endereco__topo svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--caramelo)} /* O :not(.nb) poupa o span que só segura um número inteiro na mesma linha. Sem ele o "73 99840-1212" virava bloco de 14px na cor secundária e o separador ficava pendurado no fim da linha de cima. */ .endereco address{font-size:15px;line-height:1.6;color:var(--tinta)} .endereco address > span:not(.nb){display:block;color:var(--tinta-2);font-size:14px} .endereco__contato{font-size:15px;line-height:1.6;color:var(--tinta)} .endereco__contato > span:not(.nb){display:block;color:var(--tinta-2);font-size:14px} /* ---------- Fotos da clínica ---------- */ .galeria{display:grid;grid-template-columns:1fr 1fr;gap:10px} .galeria img{ width:100%;height:100%;object-fit:cover; border-radius:12px;border:1px solid var(--linha); background:var(--suvinil); } .galeria figure{margin:0;display:flex;flex-direction:column;gap:7px} .galeria figcaption{font-size:12.5px;line-height:1.45;color:var(--tinta-2)} .galeria--faixa{grid-template-columns:repeat(3,1fr);gap:8px} .galeria--faixa img{aspect-ratio:3/4} .galeria--cheia figure:first-child{grid-column:1 / -1} .galeria--cheia figure:first-child img{aspect-ratio:4/3} .galeria + .botao{margin-top:14px} .galeria-nota{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--tinta-2)} /* ---------- Páginas internas ---------- */ /* A barra de voltar é a única navegação do site. Com quatro páginas, um menu custaria mais atenção do que devolve. */ .voltar{ display:inline-flex;align-items:center;gap:9px; min-height:44px;padding:10px 0; font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--oliva-texto); } .voltar svg{width:16px;height:16px;transform:scaleX(-1)} .topo-interno{padding-top:clamp(12px,4vw,18px)} .topo-interno .marca__lockup{--lockup:clamp(150px,40vw,176px)} .topo-interno .marca{align-items:flex-start} /* Perfil do médico */ .perfil{margin-top:clamp(18px,5vw,24px)} .perfil__foto{ width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top; border-radius:var(--raio);border:1px solid var(--linha); background:var(--suvinil); box-shadow:var(--sombra-1); } .perfil__cabeca{margin-top:clamp(16px,4.4vw,20px)} .perfil__especialidade{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oliva-texto)} .perfil__nome{ margin-top:6px; font-family:var(--font-display);font-weight:500; font-size:clamp(25px,7vw,31px);line-height:1.18; color:var(--pinus-tinta);text-wrap:balance; } .perfil__texto{margin-top:clamp(14px,4vw,18px);display:grid;gap:12px} .perfil__texto p{font-size:15.2px;line-height:1.68;color:var(--tinta-2)} .perfil__texto strong{font-weight:600;color:var(--tinta)} /* Lista de atendimento, com a folha da marca no lugar do marcador */ .lista{display:grid;gap:10px;margin-top:clamp(12px,3.4vw,15px)} .lista li{ position:relative;padding-left:26px; font-size:15px;line-height:1.55;color:var(--tinta-2); } .lista li::before{ content:"";position:absolute;left:0;top:.42em; width:13px;height:13px; background:currentColor;color:var(--oliva);opacity:.9; -webkit-mask:var(--folha-mask) center/contain no-repeat; mask:var(--folha-mask) center/contain no-repeat; } :root{ --folha-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.2C10.8 2 4.4 6.2 4.4 12.6c0 2.3.9 4.3 2.3 5.6 5 1 13.8-3.4 13.8-15z' fill='%23000'/%3E%3C/svg%3E"); } /* Formação complementar. Fica fora do bloco de identificação e com rótulo próprio, porque qualificação sem RQE não pode ser lida como titulação. */ .formacao{ margin-top:clamp(14px,4vw,18px); padding:clamp(14px,4vw,17px) clamp(15px,4.2vw,18px); border:1px solid var(--linha);border-left:3px solid var(--salvia); border-radius:12px;background:rgba(184,186,157,.12); } .formacao__rotulo{ font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--oliva-texto); } .formacao__item{margin-top:8px;font-size:14.6px;line-height:1.55;color:var(--tinta)} .formacao__onde{display:block;margin-top:3px;font-size:13.5px;color:var(--tinta-2)} /* Blocos de texto das páginas internas */ .cabeca--topo{margin-top:clamp(16px,4.4vw,22px)} .bloco{margin-top:var(--secao)} .bloco__texto{display:grid;gap:13px;margin-top:clamp(12px,3.4vw,16px)} .bloco__texto p{font-size:15.2px;line-height:1.68;color:var(--tinta-2)} .bloco__texto p.destaque{ font-family:var(--font-display);font-style:italic;font-weight:500; font-size:clamp(17px,4.7vw,19px);line-height:1.45;color:var(--pinus); } .bloco__texto strong{font-weight:600;color:var(--tinta)} /* ---------- Rodapé ---------- */ .rodape{ position:relative; margin-top:var(--secao); padding:clamp(30px,7.6vw,38px) 0 clamp(26px,7vw,32px); background:var(--pinus);color:var(--areia);text-align:center; } .rodape::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image:var(--textura-clara);background-size:240px 120px;opacity:.6; } .rodape > .wrap{position:relative} .rodape__emblema{width:46px;height:auto;margin:0 auto;opacity:.95} .rodape__assinatura{ margin-top:16px; font-family:var(--font-display);font-style:italic;font-weight:500; font-size:clamp(15px,4.1vw,16.5px);line-height:1.5;color:var(--areia); } .rodape__assinatura span{display:block} .rodape__filete{width:44px;height:1px;margin:18px auto;background:var(--salvia);opacity:.55} .rodape__legal{font-size:12.5px;line-height:1.75;color:var(--areia-suave)} .rodape__legal p + p{margin-top:9px} .rodape__creditos{margin-top:16px;font-size:11.5px;color:var(--salvia-clara)} .nb{white-space:nowrap} /* ---------- Barra fixa do WhatsApp (celular) ---------- Nasce com o atributo hidden. Sem JavaScript ela não existe, e o CTA do topo continua sendo o caminho de agendamento. */ .dock{ position:fixed;left:0;right:0;bottom:0;z-index:20; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px)); background:var(--areia);border-top:1px solid var(--linha); transform:translateY(130%); } /* A separação da barra é a borda de cima mais o fundo sólido. Um véu em degradê presumiria a cor de trás e mancharia o verde do rodapé no fim da rolagem. */ .dock.is-on{transform:none} .dock .cta{min-height:52px;max-width:var(--coluna);margin-inline:auto} /* ---------- Cenário de fundo, telas largas ---------- */ .ramo,.marca-agua{display:none} @media (min-width:640px){ html{background-color:var(--suvinil)} body{ padding-block:clamp(26px,5vh,54px); background-color:var(--suvinil); /* Luz suave no alto da parede. Fica no body, sem position:fixed, então continua no lugar em captura de página inteira e na impressão. */ background-image: radial-gradient(120% 56% at 50% 0%,rgba(255,253,246,.74) 0%,rgba(255,253,246,.22) 42%,rgba(255,253,246,0) 66%), var(--textura); background-repeat:no-repeat,repeat; background-position:center top,top left; background-size:100% 820px,280px 140px; } .marca-agua{ display:block;position:absolute;z-index:0;pointer-events:none; top:14px;left:50%;transform:translateX(-50%); width:min(66vw,700px);aspect-ratio:434/401;opacity:.07; background:url(/assets/brand/pulsar-emblema.svg) center/contain no-repeat; } .folha{ border:1px solid rgba(47,70,56,.13); border-radius:22px; box-shadow:0 1px 2px rgba(47,70,56,.05),0 40px 80px -40px rgba(35,55,41,.45),0 2px 10px rgba(47,70,56,.05); } .rodape{border-radius:0 0 21px 21px} .dock{display:none !important} } @media (min-width:1100px){ .ramo{ display:block;position:absolute;z-index:0;pointer-events:none; color:var(--pinus);opacity:.11;width:148px;height:auto; } .ramo--a{top:5vh;left:calc(50% - min(43vw,560px));transform:rotate(-10deg)} .ramo--b{bottom:5vh;right:calc(50% - min(43vw,560px));transform:rotate(170deg)} } /* ---------- Movimento ---------- Tudo o que se move vive dentro de no-preference. Sob movimento reduzido não sobra nada para desfazer, e captura, impressão e leitor de tela recebem sempre a página inteira. */ @media (prefers-reduced-motion:no-preference){ .pular{transition:transform .2s ease} .cta,.botao,.linha,.voltar{transition:transform .18s cubic-bezier(.22,.8,.3,1),background-color .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease,color .18s ease} .linha__seta{transition:transform .2s ease,color .2s ease} .dock{transition:transform .34s cubic-bezier(.22,.8,.3,1)} .cta:active,.botao:active,.linha:active{transform:translateY(1px)} } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .cta:hover{transform:translateY(-1px);filter:saturate(1.06);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 16px 28px -16px rgba(12,46,30,.95),0 3px 6px rgba(12,46,30,.14)} .botao--primario:hover{background:var(--pinus-claro);transform:translateY(-1px);box-shadow:0 10px 18px -10px rgba(12,46,30,.9)} .botao--linha:hover{background:#fff;border-color:var(--pinus)} .linha:hover{transform:translateY(-1px);border-color:var(--linha-forte);box-shadow:var(--sombra-2)} .linha:hover .linha__seta{transform:translateX(3px);color:var(--oliva-texto)} .voltar:hover{color:var(--pinus-tinta)} } @media (hover:hover) and (prefers-reduced-motion:reduce){ .botao--primario:hover{background:var(--pinus-claro)} .botao--linha:hover{background:#fff;border-color:var(--pinus)} } /* O rodapé reserva a altura da barra fixa, então a última linha nunca fica escondida atrás dela. O scroll-padding faz o mesmo pela rolagem por foco: sem ele o Chrome para o item focado embaixo da barra (WCAG 2.2, SC 2.4.11). */ @media (max-width:639px){ html{scroll-padding-bottom:96px} .rodape{padding-bottom:calc(clamp(26px,7vw,32px) + 76px)} } /* Em tela muito baixa, por exemplo com zoom de 400%, a barra comeria perto de 40% do que resta. O CTA do topo continua sendo o caminho de agendamento. */ @media (max-height:480px){ .dock{display:none !important} } /* Alto contraste do Windows. O lockup é uma imagem e o navegador não recolore imagem, então ele ganha a própria base areia. O CTA desenha a caixa com background e sombra, que o modo remove, então ganha uma borda de verdade. */ @media (forced-colors:active){ .marca__lockup{forced-color-adjust:none;background:var(--areia);border-radius:8px} .cta,.botao--primario{border:1px solid ButtonBorder} } @media (max-width:359px){ .botao{font-size:13px;gap:7px} .botao--linha{padding-left:12px;padding-right:12px;gap:6px} .linha{gap:11px;padding:12px 13px} .registros li,.servicos li{font-size:12px} .galeria--faixa{grid-template-columns:1fr 1fr} .galeria--faixa figure:last-child{display:none} } /* ---------- Impressão ---------- O Chrome não pinta fundos por padrão ao imprimir, então o rodapé verde sairia como texto claro sobre papel branco. Aqui ele volta a ter tinta escura, com o emblema na versão escura e a barra fixa fora do papel. */ @media print{ .dock{display:none !important} body{background:#fff} .rodape{background:#fff;color:var(--tinta);border-top:1px solid var(--linha-forte)} .rodape::before{display:none} .rodape__emblema{content:url("/assets/brand/pulsar-emblema.svg");opacity:1} .rodape__assinatura{color:var(--pinus)} .rodape__filete{background:var(--linha-forte);opacity:1} .rodape__legal{color:var(--tinta-2)} .rodape__creditos{color:var(--tinta-2)} }