/* ===========================================================================
COI — Centro Oftalmológico Iguaçu
Folha de estilo única. Sem build, sem framework, sem dependência.
Cores medidas no logotipo em vetor e na foto da fachada.
Tipo: Archivo (display) + Atkinson Hyperlegible (texto, desenhada para
quem enxerga pouco).
=========================================================================== */
/* As fontes moram no proprio site (assets/fontes, licenca SIL OFL 1.1 ao lado): sem
ida ao Google a cada visita. So o alfabeto latino, que cobre o portugues. A Archivo e
variavel: um arquivo so serve os pesos 600 a 800. */
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:600 800; font-display:swap;
src:url("fontes/archivo.woff2") 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:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap;
src:url("fontes/atkinson-400.woff2") 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:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap;
src:url("fontes/atkinson-700.woff2") 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 }
:root{
/* --- cor --- */
--azul: #183475;
--tinta: #0E1F45;
--azul-claro: #A8B6DC;
--laranja: #DC4018;
--laranja-btn: #C4340F;
--laranja-texto: #A32A0B;
--papel: #FBFBFD;
--papel-2: #EFF2F9;
--papel-3: #E3E9F6;
--cinza: #434F6B;
--linha: #D4DAEA;
--branco: #FFFFFF;
/* --- tipo fluido: mínimo em 360px, máximo em 1440px --- */
--t--1: clamp(0.94rem, 0.91rem + 0.14vw, 1.02rem);
--t-0 : clamp(1.06rem, 1.02rem + 0.18vw, 1.16rem);
--t-1 : clamp(1.25rem, 1.17rem + 0.36vw, 1.48rem);
--t-2 : clamp(1.5rem, 1.35rem + 0.66vw, 1.94rem);
--t-3 : clamp(1.8rem, 1.54rem + 1.15vw, 2.55rem);
--t-4 : clamp(2.16rem, 1.73rem + 1.9vw, 3.34rem);
--t-5 : clamp(2.6rem, 1.9rem + 3.1vw, 4.4rem);
/* --- espaço --- */
--e-1:.5rem; --e-2:1rem; --e-3:1.5rem; --e-4:2.25rem;
--e-5:3.5rem; --e-6:5.5rem; --e-7:8rem;
--saida: cubic-bezier(.16,1,.3,1);
--calha: 8.5rem; /* largura da calha da esquerda */
--maxw: 78rem;
--topo: 5.6rem; /* altura do cabeçalho fixo */
--r: .5rem;
}
/* ---------- modo escuro ----------
Padrao: segue o sistema. O botao da barra de topo manda em cima disso.
Todos os tokens sao redefinidos aqui; nenhuma cor nasce dentro deste bloco. */
@media (prefers-color-scheme: dark){
:root:not([data-tema="claro"]){
--azul:#8FADEC; --tinta:#EAF0FB; --azul-claro:#AFBEDC;
--laranja:#FF7A45; --laranja-btn:#C4340F; --laranja-texto:#FF9E70;
--papel:#0C1526; --papel-2:#121E36; --papel-3:#1A2947;
--cinza:#AFBEDC; --linha:#26375C; --branco:#16233F;
}
}
:root[data-tema="escuro"]{
--azul:#8FADEC; --tinta:#EAF0FB; --azul-claro:#AFBEDC;
--laranja:#FF7A45; --laranja-btn:#C4340F; --laranja-texto:#FF9E70;
--papel:#0C1526; --papel-2:#121E36; --papel-3:#1A2947;
--cinza:#AFBEDC; --linha:#26375C; --branco:#16233F;
}
/* no escuro, as faixas escuras do tema claro precisam se separar do fundo */
@media (prefers-color-scheme: dark){
:root:not([data-tema="claro"]) .acess__abre,
:root:not([data-tema="claro"]) .acess__painel,
:root:not([data-tema="claro"]) .faixa--escura,
:root:not([data-tema="claro"]) .heroi-int,
:root:not([data-tema="claro"]) .numeros,
:root:not([data-tema="claro"]) .numeros li,
:root:not([data-tema="claro"]) .rodape{ background:#08101F; color:var(--tinta) }
:root:not([data-tema="claro"]) .cabecalho{ background:rgba(12,21,38,.985) }
:root:not([data-tema="claro"]) .numeros ul{ background:var(--linha) }
:root:not([data-tema="claro"]) .chamada{ background:#1B2E5C }
:root:not([data-tema="claro"]) .rodape__legal{ border-top-color:var(--linha) }
:root:not([data-tema="claro"]) .heroi__foto img,
:root:not([data-tema="claro"]) .partido__foto img,
:root:not([data-tema="claro"]) .etapa img{ filter:brightness(.88) }
}
:root[data-tema="escuro"] .acess__abre,
:root[data-tema="escuro"] .acess__painel,
:root[data-tema="escuro"] .faixa--escura,
:root[data-tema="escuro"] .heroi-int,
:root[data-tema="escuro"] .numeros,
:root[data-tema="escuro"] .numeros li,
:root[data-tema="escuro"] .rodape{ background:#08101F; color:var(--tinta) }
:root[data-tema="escuro"] .cabecalho{ background:rgba(12,21,38,.985) }
:root[data-tema="escuro"] .numeros ul{ background:var(--linha) }
:root[data-tema="escuro"] .chamada{ background:#1B2E5C }
:root[data-tema="escuro"] .rodape__legal{ border-top-color:var(--linha) }
:root[data-tema="escuro"] .heroi__foto img,
:root[data-tema="escuro"] .partido__foto img,
:root[data-tema="escuro"] .etapa img{ filter:brightness(.88) }
/* ---------- alto contraste (botão do painel de acessibilidade) ----------
Tudo vira preto e branco, com amarelo nos elementos de ação.
Os fundos escuros do tema normal viram preto, senão o texto some. */
html[data-contraste="alto"]{
--azul:#FFD75E; --tinta:#FFFFFF; --azul-claro:#FFFFFF;
--laranja:#FFD75E; --laranja-btn:#FFD75E; --laranja-texto:#FFD75E;
--papel:#000000; --papel-2:#000000; --papel-3:#000000;
--cinza:#FFFFFF; --linha:#FFFFFF; --branco:#000000;
}
html[data-contraste="alto"] body,
html[data-contraste="alto"] .acess__abre,
html[data-contraste="alto"] .acess__painel,
html[data-contraste="alto"] .cabecalho,
html[data-contraste="alto"] .faixa--escura,
html[data-contraste="alto"] .heroi-int,
html[data-contraste="alto"] .numeros,
html[data-contraste="alto"] .numeros li,
html[data-contraste="alto"] .rodape,
html[data-contraste="alto"] .etapa,
html[data-contraste="alto"] .cartao,
html[data-contraste="alto"] .medico,
html[data-contraste="alto"] .planos li,
html[data-contraste="alto"] .mapa,
html[data-contraste="alto"] .chamada{ background:#000; color:#fff }
html[data-contraste="alto"] .etapa,
html[data-contraste="alto"] .cartao,
html[data-contraste="alto"] .medico,
html[data-contraste="alto"] .planos li,
html[data-contraste="alto"] .chamada{ border:2px solid #fff; box-shadow:none }
html[data-contraste="alto"] .chamada::before{ display:none }
html[data-contraste="alto"] .numeros ul{ background:#fff }
html[data-contraste="alto"] .btn--laranja,
html[data-contraste="alto"] .btn--azul,
html[data-contraste="alto"] .btn--claro{ background:#FFD75E; color:#000 }
html[data-contraste="alto"] .btn--linha,
html[data-contraste="alto"] .btn--vazado{ background:#000; border-color:#FFD75E; color:#FFD75E }
html[data-contraste="alto"] .passos li::before{ background:#FFD75E; color:#000 }
html[data-contraste="alto"] .medico em{ background:#FFD75E; color:#000 }
html[data-contraste="alto"] .selo{ background:#FFD75E; color:#000; box-shadow:none }
html[data-contraste="alto"] .zap{ background:#FFD75E; color:#000; box-shadow:none;
border:2px solid #fff }
html[data-contraste="alto"] .ferr button[aria-pressed="true"]{ background:#FFD75E;
color:#000; border-color:#FFD75E }
html[data-contraste="alto"] .ferr button{ color:#fff; border-color:#fff; background:#000 }
html[data-contraste="alto"] .mapa__capa{ color:#fff; background:#000; border:2px solid #fff }
html[data-contraste="alto"] .acess__abre,
html[data-contraste="alto"] .acess__painel{ color:#fff; border:2px solid #fff }
html[data-contraste="alto"] img{ filter:grayscale(1) contrast(1.2) }
html[data-contraste="alto"] .faixa--escura .cab p,
html[data-contraste="alto"] .heroi-int p,
html[data-contraste="alto"] .rodape__legal{ color:#fff }
/* ---------- tamanho do texto (A− A A+) ---------- */
html{ font-size:112.5%; } /* 18px */
html[data-fonte="0"]{ font-size:100% }
html[data-fonte="2"]{ font-size:125% }
html[data-fonte="3"]{ font-size:137.5% }
/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topo) + 1rem);
-webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{
margin:0; background:var(--papel); color:var(--tinta);
font-family:"Atkinson Hyperlegible", system-ui, Segoe UI, Arial, sans-serif;
font-size:var(--t-0); line-height:1.62;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:Archivo, system-ui, Arial, sans-serif; font-weight:800;
letter-spacing:-.028em; line-height:1.04; margin:0; text-wrap:balance }
p{ margin:0; text-wrap:pretty }
a{ color:inherit }
img{ max-width:100%; display:block; height:auto }
ul,ol{ margin:0; padding:0 }
:focus-visible{ outline:3px solid var(--laranja-btn); outline-offset:3px; border-radius:3px }
html[data-contraste="alto"] :focus-visible{ outline-color:#00E0FF }
.pular{ position:absolute; left:-9999px }
.pular:focus{ position:fixed; left:1rem; top:1rem; z-index:200; background:var(--branco);
color:var(--tinta); padding:.8rem 1.1rem; border-radius:var(--r);
box-shadow:0 12px 30px -12px rgba(14,31,69,.55) }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* ---------- transição entre páginas: o piscar ----------
As pálpebras fecham sobre a página velha e abrem sobre a nova. 400 ms no total.
Navegador sem suporte troca de página normalmente. */
@media (prefers-reduced-motion:no-preference){
@view-transition{ navigation:auto }
::view-transition{ background:#0E1F45 }
::view-transition-old(root){ animation:palpebra-fecha .18s cubic-bezier(.7,0,.84,0) both }
::view-transition-new(root){ animation:palpebra-abre .24s var(--saida) .16s both }
}
html[data-contraste="alto"]::view-transition{ background:#000 }
/* o exame que vira página: o nome clicado vira o título da página do exame, e o olho em
corte da página Exames encolhe até o olhinho do lado. Os dois voam por cima do piscar. */
@media (prefers-reduced-motion:no-preference){
.exame__titulo{ view-transition-name:exame-titulo }
::view-transition-group(exame-titulo), ::view-transition-group(olho-corte){
animation-duration:.55s; animation-timing-function:cubic-bezier(.2,.7,.2,1) }
::view-transition-old(exame-titulo), ::view-transition-new(exame-titulo){
animation-duration:.55s; height:100%; object-fit:none; object-position:left center }
}
@media (prefers-reduced-motion:no-preference) and (min-width:62rem){
.explorador__olho > svg, .exame__olho > svg{ view-transition-name:olho-corte }
}
@keyframes palpebra-fecha{ to{ clip-path:inset(50% 0 50% 0) } }
@keyframes palpebra-abre{ from{ clip-path:inset(50% 0 50% 0) } }
/* o atributo hidden perde para qualquer display do autor; aqui ele manda */
[hidden]{ display:none !important }
/* ---------- grade ---------- */
.env{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto }
/* faixa com calha à esquerda: a coluna central já nasce quebrada */
.faixa{ padding-block:var(--e-6) }
.faixa__in{ display:grid; grid-template-columns:var(--calha) minmax(0,1fr); gap:0 var(--e-4);
align-items:start }
.faixa__marca{ position:sticky; top:calc(var(--topo) + 1.5rem);
font-family:Archivo; font-weight:700; font-size:.7rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--laranja-texto);
border-top:3px solid var(--laranja); padding-top:.6rem }
.faixa--escura{ background:var(--tinta); color:var(--branco) }
.faixa--escura .faixa__marca{ color:#FFB08A; border-top-color:var(--laranja) }
.faixa--clara{ background:var(--papel-2) }
@media (max-width:62rem){
.faixa__in{ grid-template-columns:minmax(0,1fr); gap:var(--e-2) }
.faixa__marca{ position:static }
}
/* texto no maior tamanho num celular estreito: palavra comprida quebra em vez de alargar a pagina */
.faixa__marca, .cab h2, .prosa h2{ overflow-wrap:break-word; hyphens:auto }
/* altura da janela que sobra entre o cabeçalho e os botões fixos do pé (Acessibilidade e
WhatsApp ocupam os 76 px de baixo): toda tela interativa cabe nela inteira, para ler e
mexer sem rolar. Com o celular deitado vira pouco: use max(17rem, var(--tela)). */
:root{ --tela:calc(100svh - var(--topo) - 4.75rem) }
.demo .faixa__in > div > *{ scroll-margin-top:calc(var(--topo) + .5rem) }
.cab{ max-width:44rem; margin-bottom:var(--e-4) }
.cab h2{ font-size:var(--t-3) }
.cab p{ margin-top:var(--e-2); font-size:var(--t-1); color:var(--cinza) }
.faixa--escura .cab p{ color:var(--azul-claro) }
/* ---------- acessibilidade: botão na lateral e painel ----------
Substitui a barra de topo (pedido da Dra. Carla, 30/09/2026). Fica no canto de baixo à
esquerda, espelhando o botão do WhatsApp: no PC com o nome, no celular só o ícone.
(Uma aba no meio da borda esquerda cobria o começo dos títulos no PC.) O painel é um
popover nativo e abre logo acima do botão. */
.acess__abre{ position:fixed; z-index:95; left:1rem; bottom:1rem;
display:inline-flex; align-items:center; gap:.55rem;
padding:.85rem 1.15rem; border:0; border-radius:2rem; cursor:pointer;
background:var(--tinta); color:#fff; font:700 .8rem Archivo, Arial, sans-serif;
box-shadow:0 0 0 2px #fff, 0 10px 26px -12px rgba(14,31,69,.7) }
.acess__abre svg{ width:1.3rem; height:1.3rem; flex:0 0 auto }
.acess__abre{ font-size:.95rem }
.acess__abre:hover, .acess__abre[aria-expanded="true"]{ background:#22315C }
.acess__abre:focus-visible{ outline:3px solid var(--laranja); outline-offset:2px }
.acess__painel{ position:fixed; inset:auto; left:1rem; bottom:5rem;
margin:0; width:min(19rem, calc(100vw - 2rem)); max-height:calc(100svh - 6rem); overflow:auto;
padding:1rem 1.1rem 1.2rem; border:1px solid #2A3C6E; border-radius:var(--r);
background:var(--tinta); color:#fff; box-shadow:0 24px 50px -20px rgba(0,0,0,.6) }
.acess__painel[hidden]{ display:none }
.acess__cab{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
margin-bottom:.4rem }
.acess__cab h2{ font-size:1.1rem; color:#fff; margin:0 }
.acess__fecha{ display:inline-flex; align-items:center; justify-content:center; width:2.75rem;
height:2.75rem; margin-right:-.5rem; border:0; background:transparent; color:#fff;
border-radius:.4rem; cursor:pointer }
.acess__fecha svg{ width:1.3rem; height:1.3rem }
.acess__fecha:hover{ background:#22315C }
.acess__rot{ margin:.9rem 0 .45rem; font:700 .72rem Archivo, Arial, sans-serif;
letter-spacing:.12em; text-transform:uppercase; color:#A3B2D6 }
.ferr{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center }
.ferr[hidden]{ display:none }
.ferr + .ferr{ margin-top:.45rem }
.ferr button{ font:inherit; font-family:Archivo; font-weight:700; font-size:.9rem;
color:#fff; background:transparent; border:1px solid #3B4C7C; min-height:2.75rem;
border-radius:.3rem; padding:.3rem .9rem; cursor:pointer; line-height:1.3 }
.ferr button:hover{ background:#22315C }
.ferr button[aria-pressed="true"]{ background:#fff; color:#0E1F45; border-color:#fff }
@media (max-width:34rem){
.acess__abre{ border-radius:50%; padding:.95rem }
.acess__abre span{ position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap }
}
/* ---------- cabeçalho ---------- */
.cabecalho{ position:sticky; top:0; z-index:100; background:rgba(251,251,253,.985);
border-bottom:1px solid var(--linha) }
html[data-contraste="alto"] .cabecalho{ background:#000 }
.cabecalho__in{ display:flex; align-items:center; gap:var(--e-3); height:var(--topo) }
.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto }
.marca img{ height:3.15rem; width:auto }
.marca span{ font-size:.82rem; line-height:1.2; color:var(--cinza); max-width:8rem;
border-left:1px solid var(--linha); padding-left:.7rem }
.menu{ margin-left:auto; display:flex; gap:.1rem; flex-wrap:nowrap; align-items:center }
.menu a{ text-decoration:none; font-size:1.02rem; padding:.55rem .7rem; border-radius:.35rem;
white-space:nowrap; transition:background-color .15s var(--saida) }
.menu a:hover{ background:var(--papel-2) }
.menu a[aria-current="page"]{ font-weight:700; box-shadow:inset 0 -3px 0 var(--laranja) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
font-family:Archivo; font-weight:700; font-size:.98rem; letter-spacing:-.01em;
text-decoration:none; padding:.8rem 1.3rem; border-radius:var(--r);
border:2px solid transparent; cursor:pointer;
transition:background-color .15s var(--saida), transform .15s var(--saida) }
.btn:hover{ transform:translateY(-1px) }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none } }
.btn--laranja{ background:var(--laranja-btn); color:#fff }
.btn--laranja:hover{ background:#A32A0B }
.btn--azul{ background:var(--azul); color:#fff }
.btn--azul:hover{ background:var(--tinta) }
.btn--linha{ border-color:var(--azul); color:var(--azul); background:transparent }
.btn--linha:hover{ background:var(--papel-2) }
.btn--claro{ background:#fff; color:#0E1F45 } /* fica sempre sobre faixa escura */
.btn--vazado{ border-color:currentColor; color:inherit; background:transparent }
.btn--vazado:hover{ background:rgba(255,255,255,.12) }
.btn--g{ font-size:1.08rem; padding:.95rem 1.6rem }
.cabecalho .btn{ flex:0 0 auto; padding:.72rem 1.15rem; font-size:1rem }
/* ---------- herói da home ---------- */
.heroi{ padding-block:var(--e-6) var(--e-5); overflow:hidden }
.heroi__in{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:var(--e-5); align-items:center }
.olho{ font-family:Archivo; font-weight:700; font-size:.74rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--laranja-texto); display:block;
margin-bottom:var(--e-2) }
.heroi h1{ font-size:var(--t-5); letter-spacing:-.042em }
.heroi h1 em{ font-style:normal; color:var(--azul) }
.heroi__sub{ margin-top:var(--e-3); font-size:var(--t-1); color:var(--cinza);
max-width:34rem }
.heroi__acoes{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--e-4) }
.heroi__nota{ margin-top:var(--e-3); font-size:var(--t--1); color:var(--cinza) }
.heroi__foto{ position:relative }
.heroi__foto img{ width:100%; border-radius:var(--r);
box-shadow:0 2px 4px rgba(14,31,69,.08), 0 30px 60px -30px rgba(14,31,69,.45) }
.selo{ position:absolute; left:-1.5rem; bottom:1.8rem; background:var(--laranja-btn);
color:#fff; font-family:Archivo; font-weight:800; letter-spacing:-.02em;
padding:.8rem 1.1rem; border-radius:var(--r); line-height:1.1; font-size:1.02rem;
box-shadow:0 16px 34px -16px rgba(163,42,11,.9) }
.selo small{ display:block; font-weight:600; font-size:.72rem; letter-spacing:.08em;
text-transform:uppercase; opacity:.9; margin-top:.2rem }
/* ---------- faixa de números ---------- */
.numeros{ background:var(--tinta); color:var(--branco) }
.numeros ul{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
gap:1px; background:#25376A }
.numeros li{ background:var(--tinta); padding:var(--e-3) var(--e-2) }
.numeros b{ display:block; font-family:Archivo; font-weight:800; font-size:var(--t-3);
letter-spacing:-.04em; line-height:1 }
.numeros b em{ font-style:normal; color:var(--laranja) }
.numeros span{ display:block; margin-top:.35rem; font-size:var(--t--1);
color:var(--azul-claro); line-height:1.35 }
@media (max-width:52rem){ .numeros ul{ grid-template-columns:repeat(2,1fr) } }
/* ---------- o caminho: as etapas se empilham (a assinatura) ---------- */
.caminho{ display:grid; gap:var(--e-2) }
.etapa{ position:sticky; top:calc(var(--topo) + .8rem + var(--i) * 3.3rem);
background:var(--branco); border:1px solid var(--linha); border-radius:var(--r);
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
overflow:hidden; box-shadow:0 2px 4px rgba(14,31,69,.06),
0 24px 50px -34px rgba(14,31,69,.5) }
.etapa__txt{ padding:1.15rem var(--e-4) 1.9rem;
display:grid; align-content:start; gap:0 }
.etapa__n{ font-family:Archivo; font-weight:800; font-size:.78rem; letter-spacing:.14em;
color:var(--laranja-texto); display:flex; align-items:center; gap:.6rem;
margin-bottom:var(--e-3); align-self:start }
.etapa__n::after{ content:""; flex:1; height:1px; background:var(--linha) }
.etapa h3{ font-size:var(--t-2) }
.etapa p{ margin-top:var(--e-2); color:var(--cinza) }
.etapa img{ width:100%; height:100%; object-fit:cover; min-height:11rem }
@media (max-width:62rem){
.etapa{ grid-template-columns:1fr; position:static }
.etapa img{ min-height:12rem; order:-1 }
}
html[data-contraste="alto"] .etapa{ position:static }
/* ---------- blocos partidos ---------- */
.partido{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--e-5); align-items:center }
.partido--inverso .partido__foto{ order:-1 }
.partido__foto img{ width:100%; border-radius:var(--r);
box-shadow:0 2px 4px rgba(14,31,69,.08), 0 26px 54px -30px rgba(14,31,69,.45) }
.partido h2{ font-size:var(--t-3) }
.partido p{ margin-top:var(--e-2); color:var(--cinza) }
.faixa--escura .partido p{ color:var(--azul-claro) }
@media (max-width:62rem){ .partido{ grid-template-columns:1fr; gap:var(--e-3) }
.partido--inverso .partido__foto{ order:0 } }
/* passos numerados de verdade (sequência) */
.passos{ list-style:none; display:grid; gap:var(--e-2); margin-top:var(--e-3);
counter-reset:p }
.passos li{ display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.2rem .8rem;
align-items:start; counter-increment:p }
.passos li > *{ grid-column:2 }
.passos li b + span{ display:block; color:var(--cinza) }
.passos li b{ display:block; margin-bottom:.15rem }
.passos li::before{ content:counter(p); grid-column:1; grid-row:1;
font-family:Archivo; font-weight:800; font-size:.86rem;
width:1.9rem; height:1.9rem; border-radius:50%;
display:grid; place-content:center; background:var(--azul); color:var(--papel) }
.faixa--escura .passos li::before{ background:var(--laranja-btn) }
/* ---------- índice de exames ---------- */
.indice{ border-top:2px solid var(--tinta) }
.indice a{ display:grid; grid-template-columns:4.2rem minmax(0,1.1fr) minmax(0,1.4fr) 1.4rem;
gap:var(--e-2); align-items:baseline; padding:.95rem .5rem;
border-bottom:1px solid var(--linha); text-decoration:none;
transition:background-color .15s var(--saida), padding-left .15s var(--saida) }
.indice a:hover{ background:var(--papel-2); padding-left:1rem }
.indice i{ font-style:normal; font-family:Archivo; font-weight:700; font-size:.72rem;
letter-spacing:.08em; color:var(--laranja-texto) }
.indice b{ font-family:Archivo; font-weight:700; font-size:var(--t-0);
letter-spacing:-.02em }
.indice span{ font-size:var(--t--1); color:var(--cinza) }
.indice u{ text-decoration:none; color:var(--azul); font-weight:700 }
@media (max-width:48rem){
.indice a{ grid-template-columns:3.4rem 1fr; gap:.2rem var(--e-2) }
.indice span{ grid-column:2 } .indice u{ display:none }
}
/* ---------- cartões ---------- */
.cartoes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
gap:var(--e-2) }
.cartao{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r);
padding:var(--e-3) }
.cartao h3{ font-size:var(--t-1); margin-bottom:.5rem }
.cartao p{ color:var(--cinza); font-size:var(--t--1) }
.andares ul{ list-style:none; display:grid; gap:.45rem; color:var(--cinza); font-size:var(--t--1) }
.andares li{ position:relative; padding-left:1.1rem }
.andares li::before{ content:""; position:absolute; left:0; top:.62em; width:.42rem; height:.42rem;
border-radius:50%; background:var(--laranja) }
.andares ul + p{ margin-top:.9rem; font-weight:700 }
.faixa--escura .cartao{ background:#16264F; border-color:#2A3C6E }
.faixa--escura .cartao p{ color:var(--azul-claro) }
/* ---------- médicos ---------- */
.medicos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(13.5rem,100%),1fr));
gap:var(--e-2) }
.medico{ background:var(--branco); border:2px solid var(--linha); border-radius:var(--r);
padding:var(--e-3); transition:border-color .15s var(--saida) }
.medico:hover{ border-color:var(--azul) }
.medico b{ display:block; font-family:Archivo; font-weight:700; font-size:1rem;
letter-spacing:-.02em; line-height:1.25 }
.medico span{ display:block; font-size:.86rem; color:var(--cinza); margin-top:.45rem;
white-space:nowrap }
.medico--dir{ border-color:var(--laranja); box-shadow:inset 0 0 0 1px var(--laranja) }
.medico em{ display:inline-block; font-style:normal; margin-top:.6rem;
font-family:Archivo; font-weight:700; font-size:.66rem; letter-spacing:.1em;
text-transform:uppercase; background:var(--laranja-btn); color:#fff;
padding:.18rem .5rem; border-radius:.2rem }
/* ---------- convênios ---------- */
.planos{ list-style:none; display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(11rem,100%),1fr)); gap:.5rem }
.planos li{ background:var(--branco); border:1px solid var(--linha);
border-radius:var(--r); padding:.62rem .9rem; font-weight:700; font-size:.95rem }
/* ---------- ficha de dados (endereço, horário) ---------- */
.ficha{ display:grid; gap:var(--e-2); margin:0 }
.ficha > div{ display:grid; grid-template-columns:7.5rem 1fr; gap:var(--e-2);
padding-block:.7rem; border-top:1px solid var(--linha) }
.ficha dt{ font-family:Archivo; font-weight:700; font-size:.72rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--cinza); padding-top:.2rem }
.ficha dd{ margin:0 }
.faixa--escura .ficha > div{ border-top-color:#2A3C6E }
.faixa--escura .ficha dt{ color:var(--azul-claro) }
@media (max-width:34rem){ .ficha > div{ grid-template-columns:1fr; gap:.1rem } }
/* ---------- mapa ---------- */
.mapa{ position:relative; overflow:hidden; border-radius:var(--r);
border:1px solid var(--linha); min-height:20rem; background:var(--papel-2) }
.mapa iframe{ display:block; width:100%; height:100%; min-height:20rem; border:0 }
.mapa__capa{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0;
margin:0; cursor:pointer; background:var(--papel-2); color:var(--azul);
font:inherit; font-family:Archivo; font-weight:700 }
.mapa__capa:hover{ background:var(--papel-3) }
.mapa--ativo .mapa__capa{ display:none }
.mapa--carregando .mapa__capa{ cursor:progress }
/* ---------- chamada final ---------- */
.chamada{ background:var(--azul); color:#fff; border-radius:var(--r);
padding:var(--e-4); display:grid;
grid-template-columns:minmax(0,1.4fr) auto; gap:var(--e-3) var(--e-4);
align-items:center; position:relative; overflow:hidden }
.chamada::before{ content:""; position:absolute; right:-8rem; top:-10rem;
width:26rem; height:26rem; border-radius:50%;
background:radial-gradient(circle at 42% 42%, rgba(220,64,24,.55), transparent 66%) }
.chamada > *{ position:relative }
.chamada h2{ font-size:var(--t-3) }
.chamada p{ margin-top:.6rem; color:#CBD7F2 }
@media (max-width:62rem){ .chamada{ grid-template-columns:1fr } }
/* ---------- rodapé ---------- */
.rodape{ background:var(--tinta); color:var(--azul-claro); padding-block:var(--e-4) var(--e-2);
font-size:var(--t--1); margin-top:var(--e-5) }
.rodape__grade{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; gap:var(--e-3) var(--e-4) }
.rodape__menu ul{ grid-template-columns:1fr 1fr; grid-auto-flow:column;
grid-template-rows:repeat(4,auto); column-gap:var(--e-3) }
.rodape img{ height:2.4rem; width:auto; margin-bottom:.75rem }
.rodape img{ display:block }
/* os títulos das colunas ocupam a mesma faixa que a logo: logo, "Horário" e "Páginas"
ficam centrados na mesma linha, e as listas começam na mesma altura do texto da logo */
.rodape h3{ font-family:Archivo; font-size:.72rem; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:#fff; margin:0 0 .75rem; height:2.4rem; display:flex; align-items:center }
.rodape ul{ list-style:none; display:grid; gap:.45rem }
.rodape a{ text-decoration:none }
.rodape a:hover{ color:#fff; text-decoration:underline }
.rodape__legal{ margin-top:var(--e-3); padding-top:var(--e-2); border-top:1px solid #2A3C6E;
display:grid; gap:.3rem; font-size:.8rem; color:#A3B2D6 }
.rodape__legal b{ color:#fff }
/* nome do diretor tecnico maior que o resto da linha legal (pedido da Dra. Carla, 30/09) */
.rodape__diretor{ font-size:1rem }
/* os dois botoes fixos (Acessibilidade e WhatsApp) nao cobrem o fim do rodape */
.rodape__legal{ padding-bottom:4.5rem }
@media (max-width:50rem){ .rodape__grade{ grid-template-columns:1fr 1fr } }
@media (max-width:34rem){ .rodape__grade{ grid-template-columns:1fr } }
/* ---------- botão flutuante do WhatsApp ---------- */
.zap{ position:fixed; right:1rem; bottom:1rem; z-index:90; display:inline-flex;
align-items:center; gap:.55rem; background:var(--laranja-btn); color:#fff;
font-family:Archivo; font-weight:700; font-size:.95rem; text-decoration:none;
padding:.85rem 1.15rem; border-radius:2rem;
box-shadow:0 14px 32px -12px rgba(163,42,11,.85) }
.zap svg{ width:1.25rem; height:1.25rem; flex:0 0 auto }
@media (max-width:34rem){ .zap span{ display:none } .zap{ padding:.95rem; border-radius:50% } }
/* ---------- herói interno ---------- */
.heroi-int{ background:var(--tinta); color:#fff; padding-block:var(--e-5) }
.heroi-int h1{ font-size:var(--t-4); max-width:22ch; hyphens:auto; overflow-wrap:break-word }
.heroi-int p{ margin-top:var(--e-2); color:var(--azul-claro); font-size:var(--t-1);
max-width:44rem }
.migalha{ font-size:.8rem; color:var(--azul-claro); margin-bottom:var(--e-2) }
.migalha a{ text-decoration:none; border-bottom:1px solid rgba(168,182,220,.5) }
/* ---------- prosa (páginas de texto) ---------- */
.prosa{ max-width:40rem }
.prosa > * + *{ margin-top:var(--e-2) }
.prosa h3{ font-size:var(--t-1); margin-top:var(--e-4) }
.prosa ul{ padding-left:1.2rem; list-style:disc }
.prosa li + li{ margin-top:.4rem }
.prosa a{ color:var(--azul); text-decoration-thickness:2px; text-underline-offset:3px }
/* botão dentro de texto corrido: a cor do link não pode vencer a do botão */
.prosa a.btn{ text-decoration:none }
/* aviso de cuidados de um exame (angiofluoresceinografia): so tokens, vale no escuro e no alto contraste */
.aviso{ background:var(--papel-2); border:1px solid var(--linha); border-left:5px solid var(--laranja);
border-radius:var(--r); padding:var(--e-2) var(--e-3) }
.aviso > * + *{ margin-top:var(--e-1) }
.prosa a.btn--azul, .prosa a.btn--laranja{ color:#fff }
.prosa a.btn--linha{ color:var(--azul) }
/* ---------- revelação por rolagem (progressiva, nunca esconde de verdade) ---------- */
@supports (animation-timeline: view()) and (animation-range: entry 0%){
@media (prefers-reduced-motion:no-preference){
.revela{ animation:sobe linear both; animation-timeline:view();
animation-range: entry 12% cover 32% }
@keyframes sobe{ from{ opacity:0; transform:translateY(1.5rem) } }
}
}
@media (max-width:76rem){ :root{ --calha:6rem }
.marca span{ display:none } .menu a{ padding-inline:.5rem } }
@media (max-width:62rem){
.heroi__in{ grid-template-columns:1fr; gap:var(--e-4) }
.heroi__foto{ max-width:26rem }
.selo{ left:auto; right:1rem }
}
/* até 1056 px o menu inteiro não cabe na linha (em 1024 px o botão Agendar passava da
tela): sem JavaScript ele desce para a linha de baixo; com JavaScript, recolhe no botão */
@media (max-width:66rem){
.cabecalho__in{ flex-wrap:wrap; height:auto; padding-block:.6rem; row-gap:.4rem }
.menu{ order:3; width:100%; margin-left:0; overflow-x:auto; scrollbar-width:none;
padding-bottom:.15rem }
.menu::-webkit-scrollbar{ display:none }
:root{ --topo:8.4rem }
}
@media (max-width:36rem){
.marca span{ display:none }
:root{ --topo:7.6rem }
}
/* celular e tablet: o menu recolhe num botão e abre por cima da página, sem empurrar
nada. Sem JavaScript o botão não aparece e o menu continua na linha de baixo. */
.menu-abre{ display:none }
@media (max-width:66rem){
html.js{ --topo:4.6rem }
.js .cabecalho__in{ flex-wrap:nowrap; height:var(--topo); padding-block:0; position:relative }
.js .menu-abre:not([hidden]){ display:inline-flex; align-items:center; gap:.4rem; margin-left:auto;
font:700 .95rem Archivo, Arial, sans-serif; color:var(--tinta); background:transparent;
border:1px solid var(--linha); border-radius:var(--r); padding:.55rem .8rem; min-height:2.75rem; cursor:pointer }
.menu-abre svg{ width:1.3rem; height:1.3rem }
.js .cabecalho:not(.menu--aberto) .menu{ display:none }
.js .menu--aberto .menu{ position:absolute; top:100%; left:0; right:0; width:auto; margin:0;
display:flex; flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.25rem 1rem;
background:var(--papel); border-bottom:1px solid var(--linha);
box-shadow:0 18px 30px -18px rgba(14,31,69,.35); overflow:visible }
.js .menu--aberto .menu a{ padding:.8rem .4rem; border-bottom:1px solid var(--linha); border-radius:0 }
.js .menu--aberto .menu a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--laranja); padding-left:.8rem }
}
/* texto maior (A+): o menu inteiro deixa de caber antes - os 66rem da regra acima
contam 16 px, nao o tamanho escolhido. Recolhe em telas proporcionalmente maiores. */
@media (max-width:88rem){
html[data-fonte="2"].js{ --topo:4.6rem }
html[data-fonte="2"].js .cabecalho__in{ flex-wrap:nowrap; height:var(--topo); padding-block:0; position:relative }
html[data-fonte="2"].js .menu-abre:not([hidden]){ display:inline-flex; align-items:center; gap:.4rem; margin-left:auto;
font:700 .95rem Archivo, Arial, sans-serif; color:var(--tinta); background:transparent;
border:1px solid var(--linha); border-radius:var(--r); padding:.55rem .8rem; min-height:2.75rem; cursor:pointer }
.menu-abre svg{ width:1.3rem; height:1.3rem }
html[data-fonte="2"].js .cabecalho:not(.menu--aberto) .menu{ display:none }
html[data-fonte="2"].js .menu--aberto .menu{ position:absolute; top:100%; left:0; right:0; width:auto; margin:0;
display:flex; flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.25rem 1rem;
background:var(--papel); border-bottom:1px solid var(--linha);
box-shadow:0 18px 30px -18px rgba(14,31,69,.35); overflow:visible }
html[data-fonte="2"].js .menu--aberto .menu a{ padding:.8rem .4rem; border-bottom:1px solid var(--linha); border-radius:0 }
html[data-fonte="2"].js .menu--aberto .menu a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--laranja); padding-left:.8rem }
}
@media (max-width:91rem){
html[data-fonte="3"].js{ --topo:4.6rem }
html[data-fonte="3"].js .cabecalho__in{ flex-wrap:nowrap; height:var(--topo); padding-block:0; position:relative }
html[data-fonte="3"].js .menu-abre:not([hidden]){ display:inline-flex; align-items:center; gap:.4rem; margin-left:auto;
font:700 .95rem Archivo, Arial, sans-serif; color:var(--tinta); background:transparent;
border:1px solid var(--linha); border-radius:var(--r); padding:.55rem .8rem; min-height:2.75rem; cursor:pointer }
.menu-abre svg{ width:1.3rem; height:1.3rem }
html[data-fonte="3"].js .cabecalho:not(.menu--aberto) .menu{ display:none }
html[data-fonte="3"].js .menu--aberto .menu{ position:absolute; top:100%; left:0; right:0; width:auto; margin:0;
display:flex; flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.25rem 1rem;
background:var(--papel); border-bottom:1px solid var(--linha);
box-shadow:0 18px 30px -18px rgba(14,31,69,.35); overflow:visible }
html[data-fonte="3"].js .menu--aberto .menu a{ padding:.8rem .4rem; border-bottom:1px solid var(--linha); border-radius:0 }
html[data-fonte="3"].js .menu--aberto .menu a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--laranja); padding-left:.8rem }
}
html[data-contraste="alto"] .menu-abre{ color:#fff; border-color:#fff }
@media (max-width:36rem){
.js .cabecalho__in{ gap:.55rem }
.js .marca img{ height:2.7rem }
.js .menu-abre:not([hidden]){ padding:.5rem .65rem }
.js .cabecalho .btn{ padding:.6rem .85rem; font-size:.95rem }
}
@media (max-width:22.5rem){
.js .marca img{ height:2.3rem }
.menu-abre span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
/* ---------- alvo de toque: 44px onde o dedo alcanca ---------- */
.rodape ul{ gap:.15rem }
.rodape a{ display:inline-block; padding-block:.3rem }
.pular:focus{ min-height:2.75rem; display:inline-flex; align-items:center }
@media (pointer:coarse){
.rodape a, .menu a, .indice a{ min-height:2.75rem }
.rodape ul{ gap:.35rem }
}
/* =====================================================================
A ASSINATURA — o simulador de visão
A foto da própria rua, metade com a alteração e metade sem.
A troca de alteração é :has() puro: funciona sem JavaScript.
O JavaScript só liga o ao --x.
===================================================================== */
@property --x{ syntax:''; inherits:true; initial-value:58% }
.visao{ padding-block:var(--e-6) var(--e-6) }
.visao .cab h2{ max-width:30ch }
.visao .cab p{ color:var(--azul-claro) }
.lente{
--x:58%;
--f:none; /* filtro da camada alterada */
--veu:none; /* luz que espalha, na catarata */
--falha:none; /* vinheta e manchas */
--centro:0; /* a cópia borrada do meio, na degeneração macular */
}
/* ---------- as opções ---------- */
.lente__opcoes{ border:0; padding:0; margin:0 0 var(--e-3);
display:flex; flex-wrap:wrap; gap:.55rem }
.lente__opcoes label{
display:inline-flex; align-items:center; min-height:2.9rem;
padding:.6rem 1.15rem; border-radius:2rem;
border:2px solid #2E4176; background:#16264F; color:#fff;
font-family:Archivo; font-weight:700; font-size:var(--t--1); letter-spacing:.01em;
cursor:pointer;
transition:background .15s var(--saida), border-color .15s var(--saida),
color .15s var(--saida) }
.lente__opcoes label:hover{ border-color:var(--azul-claro) }
.lente__opcoes input:checked + label{ background:#fff; border-color:#fff;
color:#0E1F45 }
.lente__opcoes input:focus-visible + label{ outline:3px solid #FF8A57; outline-offset:3px }
/* ---------- o palco ---------- */
.lente__palco{ position:relative; aspect-ratio:16/10; overflow:hidden;
border-radius:var(--r); background:#0A1226;
box-shadow:0 1px 0 rgba(255,255,255,.08) inset,
0 18px 46px rgba(4,8,18,.5) }
.lente__palco img{ position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block }
.lente__filtro{ position:absolute; inset:0;
clip-path:inset(0 calc(100% - var(--x)) 0 0) }
.lente__filtro img{ filter:var(--f) }
/* a cópia borrada do meio: só aparece na degeneração macular */
.lente__centro{ position:absolute; inset:0; opacity:var(--centro);
background:url("../img/visao-rua.webp") center/cover no-repeat;
filter:blur(13px) saturate(.75);
-webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0 10%,
rgba(0,0,0,.58) 17%, transparent 27%);
mask-image:radial-gradient(circle at 50% 45%, #000 0 10%,
rgba(0,0,0,.58) 17%, transparent 27%) }
.lente__falha{ position:absolute; inset:0; background-image:var(--falha), var(--veu) }
.lente__fio{ position:absolute; top:0; bottom:0; left:var(--x); width:3px;
margin-left:-1.5px; background:#fff;
box-shadow:0 0 0 1px rgba(6,10,20,.45) }
/* ---------- as duas etiquetas ---------- */
.lente__etiq{ position:absolute; bottom:.85rem; z-index:2;
font-family:Archivo; font-weight:700; font-size:.72rem; letter-spacing:.12em;
text-transform:uppercase; color:#fff; background:rgba(8,13,26,.78);
padding:.42rem .7rem; border-radius:.3rem; pointer-events:none }
.lente__etiq--esq{ left:.85rem }
.lente__etiq--dir{ right:.85rem }
/* ---------- a alca ----------
O ocupa o palco inteiro e fica invisivel: quem o teclado e o
leitor de tela enxergam. A bolinha que se ve e o .lente__alca, posicionado em --x,
porque o thumb nativo nao centraliza na vertical de forma confiavel. */
.lente__arraste{ position:absolute; inset:0; z-index:3;
width:100%; height:100%; margin:0; padding:0;
background:transparent; border:0; -webkit-appearance:none; appearance:none;
cursor:ew-resize; touch-action:pan-y }
.lente__arraste::-webkit-slider-runnable-track{ height:100%; background:transparent }
.lente__arraste::-moz-range-track{ height:100%; background:transparent }
.lente__arraste::-webkit-slider-thumb{ -webkit-appearance:none;
width:3.5rem; height:3.5rem; border-radius:50%; opacity:0; cursor:ew-resize }
.lente__arraste::-moz-range-thumb{ width:3.5rem; height:3.5rem; border:0;
border-radius:50%; opacity:0; cursor:ew-resize }
.lente__arraste:focus-visible{ outline:3px solid #FF8A57; outline-offset:-3px;
border-radius:var(--r) }
.lente__alca{ position:absolute; z-index:2; left:var(--x); top:50%;
width:3.5rem; height:3.5rem; margin:-1.75rem 0 0 -1.75rem;
border-radius:50%; pointer-events:none;
background:#fff center/1.5rem no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230E1F45'%3E%3Cpath d='M8.5 5.2 2 12l6.5 6.8V14H16v4.8L22.5 12 16 5.2V10H8.5z'/%3E%3C/svg%3E");
border:3px solid #0E1F45;
box-shadow:0 3px 8px rgba(4,8,18,.45), 0 14px 34px rgba(4,8,18,.4) }
.lente__arraste:focus-visible ~ .lente__alca{ border-color:#FF8A57 }
/* no celular a alca nao responde bem ao dedo (no iPhone o controle so anda se o toque
comecar em cima dela). O Walter preferiu deixar a divisao parada: sem a instrucao de
arrastar, sem a bolinha com a seta dupla, e o dedo passa direto para rolar a pagina. */
@media (hover:none) and (pointer:coarse){
.lente__instrucao, .lente__alca{ display:none }
.lente__arraste{ pointer-events:none }
}
/* ---------- cada alteracao ----------
Intensidade contida de proposito: a Resolucao CFM 2.336/2023, Art. 11 §2 (e),
trata como sensacionalismo a informacao que cause medo, mesmo sendo verdadeira.
A ideia e a pessoa reconhecer o sintoma, nao levar um susto. */
.lente:has(#lt-catarata:checked){
--f:blur(1.9px) brightness(1.05) contrast(.7) sepia(.5) saturate(1.3);
--veu:radial-gradient(115% 88% at 55% 36%, rgba(255,226,158,.30),
rgba(255,231,172,.13) 44%, rgba(255,236,184,0) 72%) }
.lente:has(#lt-glaucoma:checked){
--f:saturate(.94);
--falha:radial-gradient(circle at 50% 47%, rgba(11,15,26,0) 26%,
rgba(11,15,26,.32) 37%, rgba(11,15,26,.78) 53%, rgba(11,15,26,.93) 70%) }
.lente:has(#lt-dmri:checked){
--centro:1;
--falha:radial-gradient(circle at 50% 45%, rgba(48,42,36,.7) 0 6%,
rgba(48,42,36,.36) 12%, rgba(48,42,36,0) 20%) }
.lente:has(#lt-retinopatia:checked){
--f:blur(1.1px) contrast(.88) saturate(.82);
--falha:
radial-gradient(circle at 34% 38%, rgba(20,13,9,.9) 0 3%, rgba(20,13,9,0) 4.6%),
radial-gradient(circle at 57% 54%, rgba(20,13,9,.85) 0 4.2%, rgba(20,13,9,0) 6.2%),
radial-gradient(circle at 68% 30%, rgba(20,13,9,.78) 0 2.2%, rgba(20,13,9,0) 3.6%),
radial-gradient(circle at 44% 64%, rgba(20,13,9,.74) 0 3.4%, rgba(20,13,9,0) 5.2%),
radial-gradient(circle at 23% 58%, rgba(20,13,9,.66) 0 1.8%, rgba(20,13,9,0) 3.1%),
radial-gradient(circle at 76% 62%, rgba(20,13,9,.7) 0 2.6%, rgba(20,13,9,0) 4.1%),
radial-gradient(circle at 61% 18%, rgba(20,13,9,.6) 0 1.5%, rgba(20,13,9,0) 2.7%) }
/* sem alteracao as duas metades sao iguais: as etiquetas so atrapalham */
.lente:has(#lt-normal:checked) .lente__etiq{ display:none }
/* ---------- o texto de cada alteração ---------- */
.lente__fala{ margin-top:var(--e-3) }
.lente__fala > div{ display:none; max-width:58ch }
.lente__fala > [data-para="normal"]{ display:block }
.lente__fala h3{ font-size:var(--t-1) }
.lente__fala p{ margin-top:.6rem; color:var(--azul-claro) }
.lente__exame{ color:#fff !important; font-weight:700 }
@supports selector(:has(*)){
.lente:has(:checked) .lente__fala > div{ display:none }
.lente:has(#lt-normal:checked) .lente__fala > [data-para="normal"],
.lente:has(#lt-catarata:checked) .lente__fala > [data-para="catarata"],
.lente:has(#lt-glaucoma:checked) .lente__fala > [data-para="glaucoma"],
.lente:has(#lt-dmri:checked) .lente__fala > [data-para="dmri"],
.lente:has(#lt-retinopatia:checked) .lente__fala > [data-para="retinopatia"]{
display:block }
}
.lente__nota{ margin-top:var(--e-3); max-width:58ch; font-size:var(--t--1);
color:var(--azul-claro); border-top:1px solid #2A3C6E; padding-top:.9rem }
.lente__acao{ margin-top:var(--e-3) }
/* ---------- o convite: acontece uma vez só ---------- */
@keyframes lente-convite{ from{ --x:96% } to{ --x:58% } }
@media (prefers-reduced-motion:no-preference){
.lente.e-convite{ animation:lente-convite 1.1s var(--saida) }
}
@media (max-width:52rem){
.lente__etiq{ font-size:.64rem; bottom:.6rem }
.lente__alca{ width:3rem; height:3rem; margin:-1.5rem 0 0 -1.5rem }
}
@media (max-width:34rem){
.lente__palco img, .lente__centro{ object-position:50% 45% }
.lente__centro{ background-position:50% 45% }
}
/* 03/10 (rodada 14): a secao cabe entre o cabecalho e os botoes fixos do pe (--tela).
Do tablet deitado para cima a explicacao vai para o lado da foto, e a foto se mede pela
altura que sobra depois do titulo e das alteracoes (--sim-cima, medido no site.js). */
@media (min-width:56rem){
.visao .cab{ max-width:none; margin-bottom:var(--e-3) }
.visao .cab h2{ max-width:none; font-size:var(--t-2) }
.visao .cab p{ margin-top:.4rem }
.lente{ display:grid; column-gap:var(--e-4);
grid-template-columns:minmax(0, calc(max(12rem, var(--tela) - var(--sim-cima, 11rem)) * 1.6)) minmax(17rem, 1fr);
grid-template-rows:auto auto auto auto 1fr }
.lente__opcoes{ grid-column:1 / -1; grid-row:1 }
.lente__palco{ grid-column:1; grid-row:2 / span 4 }
.lente__fala{ grid-column:2; grid-row:2; margin-top:0 }
.lente__fala > div{ max-width:none }
.lente__site{ grid-column:2; grid-row:3; margin-top:var(--e-3) }
.lente__acao{ grid-column:2; grid-row:4 }
}
@media (max-width:55.99rem){
.visao .cab{ margin-bottom:var(--e-3) }
.visao .cab h2{ font-size:var(--t-2) }
.lente__opcoes{ margin-bottom:var(--e-2) }
.lente__fala{ margin-top:var(--e-2) }
/* uma coluna so: a foto fica com no maximo 42% da altura util; a explicacao vem embaixo */
.lente__palco{ width:min(100%, calc(max(10rem, var(--tela) * .42) * 1.6)); margin-inline:auto }
}
@media (max-width:34rem){
.lente__fala p{ font-size:var(--t--1); margin-top:.4rem }
/* as alteracoes viram uma fila so, que corre para o lado com o dedo */
.lente__opcoes{ --sim-fila:3.6rem; height:var(--sim-fila); align-items:center;
min-width:0; flex-wrap:nowrap; gap:.4rem; overflow-x:auto; scrollbar-width:none;
margin-inline:calc(-1 * var(--margem, 1.25rem)); padding:0 var(--margem, 1.25rem);
scroll-padding-inline:var(--margem, 1.25rem) }
.lente__opcoes::-webkit-scrollbar{ display:none }
.lente__opcoes label{ flex:none; padding:.45rem .7rem; font-size:.82rem; min-height:2.6rem }
.visao .faixa__in > div, .lente{ min-width:0 } /* senao a fila alarga a pagina */
/* a explicacao mais longa nao cabe junto da foto na altura de um celular: a fila e a foto
ficam presas logo abaixo do cabecalho e o texto corre por baixo delas. Assim da para ler
e trocar a alteracao ao mesmo tempo, sem voltar a rolagem. */
.visao .faixa__in, .visao .faixa__in > div, .lente{ background:inherit }
.lente__opcoes{ position:sticky; top:var(--topo); z-index:4; background:inherit; margin-bottom:0 }
.lente__palco{ position:sticky; top:calc(var(--topo) + 3.6rem); z-index:3 }
}
@media (min-width:56rem) and (max-width:76rem){
.lente__fala p{ font-size:var(--t--1); margin-top:.4rem }
.visao .cab h2{ font-size:var(--t-1) }
/* as cinco alteracoes numa fila so: uma fila a menos e a foto ganha a altura dela */
.lente__opcoes{ gap:.4rem }
.lente__opcoes label{ padding:.5rem .8rem; font-size:.88rem; min-height:2.75rem }
}
/* a seccao e sempre escura; no alto contraste ela fica preta e as pastilhas
precisam do amarelo da propria regra da casa */
html[data-contraste="alto"] .visao{ background:#000 }
html[data-contraste="alto"] .lente__opcoes label{ background:#000; color:#fff;
border-color:#fff }
html[data-contraste="alto"] .lente__opcoes input:checked + label{ background:#FFD75E;
color:#000; border-color:#FFD75E }
html[data-contraste="alto"] .lente__alca{ background:#FFD75E; border-color:#000 }
html[data-contraste="alto"] .lente__fio{ background:#FFD75E }
html[data-contraste="alto"] .lente__etiq{ background:#000; border:1px solid #fff }
html[data-contraste="alto"] .lente__nota{ border-top-color:#fff }
/* =====================================================================
TERCEIRA DIREÇÃO — uma ideia por página (30/09/2026)
Ver propostas/v2/IDEIAS.md. Tudo aqui funciona sem JavaScript; o que o JS
faz é enfeitar. Nenhum token novo.
===================================================================== */
/* ---------- o olho em corte (Exames e páginas de exame) ---------- */
.olho-svg{ display:block; width:100%; height:auto; overflow:visible }
.olho-svg .esclera{ fill:var(--branco); stroke:var(--azul); stroke-width:4 }
.olho-svg .iris{ stroke:var(--azul); stroke-width:7; stroke-linecap:round }
.olho-svg .forma{ fill:var(--papel-3); stroke:var(--azul); stroke-width:3;
transition:fill .15s var(--saida), stroke .15s var(--saida) }
.olho-svg .vit{ fill:var(--papel-2); stroke:none }
.olho-svg .ret{ fill:none; stroke:#C4502A; stroke-width:6 }
.olho-svg .cor{ fill:none; stroke-width:4 }
.olho-svg .musc{ fill:none; stroke:var(--azul-claro); stroke-width:16; stroke-linecap:round }
.olho-svg .raio{ fill:none; stroke:var(--laranja); stroke-width:3; stroke-dasharray:9 7 }
.olho-svg .r-angulo .forma{ fill:transparent; stroke-dasharray:4 3 }
.olho-svg .hit{ fill:none; stroke:transparent; stroke-width:28; pointer-events:stroke }
.olho-svg .num circle{ fill:var(--azul); transition:fill .15s var(--saida) }
.olho-svg .num text{ fill:var(--papel); font:700 16px Archivo, Arial, sans-serif; text-anchor:middle }
.olho-svg a{ cursor:pointer; outline:none }
.olho-svg a:focus-visible .num circle{ stroke:var(--laranja-btn); stroke-width:5 }
/* a parte acesa: laranja por cima de tudo */
.olho-svg .acesa .forma,
.olho-svg a:hover .forma,
.olho-svg a:focus-visible .forma{ stroke:var(--laranja); fill:rgba(220,64,24,.22) }
.olho-svg .acesa .ret, .olho-svg a:hover .ret, .olho-svg a:focus-visible .ret,
.olho-svg .acesa .cor, .olho-svg a:hover .cor, .olho-svg a:focus-visible .cor,
.olho-svg .acesa .raio, .olho-svg a:hover .raio, .olho-svg a:focus-visible .raio{ fill:none }
.olho-svg .acesa .musc, .olho-svg a:hover .musc, .olho-svg a:focus-visible .musc{
stroke:var(--laranja); fill:none }
.olho-svg a:hover .num circle{ fill:var(--laranja-btn) }
.exame__olho .r:not(.acesa){ opacity:.4 }
.explorador{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:var(--e-5); align-items:start }
.explorador__olho{ margin:0; position:sticky; top:calc(var(--topo) + 1.5rem) }
.explorador__olho figcaption{ margin-top:var(--e-2); font-size:var(--t--1); color:var(--cinza) }
.partes{ list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-top:2px solid var(--tinta) }
.parte{ padding:var(--e-3) var(--e-2); border-bottom:1px solid var(--linha);
scroll-margin-top:calc(var(--topo) + 1.5rem);
transition:background-color .15s var(--saida) }
.parte h3{ font-size:var(--t-1); display:flex; align-items:center; gap:.7rem; min-width:0; overflow-wrap:anywhere }
.parte__n{ flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%;
display:grid; place-content:center; background:var(--azul); color:var(--papel);
font-size:.86rem; letter-spacing:0 }
.parte > p{ margin-top:.5rem; color:var(--cinza); font-size:var(--t--1); max-width:36rem }
.parte__exames{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin-top:var(--e-2) }
.parte__exames a{ display:inline-flex; align-items:center; min-height:2.5rem;
padding:.35rem .85rem; border:1px solid var(--linha); border-radius:2rem;
background:var(--branco); text-decoration:none; font-weight:700; font-size:.95rem;
transition:border-color .15s var(--saida) }
.parte__exames a::after{ content:"→"; margin-left:.45rem; color:var(--laranja-texto) }
.parte__exames a:hover{ border-color:var(--azul) }
.parte:target{ background:var(--papel-2); box-shadow:inset 4px 0 0 var(--laranja) }
@media (max-width:62rem){
.explorador{ grid-template-columns:minmax(0,1fr); gap:var(--e-3) }
.explorador__olho{ position:static; max-width:34rem }
}
/* ---------- de A a Z ---------- */
.az{ list-style:none; columns:3 min(15rem, 100%); column-gap:var(--e-4) }
.az li{ break-inside:avoid; border-bottom:1px solid var(--linha) }
.az a{ display:block; padding:.55rem 0; text-decoration:none; font-weight:700; overflow-wrap:break-word; hyphens:auto }
.az a:hover{ color:var(--azul); text-decoration:underline }
/* ---------- página de exame ---------- */
.exame{ display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,21rem);
gap:var(--e-5); align-items:start }
.prosa__t{ font-size:var(--t-2); margin-top:var(--e-4) }
.prosa > .prosa__t:first-child{ margin-top:0 }
.exame__lado{ display:grid; gap:var(--e-3) }
.exame__olho{ margin:0; background:var(--branco); border:1px solid var(--linha);
border-radius:var(--r); padding:var(--e-2) var(--e-2) var(--e-3) }
.exame__olho figcaption{ margin-top:.6rem; font-size:var(--t--1); color:var(--cinza) }
.exame__olho figcaption a{ color:var(--azul) }
.exame__foto{ width:100%; border-radius:var(--r) }
.ficha--curta > div{ grid-template-columns:6.4rem 1fr }
.ficha--curta dd{ font-size:var(--t--1) }
.exame__lado .btn{ width:100% }
.exame__rel{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--cinza); margin-bottom:-.6rem }
.exame__lista{ list-style:none; border-top:1px solid var(--linha) }
.exame__lista a{ display:block; padding:.6rem 0; border-bottom:1px solid var(--linha);
text-decoration:none; font-weight:700 }
.exame__lista a:hover{ color:var(--azul); text-decoration:underline }
@media (max-width:62rem){ .exame{ grid-template-columns:1fr } .exame__lado{ max-width:30rem } }
/* ---------- as demonstrações (sempre em faixa escura: cor literal, nunca token) ---------- */
.demo .cab p{ color:#CBD7F2 }
.lente__nota--clara{ color:var(--cinza); border-top-color:var(--linha) }
/* rodada 14: cada demonstração cabe numa tela. --t4 é a --tela com folga para o cabeçalho
real (102 px no PC, 84 px no celular), que é um pouco mais alto que a --topo. */
.foro, .campo, .lanterna, .amsler, .cores{ --t4:calc(var(--tela) - .75rem) }
.foro .cab, .campo .cab, .lanterna .cab, .amsler .cab, .cores .cab{ margin-bottom:var(--e-3) }
/* o foróptero: no celular as duas lentes lado a lado; no PC a fala fica ao lado delas */
.foro__lentes{ display:flex; gap:var(--e-3); padding-bottom:2.4rem }
.foro__lente{ --borrao:2px; position:relative; flex:none;
width:min(13rem, calc((100% - var(--e-3)) / 2), calc(var(--t4) - 12rem)); aspect-ratio:1;
border-radius:50%; border:12px solid #2A3C6E; background:#F4F1E8; color:#111;
display:grid; place-items:center; font:inherit; cursor:pointer; padding:0;
box-shadow:inset 0 0 0 2px #0B1530, 0 20px 40px -24px rgba(0,0,0,.8);
transition:border-color .15s var(--saida) }
.foro__lente:disabled{ cursor:default }
.foro__lente:not(:disabled):hover{ border-color:#C4340F }
.foro__letras{ font-family:Archivo, Arial, sans-serif; font-weight:700;
font-size:clamp(1.3rem,1rem + 1.6vw,2rem); letter-spacing:.14em; line-height:1.35;
text-align:center; filter:blur(var(--borrao)); transition:filter .25s var(--saida) }
.foro__lente b{ position:absolute; bottom:-2.3rem; left:50%; transform:translateX(-50%);
font-family:Archivo; font-weight:800; font-size:var(--t-2); color:#fff }
.foro__fala{ margin-top:var(--e-2); font-size:var(--t-1); color:#fff; max-width:40rem }
@media (prefers-reduced-motion:reduce){ .foro__letras{ transition:none } }
@media (min-width:62rem){
.foro{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--e-5); align-items:center }
.foro .cab{ grid-column:1 / -1 }
.foro__lentes{ gap:var(--e-4) }
.foro__lente{ width:min(13rem, calc(var(--t4) - 17rem)) }
.foro__fala{ margin-top:0; padding-bottom:2.4rem }
}
/* a campimetria */
/* a tela encolhe pela altura (16:10 no celular, 2:1 no PC); o JS lê a proporção real
para espalhar as luzes. A nota mora no .cab: a pessoa lê antes e depois rola uma vez. */
.campo__tela{ position:relative; aspect-ratio:16/10;
width:min(100%, 44rem, calc((max(15rem, var(--t4)) - 13.5rem) * 1.6));
background:#04070E; border:1px solid #2A3C6E; border-radius:var(--r); overflow:hidden }
.campo__mira{ position:absolute; left:50%; top:50%; width:1.4rem; height:1.4rem;
transform:translate(-50%,-50%) }
.campo__mira::before,.campo__mira::after{ content:""; position:absolute; background:#FFB08A }
.campo__mira::before{ left:0; right:0; top:50%; height:3px; margin-top:-1.5px }
.campo__mira::after{ top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px }
.campo__luz{ position:absolute; left:var(--lx,30%); top:var(--ly,30%); width:.6rem; height:.6rem;
margin:-.3rem 0 0 -.3rem; border-radius:50%; background:#fff; opacity:0;
box-shadow:0 0 10px 3px rgba(255,255,255,.55) }
.campo__luz.acesa{ opacity:1 }
.campo__acoes{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--e-2) }
.campo__fala{ margin-top:var(--e-1); font-size:var(--t--1); color:#fff; max-width:44rem }
.campo__acoes .btn:disabled{ opacity:.45; cursor:default; transform:none }
.campo .cab .lente__nota, .lanterna .cab .lente__nota{ margin-top:var(--e-2); padding-top:.6rem;
font-size:var(--t--1); color:var(--azul-claro) }
@media (max-width:61.99rem){
.campo__acoes .btn{ padding-inline:1rem }
}
@media (min-width:62rem){
.campo{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--e-4);
grid-template-areas:"cab cab" "tela acoes" "tela fala"; grid-template-rows:auto auto 1fr;
align-items:start }
.campo .cab{ grid-area:cab }
.campo__tela{ grid-area:tela; aspect-ratio:2/1;
width:min(44rem, 40vw, calc((var(--t4) - var(--campo-resto, 18.75rem)) * 2)) }
.campo__acoes{ grid-area:acoes; margin-top:0 }
.campo__fala{ grid-area:fala }
}
/* tela larga: a nota vai para o lado do texto, e sobra altura para a tela das luzes */
@media (min-width:75rem){
.campo{ --campo-resto:14.5rem }
.campo .cab{ max-width:none; display:grid; grid-template-columns:minmax(0,44rem) minmax(0,22rem);
column-gap:var(--e-4); align-items:end }
.campo .cab h2{ grid-column:1 / -1 }
.campo .cab .lente__nota{ grid-column:2; grid-row:2; margin-top:0 }
}
/* a lanterna do oftalmoscópio */
@property --raio{ syntax:''; inherits:true; initial-value:17% }
.lanterna__palco{ --lx:58%; --ly:50%; --raio:17%; position:relative;
width:min(100%, 30rem, max(12rem, var(--t4) - 4.5rem)); aspect-ratio:1; border-radius:50%; overflow:hidden;
background:#000; touch-action:manipulation; cursor:crosshair }
.lanterna__palco:focus-visible{ outline:3px solid #FFB08A; outline-offset:4px }
.retina-svg{ display:block; width:100%; height:100%; object-fit:cover }
.retina-svg .vaso{ fill:none; stroke-linecap:round }
.retina-svg .vaso--v{ stroke:#7A1C0E; stroke-width:5 }
.retina-svg .vaso--a{ stroke:#B23A1E; stroke-width:3.2 }
.lanterna__escuro{ display:none }
.js .lanterna__escuro{ display:block; position:absolute; inset:0; background:#000;
-webkit-mask:radial-gradient(circle at var(--lx) var(--ly), transparent 0 var(--raio), #000 calc(var(--raio) + 5%));
mask:radial-gradient(circle at var(--lx) var(--ly), transparent 0 var(--raio), #000 calc(var(--raio) + 5%)) }
.lanterna[data-pupila="dilatada"] .lanterna__palco{ --raio:38% }
@media (prefers-reduced-motion:no-preference){
.lanterna__palco{ transition:--raio .6s var(--saida) }
}
.lanterna__opcoes{ display:grid; grid-template-columns:repeat(2, max-content); gap:.6rem;
margin-top:var(--e-2) }
@media (max-width:30rem){
.lanterna__opcoes{ grid-template-columns:1fr 1fr }
.lanterna__opcoes .btn{ padding-inline:.6rem; text-align:center }
}
@media (min-width:62rem){
.lanterna{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--e-4);
grid-template-areas:"cab palco" "cab opcoes"; grid-template-rows:auto 1fr; align-items:start }
.lanterna .cab{ grid-area:cab; margin-bottom:0 }
.lanterna__palco{ grid-area:palco; width:min(30rem, 32vw, calc(var(--t4) - 4.5rem)) }
.lanterna__opcoes{ grid-area:opcoes }
}
.lanterna__opcoes .btn--linha{ border-color:#fff; color:#fff }
.lanterna__opcoes .btn--linha:hover{ background:rgba(255,255,255,.1) }
.lanterna__opcoes .btn:disabled{ opacity:.45; cursor:default; transform:none }
html[data-contraste="alto"] .lanterna__opcoes .btn--linha{ border-color:#FFD75E; color:#FFD75E; background:#000 }
/* ---------- a cirurgia por dentro do olho (sétima rodada) ----------
Sem animação: cinco desenhos parados, cada um com o seu texto ao lado. */
.cirurgia__palco{ display:none }
.atos{ list-style:none; display:grid; gap:var(--e-5) }
.ato{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:var(--e-4); align-items:center }
.cx{ display:block; width:100%; height:auto; border:1px solid var(--linha); border-radius:var(--r);
box-shadow:0 1px 2px rgba(14,31,69,.06), 0 18px 40px -24px rgba(14,31,69,.35) }
.cx-rot{ font:800 15px Archivo, Arial, sans-serif; fill:#0E1F45 }
.cx-sub{ font:400 13px "Atkinson Hyperlegible", Arial, sans-serif; fill:#3B4868 }
.cx-some{ display:none }
.cx-leg{ font:700 13px "Atkinson Hyperlegible", Arial, sans-serif; fill:#3B4868 }
/* no celular o desenho fica com uns 360 px: só os nomes, maiores, sem a explicação miúda
(que já está no texto ao lado) */
.cx-num{ display:none }
.cx-num text{ font:800 28px Archivo, Arial, sans-serif; fill:#fff }
.cx-nomes{ display:none }
/* no celular o desenho fica com uns 350 px e o nome escrito nele sairia com 9 px: o desenho
mostra so o numero na ponta de cada seta, e os nomes vao numa lista embaixo do texto */
@media (max-width:40rem){
.cx-rot, .cx-sub, .cx-leg{ display:none }
.cx-num{ display:inline }
.cx-nomes{ display:grid; gap:.3rem; list-style:none; margin-top:var(--e-2); padding:0;
font-size:.95rem; color:var(--cinza) }
.cx-nomes li{ display:flex; gap:.5rem; align-items:baseline }
.cx-nomes b{ flex:none; display:inline-grid; place-items:center; width:1.5rem; height:1.5rem;
border-radius:50%; background:#0E1F45; color:#fff; font:800 .8rem/1 Archivo, Arial, sans-serif }
.cx-nomes__janela{ font-style:italic }
}
html[data-contraste="alto"] .cx-nomes b{ background:#000; outline:2px solid #fff }
.ato__n{ font-family:Archivo; font-weight:800; font-size:.78rem; letter-spacing:.14em;
color:var(--laranja-texto) }
.ato h3{ font-size:var(--t-2); margin-top:.4rem }
.ato p:not(.ato__n){ margin-top:var(--e-2); color:var(--cinza) }
@media (max-width:48rem){ .ato{ grid-template-columns:1fr; gap:var(--e-2) } }
/* celular em pe (rodada 14): cada etapa tem o seu desenho, que fica preso logo abaixo do
cabecalho enquanto o texto dela corre por baixo - le o texto inteiro vendo o desenho.
A faixa da cor do fundo embaixo do desenho esconde o texto que passa por tras. */
@media (max-width:40rem){
.ato .cx{ position:sticky; top:var(--topo); z-index:2; box-shadow:0 .7rem 0 var(--papel-2) }
}
/* ---------- 404: a tabela de vista ---------- */
.tabela{ max-width:40rem; margin-inline:auto; text-align:center }
.tabela__l1{ font-family:Archivo; font-weight:800; line-height:1; color:var(--azul);
font-size:clamp(6rem,4rem + 10vw,11rem); filter:blur(3px) }
.tabela__l2{ font-size:var(--t-4); margin-top:var(--e-3) }
.tabela__l3{ margin-top:var(--e-3); font-size:var(--t-1); color:var(--cinza) }
.tabela__l4{ margin-top:var(--e-4); font-size:var(--t-0); font-weight:700 }
.tabela__l5{ margin-top:.6rem; font-size:var(--t--1) }
.tabela a{ color:var(--azul); text-underline-offset:3px }
html[data-contraste="alto"] .tabela__l1{ filter:none }
/* a lista acende o desenho, e o desenho acende a lista (so CSS, via :has) */
.explorador:has(#parte-cornea:hover, #parte-cornea:target, #parte-cornea:focus-within) .r-cornea .forma{ stroke:var(--laranja) }
.explorador:has(#parte-cornea:hover, #parte-cornea:target, #parte-cornea:focus-within) .r-cornea .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-cornea:hover, .r-cornea:focus-visible) #parte-cornea{ background:var(--papel-2) }
.explorador:has(#parte-angulo:hover, #parte-angulo:target, #parte-angulo:focus-within) .r-angulo .forma{ stroke:var(--laranja) }
.explorador:has(#parte-angulo:hover, #parte-angulo:target, #parte-angulo:focus-within) .r-angulo .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-angulo:hover, .r-angulo:focus-visible) #parte-angulo{ background:var(--papel-2) }
.explorador:has(#parte-cristalino:hover, #parte-cristalino:target, #parte-cristalino:focus-within) .r-cristalino .forma{ stroke:var(--laranja) }
.explorador:has(#parte-cristalino:hover, #parte-cristalino:target, #parte-cristalino:focus-within) .r-cristalino .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-cristalino:hover, .r-cristalino:focus-visible) #parte-cristalino{ background:var(--papel-2) }
.explorador:has(#parte-eixo:hover, #parte-eixo:target, #parte-eixo:focus-within) .r-eixo .forma{ stroke:var(--laranja) }
.explorador:has(#parte-eixo:hover, #parte-eixo:target, #parte-eixo:focus-within) .r-eixo .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-eixo:hover, .r-eixo:focus-visible) #parte-eixo{ background:var(--papel-2) }
.explorador:has(#parte-vitreo:hover, #parte-vitreo:target, #parte-vitreo:focus-within) .r-vitreo .forma{ stroke:var(--laranja) }
.explorador:has(#parte-vitreo:hover, #parte-vitreo:target, #parte-vitreo:focus-within) .r-vitreo .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-vitreo:hover, .r-vitreo:focus-visible) #parte-vitreo{ background:var(--papel-2) }
.explorador:has(#parte-retina:hover, #parte-retina:target, #parte-retina:focus-within) .r-retina .forma{ stroke:var(--laranja) }
.explorador:has(#parte-retina:hover, #parte-retina:target, #parte-retina:focus-within) .r-retina .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-retina:hover, .r-retina:focus-visible) #parte-retina{ background:var(--papel-2) }
.explorador:has(#parte-macula:hover, #parte-macula:target, #parte-macula:focus-within) .r-macula .forma{ stroke:var(--laranja) }
.explorador:has(#parte-macula:hover, #parte-macula:target, #parte-macula:focus-within) .r-macula .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-macula:hover, .r-macula:focus-visible) #parte-macula{ background:var(--papel-2) }
.explorador:has(#parte-nervo:hover, #parte-nervo:target, #parte-nervo:focus-within) .r-nervo .forma{ stroke:var(--laranja) }
.explorador:has(#parte-nervo:hover, #parte-nervo:target, #parte-nervo:focus-within) .r-nervo .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-nervo:hover, .r-nervo:focus-visible) #parte-nervo{ background:var(--papel-2) }
.explorador:has(#parte-musculos:hover, #parte-musculos:target, #parte-musculos:focus-within) .r-musculos .forma{ stroke:var(--laranja) }
.explorador:has(#parte-musculos:hover, #parte-musculos:target, #parte-musculos:focus-within) .r-musculos .num circle{ fill:var(--laranja-btn) }
.explorador:has(.r-musculos:hover, .r-musculos:focus-visible) #parte-musculos{ background:var(--papel-2) }
/* ---------- a grade de Amsler (OCT) ---------- */
/* os passos moram no .cab (lê primeiro, depois rola uma vez); a grade inteira cabe na tela */
.amsler__grade{ display:block; width:min(100%, 26rem, max(14rem, var(--t4) - var(--ams-resto, 6rem)));
height:auto; border-radius:.3rem }
.amsler .lente__nota{ margin-top:var(--e-2); padding-top:.6rem }
.amsler .cab p + .amsler__passos{ margin-top:var(--e-2) }
@media (min-width:62rem){
.amsler{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--e-4);
grid-template-areas:"grade cab" "nota cab"; grid-template-rows:auto 1fr; align-items:start }
.amsler .cab{ grid-area:cab; margin-bottom:0 }
.amsler__grade{ grid-area:grade; width:min(26rem, 26vw, calc(var(--t4) - var(--ams-resto, 6rem))) }
.amsler .lente__nota{ grid-area:nota; max-width:min(26rem, 26vw) }
.amsler .amsler__passos{ font-size:var(--t--1); line-height:1.45; gap:.25rem }
}
/* PC estreito (1000 a 1350 px): a grade cede largura ao texto, que é o que não cabe */
@media (min-width:62rem) and (max-width:74.99rem){
.amsler__grade{ width:min(21vw, calc(var(--t4) - var(--ams-resto, 6rem))) }
.amsler .lente__nota{ max-width:21vw }
}
.amsler__grade rect{ fill:#fff }
.amsler__grade line{ stroke:#111; stroke-width:1.4 }
.amsler__grade circle{ fill:#111 }
.amsler__passos{ padding-left:1.3rem; color:#fff; font-size:var(--t-1); display:grid; gap:.55rem }
.amsler__passos li::marker{ color:#FFB08A; font-family:Archivo; font-weight:800 }
/* cabecalho com texto maior num celular: o logo, o Menu e o Agendar nao crescem junto,
senao o Agendar sai da tela (medido: 30 a 43 px para fora em 320 e 390 px) */
@media (max-width:36rem){
html[data-fonte="2"].js .marca img, html[data-fonte="3"].js .marca img{ height:42px }
html[data-fonte="2"].js .cabecalho .btn, html[data-fonte="3"].js .cabecalho .btn{ font-size:15px; padding:10px 13px }
html[data-fonte="2"].js .menu-abre:not([hidden]), html[data-fonte="3"].js .menu-abre:not([hidden]){ font-size:15px; padding:8px 10px }
html[data-fonte="2"].js .cabecalho__in, html[data-fonte="3"].js .cabecalho__in{ gap:8px }
}
@media (max-width:26rem){
html[data-fonte="2"] .menu-abre span, html[data-fonte="3"] .menu-abre span{ position:absolute; width:1px; height:1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
/* ---------- as placas de cores (senso cromático) ---------- */
.placas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-4) }
.placa{ margin:0 }
.placa__svg{ display:block; width:100%; height:auto; max-width:20rem }
.placa figcaption{ margin-top:.8rem; color:#fff }
.placa b{ font-family:Archivo; font-size:var(--t-1) }
.placa details{ margin-top:.4rem }
.placa summary{ cursor:pointer; color:#FFB08A; font-weight:700; min-height:2.75rem;
display:flex; align-items:center }
.placa details p{ color:#CBD7F2; font-size:var(--t--1) }
@media (max-width:52rem){ .placas{ grid-template-columns:1fr; max-width:22rem } }
/* com JavaScript: uma placa de cada vez, escolhida nos botões (sem JS ficam as três) */
.cores__botoes{ display:grid; grid-template-columns:repeat(3, max-content); gap:.6rem }
@media (max-width:30rem){
.cores__botoes{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.cores__botoes .btn{ padding-inline:.4rem }
}
.cores__botoes[hidden]{ display:none }
.cores__botoes .btn--linha{ border-color:#fff; color:#fff }
.cores__botoes .btn--linha:hover{ background:rgba(255,255,255,.1) }
html[data-contraste="alto"] .cores__botoes .btn--linha{ border-color:#FFD75E; color:#FFD75E; background:#000 }
.cores--uma .placas{ display:block; max-width:none; margin-top:var(--e-2) }
.cores--uma .placa[hidden]{ display:none }
.cores--uma .placa b{ display:none }
.cores--uma .placa__svg{ max-width:none;
width:min(100%, 20rem, max(11rem, var(--t4) - 13.5rem - max(0px, (24rem - 100vw) * .3))) }
.cores--uma .placa figcaption{ margin-top:.3rem }
.cores--uma .placa details{ margin-top:0 }
@media (min-width:62rem){
.cores--uma{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--e-4);
grid-template-areas:"cab placas" "botoes placas"; grid-template-rows:auto 1fr; align-items:start }
.cores--uma .cab{ grid-area:cab }
.cores--uma .cores__botoes{ grid-area:botoes }
.cores--uma .placas{ grid-area:placas; margin-top:0 }
.cores--uma .placa{ width:min(24rem, 32vw, calc(var(--t4) - 9.5rem)) }
.cores--uma .placa__svg{ width:100% }
}
/* tela larga: a resposta fica mais larga que a placa (menos linhas), e a placa cresce */
@media (min-width:75rem){
.cores--uma .placa{ width:min(26rem, 34vw) }
.cores--uma .placa__svg{ width:min(100%, calc(var(--t4) - 8.5rem)) }
}
/* =====================================================================
QUARTA DIREÇÃO — as peças de impacto (30/09/2026). Ver IDEIAS.md.
===================================================================== */
/* ---------- a abertura: a logo do COI, e o olho se abre (só na 1ª visita) ----------
O script do põe .abrindo no . A tela branca com a logo cobre o site; um
buraco em forma de olho (a intersecção de dois círculos grandes) nasce no meio da logo
e cresce até sumir a tela branca. As bordas curvas são as pálpebras. */
@property --olho{ syntax:''; inherits:false; initial-value:0px }
html.abrindo body::before{
--R:90vmax;
content:""; position:fixed; inset:0; z-index:500; pointer-events:none;
background:#FBFBFD url("../img/logo.webp") no-repeat center / min(64vw, 380px) auto;
-webkit-mask:
radial-gradient(circle var(--R) at 50% calc(50% - var(--R) + var(--olho)), transparent 99.6%, #000 100%),
radial-gradient(circle var(--R) at 50% calc(50% + var(--R) - var(--olho)), transparent 99.6%, #000 100%);
mask:
radial-gradient(circle var(--R) at 50% calc(50% - var(--R) + var(--olho)), transparent 99.6%, #000 100%),
radial-gradient(circle var(--R) at 50% calc(50% + var(--R) - var(--olho)), transparent 99.6%, #000 100%);
animation:olho-abre 2.3s cubic-bezier(.6,0,.3,1) 2.4s both }
@keyframes olho-abre{ from{ --olho:0px } to{ --olho:100vh } }
@media (prefers-reduced-motion:reduce){ html.abrindo body::before{ display:none } }
/* ---------- a íris viva (heroi da página Exames) ---------- */
.heroi-int__grade{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
gap:var(--e-5); align-items:center }
.olho-vivo{ margin:0 }
/* a iris e a legenda cabem juntas entre o cabecalho e os botoes fixos (--tela) */
.olho-vivo__palco{ position:relative; width:min(100%, 22rem, max(11rem, var(--tela) - 12.5rem));
aspect-ratio:1; margin-inline:auto;
border-radius:50%; cursor:none; touch-action:manipulation }
.iris-svg{ display:block; width:100%; height:100% }
.olho-vivo__pupila{ fill:#050505; transition:r .35s var(--saida) }
.olho-vivo__luz{ position:absolute; left:var(--lx,50%); top:var(--ly,50%); width:5rem; height:5rem;
margin:-2.5rem 0 0 -2.5rem; border-radius:50%; pointer-events:none; opacity:0;
background:radial-gradient(circle, rgba(255,250,225,.95) 0 12%, rgba(255,240,190,.45) 35%, transparent 70%);
transition:opacity .2s }
.olho-vivo--luz .olho-vivo__luz{ opacity:1 }
.olho-vivo figcaption{ margin-top:var(--e-2); font-size:var(--t--1); color:var(--azul-claro);
max-width:26rem; margin-inline:auto }
.olho-vivo figcaption b{ color:#fff }
.olho-vivo__botao{ display:block; margin-top:.7rem; font:inherit; font-weight:700; color:#0E1F45;
background:#fff; border:0; border-radius:var(--r); padding:.55rem .9rem; cursor:pointer; min-height:2.75rem }
@media (max-width:62rem){ .heroi-int__grade{ grid-template-columns:1fr } .olho-vivo__palco{ width:min(100%, 16rem, max(11rem, var(--tela) - 12.5rem)) } }
/* ---------- o mergulho: rolando, a pessoa entra no olho ---------- */
.mergulho{ background:#050C1E; color:#fff; padding-block:var(--e-5) }
.mergulho__cab h2{ font-size:var(--t-4); max-width:18ch }
.mergulho__cab .olho{ color:#FFB08A }
.camada{ margin-top:var(--e-4); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--e-4); align-items:center; width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto }
.camada__arte{ aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:#050C1E }
.camada__arte svg, .camada__arte img{ display:block; width:100%; height:100%; object-fit:cover }
.camada--iris .camada__arte, .camada--retina .camada__arte{ aspect-ratio:1; max-width:24rem }
.camada--retina .camada__arte img{ clip-path:circle(47.5% at 50% 50%) }
.camada--iris .camada__arte{ position:relative }
.camada__zoom{ display:block; width:100%; height:100% }
.camada__pupila{ display:none }
.camada__n{ font-family:Archivo; font-weight:800; font-size:.78rem; letter-spacing:.16em; color:#FFB08A }
.camada__txt h3{ font-size:var(--t-3); margin-top:.3rem }
.camada__txt p:not(.camada__n){ margin-top:var(--e-2); color:#CBD7F2; font-size:var(--t-1); max-width:30rem }
.mg-raios path{ fill:none; stroke:#FFB08A; stroke-width:1.6; opacity:.75 }
.mergulho__fim{ margin-top:var(--e-5) }
@media (max-width:52rem){ .camada{ grid-template-columns:1fr } }
/* com rolagem guiada (navegador que entende e pessoa que não pediu menos movimento) */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference) and (min-width:52rem) and (min-height:32rem){
.mergulho{ padding:0; view-timeline-name:--mergulho; height:460vh }
.mergulho__palco{ position:sticky; top:0; height:100vh; overflow:hidden }
.mergulho__cab{ position:absolute; left:0; right:0; top:calc(var(--topo) + 1.5rem); z-index:5 }
.camada{ position:absolute; inset:0; margin:0; width:auto; display:block }
.camada__arte{ position:absolute; inset:0; aspect-ratio:auto; max-width:none; border-radius:0;
display:grid; place-items:center }
.camada--iris .camada__arte, .camada--retina .camada__arte{ max-width:none; aspect-ratio:auto }
.camada--retina .camada__arte img{ width:min(78vh,78vw); height:auto; aspect-ratio:1 }
.camada--retina .camada__arte img{ clip-path:circle(47.5% at 50% 50%) }
.camada__txt{ position:absolute; left:max(1.25rem, calc((100vw - var(--maxw)) / 2)); bottom:10vh;
max-width:30rem; padding:1.2rem 1.4rem; border-radius:var(--r);
background:rgba(5,12,30,.9) }
.camada{ animation:camada linear both; animation-timeline:--mergulho }
.camada--iris{ animation-name:camada-primeira; animation-range:contain 0% contain 30% }
.camada--cristalino{ animation-range:contain 24% contain 54% }
.camada--vitreo{ animation-range:contain 48% contain 78% }
.camada--retina{ animation-name:camada-ultima; animation-range:contain 72% contain 100% }
/* o zoom fica só no desenho; a caixa de texto só aparece e some, sem sair da tela */
.camada:not(.camada--iris) .camada__arte{ animation:camada-zoom linear both; animation-timeline:--mergulho }
.camada--cristalino .camada__arte{ animation-range:contain 24% contain 54% }
.camada--vitreo .camada__arte{ animation-range:contain 48% contain 78% }
.camada--retina .camada__arte{ animation-name:camada-zoom-ultima; animation-range:contain 72% contain 100% }
/* a íris: o olho inteiro, de longe, somindo no escuro pelas bordas (vinheta pintada na
mesma camada), e a câmera chega até entrar pela pupila. Igual ao filme da página inicial. */
.camada__zoom{ position:relative; width:min(125vw, 143.6svh); height:auto; aspect-ratio:1588/1106;
translate:0 calc(var(--topo) / 2); will-change:transform; animation:mergulha linear both;
animation-timeline:--mergulho; animation-range:contain 0% contain 30% }
.camada__zoom::after{ content:""; position:absolute; inset:-1px; pointer-events:none;
background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5,12,30,0) 58%, rgba(5,12,30,.75) 84%, #050C1E 100%) }
.camada__olho{ width:100%; height:100% }
.camada__pupila{ display:block; position:absolute; z-index:1; left:50%; top:50%; width:6.93%; aspect-ratio:1;
margin:-3.465% 0 0 -3.465%; border-radius:50%;
background:radial-gradient(circle, #020203 62%, rgba(2,2,3,0) 71%); will-change:transform;
animation:pupila-abre linear both; animation-timeline:--mergulho; animation-range:contain 0% contain 30% }
/* o texto de uma camada some antes de o da seguinte chegar: as duas caixas não se misturam */
.camada__txt{ animation:camada-txt linear both; animation-timeline:--mergulho }
.camada--iris .camada__txt{ animation-name:camada-txt-primeira; animation-range:contain 0% contain 30% }
.camada--cristalino .camada__txt{ animation-range:contain 24% contain 54% }
.camada--vitreo .camada__txt{ animation-range:contain 48% contain 78% }
.camada--retina .camada__txt{ animation-name:camada-txt-ultima; animation-range:contain 72% contain 100% }
.mergulho__fim{ position:absolute; right:max(1.25rem, calc((100vw - var(--maxw)) / 2)); bottom:10vh;
left:auto; width:auto; margin:0; z-index:6; animation:aparece linear both; animation-timeline:--mergulho;
animation-range:contain 88% contain 100% }
}
}
@keyframes camada{ 0%{ opacity:0 } 20%,80%{ opacity:1 } 100%{ opacity:0 } }
@keyframes camada-zoom{ 0%{ transform:scale(.7) } 20%{ transform:scale(1) } 80%{ transform:scale(1.2) }
100%{ transform:scale(2.4) } }
@keyframes camada-primeira{ 0%,75%{ opacity:1 } 100%{ opacity:0 } }
@keyframes camada-ultima{ 0%{ opacity:0 } 30%,100%{ opacity:1 } }
@keyframes camada-zoom-ultima{ 0%{ transform:scale(.7) } 30%,100%{ transform:scale(1) } }
@keyframes mergulha{ 0%{ transform:scale(.92) } 55%{ transform:scale(1.9) } 100%{ transform:scale(3.2) } }
@keyframes camada-txt{ 0%,12%{ opacity:0 } 22%,78%{ opacity:1 } 88%,100%{ opacity:0 } }
@keyframes camada-txt-primeira{ 0%,76%{ opacity:1 } 86%,100%{ opacity:0 } }
@keyframes camada-txt-ultima{ 0%,12%{ opacity:0 } 22%,100%{ opacity:1 } }
@keyframes aparece{ from{ opacity:0 } to{ opacity:1 } }
/* ---------- a lente, em foto (catarata) ---------- */
.lio{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-4) }
.lio__foto{ margin:0 }
.lio__foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r);
box-shadow:0 2px 4px rgba(14,31,69,.08), 0 26px 54px -30px rgba(14,31,69,.45) }
.lio__foto figcaption{ margin-top:.7rem; font-size:var(--t--1); color:var(--cinza) }
.lente__nota a{ color:inherit }
@media (max-width:52rem){ .lio{ grid-template-columns:1fr } }
/* ---------- ver o site inteiro com a alteração ---------- */
.lente__site{ margin-top:var(--e-3) }
.lente__site .btn{ color:#fff; border-color:#fff; background:transparent }
html[data-contraste="alto"] .lente__site .btn{ background:#000; color:#FFD75E; border-color:#FFD75E }
.site-alterado :is(.cabecalho,main,.rodape){ transition:filter .8s var(--saida) }
.site--catarata :is(.cabecalho,main,.rodape){
filter:blur(1.6px) sepia(.45) saturate(.8) contrast(.72) brightness(1.08) }
.site--retinopatia :is(.cabecalho,main,.rodape){ filter:blur(.6px) }
.veu-site{ position:fixed; inset:0; z-index:250; pointer-events:none }
.veu-site--glaucoma{ background:radial-gradient(ellipse at 50% 50%, transparent 16%,
rgba(5,8,15,.55) 36%, rgba(5,8,15,.94) 60%) }
.veu-site--dmri{ background:rgba(70,60,50,.4); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
-webkit-mask:radial-gradient(circle at 50% 50%, #000 0 14%, transparent 25%);
mask:radial-gradient(circle at 50% 50%, #000 0 14%, transparent 25%) }
.veu-site--retinopatia{ background:
radial-gradient(circle at 42% 44%, rgba(40,20,15,.8) 0 2.5%, transparent 4.5%),
radial-gradient(circle at 58% 52%, rgba(40,20,15,.75) 0 3%, transparent 5.5%),
radial-gradient(circle at 48% 62%, rgba(40,20,15,.7) 0 2%, transparent 4%),
radial-gradient(circle at 63% 38%, rgba(40,20,15,.65) 0 1.8%, transparent 3.5%),
radial-gradient(circle at 35% 58%, rgba(40,20,15,.6) 0 1.6%, transparent 3.2%) }
.barra-alterado{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:300;
display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; max-width:calc(100% - 2rem);
background:#0E1F45; color:#fff; padding:.8rem 1rem .8rem 1.2rem; border-radius:var(--r);
box-shadow:0 20px 40px -18px rgba(0,0,0,.7); font-size:var(--t--1) }
.barra-alterado .btn{ background:#fff; color:#0E1F45 }
/* ---------- a lupa ---------- */
.lupa{ position:fixed; left:0; top:0; z-index:400; width:260px; height:260px; border-radius:50%;
overflow:hidden; pointer-events:none; border:4px solid var(--laranja-btn); background:var(--papel);
box-shadow:0 18px 40px -12px rgba(14,31,69,.55), inset 0 0 0 2px rgba(255,255,255,.6) }
.lupa__copia{ position:absolute; left:0; top:0; transform-origin:0 0; background:var(--papel) }
.lupa--fora{ display:none }
/* ---------- como chegar: o mapa desenhado (contato) ---------- */
.mapa-desenho{ margin:0 }
.mapa-desenho__svg{ display:block; width:100%; height:auto; border-radius:var(--r);
border:1px solid var(--linha); box-shadow:0 26px 54px -34px rgba(14,31,69,.5) }
/* os caminhos (que se desenham) ficam num segundo desenho por cima, na sua propria camada:
assim cada quadro da animacao nao redesenha as ruas (rodada 11, medido) */
/* o mapa e a legenda dele cabem juntos na altura util (--tela); 1000/795 e a proporcao do desenho */
.mapa-desenho__pilha{ display:grid; max-width:calc(max(16rem, var(--tela) - 2.6rem) * 1000 / 795); margin-inline:auto }
.mapa-desenho__pilha > svg{ grid-area:1/1 }
.mapa-desenho__rotas{ border-color:transparent; box-shadow:none; pointer-events:none; will-change:transform }
.mapa-desenho figcaption{ margin-top:.7rem; font-size:var(--t--1); color:var(--cinza) }
.mapa-desenho figcaption a{ color:inherit }
.mapa-legenda{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin-bottom:var(--e-3) }
.mapa-legenda li{ display:flex; align-items:center; gap:.6rem }
.mapa-legenda__cor{ width:2.2rem; height:.45rem; border-radius:.3rem; flex:0 0 auto }
.mapa-legenda__cor--trem{ background:#DC4018 } .mapa-legenda__cor--rodo{ background:#183475 }
/* o mapa a pe cabe na tela junto com o titulo (pedido da Dra. Carla, 30/09): no PC o texto
vai ao lado e o desenho se mede pela altura da tela; no celular fica embaixo do titulo */
.mapa-bloco{ display:grid; gap:0 var(--e-4) }
@media (min-width:62rem){
.mapa-bloco{ grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); align-items:center }
.mapa-bloco .mapa-legenda{ flex-direction:column; margin-bottom:0 }
.mapa-bloco .mapa-legenda li{ display:block }
.mapa-bloco .mapa-legenda__cor{ display:inline-block; vertical-align:middle; margin-right:.6rem }
.mapa-bloco .mapa-desenho__svg{ aspect-ratio:1000/795; height:auto; margin-inline:auto;
width:min(100%, calc((100svh - 12rem) * 1.258)) }
}
.mp-trilho polyline{ stroke:#8C9BB8; stroke-width:5; stroke-dasharray:14 8 }
.mp-rotulos text{ font:700 15px Archivo, Arial, sans-serif; fill:#5B6477; letter-spacing:.02em }
.mp-ref{ font:700 14px Archivo, Arial, sans-serif; fill:#3F4757; paint-order:stroke;
stroke:#EFEBE3; stroke-width:4; stroke-linejoin:round }
.mp-icone{ font:800 14px Archivo, Arial, sans-serif; fill:#fff; text-anchor:middle }
.mp-rota-fundo{ fill:none; stroke:#fff; stroke-width:13; stroke-linecap:round; stroke-linejoin:round }
.mp-rota{ fill:none; stroke-width:7; stroke-linecap:round; stroke-linejoin:round }
.mp-rota--trem{ stroke:#DC4018 } .mp-rota--rodo{ stroke:#183475 }
.mp-etiqueta rect{ fill:#0E1F45 }
.mp-etiqueta text{ font:700 16px Archivo, Arial, sans-serif; fill:#fff }
.mp-etiqueta--coi rect{ fill:#C4340F }
@media (prefers-reduced-motion:no-preference){
.js .mapa-desenho:not(.vista) .mp-rota{ stroke-dasharray:1; stroke-dashoffset:1 }
.js .mapa-desenho.vista .mp-rota{ stroke-dasharray:1; stroke-dashoffset:0;
transition:stroke-dashoffset 2.4s cubic-bezier(.45,0,.2,1) .3s }
.js .mapa-desenho.vista .mp-rota--trem{ transition-delay:1.2s }
}
/* a capa do mapa do Google: uma captura do próprio mapa do Google, sem o cartão de cima.
O botão fica acima da linha de créditos do Google, que precisa continuar visível. */
.mapa__capa img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.mapa__capa span{ position:absolute; left:50%; bottom:3.4rem; transform:translateX(-50%);
background:#0E1F45; color:#fff; padding:.65rem 1.1rem; border-radius:var(--r); white-space:nowrap;
box-shadow:0 12px 24px -12px rgba(0,0,0,.5) }
.mapa__capa:hover span{ background:#183475 }
.mapa__fora{ margin-top:.6rem; font-size:var(--t--1) }
/* =====================================================================
O FILME DA PÁGINA INICIAL (30/09/2026)
Base: um herói e quatro painéis de foto, um embaixo do outro — é o que vê quem tem
navegador sem rolagem animada ou pediu menos movimento. Com suporte, o palco fica
parado na tela e a rolagem vira a câmera: fachada -> bola laranja do letreiro ->
íris -> pupila -> as quatro etapas lá dentro.
===================================================================== */
.filme{ position:relative; background:#050C1E; color:#fff }
.filme__palco{ position:relative }
.cena{ position:relative; overflow:hidden }
.cena__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.cena--rua{ min-height:min(92vh, 56rem); display:grid; align-items:end }
.cena__foto--rua{ object-position:71% 56% }
.cena--rua::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(90deg, rgba(5,12,30,.9) 0%, rgba(5,12,30,.7) 38%, rgba(5,12,30,.05) 72%),
linear-gradient(0deg, rgba(5,12,30,.75) 0%, rgba(5,12,30,0) 40%) }
.cena__heroi{ position:relative; z-index:2; padding-block:var(--e-6) var(--e-5) }
.cena__heroi .olho{ color:#FFB08A }
.cena__heroi h1{ font-size:var(--t-5); letter-spacing:-.042em; max-width:16ch; color:#fff }
.cena__heroi h1 em{ font-style:normal; color:#FFB08A }
.cena__sub{ margin-top:var(--e-3); font-size:var(--t-1); color:#DCE4F5; max-width:32rem }
.cena__heroi .heroi__acoes{ margin-top:var(--e-4) }
.cena__heroi .btn--vazado{ color:#fff; border-color:#fff }
.cena__nota{ margin-top:var(--e-3); font-size:var(--t--1); color:#CBD7F2 }
.filme__dica{ display:none }
.cena--iris{ display:none }
.cena--etapa{ min-height:72vh; display:grid; align-items:end }
.cena--etapa::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(0deg, rgba(5,12,30,.94) 0%, rgba(5,12,30,.72) 38%, rgba(5,12,30,0) 72%) }
.cena__caixa{ position:relative; z-index:2; width:min(100% - 2.5rem, 34rem);
margin:0 0 5.5rem max(1.25rem, calc((100vw - var(--maxw)) / 2)) } /* 5.5rem: acima dos botoes fixos do pe */
.cena__n{ font-family:Archivo; font-weight:800; font-size:.78rem; letter-spacing:.16em;
text-transform:uppercase; color:#FFB08A }
.cena__caixa h3{ font-size:var(--t-4); margin-top:.3rem; color:#fff }
.cena__caixa p:not(.cena__n):not(.cena__acao){ margin-top:var(--e-2); font-size:var(--t-1); color:#DCE4F5 }
.cena__acao{ margin-top:var(--e-3) }
.cena__legenda{ font-family:Archivo; font-weight:800; font-size:var(--t-3); text-align:center;
line-height:1.15; color:#fff }
html[data-contraste="alto"] .cena--rua::after, html[data-contraste="alto"] .cena--etapa::after{
background:rgba(0,0,0,.82) }
/* o olho inteiro, de longe: a foto (1588x1106) cabe na tela e as bordas somem no escuro por
uma vinheta pintada DENTRO da mesma camada (não é camada a mais). A pupila fica no centro
da foto, com raio de 55 px: 6,93% da largura. */
.cena__zoom{ position:relative; width:min(125vw, 143.6svh); aspect-ratio:1588/1106 }
.cena__zoom::after{ content:""; position:absolute; inset:-1px; pointer-events:none;
background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5,12,30,0) 58%, rgba(5,12,30,.75) 84%, #050C1E 100%) }
.cena__iris{ display:block; width:100%; height:100%; object-fit:cover }
/* a pupila da foto: um disco preto do tamanho dela, no centro. Cresce e vira a escuridão
por onde a câmera entra. */
.cena__pupila{ position:absolute; z-index:1; left:50%; top:50%; width:6.93%; aspect-ratio:1;
margin:-3.465% 0 0 -3.465%; border-radius:50%;
background:radial-gradient(circle, #020203 62%, rgba(2,2,3,0) 71%) }
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference) and (min-height:32rem){
/* O filme sobe por baixo do cabeçalho (o JS mede a altura dele
em --antes-do-filme). Assim o palco já nasce preso no alto da tela e a primeira
rolagem já é câmera, sem a página "descer um pouco" antes. */
.filme{ height:1000vh; view-timeline-name:--filme; margin-top:calc(-1 * var(--antes-do-filme, 0px)) }
.filme__palco{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
background:#050C1E }
/* Pouca camada na placa de vídeo: só transform e opacity animam, e as fotos das etapas
ficam paradas (o zoom lento delas criava uma camada de tela cheia a mais por foto,
e o véu escuro de cada uma, outra). Eram 25 camadas no meio do olho; agora são 20,
e as de tela cheia caíram de 14 para 9. Esconder por visibility as cenas fora da
faixa foi testado e piorou: obriga o navegador a redesenhar a cena na hora em que
ela volta, e a rolagem congelou mais de 1 s no celular simulado. */
.cena{ position:absolute; inset:0; min-height:0; animation:linear both; animation-timeline:--filme }
.cena__foto, .cena__heroi, .cena__caixa, .filme__dica, .cena__zoom, .cena__pupila, .cena__legenda{
animation:linear both; animation-timeline:--filme }
/* 1. a fachada: o texto sai, a câmera vai até a bola laranja (71% 56% da foto) */
.cena--rua{ animation-name:some-no-fim; animation-range:contain 0% contain 16%; align-items:center }
.cena__heroi{ padding-block:calc(var(--antes-do-filme, calc(var(--topo) * .6)) + 1rem) 3.2rem;
animation-name:heroi-sai; animation-range:contain 0% contain 4.5% }
.cena__foto--rua{ transform-origin:71% 56%;
animation-name:rua-aproxima; animation-range:contain 0% contain 16% }
.cena--rua::after{ animation:escurece-sai linear both; animation-timeline:--filme;
animation-range:contain 0% contain 6% }
.filme__dica{ display:block; position:absolute; left:50%; bottom:1rem; z-index:3;
transform:translateX(-50%); margin:0; font-family:Archivo; font-weight:700; font-size:.8rem;
letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:.85;
animation-name:heroi-sai; animation-range:contain 0% contain 2% }
@media (max-width:36rem){ .filme .cena__nota{ display:none } }
/* 2. o olho: aparece inteiro, de longe, e a câmera vai chegando até entrar pela pupila.
Só transform e opacity.
SEM will-change aqui (rodada 11, medido): com ele, a fachada, o olho e a pupila (que
cresce 16x dentro do olho, que cresce 3,2x) prendiam memória de placa de vídeo do
tamanho do zoom máximo, e o resto da página ficava sem: 35-40 quadros "em branco"
(pedaço ainda não desenhado) ao rolar até o fim, contra 4 sem ele. A animação já põe
cada um na sua camada; o retrato da tela parada sai idêntico, pixel a pixel. */
.cena--iris{ display:grid; grid-template:100% / 100%; place-items:center;
animation-name:iris-cena; animation-range:contain 10% contain 31% }
.cena__zoom{ grid-area:1/1; translate:0 calc(var(--topo) / 2);
animation-name:olho-aproxima; animation-range:contain 10% contain 31% }
.cena__pupila{ animation-name:pupila-abre; animation-range:contain 10% contain 31% }
/* o escurecido atrás da frase vai na própria frase: um véu de tela cheia por cima da foto
viraria mais uma camada grande */
.cena__legenda{ grid-area:1/1; align-self:end; justify-self:stretch; z-index:2; margin-bottom:max(8vh, 5rem);
padding:1.4rem 1.25rem; text-shadow:0 2px 20px rgba(0,0,0,.7);
background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(5,12,30,.62), rgba(5,12,30,0) 100%);
animation-name:legenda-iris; animation-range:contain 14% contain 25% }
/* 3. lá dentro: quatro etapas (18% da rolagem cada). A foto fica parada: o zoom lento
que ela tinha fazia de cada foto uma camada de tela cheia a mais. */
.cena--etapa{ min-height:0 }
.cena--etapa-1{ animation-name:etapa; animation-range:contain 28% contain 49% }
.cena--etapa-2{ animation-name:etapa; animation-range:contain 46% contain 67% }
.cena--etapa-3{ animation-name:etapa; animation-range:contain 64% contain 85% }
.cena--etapa-4{ animation-name:etapa-ultima; animation-range:contain 82% contain 100% }
.cena--etapa-1 .cena__caixa{ animation-name:caixa-sobe; animation-range:contain 29% contain 37% }
.cena--etapa-2 .cena__caixa{ animation-name:caixa-sobe; animation-range:contain 47% contain 55% }
.cena--etapa-3 .cena__caixa{ animation-name:caixa-sobe; animation-range:contain 65% contain 73% }
.cena--etapa-4 .cena__caixa{ animation-name:caixa-sobe; animation-range:contain 83% contain 91% }
}
}
@keyframes some-no-fim{ 0%,78%{ opacity:1 } 100%{ opacity:0 } }
@keyframes heroi-sai{ to{ opacity:0; transform:translateY(-2.5rem); visibility:hidden } }
@keyframes escurece-sai{ to{ opacity:0 } }
@keyframes rua-aproxima{ 0%{ transform:none } 100%{ transform:translate(-21%, -6%) scale(2.8) } }
@keyframes iris-cena{ 0%{ opacity:0 } 16%{ opacity:1 } 90%{ opacity:1 } 100%{ opacity:0 } }
@keyframes olho-aproxima{ 0%{ transform:scale(.92) } 55%{ transform:scale(1.9) } 100%{ transform:scale(3.2) } }
@keyframes pupila-abre{ 0%,50%{ transform:scale(1) } 100%{ transform:scale(16) } }
@keyframes legenda-iris{ 0%{ opacity:0; transform:translateY(1rem) } 25%,70%{ opacity:1; transform:none }
100%{ opacity:0 } }
@keyframes etapa{ 0%{ opacity:0 } 14%{ opacity:1 } 86%{ opacity:1 } 100%{ opacity:0 } }
@keyframes etapa-ultima{ 0%{ opacity:0 } 20%,100%{ opacity:1 } }
@keyframes caixa-sobe{ from{ opacity:0; transform:translateY(2rem) } to{ opacity:1; transform:none } }
/* ---------- a cirurgia com rolagem: um desenho só, preso na tela; a câmera chega
perto nas etapas 2 a 4 e volta na 5. Cada etapa ocupa 20% da rolagem. ---------- */
@supports (animation-timeline: view()){
/* so do celular deitado/tablet para cima: no celular em pe o texto mais longo de uma etapa
nao cabia embaixo do desenho preso e ficava cortado (rodada 14, ver mais abaixo) */
@media (prefers-reduced-motion:no-preference) and (min-height:32rem) and (min-width:40.01rem){
.cirurgia{ height:600vh; view-timeline-name:--cirurgia }
/* a cena termina acima dos botoes fixos do pe (--tela), senao eles cobrem o desenho */
.cirurgia__cena{ position:sticky; top:calc(var(--topo) + 1rem); height:calc(100vh - var(--topo) - 5.75rem);
height:calc(var(--tela) - 1rem); display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:var(--e-4); align-items:center }
.cirurgia__palco{ display:block; min-width:0 }
.cirurgia__palco .cx{ max-height:calc(var(--tela) - 2rem); width:100%; object-fit:contain }
.atos{ display:grid; min-width:0 }
.ato{ grid-area:1/1; display:block; animation:linear both; animation-timeline:--cirurgia;
animation-range:contain 0% contain 100% }
.ato .cx{ display:none }
.ato:nth-child(1){ animation-name:cx-v1 }
.ato:nth-child(2){ animation-name:cx-v2 }
.ato:nth-child(3){ animation-name:cx-v3 }
.ato:nth-child(4){ animation-name:cx-v4 }
.ato:nth-child(5){ animation-name:cx-v5 }
.cx--vivo .cx-l, .cx--vivo .cx-cam{ animation:linear both; animation-timeline:--cirurgia;
animation-range:contain 0% contain 100% }
.cx--vivo .cx-cam{ transform-box:view-box; transform-origin:0 0; animation-name:cx-camera }
.cx--vivo .cx-v12{ animation-name:cx-v12 } .cx--vivo .cx-v2{ animation-name:cx-v2 }
.cx--vivo .cx-v2345{ animation-name:cx-v2345 } .cx--vivo .cx-v3{ animation-name:cx-v3 }
.cx--vivo .cx-v345{ animation-name:cx-v345 } .cx--vivo .cx-v4{ animation-name:cx-v4 }
.cx--vivo .cx-v45{ animation-name:cx-v45 } .cx--vivo .cx-v5{ animation-name:cx-v5 }
.cx--vivo .cx-r1{ animation-name:cx-v1 } .cx--vivo .cx-r2{ animation-name:cx-v2 }
.cx--vivo .cx-r3{ animation-name:cx-v3 } .cx--vivo .cx-r4{ animation-name:cx-v4 }
.cx--vivo .cx-r5{ animation-name:cx-v5 } .cx--vivo .cx-turva{ animation-name:cx-turva }
.cx--vivo .cx-v15{ animation-name:cx-v15 } .cx--vivo .cx-v234{ animation-name:cx-v234 }
}
@media (prefers-reduced-motion:no-preference) and (max-width:52rem) and (min-height:32rem) and (min-width:40.01rem){
.cirurgia__cena{ grid-template-columns:1fr; grid-template-rows:auto 1fr; align-content:start;
align-items:start; gap:var(--e-2) }
.cirurgia__palco .cx{ max-height:52svh }
.ato h3{ font-size:var(--t-1) }
}
}
@keyframes cx-camera{ 0%,15%{ transform:none } 24%,74%{ transform:translate(-220px,-200px) scale(2) }
84%,100%{ transform:none } }
@keyframes cx-v1{ 0%,15%{ opacity:1 } 18%,100%{ opacity:0; visibility:hidden } }
@keyframes cx-v12{ 0%,37%{ opacity:1 } 41%,100%{ opacity:0 } }
@keyframes cx-v2{ 0%,20%{ opacity:0; visibility:hidden } 23%,37%{ opacity:1; visibility:visible } 40%,100%{ opacity:0; visibility:hidden } }
@keyframes cx-v2345{ 0%,18%{ opacity:0 } 22%,100%{ opacity:1 } }
@keyframes cx-v3{ 0%,40%{ opacity:0; visibility:hidden } 43%,57%{ opacity:1; visibility:visible } 60%,100%{ opacity:0; visibility:hidden } }
@keyframes cx-v345{ 0%,38%{ opacity:0 } 42%,100%{ opacity:1 } }
@keyframes cx-v4{ 0%,60%{ opacity:0; visibility:hidden } 63%,77%{ opacity:1; visibility:visible } 80%,100%{ opacity:0; visibility:hidden } }
@keyframes cx-v45{ 0%,58%{ opacity:0 } 62%,100%{ opacity:1 } }
@keyframes cx-v5{ 0%,82%{ opacity:0; visibility:hidden } 85%,100%{ opacity:1; visibility:visible } }
@keyframes cx-turva{ 0%,80%{ opacity:1 } 88%,100%{ opacity:0 } }
/* pupila: normal fora da cirurgia, dilatada nas etapas 2 a 4 */
@keyframes cx-v15{ 0%,18%{ opacity:1 } 21%,79%{ opacity:0 } 82%,100%{ opacity:1 } }
@keyframes cx-v234{ 0%,18%{ opacity:0 } 21%,79%{ opacity:1 } 82%,100%{ opacity:0 } }
/* ---------- celular deitado (tela baixa) ----------
Com 360-430 px de altura, as tres rolagens animadas (o filme da pagina inicial, a Visao
e a cirurgia da catarata) nao cabem: o texto cobria a foto e uma tarja comia a tela.
Abaixo de 32rem de altura elas viram a versao parada (as mesmas fotos e desenhos, um
embaixo do outro) - ver os "and (min-height:32rem)" nos blocos de cada uma. Aqui o
cabecalho encolhe e os botoes fixos ficam so com o icone. */
@media (max-height:32rem) and (orientation:landscape){
html.js{ --topo:3.5rem }
.js .marca img{ height:2.1rem }
.js .cabecalho .btn{ padding:.45rem .8rem; font-size:.9rem }
.js .menu-abre:not([hidden]){ min-height:2.6rem; padding:.35rem .7rem }
.zap, .acess__abre{ padding:.75rem; border-radius:50%; bottom:.6rem }
.zap{ right:.6rem } .acess__abre{ left:.6rem }
.zap span, .acess__abre span{ position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap }
.acess__painel{ bottom:auto; top:.6rem; left:4.2rem; max-height:calc(100svh - 1.2rem) }
.js .menu--aberto .menu{ max-height:calc(100svh - var(--topo)); overflow-y:auto }
}