/* ===========================================================================
   Demonstrações do grupo b (rodada 11): biometria, PAM, capsulotomia YAG,
   iridotomia YAG, curva tensional diária e motilidade ocular.
   Sempre em faixa escura (azul-marinho, preto no escuro e no alto contraste):
   cor literal, nunca token. Só transform e opacity se animam.
   Prefixos: dmb- (comum ao grupo), biom-, pam-, yagc-, irid-, ctd-, motil-.
   =========================================================================== */

/* ---------- peças comuns ---------- */
.dmb-fala{ margin-top:var(--e-3); font-size:var(--t-1); color:#fff; max-width:44rem; min-height:3.2em }
.dmb-acoes{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--e-3) }
.dmb-acoes .btn:disabled, .biom__ctrl .btn:disabled, .motil__ctrl .btn:disabled{ opacity:.55; cursor:default; transform:none }
.dmb-linha{ border-color:#fff; color:#fff; background:transparent }
.dmb-linha:hover{ background:rgba(255,255,255,.1) }
/* o contorno de foco padrão (laranja-tijolo) some no azul-marinho: aqui ele é claro */
.biom .btn:focus-visible, .yagc .btn:focus-visible, .irid .btn:focus-visible,
.ctd .btn:focus-visible, .motil .btn:focus-visible{ outline:3px solid #FFB08A; outline-offset:3px }
html[data-contraste="alto"] .biom .btn:focus-visible, html[data-contraste="alto"] .yagc .btn:focus-visible,
html[data-contraste="alto"] .irid .btn:focus-visible, html[data-contraste="alto"] .ctd .btn:focus-visible,
html[data-contraste="alto"] .motil .btn:focus-visible{ outline-color:#00E0FF }
.dmb-legenda{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem 1.2rem; margin-top:var(--e-2);
  font-size:var(--t--1); color:#CBD7F2 }
.dmb-legenda li{ display:inline-flex; align-items:center; gap:.45rem }
.dmb-cor{ display:inline-block; width:1.4rem; height:.5rem; border-radius:.25rem }
.dmb-cor--luz{ background:#FFE08A }
.dmb-cor--lente{ background:#9FD3FF }
.dmb-cor--retina{ background:#FF8A57 }
.dmb-cor--faixa{ background:rgba(168,182,220,.32); height:.9rem }
.dmb-cor--medida{ width:.9rem; height:.9rem; border-radius:50%; background:#FFB08A }
.dmb-legenda--num b{ flex:none; display:inline-grid; place-items:center; width:1.6rem; height:1.6rem;
  border-radius:50%; border:2px solid #fff; font-family:Archivo; font-size:.85rem; color:#fff }

/* escolha em pílulas: rádio de verdade, só escondido do olho */
.dmb-esc{ border:0; margin:0; padding:0; min-width:0 }
.dmb-esc legend{ padding:0; margin-bottom:.5rem; font-weight:700; color:#fff }
.dmb-esc > span{ display:inline-block; margin:0 .35rem .45rem 0 }
.dmb-esc input{ position:absolute; opacity:0; width:1px; height:1px; margin:0 }
.dmb-esc label{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:4.4rem; min-height:44px; padding:.4rem .6rem; border:2px solid #A8B6DC; border-radius:var(--r);
  font-family:Archivo; font-weight:700; color:#fff; cursor:pointer; line-height:1.2 }
.dmb-esc label small{ font-family:"Atkinson Hyperlegible", system-ui, sans-serif; font-weight:400;
  font-size:.82rem; color:#CBD7F2 }
.dmb-esc input:checked + label{ background:#fff; border-color:#fff; color:#0E1F45 }
.dmb-esc input:checked + label small{ color:#2A3C6E }
.dmb-esc input:focus-visible + label{ outline:3px solid #FF8A57; outline-offset:3px }
.dmb-esc input:disabled + label{ cursor:default }

/* controle deslizante: o nativo, só com a cor da casa e alvo de toque grande */
.dmb-faixa{ display:block; width:100%; max-width:26rem; height:44px; margin:0; accent-color:#FF8A57; cursor:pointer }
.dmb-faixa:disabled{ cursor:default }
.dmb-faixa:focus-visible{ outline:3px solid #FF8A57; outline-offset:2px }

/* ---------- caber numa tela (rodada 14) ----------
   A parte que se mexe (.dmb-inter) cabe em --tela: cada figura tem a altura medida como
   --tela menos o que fica embaixo dela (o "resto", medido com a régua), e o resto fica do
   tamanho natural. No computador (.dmb-dupla) o texto do .cab
   vai para uma coluna à esquerda e a parte que se mexe para a direita. A nota de rodapé fica
   logo abaixo da demonstração. Celular deitado e letra grande (A+) não precisam caber: lá
   o limite sai, para nada se sobrepor. */
.dmb-inter{ display:flex; flex-direction:column; gap:.8rem }
.dmb-inter > *{ flex:0 0 auto; margin-top:0 }
.dmb-inter > .dmb-encolhe{ flex:1 1 auto; min-height:7rem }
svg.dmb-encolhe{ display:block; width:100%; height:auto; max-width:none }
/* a fala que muda reserva a altura da mais longa: a tela não pula */
.dmb-falas{ display:grid }
.dmb-falas > *{ grid-area:1/1 }
.dmb-falas .dmb-fala{ margin-top:0; min-height:0 }
.dmb-fantasma{ visibility:hidden; font-size:var(--t-1) }
.dmb-falas .dmb-fala, .dmb-falas .dmb-fantasma{ font-size:var(--t-0); line-height:1.5 }
.dmb-dupla + .lente__nota{ margin-top:var(--e-3) }
@media (min-width:62rem){
  .dmb-dupla{ display:grid; grid-template-columns:minmax(0, var(--dmb-col, 28rem)) minmax(0, 1fr);
    column-gap:var(--e-4); align-items:start }
  .dmb-dupla > .cab{ margin:0 }
  .dmb-dupla > .cab h2{ font-size:var(--t-2) }
  .dmb-dupla > .cab p{ margin-top:.7rem }
  .dmb-dupla > .dmb-inter:has(> .dmb-encolhe){ max-height:var(--tela) }
}
@media (min-width:62rem) and (max-width:76rem){
  .dmb-dupla{ grid-template-columns:minmax(0, var(--dmb-col-m, 23rem)) minmax(0, 1fr) }
  .dmb-dupla > .cab h2{ font-size:var(--t-1) }
}
@media (max-height:31rem){ .dmb-dupla > .dmb-inter{ max-height:none !important } }
html[data-fonte="2"] .dmb-inter, html[data-fonte="3"] .dmb-inter{ max-height:none !important }

/* ---------- biometria ---------- */
.biom{ --dmb-col:29rem }
.biom__esclera{ fill:rgba(255,255,255,.05); stroke:#A8B6DC; stroke-width:3 }
.biom__retina{ fill:none; stroke:#FF8A57; stroke-width:6; stroke-linecap:round }
.biom__cornea{ fill:rgba(159,211,255,.16); stroke:#9FD3FF; stroke-width:3 }
.biom__iris{ stroke:#C08A5A; stroke-width:7; stroke-linecap:round }
.biom__raio{ fill:none; stroke:#FFE08A; stroke-width:2.5; stroke-linejoin:round; opacity:.95 }
.biom__fantasma{ fill:none; stroke:#FFE08A; stroke-width:2; stroke-dasharray:5 6; opacity:.6 }
.biom__lente{ fill:rgba(159,211,255,.35); stroke:#CFE8FF; stroke-width:2 }
.biom__mancha{ fill:none; stroke:#FFF4D6; stroke-width:7; stroke-linecap:round; stroke-linejoin:round }
.biom__foco{ fill:#FFF4D6 }
.biom__foco.e-fora{ fill:none; stroke:#FFE08A; stroke-width:2; stroke-dasharray:3 3 }
.biom__palco{ display:flex; align-items:stretch; gap:var(--e-2) }
.biom__inter > .biom__palco{ min-height:9.6rem }
.biom__svg{ flex:1 1 0; min-width:0; width:100%; height:auto; display:block }
.biom__lado{ flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; gap:var(--e-2) }
.biom__leg{ margin:0; flex-direction:column; gap:.2rem }
.biom__inter .dmb-fala, .biom__inter .dmb-fantasma{ font-size:var(--t--1) }
.biom__visto{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem }
.biom__visto-t{ font-size:.85rem; color:#CBD7F2; line-height:1.2 }
.biom__letras{ position:relative; display:grid; place-items:center; width:6.6rem; height:3.2rem;
  border-radius:var(--r); background:#F4F1E8; overflow:hidden }
.biom__letras b{ grid-area:1/1; font-family:Archivo, Arial, sans-serif; font-weight:800;
  font-size:1.35rem; letter-spacing:.12em; color:#111 }
.biom__borrado{ filter:blur(4px); opacity:0 }
.biom__ctrl{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.8rem var(--e-3) }
.biom__ctrl .dmb-esc legend{ margin-bottom:.3rem; line-height:1.3; font-size:var(--t--1) }
.biom__ctrl .dmb-esc > span{ margin:0 .3rem 0 0 }
.biom__ctrl .dmb-esc label{ min-width:4.2rem; padding:.2rem .5rem }
.biom__grau{ flex:1 1 13rem; min-width:0 }
.biom__grau label{ font-weight:700; color:#fff; line-height:1.3; font-size:var(--t--1); white-space:nowrap }
.biom__grau .dmb-faixa{ max-width:none }
.biom__valor{ font-family:Archivo; font-size:var(--t-1); color:#FFB08A; margin-left:.3rem; line-height:1 }
.biom__pontas{ display:flex; justify-content:space-between; font-size:.85rem; color:#CBD7F2; line-height:1.2 }
/* celular: a figura em cima, a legenda e o "a pessoa vê" numa fila embaixo dela. Não cabe
   tudo numa tela de 640 px (medido: sobra cerca de 100 px); a figura fica do tamanho natural */
@media (max-width:76rem){
  .biom .dmb-inter{ max-height:none !important }
  .biom__inter > .biom__palco{ min-height:0 }
  .biom__palco{ flex-direction:column-reverse; gap:.5rem; max-width:36rem }
  .biom__svg{ flex:0 0 auto; align-self:center;
    width:min(100%, calc(max(var(--biom-min, 5.4rem), var(--tela) - var(--biom-resto, 23rem)) * 2.5)) }
  .biom__lado{ flex-direction:row; align-items:center; justify-content:space-between }
  .biom__visto{ flex-direction:row; align-items:center; gap:.5rem }
  .biom__visto-t{ max-width:4.5rem }
  .biom__letras{ width:5.6rem; height:2.6rem }
  .biom__letras b{ font-size:1.1rem }
  .biom__leg{ font-size:.85rem; gap:0; line-height:1.25 }
  .biom__pontas{ margin-top:-.45rem }
  .biom__ctrl .btn{ min-height:44px; padding-block:.5rem }
}
/* o grau fica entre "mais fraca" e "mais forte", embaixo do controle: uma linha a menos */
@media (min-width:62rem) and (max-width:76rem){
  .biom{ --dmb-col-m:21rem; --biom-resto:22.5rem; --biom-min:4.9rem }
  .biom__leg{ flex-direction:row; gap:0 .7rem; font-size:.8rem }
  .biom__visto-t{ max-width:3.5rem }
  .biom__ctrl .dmb-esc legend{ margin-bottom:.15rem }
}
@media (min-width:22rem) and (max-width:40rem){ .biom{ --biom-resto:22rem } }
@media (min-width:22rem) and (max-width:40rem), (min-width:62rem) and (max-width:76rem){
  .biom__grau{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:baseline; column-gap:.4rem }
  .biom__grau .dmb-faixa{ grid-row:1; grid-column:1 / -1 }
  .biom__grau > label{ grid-row:2; grid-column:2; justify-self:center; margin-top:-.3rem }
  .biom__pontas{ display:contents }
  .biom__pontas > span:first-child{ grid-row:2; grid-column:1 }
  .biom__pontas > span:last-child{ grid-row:2; grid-column:3 }
  .biom__inter .dmb-fala, .biom__inter .dmb-fantasma{ line-height:1.4 }
}
@media (min-width:22rem) and (max-width:24rem){ .biom__pontas{ font-size:.78rem } .biom__grau > label{ font-size:.85rem } .biom{ --biom-resto:23rem } }
@media (max-width:21.99rem){ .biom{ --biom-resto:25rem } }
@media (max-height:31rem){ .biom__svg{ width:100% } }
html[data-fonte="2"] .biom__svg, html[data-fonte="3"] .biom__svg{ width:100% }
@media (max-width:40rem){
  .biom__ctrl{ gap:.6rem }
  .biom__ctrl .dmb-esc legend{ margin-bottom:.15rem }
  .biom__ctrl .dmb-esc label{ min-width:0; padding:.15rem .6rem }
}
@media (prefers-reduced-motion:no-preference){
  .biom__nitido, .biom__borrado{ transition:opacity .2s var(--saida) }
}

/* ---------- PAM ---------- */
/* pupila e letras lado a lado até no celular: quem mexe no feixe vê as letras mudarem.
   O lado dos dois quadrados se mede pela altura que sobra (legenda + fala ficam embaixo). */
.pam{ --pam-lado:min(19rem, calc(var(--tela) - var(--pam-resto, 10rem))) }
.pam__in{ display:grid; grid-template-columns:repeat(2, minmax(0, var(--pam-lado)));
  gap:var(--e-2); align-items:start }
@media (min-width:40rem){ .pam__in{ column-gap:var(--e-3) } }
@media (max-height:31rem){ .pam{ --pam-lado:19rem } }
html[data-fonte="2"] .pam, html[data-fonte="3"] .pam{ --pam-lado:19rem }
.pam__fig{ margin:0; min-width:0 }
.pam__fig figcaption{ margin-top:.4rem; font-size:var(--t--1); color:#CBD7F2; text-align:center; line-height:1.35 }
.pam__palco{ width:100%; margin-inline:auto; border-radius:50%; touch-action:manipulation; cursor:crosshair }
.pam__palco:focus-visible{ outline:3px solid #FFB08A; outline-offset:4px }
.pam__svg{ display:block; width:100%; height:auto }
.pam__feixe{ display:none }
.js .pam__feixe{ display:inline }
.pam__tabela{ container-type:inline-size; position:relative; width:100%; aspect-ratio:1; margin-inline:auto;
  border-radius:var(--r); background:#F4F1E8; overflow:hidden }
.pam__turvo, .pam__nitido{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.15em; font-family:Archivo, Arial, sans-serif;
  font-weight:800; color:#111; letter-spacing:.14em; line-height:1 }
.pam__turvo span:nth-child(1), .pam__nitido span:nth-child(1){ font-size:17.9cqi }
.pam__turvo span:nth-child(2), .pam__nitido span:nth-child(2){ font-size:12.1cqi }
.pam__turvo span:nth-child(3), .pam__nitido span:nth-child(3){ font-size:8.7cqi }
.pam__turvo span:nth-child(4), .pam__nitido span:nth-child(4){ font-size:max(6.3cqi, 10px) }
.pam__turvo span:nth-child(5), .pam__nitido span:nth-child(5){ font-size:max(4.7cqi, 8px) }
.pam__turvo{ filter:blur(5px); color:#5B5546 }
.pam__nitido{ opacity:0 }
@media (prefers-reduced-motion:no-preference){
  .pam__turvo, .pam__nitido{ transition:opacity .25s var(--saida) }
}

/* ---------- capsulotomia YAG ---------- */
/* a pupila e a rua lado a lado, sempre: quem dispara vê a rua clarear. O tamanho se mede pela
   altura que sobra abaixo deles (botões + fala) */
.yagc{ --yagc-lado:min(19rem, calc(var(--tela) - var(--yagc-resto, 12.5rem))) }
.yagc__in{ display:grid; grid-template-columns:minmax(0, var(--yagc-lado)) minmax(0, calc(var(--yagc-lado) * 1.6));
  gap:var(--e-2) var(--e-3); align-items:start }
@media (max-height:31rem){ .yagc{ --yagc-lado:19rem } }
html[data-fonte="2"] .yagc, html[data-fonte="3"] .yagc{ --yagc-lado:19rem }
/* celular: duas metades iguais; a rua vira quadrada (corta as laterais da foto) */
@media (max-width:40rem){
  .yagc__in{ grid-template-columns:repeat(2, minmax(0, var(--yagc-lado))); gap:var(--e-2) }
  .yagc .yagc__fotos{ aspect-ratio:1 }
}
.yagc__fig{ margin:0; min-width:0 }
.yagc__fig figcaption{ margin-top:.4rem; font-size:var(--t--1); color:#CBD7F2; text-align:center; line-height:1.35 }
.yagc__palco{ width:100%; margin-inline:auto; border-radius:50%; touch-action:manipulation }
.js .yagc__palco{ cursor:crosshair }
.yagc__svg{ display:block; width:100%; height:auto }
.yagc__lio{ fill:none; stroke:rgba(255,255,255,.35); stroke-width:2 }
.yagc__guia{ fill:none; stroke:#FFB08A; stroke-width:2.5; stroke-dasharray:6 6 }
.yagc__mira{ fill:#FF3B30 }
.yagc__clarao{ fill:#FFF8D8; opacity:0; transform-box:fill-box; transform-origin:center }
.yagc__fotos{ position:relative; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; background:#000 }
.yagc__fotos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
@media (prefers-reduced-motion:no-preference){
  .yagc__turva{ transition:opacity .6s var(--saida) }
  .yagc__clarao.e-dispara{ animation:yagc-clarao .32s ease-out }
}
@keyframes yagc-clarao{
  0%{ opacity:0; transform:scale(.3) }
  30%{ opacity:1; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.6) }
}

/* ---------- iridotomia YAG ---------- */
/* o desenho e a legenda numerada lado a lado; a altura do desenho é a que sobra
   abaixo dele (botão + fala) */
.irid{ --irid-alt:min(24rem, max(11rem, calc(var(--tela) - var(--irid-resto, 10rem)))) }
.irid__palco{ display:flex; align-items:center; gap:var(--e-2) var(--e-3) }
.irid__svg{ flex:0 0 auto; display:block; height:var(--irid-alt); width:auto; aspect-ratio:370/360;
  max-width:calc(100% - 10.5rem) }
.irid__leg{ flex:1 1 9rem; min-width:0; margin:0; flex-direction:column; gap:.5rem }
@media (min-width:62rem) and (max-width:76rem){
  .irid{ --irid-resto:14rem }
  .irid__palco{ flex-direction:column; align-items:flex-start; gap:.7rem }
  .irid__svg{ max-width:100% }
  .irid__leg{ flex:0 0 auto; flex-direction:row; gap:.25rem 1rem }
}
@media (max-height:31rem){ .irid{ --irid-alt:20rem } }
html[data-fonte="2"] .irid, html[data-fonte="3"] .irid{ --irid-alt:24rem }
@media (max-width:40rem){
  .irid{ --irid-resto:15.5rem; --irid-alt:min(24rem, max(9rem, calc(var(--tela) - var(--irid-resto)))) }
  .irid__palco{ flex-direction:column; align-items:center; gap:.7rem }
  .irid__svg{ max-width:100% }
  .irid__leg{ flex:0 0 auto; flex-direction:row; gap:.25rem .8rem; align-self:stretch; font-size:.85rem }
  .irid__leg b{ width:1.4rem; height:1.4rem; font-size:.78rem }
}
.irid__esclera{ fill:#E6EAF3 }
.irid__ciliar{ fill:#B5654A }
.irid__malha{ fill:#FF8A57 }
.irid__cornea{ fill:rgba(159,211,255,.22); stroke:#9FD3FF; stroke-width:2 }
.irid__cristalino{ fill:rgba(255,255,255,.1); stroke:#CFE8FF; stroke-width:2.5 }
.irid__iris polyline{ fill:none; stroke:#C08A5A; stroke-width:12; stroke-linecap:round; stroke-linejoin:round }
.irid__iris--furada, .irid__iris--depois{ opacity:0 }
.irid[data-estado="furo"] .irid__iris--antes{ opacity:0 }
.irid[data-estado="furo"] .irid__iris--furada{ opacity:1 }
.irid[data-estado="depois"] .irid__iris--antes{ opacity:0 }
.irid[data-estado="depois"] .irid__iris--depois{ opacity:1 }
.irid__setas path{ fill:none; stroke:#9FD3FF; stroke-width:3; stroke-dasharray:6 5; marker-end:url(#irid-ponta) }
.irid__setas--depois{ opacity:0 }
.irid[data-estado="depois"] .irid__setas--antes{ opacity:0 }
.irid[data-estado="depois"] .irid__setas--depois{ opacity:1 }
.irid__gotas{ display:none }
.irid__gotas circle{ fill:#9FD3FF }
.irid__clarao{ fill:#FFF8D8; opacity:0; transform:translate(303px, 74px) }
.irid__guia{ fill:none; stroke:#fff; stroke-width:2 }
.irid__num circle{ fill:#0E1F45; stroke:#fff; stroke-width:2.5 }
.irid__num text{ fill:#fff; font-family:Archivo, Arial, sans-serif; font-weight:800; font-size:26px; text-anchor:middle }
@media (prefers-reduced-motion:no-preference){
  .irid__iris, .irid__setas{ transition:opacity .9s var(--saida) }
  .irid__iris--furada{ transition-duration:.25s }
  /* gotas só com JavaScript, que as pausa fora da tela */
  .js .irid__setas{ display:none }
  .js .irid__gotas--antes{ display:inline }
  .js .irid[data-estado="depois"] .irid__gotas--antes{ display:none }
  .js .irid[data-estado="depois"] .irid__gotas--depois{ display:inline }
  .irid__gotas circle{ opacity:0; animation:3s linear infinite both }
  .irid__gotas circle:nth-child(2){ animation-delay:-1s }
  .irid__gotas circle:nth-child(3){ animation-delay:-2s }
  .irid__gotas--antes circle:nth-child(1), .irid__gotas--antes circle:nth-child(2){ animation-name:irid-preso }
  .irid__gotas--antes circle:nth-child(3){ animation-name:irid-preso-baixo }
  .irid__gotas--depois circle:nth-child(1), .irid__gotas--depois circle:nth-child(2){ animation-name:irid-passa }
  .irid__gotas--depois circle:nth-child(3){ animation-name:irid-pupila }
  .irid.e-parado .irid__gotas circle{ animation-play-state:paused }
  .irid__clarao.e-dispara{ animation:irid-clarao .45s ease-out }
}
@keyframes irid-preso{
  0%{ transform:translate(346px, 72px); opacity:0 }
  15%{ opacity:1 }
  70%{ transform:translate(355px, 110px); opacity:1 }
  100%{ transform:translate(356px, 118px); opacity:0 }
}
@keyframes irid-preso-baixo{
  0%{ transform:translate(346px, 288px); opacity:0 }
  15%{ opacity:1 }
  70%{ transform:translate(355px, 250px); opacity:1 }
  100%{ transform:translate(356px, 242px); opacity:0 }
}
@keyframes irid-passa{
  0%{ transform:translate(346px, 74px); opacity:0 }
  12%{ opacity:1 }
  35%{ transform:translate(328px, 80px) }
  65%{ transform:translate(314px, 70px); opacity:1 }
  100%{ transform:translate(306px, 50px); opacity:0 }
}
@keyframes irid-pupila{
  0%{ transform:translate(346px, 288px); opacity:0 }
  12%{ opacity:1 }
  35%{ transform:translate(356px, 244px) }
  60%{ transform:translate(326px, 226px); opacity:1 }
  100%{ transform:translate(308px, 304px); opacity:0 }
}
@keyframes irid-clarao{
  0%{ opacity:0; transform:translate(303px, 74px) scale(.3) }
  30%{ opacity:1; transform:translate(303px, 74px) scale(1) }
  100%{ opacity:0; transform:translate(303px, 74px) scale(1.5) }
}

/* ---------- curva tensional ---------- */
/* o gráfico se mede pela altura que sobra (controles + fala embaixo); a legenda fica do lado */
.ctd{ --dmb-col:23rem; --dmb-col-m:19rem;
  --ctd-alt:min(16rem, max(6rem, calc(var(--tela) - var(--ctd-resto, 15rem)))) }
.ctd__topo{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem var(--e-3) }
.ctd__grafico{ position:relative; flex:0 1 auto; min-width:0; margin:0 0 1.5rem 2.2rem;
  width:min(calc(100% - 2.2rem), calc(var(--ctd-alt) * 480 / 260)) }
.ctd__leg{ flex:1 1 11rem; margin:0; flex-direction:column; gap:.3rem }
@media (min-width:76rem){ .ctd__grafico{ max-width:calc(100% - 16.5rem) } }
@media (min-width:62rem) and (max-width:76rem){
  .ctd{ --ctd-resto:18rem }
  .ctd__leg{ flex-basis:100%; flex-direction:row; flex-wrap:wrap; gap:.1rem 1rem; font-size:.85rem }
}
@media (max-height:31rem){ .ctd{ --ctd-alt:12rem } }
html[data-fonte="2"] .ctd, html[data-fonte="3"] .ctd{ --ctd-alt:16rem }
.ctd__faixa{ fill:rgba(168,182,220,.16) }
.ctd__grade line{ stroke:rgba(203,215,242,.22); stroke-width:1.5 }
.ctd__base{ stroke:#A8B6DC; stroke-width:2 }
.ctd__curva{ fill:none; stroke:#FFE08A; stroke-width:4; stroke-linejoin:round; stroke-linecap:round }
.ctd__pico circle{ fill:none; stroke:#FFE08A; stroke-width:3 }
.js .ctd__curva, .js .ctd__pico{ opacity:0 }
.js .ctd.e-dia .ctd__curva, .js .ctd.e-dia .ctd__pico{ opacity:1 }
.ctd__marcas circle{ fill:#FFB08A; stroke:#0E1F45; stroke-width:2 }
.ctd__cursor line{ stroke:#fff; stroke-width:2; stroke-dasharray:4 5 }
.ctd__ponto{ fill:#fff; stroke:#0E1F45; stroke-width:3 }
.ctd__niveis span{ position:absolute; right:100%; padding-right:.45rem; transform:translateY(-50%);
  font-size:.85rem; color:#CBD7F2; line-height:1 }
.ctd__horas span{ position:absolute; top:100%; margin-top:.35rem; transform:translateX(-50%);
  font-size:.85rem; color:#CBD7F2; line-height:1 }
.ctd__ctrl{ display:flex; flex-direction:column; gap:.3rem }
.ctd__linha{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem var(--e-2) }
.ctd__linha > label{ font-weight:700; color:#fff }
/* a leitura fica no canto de cima do gráfico, onde a curva nunca passa */
.ctd__leitura{ position:absolute; top:0; right:0; display:flex; flex-wrap:wrap; justify-content:flex-end;
  align-items:baseline; gap:0 .5rem; color:#fff; line-height:1.15; pointer-events:none }
.ctd__hora{ font-family:Archivo; font-size:var(--t-1) }
.ctd__mmhg{ font-family:Archivo; font-weight:800; font-size:var(--t-1); color:#FFB08A }
.ctd__leitura small{ font-size:var(--t--1); color:#CBD7F2 }
.ctd__linha .dmb-faixa{ flex:1 1 8rem; max-width:none; width:auto }
.ctd__linha--acao .dmb-acoes{ margin:0; gap:.6rem }
@media (max-width:40rem){
  .ctd{ --ctd-resto:18.5rem }
  .ctd__leg{ flex-direction:row; flex-wrap:wrap; gap:.1rem 1rem; font-size:.85rem }
  .ctd__grafico{ margin-bottom:1.3rem }
  .ctd__linha--acao .dmb-acoes{ flex:1 1 auto; flex-wrap:nowrap }
  .ctd__linha--acao .dmb-acoes .btn{ flex:1 1 0; min-width:0; min-height:44px; padding:.45rem .6rem; font-size:.95rem;
    line-height:1.15; text-align:center }
  .ctd .dmb-fala, .ctd .dmb-fantasma{ font-size:var(--t--1) }
}
@media (max-width:24rem){ .ctd{ --ctd-resto:20rem } }
@media (prefers-reduced-motion:no-preference){
  .ctd__curva, .ctd__pico{ transition:opacity .8s var(--saida) }
}

/* ---------- motilidade ---------- */
/* rosto e botões lado a lado; a largura do rosto se mede pela altura que sobra */
.motil{ --motil-alt:min(19rem, max(7rem, calc(var(--tela) - var(--motil-resto, 8rem)))) }
.motil__in{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-3) }
.motil__palco{ flex:0 1 auto; min-width:0; width:min(100%, calc(var(--motil-alt) * 5 / 3)) }
@media (max-height:31rem){ .motil{ --motil-alt:13rem } }
html[data-fonte="2"] .motil, html[data-fonte="3"] .motil{ --motil-alt:19rem }
@media (min-width:62rem){
  .motil__in{ flex-wrap:nowrap }
  .motil__palco{ max-width:calc(100% - 15.5rem) }
  .motil__ctrl .btn{ white-space:nowrap }
}
.motil__svg{ display:block; width:100%; height:auto; touch-action:manipulation }
.js .motil__svg{ cursor:pointer }
.motil__pele{ fill:#C68E6A }
.motil__nariz{ fill:none; stroke:#9E6748; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.motil__branco{ fill:#F5F1EA }
.motil__palpebra{ fill:none; stroke:#7A4A32; stroke-width:4; stroke-linecap:round }
.motil__sobrancelha{ fill:none; stroke:#3E2818; stroke-width:8; stroke-linecap:round }
.motil__lados{ display:flex; padding-inline:15%; margin-top:.2rem; font-size:.85rem; color:#CBD7F2; line-height:1.3 }
.motil__lados span{ flex:1; text-align:center }
.motil__ctrl{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-2) }
@media (max-width:61.99rem){
  .motil{ --motil-resto:19rem }
  .motil__in{ flex-direction:column; align-items:flex-start }
  .motil__ctrl{ flex-direction:row; align-items:center; align-self:stretch }
  .motil__ctrl .btn{ flex:0 1 auto; min-width:0; line-height:1.15; text-align:center }
}

.motil__grade{ display:grid; grid-template-columns:repeat(3, 3.2rem); gap:.5rem }
.motil__pos{ width:3.2rem; height:3.2rem; min-width:44px; min-height:44px; display:grid; place-items:center;
  border:2px solid #A8B6DC; border-radius:var(--r); background:transparent; color:#fff;
  font-size:1.35rem; line-height:1; cursor:pointer; padding:0 }
.motil__pos:disabled{ cursor:default; opacity:.7 }
.motil__pos:not(:disabled):hover{ border-color:#fff; background:rgba(255,255,255,.08) }
.motil__pos[aria-pressed="true"]{ background:#fff; border-color:#fff; color:#0E1F45 }
.motil__pos:focus-visible{ outline:3px solid #FF8A57; outline-offset:3px }
@media (max-width:40rem){
  .motil{ --motil-resto:16.5rem }
  .motil__grade{ grid-template-columns:repeat(3, 44px); gap:6px }
  .motil__pos{ width:44px; height:44px; font-size:1.2rem }
  .motil__lados{ padding-inline:8%; white-space:nowrap }
  .motil .dmb-fala, .motil .dmb-fantasma{ font-size:var(--t--1) }
}
@media (max-width:24rem){ .motil{ --motil-resto:18rem } }
@media (prefers-reduced-motion:no-preference){
  .motil__iris, .motil__luz{ transition:transform .4s var(--saida) }
  .motil.e-arrasta .motil__iris, .motil.e-arrasta .motil__luz{ transition-duration:.08s }
}

/* ---------- alto contraste: preto, branco e amarelo ---------- */
html[data-contraste="alto"] .dmb-legenda,
html[data-contraste="alto"] .dmb-esc label small,
html[data-contraste="alto"] .biom__visto-t,
html[data-contraste="alto"] .biom__pontas,
html[data-contraste="alto"] .pam__fig figcaption,
html[data-contraste="alto"] .yagc__fig figcaption,
html[data-contraste="alto"] .ctd__niveis span,
html[data-contraste="alto"] .ctd__horas span,
html[data-contraste="alto"] .ctd__leitura small,
html[data-contraste="alto"] .motil__lados{ color:#fff }
html[data-contraste="alto"] .dmb-linha{ background:#000; border-color:#FFD75E; color:#FFD75E }
html[data-contraste="alto"] .dmb-esc label{ border-color:#fff }
html[data-contraste="alto"] .dmb-esc input:checked + label{ background:#FFD75E; border-color:#FFD75E; color:#000 }
html[data-contraste="alto"] .dmb-esc input:checked + label small{ color:#000 }
html[data-contraste="alto"] .dmb-esc input:focus-visible + label,
html[data-contraste="alto"] .dmb-faixa:focus-visible,
html[data-contraste="alto"] .motil__pos:focus-visible,
html[data-contraste="alto"] .pam__palco:focus-visible{ outline-color:#00E0FF }
html[data-contraste="alto"] .dmb-faixa{ accent-color:#FFD75E }
html[data-contraste="alto"] .dmb-cor--luz{ background:#FFD75E }
html[data-contraste="alto"] .dmb-cor--lente, html[data-contraste="alto"] .dmb-cor--retina{ background:#fff }
html[data-contraste="alto"] .biom__esclera{ fill:#000; stroke:#fff }
html[data-contraste="alto"] .biom__retina, html[data-contraste="alto"] .biom__cornea,
html[data-contraste="alto"] .biom__lente{ stroke:#fff }
html[data-contraste="alto"] .biom__raio, html[data-contraste="alto"] .biom__fantasma{ stroke:#FFD75E }
html[data-contraste="alto"] .biom__valor, html[data-contraste="alto"] .ctd__mmhg{ color:#FFD75E }
html[data-contraste="alto"] .yagc__guia{ stroke:#FFD75E }
html[data-contraste="alto"] .irid__cornea, html[data-contraste="alto"] .irid__cristalino{ stroke:#fff }
html[data-contraste="alto"] .irid__setas path{ stroke:#FFD75E }
html[data-contraste="alto"] .irid__malha{ fill:#FFD75E }
html[data-contraste="alto"] .irid__guia{ fill:none; stroke:#fff; stroke-width:2 }
.irid__num circle{ fill:#000 }
html[data-contraste="alto"] .ctd__curva, html[data-contraste="alto"] .ctd__pico circle{ stroke:#FFD75E }
html[data-contraste="alto"] .ctd__base{ stroke:#fff }
html[data-contraste="alto"] .ctd__grade line{ stroke:rgba(255,255,255,.4) }
html[data-contraste="alto"] .ctd__marcas circle{ fill:#FFD75E; stroke:#000 }
html[data-contraste="alto"] .ctd__ponto{ stroke:#000 }
html[data-contraste="alto"] .dmb-cor--medida{ background:#FFD75E }
html[data-contraste="alto"] .motil__pos{ border-color:#fff }
html[data-contraste="alto"] .motil__pos[aria-pressed="true"]{ background:#FFD75E; border-color:#FFD75E; color:#000 }

/* letra grande (A+): não precisa caber na tela; volta ao arranjo que se acomoda sozinho */
html[data-fonte="2"] .biom__grau label, html[data-fonte="3"] .biom__grau label{ white-space:normal }
html[data-fonte="2"] .motil__in, html[data-fonte="3"] .motil__in{ flex-wrap:wrap }
html[data-fonte="2"] .motil__palco, html[data-fonte="3"] .motil__palco{ max-width:none }
html[data-fonte="2"] .motil__ctrl, html[data-fonte="3"] .motil__ctrl{ flex-wrap:wrap }
html[data-fonte="2"] .biom__lado, html[data-fonte="3"] .biom__lado{ flex-wrap:wrap; gap:.5rem 1rem }
html[data-fonte="2"] .motil__ctrl .btn, html[data-fonte="3"] .motil__ctrl .btn{ white-space:normal }