/* ========================================================================= HARMONELLE v3 Sistema visual, componentes e movimento. Regra de marca que governa tudo aqui: o dossie de identidade diz, com essas palavras, que a Harmonelle nao deve "tentar parecer premium". Entao o refinamento vem de contencao, ar, foto boa e tempo bem calibrado. Nao ha dourado brilhante, marmore, serifa gigante em caixa alta, brilho de foil, glow colorido nem gradiente animado em nenhum lugar deste arquivo. FONTES E CORES AINDA SAO PROVISORIAS. Fraunces substitui a Megafield e Inter substitui a Helvena. A paleta foi deduzida do PDF. Enquanto isso nao for trocado pelos arquivos oficiais, o que a cliente aprova nao e a identidade dela. Isso e bloqueante para o aceite final. ========================================================================= */ :root{ /* ---- cor: a PALETA OFICIAL da Harmonelle, do manual de marca V1.0 da Ktarze Brands e do PDF Paleta de Cores. Nada aqui e aproximacao. Cinco cores oficiais: Branco Antigo #FEF7E3 Verde Oliva #81865D Bege Rosado #E6BCA3 Terracota Claro #CE9F83 Petroleo Escuro #374047 O FATO QUE GOVERNA TUDO ABAIXO, e foi medido: das cinco, so o Petroleo carrega texto. Verde Oliva da 3,57:1 e so serve a texto grande; Terracota da 2,20:1 e Bege Rosado 1,62:1, e os dois reprovam em qualquer texto. E paleta de superficie e de acento, e nao de texto. Por isso tres tokens sao DERIVADOS, cada um mantido na matiz da cor de marca que o originou. ---- */ --branco:#FEF7E3; /* Branco Antigo puro */ --areia:#FCF1DD; /* derivado: Branco Antigo + 10% Bege Rosado */ --creme:#F7E5D0; /* derivado: Branco Antigo + 30% Bege Rosado */ --ink:#374047; /* Petroleo puro. 9,88:1 no branco, 9,45:1 na areia, 8,59:1 no creme. E a cor de acao do site */ --ink2:#586772; /* derivado do Petroleo. 5,46:1 corpo de texto */ --cafe:#646748; /* derivado do Verde Oliva. 5,49:1 rotulos */ --caramelo:#81865D; /* Verde Oliva puro. 3,57:1 sobre claro. So texto grande, filete de 1px e anel de foco, e SO SOBRE FUNDO CLARO: sobre o ink ele cai para 2,77:1, contra 4,43:1 do caramelo antigo. Onde ele aparecia dentro de .escuro, agora e --claro-escuro2. */ --ink-hover:#6B7277; /* Petroleo clareado 26%. E o TOM DE HOVER dos botoes preenchidos, e existe por um motivo especifico: o hover tem de ser CLAREAMENTO na mesma matiz, e nunca troca de cor. O que estava aqui antes era o --cafe, que na paleta antiga era marrom subindo sobre marrom, matiz 28 sobre 32 graus, ou seja, mesma familia. Com a paleta oficial o --cafe virou oliva, e o mesmo hover passou a girar a matiz de 206 para 66 graus: o botao ficava AMARELADO ao passar o mouse. O Marcos viu e reprovou em 19/08/2026. Medido: este tom da 2,16:1 de salto sobre o Petroleo, contra 2,22:1 que a paleta antiga fazia, ou seja, mesma forca de hover; e mantem o rotulo em 4,57:1, acima do minimo de 4,5. Clarear mais reprova o rotulo: em 27% ele cai para 4,44:1. */ --ouro:#A88347; /* FORA da paleta oficial, por decisao do Marcos em 19/08/2026. 3,27:1 no claro e 3,02:1 no petroleo, e o unico dourado acima de 3:1 nos DOIS fundos. So filete de 1px, moldura, icone e selo. Nunca texto, nunca preenchimento, nunca gradiente, e no maximo uma vez por dobra da tela. */ --linha:#E6BCA3; /* Bege Rosado puro. 1,62:1. Divisoria decorativa. ATENCAO: sobre o creme ele cai para 1,41:1 e some. Nao ponha acordeao nem tabela na secao creme. */ --contorno:rgba(55,64,71,.62); /* Petroleo a 62%. 3,45:1. Obrigatorio quando a borda e a unica indicacao de que e clicavel. */ --claro-escuro:#FEF7E3; /* Branco Antigo. 9,88:1 sobre o ink */ --claro-escuro2:#E6BCA3; /* Bege Rosado. 6,08:1 sobre o ink */ --rodape-base:#CFA186; /* derivado do Terracota, clareado 0,8 ponto de L. 4,58:1 sobre o ink. O Terracota puro da 4,49:1 e reprovaria AA por 0,01. */ /* ---- tipografia ---- */ --serif:"Fraunces", Georgia, serif; /* provisoria: substitui a Megafield */ --sans:"Inter", Helvetica, Arial, sans-serif; /* provisoria: substitui a Helvena */ /* ---- espaco ---- O container e o respiro lateral sao VARIAVEIS, e nao numero fixo. Os valores base sao os da faixa mais estreita dos 16 dispositivos canonicos, 344 a 767px: largura cheia e 16px de respiro. A escada inteira, com as nove bandas, esta logo abaixo do :root. Ver a nota de 07/09/2026. O `--max:1120px` que morava aqui saiu. Ele travava o site em 1072px de conteudo em QUALQUER tela acima de 1120, do laptop de 13 a TV 4K. */ --container:100%; --gutter:16px; --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --sec:clamp(72px,8.5vw,116px); --sec-ancora:clamp(96px,12vw,168px); /* ---- movimento ---- */ --ease-suave:cubic-bezier(.22,.61,.36,1); --ease-saida:cubic-bezier(.16,1,.3,1); --ease-curta:cubic-bezier(.4,0,.2,1); --t-micro:160ms; --t-inter:380ms; --t-lento:820ms; --t-foto:1200ms; /* ---- sombra: sempre tinta, nunca preto puro, senao suja o creme ---- */ --sombra-1:0 1px 2px rgba(55,64,71,.06); --sombra-2:0 18px 40px -16px rgba(55,64,71,.24); --h-header:74px; } /* ========================================================================= A ESCADA DE RESPONSIVIDADE, 07/09/2026 Regra da agencia: toda pagina obedece aos 16 dispositivos canonicos, cuja tabela vive em conhecimento/responsividade/01-viewport-db-16-dispositivos.md. Duas coisas, e so duas, mudam por banda: a largura maxima do container e o respiro lateral. Todo o resto do site continua fluido. banda container gutter quem mora ali 344 a 767 100% 16px Fold dobrado, S23, SE, 14 Pro, Pixel 8, 14 Pro Max 768 a 1023 100% 24px iPad Mini, iPad, iPad Pro 11 1024 a 1279 100% 32px iPad Pro 12.9 1280 a 1439 1200px 32px Laptop 13 1440 a 1919 1340px 40px Laptop 15 1920 a 2559 1440px 48px Full HD 2560 a 3439 1600px 48px 2K 3440 a 3839 1800px 64px Ultrawide 34 3840 e acima 2000px 80px TV 4K O CONJUNTO DE BREAKPOINTS E FECHADO. Nenhuma media query de largura deste projeto pode usar valor fora dele: min-width: 375, 430, 768, 1024, 1280, 1440, 1920, 2560, 3440, 3840 max-width: 374, 429, 767, 1023, 1279, 1439, 1919, 2559, 3439, 3839 `prefers-reduced-motion` e `print` nao sao largura e ficam de fora da regra. Como o `box-sizing` global e `border-box`, o container INCLUI o respiro: em 1280 a leitura util e 1200 menos 64, ou seja 1136px, contra os 1072px que o `--max:1120px` antigo entregava em toda tela grande. ========================================================================= */ @media(min-width:768px) {:root{--gutter:24px}} @media(min-width:1024px){:root{--gutter:32px}} @media(min-width:1280px){:root{--container:1200px}} @media(min-width:1440px){:root{--container:1340px;--gutter:40px}} @media(min-width:1920px){:root{--container:1440px;--gutter:48px}} @media(min-width:2560px){:root{--container:1600px}} @media(min-width:3440px){:root{--container:1800px;--gutter:64px}} @media(min-width:3840px){:root{--container:2000px;--gutter:80px}} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{ font-family:var(--sans); color:var(--ink); background:var(--branco); font-weight:400; /* v2 usava 300. Inter Light em 14px com antialiasing some para quem tem 45 anos. */ font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:1.15} h1,h2{letter-spacing:-.012em} h1 em,h2 em,h3 em{font-style:italic;font-weight:340} section{padding:var(--sec) 0} .sec-areia{background:var(--areia)} .sec-creme{background:var(--creme)} .center{text-align:center} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .eyebrow{ font-family:var(--sans);font-size:12px;letter-spacing:.16em; text-transform:uppercase;color:var(--cafe);font-weight:500;margin-bottom:18px; } /* ========================================================================= FOCO O v2 nao tinha nenhuma regra :focus no arquivo inteiro. Quem navega por teclado nao enxergava onde estava. ATENCAO, esta regra MUDOU em 19/08/2026 e a nota antiga estava certa para a paleta antiga. O caramelo de antes dava 4,43:1 sobre o ink e 3,61:1 sobre a areia, entao um anel unico resolvia tudo, inclusive dentro do botao solido. Com a paleta oficial isso deixou de ser possivel, e nao e questao de gosto, e sim de aritmetica: um anel com 3:1 sobre o creme precisa de luminancia ABAIXO de 0,235, e um anel com 3:1 sobre o Petroleo precisa de luminancia ACIMA de 0,248. Nao existe um unico valor que atenda aos dois. Logo, sao dois aneis: Verde Oliva no claro, 3,57:1, e Bege Rosado no escuro e dentro do botao solido, 6,08:1. ========================================================================= */ :where(a,button,summary,details,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--caramelo); outline-offset:3px; border-radius:2px; } /* o anel do claro sumiria sobre o Petroleo: 2,77:1, abaixo do minimo de 3 */ .escuro :focus-visible, .btn:focus-visible, footer :focus-visible{outline-color:var(--claro-escuro2)} /* ========================================================================= BOTOES Seis niveis. Cada um com um vocabulario de movimento proprio, para que dois niveis nunca leiam como o mesmo botao. Regra de ouro: nunca dois de nivel 1 na mesma dobra. Luxo e ter uma saida obvia, nao varias. ========================================================================= */ /* ---- Nivel 1: acao principal. Preenchimento que sobe de baixo ---- O rotulo fica em justamente para que o ::before possa passar por tras dele. 101% e nao 100% para matar a linha de subpixel que aparece no Safari em escala fracionaria. */ .btn{ position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:56px;padding:17px 34px; font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.06em; color:var(--branco);background:var(--ink); border:1px solid var(--ink);border-radius:2px;cursor:pointer; box-shadow:var(--sombra-1); transition:letter-spacing var(--t-inter) var(--ease-suave), box-shadow 300ms var(--ease-curta), transform 300ms var(--ease-curta); } .btn::before{ content:"";position:absolute;inset:0;background:var(--ink-hover);z-index:-1; transform:translateY(101%); transition:transform var(--t-inter) var(--ease-suave); } .btn:hover::before{transform:translateY(0)} .btn:hover{letter-spacing:.078em;transform:translateY(-1px);box-shadow:var(--sombra-2)} .btn:active{transform:translateY(0);transition-duration:90ms;filter:brightness(.94)} .btn .rot,.btn svg,.btn .seta{position:relative;z-index:1} .btn svg{width:17px;height:17px;fill:currentColor;flex-shrink:0} /* ========================================================================= A MOLDURA DOURADA E O PING Escolha do Marcos em 19/08/2026, primeiro no link da bio e depois aqui. A moldura e o gesto de etiqueta de perfumaria: uma segunda borda de respiro que isola o botao do resto da pagina. E dela que vem a forca de chamada, junto com o tamanho, e nao de cor saturada. Medido: o Petroleo salta 9,88:1 do fundo, enquanto um botao terracota daria 2,07:1 e um dourado preenchido 2,96:1. Nesta paleta, botao colorido chama MENOS atencao que botao escuro. POR QUE EXISTE UM INVOLUCRO, e nao um pseudo-elemento no proprio botao. Duas razoes, e as duas quebrariam em silencio: 1. `.btn` tem `overflow:hidden`, que ele precisa para o preenchimento do hover subir por tras do rotulo. Qualquer pseudo-elemento em `inset` NEGATIVO seria simplesmente cortado, e a moldura nao apareceria. 2. `.btn::before` JA E o preenchimento do hover. Usa-lo para o ping mataria o hover de todos os botoes do site de uma vez. Por isso o `` em volta. No link da bio nao foi preciso, porque la o `.cta` nao recorta e nao tem `::before`. O outline continua reservado ao anel de foco: se a moldura o ocupasse, quem navega por teclado ficaria sem indicacao de onde esta. E fica so em quatro botoes do site inteiro, de dezesseis. Dourado repetido deixa de ser charme e vira tema, que e o que a regra do sistema proibe. */ .ouro{position:relative;display:inline-flex;max-width:100%} .ouro::after{ content:"";position:absolute;inset:-7px;pointer-events:none; border:1px solid var(--ouro);border-radius:3px } /* O ping: uma copia da moldura se solta e evapora para fora, como onda de sonar. O botao NAO se mexe, porque botao que pulsa e vocabulario de notificacao de aplicativo, que e urgencia, e nao de clinica. Tres decisoes que nao sao estetica: 1. 88% do ciclo e imobilidade. Efeito continuo vira ruido e a pessoa aprende a ignorar em dez segundos. E animacao sem pausa briga com a rolagem em aparelho sem aceleracao de composicao. 2. So `transform` e `opacity`, as duas propriedades que o compositor anima sem recalcular layout. Animar `inset` custaria um reflow por quadro. 3. `pointer-events:none`, senao o anel come o toque no botao justamente no instante em que ele chama a pessoa para tocar. A escala de 1,07 foi medida e nao chutada: em 1,14 o anel passava da largura da janela no telefone e ACRESCENTAVA rolagem horizontal a pagina. Se mexer neste numero, meca de novo. */ .ouro--ping::before{ content:"";position:absolute;inset:-7px;pointer-events:none; border:1px solid var(--ouro);border-radius:3px; animation:ping 5s cubic-bezier(.16,1,.3,1) infinite } @keyframes ping{ 0%,58%{transform:scale(1);opacity:0} 60%{transform:scale(1);opacity:.85} 100%{transform:scale(1.07);opacity:0} } @media (prefers-reduced-motion:reduce){ /* some o pulso, e nunca o acabamento: a moldura fixa continua ali */ .ouro--ping::before{animation:none;opacity:0} } /* botao claro, para usar dentro da secao escura */ .btn--claro{background:var(--areia);color:var(--ink);border-color:var(--areia)} .btn--claro::before{background:var(--branco)} .btn--claro:hover{color:var(--ink)} /* ---- Nivel 2: contorno. Moldura interna que se aproxima da externa ---- Gesto emprestado de convite impresso e etiqueta de perfumaria. E o unico lugar do site em que o caramelo aparece como moldura, e ainda assim com 1px e meia opacidade. */ .btn-linha{ position:relative; display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:56px;padding:16px 32px; font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.06em; color:var(--ink);background:transparent;cursor:pointer; border:1px solid var(--contorno);border-radius:2px; transition:border-color 300ms var(--ease-curta), background-color 300ms var(--ease-curta), letter-spacing var(--t-inter) var(--ease-suave); } .btn-linha::after{ content:"";position:absolute;inset:6px;pointer-events:none; border:1px solid transparent;border-radius:1px; transition:inset 460ms var(--ease-suave), border-color 320ms var(--ease-curta); } .btn-linha:hover{border-color:var(--ink);background-color:rgba(55,64,71,.05);letter-spacing:.075em} /* a moldura interna que se aproxima no hover: tinta de Petroleo, e nao oliva. Oliva aqui lia como risco amarelo em volta do rotulo. */ .btn-linha:hover::after{inset:3px;border-color:rgba(55,64,71,.38)} .btn-linha:active{background-color:rgba(55,64,71,.08);transition-duration:90ms} .btn-linha svg{width:16px;height:16px;fill:currentColor;flex-shrink:0} .btn-linha--claro{color:var(--claro-escuro);border-color:rgba(254,247,227,.42)} .btn-linha--claro:hover{border-color:var(--areia);background-color:rgba(252,241,221,.07)} /* ---- Nivel 4: link com seta que estica ---- A seta nao translada, ela abre. Transladar e gesto de aplicativo, esticar e gesto tipografico. Animar a largura de um traco de 1px nao custa nada e a ponta permanece ancorada. */ .seta{ position:relative;display:inline-block;flex-shrink:0; width:14px;height:1px;background:currentColor;margin-left:2px; transition:width var(--t-inter) var(--ease-saida); } /* A ponta gira em volta do PROPRIO CENTRO, e o centro dela fica na altura do traco. O v3 girava em volta do canto superior direito, com top:-3px: o vertice caia 3px acima do traco e a ponta aparecia solta, flutuando fora da haste. Era o defeito de todas as 23 setas do site, porque todas usam esta mesma regra. Com origem no centro, o vertice cai exatamente sobre a linha e a ponta avanca ~1,4px alem dela, que e o encaixe correto. */ .seta::after{ content:"";position:absolute;right:0;top:50%;width:7px;height:7px; border-top:1px solid currentColor;border-right:1px solid currentColor; transform:translateY(-50%) rotate(45deg); } .btn:hover .seta,.btn-linha:hover .seta,.link-seta:hover .seta, .card:hover .link-seta .seta{width:24px} /* ---- Nivel 3: link fantasma. Sublinhado que cresce do centro ---- Crescer do centro e nao da esquerda e a diferenca entre editorial e template de blog. 480ms porque a linha percorre pouca distancia e precisa ser lenta o bastante para ser lida como intencao. */ .link-luxo{ position:relative;display:inline-block; font-size:15px;letter-spacing:.04em;color:var(--ink2); padding:6px 0 6px; border-bottom:1px solid rgba(129,134,93,.6); transition:color 200ms var(--ease-curta); } .link-luxo::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--ink);transform:scaleX(0);transform-origin:50% 50%; transition:transform 480ms var(--ease-saida); } /* area de toque de 44px sem mexer no desenho: o retangulo invisivel cresce em volta do texto, centrado, entao a linha continua colada na palavra */ .link-luxo::before{ content:"";position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:44px; } .link-luxo:hover{color:var(--ink)} .link-luxo:hover::after{transform:scaleX(1)} .link-luxo--claro{color:var(--claro-escuro2);border-bottom-color:rgba(129,134,93,.75)} .link-luxo--claro::after{background:var(--areia)} .link-luxo--claro:hover{color:var(--areia)} /* microcopy sob o CTA: diz o que acontece depois do clique. Reduz o custo psicologico do toque, que e onde o funil vaza de verdade. */ .pos-cta{font-size:13px;color:var(--ink2);margin-top:14px;max-width:390px;line-height:1.5} .center .pos-cta{margin-left:auto;margin-right:auto} .pos-cta--claro{color:var(--claro-escuro2)} /* ========================================================================= BARRA DE AVISO INTERNO: removida nesta versao. Esta e a versao limpa, para apresentacao a cliente. ========================================================================= */ /* ---- header ---- */ header{ position:sticky;top:0;z-index:50; background:rgba(254,247,227,.94);backdrop-filter:blur(8px); border-bottom:1px solid var(--linha); transition:background-color 320ms var(--ease-suave),border-color 320ms var(--ease-suave); } .nav{display:flex;align-items:center;justify-content:space-between;height:var(--h-header); transition:height 320ms var(--ease-suave)} header.compacto{background:rgba(254,247,227,.985);border-bottom-color:rgba(55,64,71,.118)} header.compacto .nav{height:62px} header.compacto .logo{font-size:21px} .logo{display:inline-block;padding:10px 0;font-family:var(--serif);font-size:24px; letter-spacing:.02em;transition:font-size 320ms var(--ease-suave)} .logo em{font-style:italic} .menu{display:flex;gap:30px;align-items:center;list-style:none} .menu a{ display:inline-block;font-size:13.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--ink2);padding:12px 0;border-bottom:1px solid transparent; transition:color .2s,border-color .2s; } .menu a:hover,.menu a.ativo{color:var(--ink);border-bottom-color:var(--caramelo)} .nav .btn{min-height:46px;padding:12px 22px;font-size:13px} #burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink); width:46px;height:46px;align-items:center;justify-content:center;font-size:20px} /* ---- paginas ---- */ .page{display:none} .page.ativa{display:block;animation:entra 340ms var(--ease-saida) both} @keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ========================================================================= MIDIA Todo o acervo da clinica e vertical, entre 2:3, 3:4 e 9:16. Nao ha uma unica foto deitada. Por isso a grade se rende ao formato do acervo, e nao o contrario. modo integra: a imagem define a altura, nada e cortado. Pecas editoriais. modo recorte: o container define a altura, com corte ja decidido no build. ========================================================================= */ .midia{position:relative;overflow:hidden;border-radius:2px;background:var(--creme)} .midia img{display:block;width:100%;height:auto} .midia--recorte img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:var(--pos,50% 40%); } /* placeholder de foto ainda nao produzida: mantem o briefing visivel. Os dois hex do degrade sao os UNICOS valores de cor deste arquivo que nao sao token, e por isso ficam com a conta escrita ao lado: eles continuam a mesma rampa das superficies, Branco Antigo #FEF7E3 recebendo Bege Rosado #E6BCA3, so que mais adiante. O --creme e a rampa a 30%; estes sao 45% e 60%. Nao invente valor aqui: derive, senao entra cor fora da paleta pela porta dos fundos, que foi exatamente o defeito da versao anterior. */ .foto-pend{ background:linear-gradient(160deg,var(--creme),#F3DCC6 60%,#F0D4BD); border:1px solid var(--linha);border-radius:2px; display:flex;align-items:flex-end;position:relative; } .foto-pend span{ font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cafe); padding:14px 16px;border-top:1px solid var(--linha);width:100%; background:rgba(254,247,227,.72); } .foto-pend::before{ content:"";position:absolute;top:20px;left:20px;width:34px;height:34px; border:1px solid var(--caramelo);border-radius:50%;opacity:.55; } /* ---- hero ---- */ .hero{padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px)} .hero .grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(40px,5vw,72px);align-items:center} .hero h1{font-size:clamp(40px,5vw,64px);margin-bottom:24px} .hero p.sub{font-size:17.5px;color:var(--ink2);max-width:490px;margin-bottom:34px} .hero .acoes{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .hero .midia img{animation:assenta 2400ms var(--ease-saida) both} @keyframes assenta{from{transform:scale(1.06)}to{transform:scale(1)}} /* O acervo e todo vertical, entao a altura precisa de teto: sem ele, uma coluna larga multiplicada por 3/2 gera uma foto de mais de 1200px e a primeira dobra deixa de caber na tela. O teto e o que mantem o CTA visivel. */ .hero .midia{aspect-ratio:2/3;max-height:min(74vh,700px);width:100%} /* ---- barra de confianca ---- Invertida em relacao ao v2: o dado vem grande em serif e o rotulo pequeno embaixo. Filete vertical entre as colunas, que faz a faixa parecer papel timbrado em vez de rodape de sistema. */ .confianca{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha); padding:38px 0;background:var(--branco)} .confianca ul{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;text-align:center} .confianca li{font-size:13px;letter-spacing:.02em;color:var(--ink2);padding:0 22px; border-left:1px solid var(--linha);line-height:1.45} .confianca li:first-child{border-left:0} .confianca li b{display:block;font-family:var(--serif);font-size:clamp(22px,2.4vw,28px); font-weight:400;color:var(--ink);letter-spacing:0;margin-bottom:6px;line-height:1.1} /* ---- manifesto: o silencio da pagina ---- Sem eyebrow, porque era justamente o eyebrow que fazia esta secao parecer igual as outras cinco. No lugar, uma regua de 40px. */ .manifesto{padding:var(--sec-ancora) 0} .regua{width:40px;height:1px;background:var(--caramelo);margin:0 auto 40px} .manifesto p{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);line-height:1.25; max-width:21ch;margin:0 auto;font-weight:300} .manifesto p em{font-style:italic} /* ---- vitrine ---- */ .grupo-titulo{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cafe); font-weight:500;margin:var(--e7) 0 var(--e5);display:flex;align-items:center;gap:16px} .grupo-titulo::after{content:"";flex:1;height:1px;background:var(--linha)} /* auto-fill e nao auto-fit. Com auto-fit as trilhas vazias colapsam, e no v2 isso esticava a Rinomodelacao sozinha para os 1072px inteiros, com a foto travada em 190px de altura: sobrava 12% da imagem. E 240px em vez de 255px faz caber 4 colunas, o que elimina o card orfao no grupo Rosto. */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px} .card{ position:relative;isolation:isolate; background:var(--branco);border:1px solid var(--linha);border-radius:2px; padding:0 0 26px;display:flex;flex-direction:column; transition:transform 420ms var(--ease-saida), box-shadow 420ms var(--ease-saida), border-color 300ms var(--ease-curta); } .card .midia{aspect-ratio:3/4;border-bottom:1px solid var(--linha);border-radius:2px 2px 0 0} .card .midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1.001);transition:transform var(--t-foto) var(--ease-saida)} .card h3{font-size:22px;margin:22px 22px 8px} .card p{font-size:15px;line-height:1.6;color:var(--ink2);margin:0 22px 20px;flex:1} .card:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:rgba(129,134,93,.42)} .card:hover .midia img{transform:scale(1.045)} /* Nivel 4 no rodape do card. O ::before estica a area clicavel para o card inteiro, mantendo uma unica ancora semantica: bom para leitor de tela e bom para o Google. No v2 o unico alvo era um texto de 12,5px sem padding. */ .link-seta{ display:inline-flex;align-items:center;gap:9px; margin:0 22px;padding:8px 0; font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:500; color:var(--cafe);transition:color 200ms var(--ease-curta); } .link-seta::before{content:"";position:absolute;inset:0;z-index:2} .card:hover .link-seta{color:var(--ink)} .card .tag{ position:absolute;top:14px;left:14px;z-index:3;margin:0; font-size:11px;letter-spacing:.12em;text-transform:uppercase; background:rgba(55,64,71,1);backdrop-filter:blur(6px);color:var(--branco); padding:6px 11px;border-radius:2px; } /* o card de destaque ocupa duas colunas e deita, criando hierarquia real de produto em vez de sete retangulos identicos */ .card.destaque{grid-column:span 2;flex-direction:row;border-color:rgba(129,134,93,.5)} .card.destaque .midia{aspect-ratio:4/5;flex:0 0 44%;border-bottom:0;border-right:1px solid var(--linha); border-radius:2px 0 0 2px} .card.destaque .corpo{display:flex;flex-direction:column;justify-content:center;padding:26px 0} .card.destaque h3{font-size:25px;margin-top:0} /* ---- metodo: linha do tempo vertical ---- No v2 eram tres colunas iguais, o mesmo gesto da vitrine logo acima. O numeral vira o unico elemento decorativo grande da Home. */ .passos-linha{display:grid;grid-template-columns:auto 1fr;gap:0 var(--e6); position:relative;margin-top:var(--e7)} .passos-linha::before{content:"";position:absolute;left:41px;top:34px;bottom:34px; width:1px;background:var(--linha)} .passo{display:contents} .passo .num{ font-family:var(--serif);font-size:clamp(52px,6vw,84px);font-style:italic; color:var(--caramelo);line-height:.9;position:relative;z-index:1; padding:10px 0 30px;background:var(--creme);text-align:center;min-width:84px; } .passo .txt{padding:16px 0 34px} .passo h3{font-size:26px;margin-bottom:10px} .passo p{font-size:15.5px;color:var(--ink2);max-width:56ch} /* ---- secao escura: a unica inversao de fundo do site ---- Cai exatamente onde a pagina precisa de gravidade, que e a pessoa que assina o resultado. De quebra, resolve sozinha o problema dos tres fundos claros separados por menos de 4% de luminancia. */ .escuro{background:var(--ink);color:var(--claro-escuro2)} .escuro h2,.escuro h3{color:var(--areia)} .escuro .eyebrow{color:var(--claro-escuro2)} /* 6,08:1. Ver nota do --caramelo */ .escuro .grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5vw,72px);align-items:center} .escuro p{color:var(--claro-escuro2);max-width:56ch} .escuro .cred{font-size:13px;letter-spacing:.11em;text-transform:uppercase; color:var(--claro-escuro2);margin-bottom:22px} /* 6,08:1 */ .escuro h2{font-size:clamp(32px,3.6vw,46px);margin-bottom:18px} .escuro .bio p{font-size:16.5px;margin-bottom:14px} .escuro .midia{aspect-ratio:2/3;max-height:min(72vh,660px);max-width:100%} /* ---- selo de credencial ---- Moldura dupla fina. Sem brasao, sem louro, sem escudo: a moldura ja entrega "documento", e qualquer ilustracao derrubaria o registro. */ .selo{position:relative;display:inline-block;padding:18px 26px;text-align:center; border:1px solid var(--contorno);border-radius:2px} .selo::before{content:"";position:absolute;inset:4px;border:1px solid rgba(129,134,93,.35);border-radius:1px} .selo .nome{font-family:var(--serif);font-size:17px;display:block;margin-bottom:3px} .selo .reg{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cafe)} .escuro .selo{border-color:rgba(254,247,227,.34)} .escuro .selo::before{border-color:rgba(129,134,93,.55)} .escuro .selo .nome{color:var(--areia)} .escuro .selo .reg{color:var(--claro-escuro2)} /* 6,08:1 */ .selos{display:flex;gap:16px;flex-wrap:wrap;margin-top:var(--e6)} /* ---- certificados, pagina Sobre ---- O assunto aqui NAO e design de diploma: e geografia. O que muda a autoridade e a leitora saber que ela saiu do pais para aprender. Por isso o pais vem grande, em serifa, e o certificado entra embaixo como prova. Agrupado por pais, e nao numa grade unica de sete, por dois motivos: grade unica de sete le como parede de diplomas e apaga a viagem, que e a mensagem; e os quatro certificados de Moscou sao retrato enquanto os tres de Belgrado e da Coreia sao paisagem, entao a orientacao ja separa os grupos sozinha. Documento NUNCA e cortado: object-fit contain dentro de moldura de proporcao fixa, sobre fundo claro. Certificado cortado deixa de ser prova. */ .cert-pais + .cert-pais{margin-top:var(--e7)} .cert-pais .lugar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; padding-bottom:12px;border-bottom:1px solid var(--linha)} .cert-pais .lugar b{font-family:var(--serif);font-size:clamp(21px,2.1vw,26px); font-weight:400;color:var(--ink);letter-spacing:0} .cert-pais .lugar span{font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--cafe)} .cert-pais .nota{font-size:15px;color:var(--ink2);margin-top:14px;max-width:66ch} /* Quatro colunas para os retratos de Moscou e TRES para os paisagens de Belgrado e da Coreia. Em duas colunas, como estava, o certificado paisagem saía com quase o dobro da area do retrato, e a hierarquia visual invertia: Belgrado parecia mais importante que Moscou, que e onde estao as quatro formacoes mais fortes. Em tres colunas as duas familias ficam na mesma escala, e a coluna que sobra em cada grupo recebe texto em vez de vazio. */ .cert-grade{display:grid;gap:18px;margin-top:var(--e5)} .cert-grade--4{grid-template-columns:repeat(4,1fr)} .cert-grade--3{grid-template-columns:repeat(3,1fr)} .cert{display:flex;flex-direction:column} .cert .doc{ position:relative;background:var(--branco); border:1px solid var(--contorno);border-radius:2px; padding:10px;overflow:hidden; transition:border-color 320ms var(--ease-curta), box-shadow 320ms var(--ease-curta); } .cert .doc::after{content:"";position:absolute;inset:4px;pointer-events:none; border:1px solid rgba(129,134,93,.22);border-radius:1px} .cert:hover .doc{border-color:var(--caramelo);box-shadow:var(--sombra-1)} .cert-grade--4 .doc{aspect-ratio:3/4} .cert-grade--3 .doc{aspect-ratio:3/2} .cert .doc img{width:100%;height:100%;object-fit:contain;display:block} .cert h4{font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink); margin:14px 0 5px;letter-spacing:.01em;line-height:1.3} .cert p{font-size:13.5px;line-height:1.5;color:var(--ink2)} /* O bloco de texto que fecha a composicao no lugar onde sobraria vazio, na linha da Coreia, que tem um certificado so. Vazio ali leria como falta. */ .cert-fecho{display:flex;flex-direction:column;justify-content:center; padding:26px 30px;background:var(--branco);border-radius:2px; border:1px solid var(--linha)} .cert-fecho--largo{grid-column:span 2} .cert-fecho b{font-family:var(--serif);font-size:clamp(18px,1.8vw,22px); font-weight:400;line-height:1.25;margin-bottom:10px} /* MEDIDA DE LEITURA, 07/09/2026, e o bloco mais largo dos oito. Ele nao ocupa uma celula da grade de certificados, ocupa DUAS, por causa do `.cert-fecho--largo` logo acima, entao ja lia 99 caracteres por linha em 1280 e 113 em 1440, antes de qualquer escada de container. Como nada pode encolher no laptop, o teto tem de ficar acima dos 772px que ele mede em 1440, e 85ch da 778px. O que se ganha e travar o crescimento: sem isso ele chega a 1159px e 158 caracteres em 3840. Fica registrado que a medida que combinaria com a vizinha, a `.cert-pais .nota` de 66ch, cortaria 168px ja em 1280, e por isso nao foi usada. */ .cert-fecho p{font-size:14.5px;line-height:1.55;color:var(--ink2);max-width:85ch} /* O codigo de verificacao e o unico dado do conjunto que a leitora confere sozinha, entao ele ganha tratamento de dado e nao de texto corrido. */ .cert-fecho code{display:inline-block;margin-top:10px;font-family:var(--sans); font-size:13px;letter-spacing:.06em;color:var(--ink); background:var(--areia);padding:7px 11px;border-radius:2px; word-break:break-all} /* ---- bloco da avaliacao: o produto de entrada ---- */ .aval-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,4.5vw,64px);align-items:center} .aval-lista{list-style:none;margin-top:var(--e5)} .aval-lista li{display:grid;grid-template-columns:auto 1fr;gap:var(--e4); padding:18px 0;border-top:1px solid var(--linha)} .aval-lista li:last-child{border-bottom:1px solid var(--linha)} /* DEFEITO PRE-EXISTENTE, corrigido aqui em 19/08/2026. Este rotulo usava --caramelo em 15px sobre fundo claro, o que sempre reprovou AA: 3,61:1 com a paleta antiga e 3,57:1 com a nova, contra o minimo de 4,5 para corpo. Era violacao da propria regra escrita no token, que diz "nunca em texto pequeno sobre fundo claro". O --cafe resolve sem sair da familia: e o mesmo Verde Oliva, so que escurecido, e da 5,49:1. Medido nas duas versoes com a mesma auditoria: o site de producao ainda tem a falha, e fica relatado. */ .aval-lista .rot{font-family:var(--serif);font-size:15px;font-style:italic; color:var(--cafe);min-width:74px;padding-top:2px} .aval-lista .val{font-size:15.5px;color:var(--ink2)} .aval-lista .val b{color:var(--ink);font-weight:500} /* ---- objecao: unico componente com peso assimetrico, e funciona ---- */ .objecao{background:var(--areia);border-left:2px solid var(--caramelo); padding:24px 28px;border-radius:2px;margin:26px 0} .objecao b{font-family:var(--serif);font-size:18px;font-weight:500;font-style:italic; display:block;margin-bottom:8px} .objecao p{font-size:15px;color:var(--ink2)} .objecoes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--e7)} .objecoes .objecao{margin:0;background:var(--branco)} /* ---- prova de processo, no lugar das aspas vazias ---- Enquanto nao houver depoimento real coletado, moldura vazia comunica ausencia, e nao discricao. Prova de processo funciona sem um unico paciente e e exatamente o que a marca vende. */ .provas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:var(--e7);text-align:left} .prova{padding:28px 0 0;border-top:1px solid var(--linha)} .prova b{font-family:var(--serif);font-size:19px;font-weight:400;display:block;margin-bottom:8px} /* MEDIDA DE LEITURA, 07/09/2026. Este e o mais folgado dos oito, porque a `.provas` divide a largura em tres colunas e a coluna so chega a 597px em 3840. 58ch e o mesmo valor do `.sub-sec`, o paragrafo que abre esta secao, e do `.assina`, que tambem e texto de 14,5px: em vez de inventar numero, o cartao passa a ler com a largura de corpo padrao do site. So comeca a valer em 3440, porque ate 2560 a coluna e mais estreita que o teto. */ .prova p{font-size:14.5px;color:var(--ink2);max-width:58ch} /* ---- vip ---- */ .vip{border:1px solid var(--linha);background:var(--branco);border-radius:2px; padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:36px} .vip h3{font-size:25px;margin-bottom:8px} .vip p{font-size:15px;color:var(--ink2);max-width:520px} /* ---- acesso e discricao ---- */ .acesso-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,4.5vw,64px);align-items:center} .acesso-lista{list-style:none;margin-top:var(--e5)} /* MEDIDA DE LEITURA, 07/09/2026. Mesma construcao da `.paraquem li`: o `28px` entra somado FORA do `ch` porque `max-width` conta a caixa de borda e esses 28px sao a indentacao do marcador redondo, e nao texto. O texto fica em 62ch, que em 15,5px da 606px, a mesma familia do `.sub-sec` que abre a secao. O valor foi medido, e nao deduzido: 64ch deixava a linha exatamente em 85 caracteres, em cima do limite, e 62ch a leva para 83. O teto de 634px foi escolhido junto com o da `.regiao`, logo abaixo: as duas pecas se encostam por um filete horizontal cada, e dois filetes parando em pontos diferentes leriam como desalinho. Hoje elas medem igual em toda largura, e depois do teto continuam medindo igual. Nao morde em 1280 (566,2px) nem em 1440 (627,9px). */ .acesso-lista li{font-size:15.5px;color:var(--ink2);padding:13px 0 13px 28px; max-width:calc(62ch + 28px); position:relative;border-bottom:1px solid var(--linha)} .acesso-lista li::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px; border:1px solid var(--caramelo);border-radius:50%} .acesso-lista li b{color:var(--ink);font-weight:500} /* MEDIDA DE LEITURA, 07/09/2026. O `69,3ch` nao e valor de gosto, e conversao: ele existe para dar os mesmos 634px do teto da `.acesso-lista li` acima, e o numero e quebrado porque `ch` mede contra o corpo do proprio elemento, e aqui o corpo e 14,5px contra os 15,5px da lista. Fossem dois valores redondos, os dois filetes horizontais parariam em pontos diferentes acima de 1920. Nao morde em 1280 (566,2px) nem em 1440 (627,9px). Fica registrado que este paragrafo ja lia 87 caracteres por linha em 1440, ou seja, acima do alvo de 85 antes de qualquer teto: descer ate 85 exigiria cortar 26px no laptop, e a tarefa proibe. O teto congela a linha nesses 87 e trava o crescimento, que ia a 128 em 3840. */ .regiao{font-size:14.5px;color:var(--ink2);margin-top:var(--e5);padding-top:var(--e5); max-width:69.3ch;border-top:1px solid var(--linha)} /* ---- localizacao ---- */ .local .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4.5vw,56px);align-items:center} .local iframe{width:100%;height:400px;border:1px solid var(--linha);border-radius:2px; filter:saturate(.6) contrast(.96)} .local h2{font-size:clamp(28px,3vw,40px);margin-bottom:20px} /* MEDIDA DE LEITURA, 07/09/2026. 64ch em 15,5px da 626px, que e exatamente a largura da `.encaminha`, o outro bloco de 15,5px do site: mesmo corpo, mesma medida. O bloco carrega endereco, CEP e horario, entao o teto foi conferido na tela e nao so na conta: nenhuma linha de endereco passa a quebrar por causa dele, porque as linhas cadastrais sao curtas e separadas por `
`, e quem chega a duas linhas e so a prosa do atendimento em Sao Paulo. Nao morde em 1280 (540px) nem em 1440 (602px). */ .dados p{font-size:15.5px;color:var(--ink2);margin-bottom:12px;max-width:64ch} .dados b{color:var(--ink);font-weight:500} .acoes{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap;align-items:center} .titulo-sec{font-size:clamp(30px,3.6vw,44px);max-width:15ch;margin-bottom:16px} .titulo-sec.largo{max-width:20ch} .center .titulo-sec{margin-left:auto;margin-right:auto} .sub-sec{font-size:16.5px;color:var(--ink2);max-width:58ch} .center .sub-sec{margin-left:auto;margin-right:auto} /* ========================================================================= PAGINA DE PROCEDIMENTOS ========================================================================= */ .chips{ position:sticky;top:var(--h-header);z-index:40; background:rgba(254,247,227,.96);backdrop-filter:blur(8px); border-bottom:1px solid var(--linha);overflow-x:auto; scrollbar-width:none; /* mascara nas pontas: e o que avisa que ha mais chips fora da tela. No v2 o overflow existia sem nenhuma indicacao visual. */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%); } .chips::-webkit-scrollbar{display:none} /* A barra de chips e sangrada, mas a FILA dentro dela e o mesmo container da pagina, senao o primeiro chip nao alinha com o titulo logo abaixo. Por isso ela consome `--container` e `--gutter`, e nao numero proprio. */ .chips ul{display:flex;gap:8px;list-style:none;padding:12px var(--gutter); max-width:var(--container);margin:0 auto} .chips a{ display:inline-flex;align-items:center;min-height:44px;padding:0 18px; font-size:13px;letter-spacing:.04em;white-space:nowrap; border:1px solid var(--contorno);border-radius:999px;color:var(--ink2); transition:background-color 220ms var(--ease-curta),color 220ms var(--ease-curta), border-color 220ms var(--ease-curta); } .chips a:hover{border-color:var(--ink);color:var(--ink)} .chips a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--branco)} .proc{border-top:1px solid var(--linha);padding:clamp(64px,7.5vw,96px) 0; scroll-margin-top:calc(var(--h-header) + 70px)} .proc.sec-areia{border-top:0} .proc .eyebrow{margin-bottom:14px} .proc .grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,4.5vw,56px);align-items:start} .proc .gancho{font-size:clamp(27px,3.2vw,38px);margin-bottom:16px;max-width:18ch} .proc .oque{font-size:16px;color:var(--ink2);max-width:58ch} .proc .midia{aspect-ratio:4/5} /* a peca da coluna lateral do Hipro e vertical 9:16. Emoldurada no formato nativo e centralizada, em vez de esticada num container deitado como no v2. */ .proc .midia--vertical{aspect-ratio:9/16;max-width:340px;margin:0 auto} .paraquem{list-style:none;margin:22px 0 4px} /* MEDIDA DE LEITURA, 07/09/2026. Com o container subindo ate 2000px a coluna de texto das 16 chega a 936px aqui, e o item passa de 125 caracteres por linha. O `28px` somado FORA do `ch` nao e enfeite: `max-width` conta a caixa de borda, e os 28px de `padding-left` sao a indentacao do marcador redondo, que nao e texto. Sem somar, a medida real de leitura ficaria 28px menor que a declarada. Com a soma, o texto mede 64ch, que em 15px da 606px, a mesma familia dos vizinhos da coluna: o `.oque` mede 585px e a `.encaminha` 626px. O valor foi medido, e nao deduzido: 66ch dava 652px e ainda deixava a linha em 87 caracteres, acima do alvo. Com 64ch a linha cai para 80. Nao morde em 1280 (567px) nem em 1440 (632,1px, contra teto de 633,6px). Comeca a valer em 1920. */ .paraquem li{font-size:15px;color:var(--ink2);padding:12px 0 12px 28px;position:relative; max-width:calc(64ch + 28px); border-bottom:1px solid var(--linha)} .paraquem li::before{content:"";position:absolute;left:2px;top:20px;width:8px;height:8px; border:1px solid var(--caramelo);border-radius:50%} /* ---- box resumo ---- Melhor componente do v2. Muda pouco e ganha muito: o valor sai de sans 13,5px e vira serif 17px, o que o transforma de tabela de especificacao tecnica em ficha de dossie. E o rotulo sobe de 10,5px para 11,5px. */ .boxresumo{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:rgba(55,64,71,.165);border:1px solid rgba(55,64,71,.165); border-radius:2px;overflow:hidden;margin-top:26px; } .boxresumo div{background:var(--branco);padding:20px 20px 18px} .sec-areia .boxresumo div{background:var(--areia)} .boxresumo b{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--cafe);margin-bottom:8px;font-weight:500} .boxresumo span{display:block;font-family:var(--serif);font-size:17px;font-weight:400; line-height:1.35;color:var(--ink)} /* nota sob a grade: qualifica os quatro quadrantes de uma vez, em vez de encher cada valor de ressalva */ /* MEDIDA DE LEITURA, 07/09/2026, e este e o caso desconfortavel do conjunto. Em 12,5px a legenda ja lia 94 caracteres por linha em 1280 e 98 em 1440, ou seja, ela nascia longa e nao ficou longa por causa da escada de container. A regra da tarefa e que nada pode encolher abaixo de 1920, entao o valor nao pode descer ate a familia de leitura do projeto, que aqui daria 66ch, 521px, e cortaria 111px no laptop. Entao o teto tem de ficar logo acima dos 632,1px que a coluna mede em 1440, e o `80,4ch` e o numero medido, nao deduzido: ele da 634px, e a faixa util e estreita mesmo. Com 80,6ch, dois pixels acima, a legenda ja aceita mais uma palavra na primeira linha e salta de 98 para 105 caracteres; com 80,2ch ela morderia o laptop. O ganho e congelar a legenda nos mesmos 98 caracteres que ela ja tem em 1440, em vez de deixa-la ir a 157 em 3840. Fica registrado que ela continua acima do alvo de 85, e apertar mais e decisao do Marcos, porque mexe no que ele ja aprovou. */ .box-nota{font-size:12.5px;line-height:1.5;color:var(--ink2);margin-top:10px; max-width:80.4ch} /* 1024, e nao 921: e o par exato do `max-width:1023px` que colapsa a `.grid2` em uma coluna. Os dois tem de trocar juntos, senao existe uma faixa em que a coluna lateral fica grudada sem ter ao lado de que grudar. */ @media(min-width:1024px){.proc .col-lado{position:sticky;top:calc(var(--h-header) + 78px)}} /* ---- riscos ---- COMPONENTE RETIRADO DO SITE a pedido do Marcos, em 2026-08-16: risco e contraindicacao passam a ser tratados na anamnese e no plano por escrito, e nao na pagina de procedimentos. O estilo fica aqui, sem uso, porque restaurar os blocos e so devolver o HTML. Ver PROC-FAQ-R7 e PROC-INTRO-SUB, que continuam dizendo que o tema existe e onde ele e tratado. ---- */ .riscos{margin-top:26px;padding:20px 24px;border:1px solid var(--linha); border-radius:2px;background:var(--branco)} .sec-areia .riscos{background:var(--areia)} .riscos b{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--cafe);margin-bottom:8px;font-weight:500} .riscos p{font-size:14.5px;color:var(--ink2)} /* ---- FAQ ---- O
nativo entrega acessibilidade de graca e e indexavel. O sinal de "+" gira 90 graus e vira traco, em vez de trocar o glifo por "x" como no v2, o que fazia o icone pular de tamanho. */ .faq{max-width:780px;margin:var(--e7) auto 0} .faq details{border-bottom:1px solid var(--linha)} .faq summary{ font-family:var(--serif);font-size:19px;cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:20px; padding:22px 0;min-height:44px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";width:11px;height:11px;flex-shrink:0; background:linear-gradient(var(--caramelo),var(--caramelo)) center/11px 1px no-repeat, linear-gradient(var(--caramelo),var(--caramelo)) center/1px 11px no-repeat; transition:transform 420ms var(--ease-saida); } .faq details[open] summary::after{ transform:rotate(90deg); background:linear-gradient(var(--caramelo),var(--caramelo)) center/11px 1px no-repeat; } .faq details p{font-size:15px;color:var(--ink2);padding:0 0 24px;max-width:66ch} /* ========================================================================= RODAPE ========================================================================= */ footer{background:var(--ink);color:var(--claro-escuro2);padding:72px 0 34px;font-size:14px} footer .cols{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:44px;margin-bottom:48px} footer h4{font-family:var(--serif);color:var(--areia);font-size:19px;font-weight:400;margin-bottom:16px} footer .flogo{font-family:var(--serif);font-size:26px;color:var(--areia);margin-bottom:14px;display:block} footer .flogo em{font-style:italic} footer p,footer a{color:var(--claro-escuro2);font-size:14px;line-height:1.75} footer a{transition:color 200ms var(--ease-curta)} footer a:hover{color:var(--areia)} footer ul{list-style:none} /* alvo de toque: 39px no desktop, 47px no celular, onde o dedo e o ponteiro */ footer li a{display:inline-block;padding:8px 0} @media(max-width:1023px){footer li a{padding:12px 0}} /* Grid de tres colunas, e nao flex com space-between: o item do meio precisa ficar no centro da LINHA, e nao no meio do espaco que sobra entre dois vizinhos de larguras diferentes. Com 1fr/auto/1fr o centro e real. */ footer .base{border-top:1px solid rgba(252,241,221,.14);padding-top:26px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:var(--e5);font-size:12.5px;color:var(--rodape-base)} footer .base > :nth-child(1){justify-self:start;text-align:left} footer .base > :nth-child(2){justify-self:center;text-align:center} footer .base > :nth-child(3){justify-self:end;text-align:right} footer .base a{font-size:12.5px;color:var(--rodape-base)} /* Os numeros de inscricao no CRBM sao links de conferencia. Sem sublinhado eles nao se anunciam como clicaveis, porque o reset global zera text-decoration e no rodape nao ha outra pista de cor. */ footer .base a.reg-link{text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(252,241,221,.38)} footer .base a.reg-link:hover{text-decoration-color:currentColor} footer .base a:hover{color:var(--claro-escuro2)} /* ========================================================================= CASO CONDUZIDO Entrou em 2026-08-17. Substitui a pagina de Casos que foi descartada. Le como METODO, e nunca como prova: sem aspas, sem foto, sem moldura de depoimento, sem numeracao, sem data e sem contador. O relatorio de UX e explicito quanto a isso: a autoridade de HOME-09 vem inteira da palavra "verificar", e caso narrado nao e verificavel. Se este componente parecer prova, ele contamina o bloco vizinho. A nota final e obrigatoria e NAO pode ficar discreta: e ela que separa narrativa composta de depoimento fabricado. ========================================================================= */ .caso{border-top:1px solid var(--linha);padding-top:var(--e6); margin-top:var(--e7);max-width:70ch;text-align:left} .caso h3{font-family:var(--serif);font-weight:400; font-size:clamp(21px,2.2vw,27px);line-height:1.25; color:var(--ink);margin-bottom:var(--e4)} .caso p{font-size:16.5px;line-height:1.75;color:var(--ink2); margin-bottom:var(--e3)} /* o fecho e a unica linha em serifa: e a voz da clinica, e nao a narracao */ .caso .caso-fecho{font-family:var(--serif);font-style:italic; font-size:clamp(18px,1.9vw,21px);line-height:1.45; color:var(--ink);border-left:2px solid var(--cafe); padding-left:var(--e4);margin:var(--e5) 0 var(--e5)} .caso .caso-nota{font-size:13px;line-height:1.65;color:var(--ink2)} /* na Home o bloco fica solto e centralizado no wrap; nos procedimentos ele herda a coluna da grid2, e por isso nao leva margem automatica la */ .caso--solto{margin-left:auto;margin-right:auto} /* ========================================================================= PAGINA DE PRIVACIDADE Entrou em 2026-08-17. Pagina de leitura, e nao de venda: nenhum componente novo alem de tipografia e ritmo. Medida de linha travada em 70ch, que e o limite acima do qual o olho perde a linha seguinte em texto corrido longo. ========================================================================= */ .priv h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,26px); line-height:1.25;margin:var(--e6) 0 var(--e3);color:var(--ink)} .priv h2:first-child{margin-top:0} .priv p{font-size:16.5px;line-height:1.75;color:var(--ink2); margin-bottom:var(--e3);max-width:70ch} .priv b{color:var(--ink);font-weight:600} .priv a{color:var(--cafe);text-decoration:underline;text-underline-offset:3px} .priv-lista{list-style:none;margin:0 0 var(--e3);padding:0;max-width:70ch} .priv-lista li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.75; color:var(--ink2);margin-bottom:var(--e2)} /* traco em vez de bolinha: o site nao usa marcador redondo em lugar nenhum */ .priv-lista li::before{content:"";position:absolute;left:0;top:14px; width:8px;height:1px;background:var(--cafe)} /* ========================================================================= ACOES FLUTUANTES O circulo verde #1FAF38 do v2 era a unica cor saturada do site inteiro e dizia varejo, nao boutique. O glifo do WhatsApp e reconhecivel sem a cor de marca, pelo mesmo motivo que o icone do Instagram no rodape dispensa o degrade. Entao ele vira tinta. ========================================================================= */ #waFloat{ position:fixed;right:20px;bottom:20px;z-index:80; width:56px;height:56px;border-radius:50%;background:var(--ink); display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px rgba(55,64,71,.354); transition:transform 300ms var(--ease-saida),background-color 300ms var(--ease-curta); } /* o balao trocava de Petroleo para oliva no hover, um circulo de 56px mudando de cor de uma vez, sem a revelacao que o botao retangular tem. Era o lugar onde a troca de matiz mais aparecia. Agora e clareamento na mesma matiz. */ #waFloat:hover{transform:translateY(-2px);background:var(--ink-hover)} #waFloat svg{width:28px;height:28px;fill:var(--areia)} /* barra fixa mobile. Entra depois que o hero sai da tela, e nao de cara, o que leria como agressivo. Com ela presente o botao flutuante some: dois CTAs flutuantes ao mesmo tempo leem como desespero. */ .acao-fixa{display:none} /* 767, e nao 760: e a fronteira canonica entre telefone e tablet. Os quatro blocos que valiam 760 no site inteiro andaram juntos, senao a barra fixa apareceria numa largura e o balao do WhatsApp sumiria em outra. */ @media(max-width:767px){ .acao-fixa{ position:fixed;left:0;right:0;bottom:0;z-index:80; display:flex;gap:10px;align-items:center; padding:11px 14px calc(11px + env(safe-area-inset-bottom)); background:rgba(254,247,227,.94);backdrop-filter:blur(12px); border-top:1px solid var(--linha); transform:translateY(101%); transition:transform 420ms var(--ease-saida); } .acao-fixa.visivel{transform:translateY(0)} /* O filete dourado vai por DENTRO nesta barra, e nao em volta: colada na base da tela nao existe respiro externo para uma moldura. Sombra `inset` nao e cortada pelo `overflow:hidden` do botao, ao contrario do que aconteceria com um pseudo-elemento. */ .acao-fixa .btn{ box-shadow:inset 0 0 0 1px var(--branco), inset 0 0 0 2px var(--ouro) } /* o involucro vira o filho flexivel, e o botao ocupa ele inteiro */ .acao-fixa .ouro{flex:1} .acao-fixa .ouro .btn{width:100%} /* O ping aqui tem FIM, e essa e a unica diferenca em relacao ao ping da pagina. A barra, uma vez visivel, nao se esconde mais: um anel pulsando para sempre no rodape da tela durante a rolagem inteira e o oposto de chamar atencao, vira mobilia. Sao tres pulsos e silencio depois. Como a animacao so nasce quando o JS poe `.visivel`, os tres acontecem no instante em que a barra entra, que e quando ha o que anunciar. */ .acao-fixa.visivel .ouro::before{ content:"";position:absolute;inset:-5px;pointer-events:none; border:1px solid var(--ouro);border-radius:3px; animation:ping 5s cubic-bezier(.16,1,.3,1) 3 } .acao-fixa .btn,.acao-fixa .btn-linha{flex:1;min-height:50px;padding:13px 14px;font-size:14px} .acao-fixa .btn-linha{flex:0 0 40%} body{padding-bottom:76px} #waFloat{display:none} } /* ========================================================================= MOVIMENTO 18px de deslocamento, nunca mais que 24, senao o olho le "elemento voando" em vez de "elemento assentando". 820ms, o dobro do hover, porque revelacao e evento de ambiente e nao resposta a um gesto. 70ms de escalonamento entre irmaos, limitado a 6 para o atraso nunca passar de 420ms. ========================================================================= */ /* O conteudo NUNCA depende de JavaScript para ficar visivel. A regra so vale quando o proprio script marcou , o que significa que ele carregou e vai conseguir revelar de volta. Com JS desligado, com erro de script ou com o observer perdendo um elemento, o site aparece inteiro. Sem essa trava, um unico tropeco no script apaga metade da pagina. */ .js .revela{ opacity:0;transform:translateY(18px); transition:opacity var(--t-lento) var(--ease-saida), transform var(--t-lento) var(--ease-saida); transition-delay:calc(var(--i,0) * 70ms); } .js .revela.dentro{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } /* sem esta excecao, quem tem movimento reduzido ligado veria a pagina em branco, porque a classe deixa opacity:0 e a transicao para de rodar */ .js .revela{opacity:1!important;transform:none!important} .hero .midia img{animation:none!important} } /* ========================================================================= RESPONSIVO O v2 tinha uma unica media query, em 920px. Faltava o intervalo de tablet e faltava qualquer coisa abaixo de 480px. EM 07/09/2026 ESTA ESCADA FOI REFEITA. Os valores de antes, 420, 560, 640, 760, 920, 921 e 1080, eram improvisados: nenhum deles coincidia com a fronteira de um dispositivo real, entao o site sempre trocava de layout no meio de uma faixa de aparelhos, e nunca entre duas. O de/para, com o motivo de cada escolha, esta no comentario de cada bloco. A tabela que manda esta em conhecimento/responsividade/01-viewport-db-16-dispositivos.md. ========================================================================= */ /* 1279, e nao 1023: o que este bloco faz e derrubar os quatro certificados em fila para dois, e a nota abaixo diz que quatro em fila ficam ilegiveis antes de 1080. Descer para 1023 devolveria os quatro a faixa de 1024 a 1279, onde o container ainda e fluido e cada documento nao passa de 250px. */ @media(max-width:1279px){ .escuro .grid{grid-template-columns:.95fr 1.05fr;gap:40px} .card.destaque .midia{flex:0 0 40%} /* quatro certificados em fila ficam ilegiveis antes de 1080px: o documento precisa de largura para o nome dela aparecer, que e o que a leitora procura */ .cert-grade--4{grid-template-columns:repeat(2,1fr)} .cert-grade--3{grid-template-columns:repeat(2,1fr)} } /* 1023, e nao 767: este e o bloco que colapsa TODAS as grades de duas colunas do site, hero, secao escura, localizacao, grid2 das 16, avaliacao e acesso. Descer para 767 deixaria as duas colunas vivas na faixa de 768 a 1023, que e onde moram os tres iPads: o texto cairia para menos de 370px ao lado de uma foto, que e menos que a medida de leitura de 58ch declarada nele. Subir para 1023 e o certo, e leva junto o menu sanfona: o iPad passa a receber o menu de toque em vez do menu de hover, que num aparelho sem ponteiro nunca abriu bem. */ @media(max-width:1023px){ .menu{display:none} .menu.aberto{ display:flex;position:absolute;top:var(--h-header);left:0;right:0; background:var(--branco);flex-direction:column;padding:20px 24px 26px; border-bottom:1px solid var(--linha);gap:6px;align-items:flex-start; } .menu.aberto a{padding:12px 0;font-size:15px;letter-spacing:.08em} #burger{display:flex} .nav .btn{display:none} .hero .grid,.escuro .grid,.local .grid,.proc .grid2, .aval-grid,.acesso-grid{grid-template-columns:1fr;gap:36px} .hero .midia{max-width:460px} .escuro .midia{max-width:420px} .confianca ul{grid-template-columns:repeat(2,1fr);gap:24px 0} .confianca li:nth-child(3){border-left:0} .confianca li:nth-child(-n+2){padding-bottom:22px;border-bottom:1px solid var(--linha)} .objecoes,.provas{grid-template-columns:1fr;gap:16px} /* no celular o certificado ocupa a largura toda: e a unica forma de o documento continuar sendo prova em vez de selo decorativo */ .cert-grade--3{grid-template-columns:1fr} .cert-fecho--largo{grid-column:auto} .cert-fecho{padding:24px 24px} .provas{gap:26px} .vip{flex-direction:column;align-items:flex-start;padding:32px 28px} .card.destaque{grid-column:span 2;flex-direction:column} .card.destaque .midia{aspect-ratio:3/4;flex:none;border-right:0; border-bottom:1px solid var(--linha);border-radius:2px 2px 0 0} .card.destaque .corpo{padding:0} .proc .midia--vertical{max-width:300px} footer .cols{grid-template-columns:1fr 1fr;gap:36px} } /* 767, e nao 429: a regra central daqui e travar a vitrine em DUAS colunas, e ela precisa valer no telefone inteiro. Em 429 os cartoes voltariam ao `auto-fill` de 240px entre 430 e 767, onde ele resolve para uma coluna so em boa parte da faixa, e a vitrine de dezesseis viraria uma pilha. O preco e o rodape cair para uma coluna ja em 767, em vez de 640, o que num telefone deitado continua legivel. */ @media(max-width:767px){ .cards{grid-template-columns:1fr 1fr;gap:16px} .card.destaque{grid-column:span 2} .card h3{font-size:19px;margin:18px 16px 6px} .card p{font-size:14px;margin:0 16px 16px} .link-seta{margin:0 16px;font-size:12.5px} .passos-linha{gap:0 var(--e5)} .passos-linha::before{left:31px} .passo .num{min-width:64px;font-size:44px;padding:8px 0 22px} /* o mosaico tem as proprias regras responsivas mais abaixo, junto da definicao dele. Havia aqui um par de !important que vencia aquelas regras e colapsava a grade para uma coluna de 2px. */ footer .cols{grid-template-columns:1fr;gap:32px} /* empilhado e centralizado: as tres pontas do desktop viram tres linhas */ footer .base{grid-template-columns:1fr;gap:var(--e3);text-align:center} footer .base > :nth-child(1), footer .base > :nth-child(2), footer .base > :nth-child(3){justify-self:center;text-align:center} } /* 429, e a fronteira dos telefones estreitos: Fold dobrado, S23, SE, 14 Pro e Pixel 8 de um lado, 14 Pro Max do outro. O `.wrap{padding:0 18px}` que morava aqui SAIU. Ele existia para roubar 12px de respiro no telefone quando o `.wrap` tinha 24px fixo; hoje o respiro base ja e 16px, vindo de `--gutter`, e o override so criaria um decimo valor de gutter fora da tabela. */ @media(max-width:429px){ .hero h1{font-size:32px} .cards{grid-template-columns:1fr} .card.destaque{grid-column:span 1} .titulo-sec{font-size:27px} .manifesto p{font-size:26px} .acao-fixa .btn-linha{flex:0 0 42%;padding:13px 10px;font-size:13px} } /* ========================================================================= MOSAICO DO ESPACO A primeira versao dava proporcao fixa a cada peca dentro de uma grade de linhas iguais. As duas geometrias brigavam: a foto alta media 615px, a coluna do lado somava 804px, e sobrava um buraco de 315x394 no canto. Ocupacao real: 72%. Aqui a ordem se inverte. A GRADE define a geometria, com altura unica, e as pecas se acomodam por object-fit. O corte deixa de ser acidente e passa a ser decisao, e foto de ambiente aceita corte de um jeito que retrato nao aceitaria. Resultado: 100% de ocupacao e todas as bordas alinhadas. A peca vertical entra na composicao, e nao solta embaixo dela, que era o que a fazia flutuar no meio de 346px de sobra de cada lado. ========================================================================= */ .mosaico{ display:grid; grid-template-columns:1.25fr 1.15fr .8fr .8fr; grid-template-rows:1fr 1fr; gap:16px; height:clamp(440px,50vw,600px); margin-top:var(--e7); } .mosaico>*{min-width:0;min-height:0} .mosaico .m-alta{grid-row:span 2} /* recepcao e sala de atendimento */ .mosaico .m-larga{grid-column:span 2} /* faixa de baixo, a direita */ .mosaico img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:var(--pos,50% 45%); } /* Abaixo de 1023px o `span 2` das pecas altas tem que sair. Mantido, ele consome duas das tres linhas e espreme as outras tres pecas para 10px de altura, que foi o que aconteceu no primeiro teste. Em duas colunas cada peca ocupa uma celula, e so a faixa de baixo atravessa. O valor era 920 e virou 1023 em 07/09/2026, junto com o resto das grades de varias colunas: quatro pecas em fila num iPad dariam 170px cada. */ @media(max-width:1023px){ .mosaico{ grid-template-columns:1fr 1fr; grid-template-rows:1.25fr 1.25fr .9fr; height:clamp(560px,112vw,820px); } .mosaico .m-alta{grid-row:auto} .mosaico .m-larga{grid-column:span 2} } /* 429, que e a fronteira canonica mais proxima do 560 antigo. Aqui a escolha nao muda geometria, so ritmo: o vao cai de 16 para 12px e o teto de altura baixa, e as duas coisas servem ao telefone estreito. Entre 430 e 767 o mosaico segue com as medidas do bloco de 1023, que ja sao proprias para ele. */ @media(max-width:429px){ .mosaico{gap:12px;height:clamp(500px,126vw,700px)} } /* Link dentro de texto corrido, usado so nas duas chamadas de conferencia de registro, no FAQ e na Sobre. Nao da para reaproveitar .link-luxo: ele e inline-block com padding e uma area de toque de 44px em ::before, que dentro de um paragrafo atropela as linhas de cima e de baixo. E o reset global (a{text-decoration:none}) deixaria o link invisivel no meio da frase. Mesmo tratamento visual que .priv a, que ja existia na pagina de Privacidade. */ .link-conf{color:var(--cafe);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(100,103,72,.5); transition:text-decoration-color 200ms var(--ease-curta)} .link-conf:hover{text-decoration-color:var(--cafe)} /* ========================================================================= BANNER DE CONSENTIMENTO DE COOKIES Entrou em 2026-08-20. Tres decisoes de desenho que sao exigencia legal e nao gosto, e que nao devem ser "melhoradas" depois: 1. Recusar custa o mesmo que aceitar. Os dois sao .btn-linha, mesmo tamanho, lado a lado. Recusar em link cinza menor e o padrao escuro que a ANPD trata como consentimento viciado. 2. Nao existe X, nao fecha por clique fora e nao fecha por rolagem. Fechar sem escolher seria consentimento tacito, que a LGPD nao aceita. 3. z-index 95, acima do #waFloat e da .acao-fixa, que ficam em 80. E enquanto o banner esta aberto os dois SOMEM, em vez de brigar por espaco no rodape do celular: sao 3 elementos fixos disputando a mesma faixa. ========================================================================= */ .consent{ position:fixed;left:0;right:0;bottom:0;z-index:95; display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--e5); padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background:rgba(254,247,227,.97);backdrop-filter:blur(12px); border-top:1px solid rgba(129,134,93,.42); box-shadow:0 -10px 30px rgba(55,64,71,.10); } .consent[hidden]{display:none} /* O titulo virou LINHA, e nao paragrafo proprio: um paragrafo so para dizer "Cookies" custava uma linha inteira de altura. Com o texto encurtado de 229 para cerca de 110 caracteres, o banner cabe em UMA linha no desktop. */ .consent-t{font-family:var(--serif);font-size:15px;color:var(--ink)} .consent-txt p{font-size:13.5px;line-height:1.55;color:var(--ink2);max-width:92ch} .consent-acoes{display:flex;gap:var(--e3);flex-shrink:0} /* .btn-linha nasceu para . Em