/* Demonstrações do grupo "a" (rodada 11): topografia, tomografia, paquimetria,
   microscopia especular, lentes de contato e gonioscopia.
   Sempre sobre faixa escura: cor literal, nunca token. Só transform e opacity animam. */

/* ---------- peças comuns ---------- */
.dma{ position:relative }
.dma figure{ margin:0 }
.dma figcaption{ margin-top:.3rem; font-size:var(--t--1); color:#CBD7F2; line-height:1.35 }
.dma :focus-visible{ outline:3px solid #FFB08A; outline-offset:3px }
.dma svg{ display:block; width:100%; height:auto }
.dma-opcoes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem }
.dma-opc{ min-height:44px; background:transparent; border-color:#fff; color:#fff }
.dma-opc:hover{ background:rgba(255,255,255,.1) }
.dma-opc[aria-pressed="true"]{ background:#fff; color:#0E1F45 }
.dma-linha{ min-height:44px; border-color:#fff; color:#fff; background:transparent }
.dma-linha:hover{ background:rgba(255,255,255,.1) }
.dma .btn{ min-height:44px }
.dma .btn:disabled{ opacity:.45; cursor:default; transform:none }
.dma-acoes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem }
.dma-fala{ margin-top:.75rem; font-size:var(--t--1); line-height:1.4; color:#fff; max-width:44rem }
@media (min-width:62rem){ .dma-fala{ line-height:1.45 } }
.dma-legenda{ margin-top:var(--e-1); font-size:var(--t--1); line-height:1.35; color:#CBD7F2; font-weight:700 }
.dma-legenda + .dma-opcoes{ margin-top:.4rem }
.dma-svgtxt{ fill:#E6ECF8; font-family:"Atkinson Hyperlegible", system-ui, Arial, sans-serif;
  font-size:16px }
.dma-svgtxt--escuro{ fill:#0E1F45 }

/* Cabe numa tela só (rodada 14). O bloco tem três partes: .cab (título e texto),
   .dma-palco (a imagem) e .dma-lado (botões e a fala). No PC o .cab ocupa a largura toda e,
   embaixo, imagem e botões ficam lado a lado; no celular, um embaixo do outro. A largura da
   imagem vem de --dma-w: o demos-a.js mede e põe a maior que cabe em --tela (sem JavaScript
   fica o valor padrão daqui). A nota de rodapé (.dma-nota) fica fora do bloco, logo abaixo. */
.dma > .cab{ margin-bottom:var(--e-3) }
.dma-palco{ width:100%; min-width:0 }
.dma-palco svg, .dma-palco .topog__mapa{ width:calc(var(--dma-k, 1) * 100%); margin-inline:auto }
/* celular: dois botões por linha, o texto pode quebrar dentro do botão */
.dma-opc{ flex:1 1 5rem; padding-inline:.45rem; line-height:1.15; text-align:center; white-space:normal }
.dma-lado{ position:relative; min-width:0; margin-top:.6rem }
.dma-lado > :first-child{ margin-top:0 }
.dma-nota{ margin-top:var(--e-3) }
/* ferramentas de medida do demos-a.js: nunca aparecem */
.dma-sonda{ position:absolute; top:0; left:0; width:1px; height:var(--tela); visibility:hidden; pointer-events:none }
.dma-molde{ position:absolute; top:0; left:0; margin:0; visibility:hidden; pointer-events:none }
@media (min-width:62rem){
  .dma{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"cab cab" "palco lado";
    column-gap:var(--e-4); align-items:start }
  .dma > .cab{ grid-area:cab; max-width:none; margin-bottom:var(--e-2) }
  .dma-palco{ grid-area:palco; width:var(--dma-w, 26rem); margin:0 }
  .dma-palco svg, .dma-palco .topog__mapa{ width:100% }
  .dma-opc{ flex:0 1 auto; padding-inline:1.1rem; white-space:nowrap }
  .dma-lado{ grid-area:lado; margin-top:0 }
}
/* PC estreito (1000 a 1280 px): a calha da esquerda vira uma linha em cima, como no
   celular, e a demonstração ganha a largura toda (só nas faixas com estas demonstrações) */
@media (min-width:62rem) and (max-width:80rem){
  .demo .faixa__in:has(> div > .dma){ grid-template-columns:minmax(0,1fr); gap:var(--e-2) }
  .demo .faixa__in:has(> div > .dma) > .faixa__marca{ position:static; justify-self:start }
}

html[data-contraste="alto"] .dma-opc,
html[data-contraste="alto"] .dma-linha{ background:#000; border-color:#FFD75E; color:#FFD75E }
html[data-contraste="alto"] .dma-opc[aria-pressed="true"]{ background:#FFD75E; color:#000 }
html[data-contraste="alto"] .dma figcaption,
html[data-contraste="alto"] .dma-legenda{ color:#fff }
html[data-contraste="alto"] .dma :focus-visible{ outline-color:#00E0FF }

/* ---------- topografia: anéis de Plácido e mapa de cores ---------- */
/* lado a lado até no celular estreito: a graça é comparar os anéis com o mapa */
.topog__paineis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-2) var(--e-2) }
.topog__anel{ fill:none; stroke:#fff; stroke-width:2.6; transform-box:fill-box; transform-origin:center }
.topog[data-forma="astig"] .topog__anel{ transform:scale(1,.8) }
/* cone embaixo: anéis sobem e encolhem, ficam apertados embaixo; o maior (r=89) não passa da íris */
.topog[data-forma="cone"] .topog__anel{ transform:translateY(calc(var(--r) * -.16px)) scale(.9) }
.topog__mapa{ position:relative; aspect-ratio:1; border-radius:50% }
.topog__img{ position:absolute; inset:0; width:100%; height:100%; opacity:0 }
.topog[data-forma="regular"] .topog__img--regular,
.topog[data-forma="astig"] .topog__img--astig,
.topog[data-forma="cone"] .topog__img--cone{ opacity:1 }
.topog__escala{ display:flex; align-items:center; gap:.6rem; margin-top:var(--e-1);
  font-size:var(--t--1); color:#CBD7F2 }
.topog__cores{ display:flex; flex:1 1 auto; height:.9rem; border-radius:3px; overflow:hidden; min-width:4rem }
.topog__cores i{ flex:1 1 0 }
html[data-contraste="alto"] .topog__img{ filter:none }   /* o mapa é a informação: fica colorido */
html[data-contraste="alto"] .topog__escala{ color:#fff }
@media (prefers-reduced-motion:no-preference){
  .topog__anel{ transition:transform .7s var(--saida) }
  .topog__img{ transition:opacity .6s var(--saida) }
}

/* ---------- tomografia: a câmera que gira ---------- */
.tomog__paineis{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:var(--e-2);
  align-items:end }
/* "frente" e "verso" maiores no desenho: a fatia encolhe e o texto não pode cair de 12 px */
.tomog__fatia .dma-svgtxt{ font-size:32px }
.tomog__giro{ transform-box:fill-box; transform-origin:center }
.tomog__mancha{ opacity:0 }
.tomog[data-forma="cone"] .tomog__mancha{ opacity:1 }
.tomog__corpo{ fill:rgba(143,200,240,.26) }
.tomog__linha{ fill:none; stroke:#CFE6FF; stroke-width:2.5; stroke-linejoin:round }
.tomog__linha--tras{ stroke:#FFB08A }
.tomog__fatia text:first-of-type{ fill:#CFE6FF }
.tomog__fatia text:last-of-type{ fill:#FFB08A }
.tomog__controle{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .9rem }
.tomog__rotulo{ flex:1 0 100%; font-weight:700; color:#fff }
.tomog__controle .dma-acoes{ flex:0 0 auto; margin-top:0 }
@media (min-width:62rem){ .tomog__rotulo{ flex:0 0 auto } }
.tomog__rotulo output{ font-family:Archivo; color:#FFB08A }
.tomog__range{ display:block; flex:1 1 6rem; min-width:0; height:44px; margin:0; accent-color:#FF7A45; cursor:pointer }
.tomog__range:disabled{ opacity:.45; cursor:default }
.tomog__leitura{ margin-top:.4rem; font-size:var(--t--1); line-height:1.35; color:#CBD7F2 }
.tomog__leitura b{ color:#FFD75E; font-family:Archivo; font-size:1.15em }
html[data-contraste="alto"] .tomog__leitura{ color:#fff }
@media (prefers-reduced-motion:no-preference){ .tomog__mancha{ transition:opacity .5s var(--saida) } }

/* ---------- paquimetria: espessura e a leitura da pressão ---------- */
.paqui__paineis{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--e-2);
  align-items:start }
/* texto maior no desenho: lado a lado até no celular estreito, sem cair de 12 px */
.paqui__desenho .dma-svgtxt{ font-size:25px }
.paqui__relogio .dma-svgtxt{ font-size:24px }
.paqui__corpo{ fill:rgba(143,200,240,.28); stroke:#CFE6FF; stroke-width:2 }
.paqui__ponta{ fill:#8D9BB5 }
.paqui__cota{ fill:none; stroke:#FFD75E; stroke-width:2.5 }
.paqui__v--fina, .paqui__v--media, .paqui__v--grossa{ opacity:0 }
.paqui[data-esp="fina"] .paqui__v--fina,
.paqui[data-esp="media"] .paqui__v--media,
.paqui[data-esp="grossa"] .paqui__v--grossa{ opacity:1 }
.paqui__arco{ fill:none; stroke:#2A3C6E; stroke-width:10 }
.paqui__marcas line{ stroke:#9FB6DA; stroke-width:2 }
.paqui__real{ fill:#FFD75E }
.paqui__agulha{ transform-box:fill-box; transform-origin:center }
.paqui__agulha path{ fill:#FF7A45 }
.paqui__relogio circle[r="8"]{ fill:#fff }
.paqui__num{ fill:#fff; font-family:Archivo, Arial, sans-serif; font-weight:800; font-size:30px }
.paqui__tri{ display:inline-block; width:0; height:0; border-left:.4em solid transparent;
  border-right:.4em solid transparent; border-top:.7em solid #FFD75E; vertical-align:middle }
@media (prefers-reduced-motion:no-preference){
  .paqui__agulha{ transition:transform .8s var(--saida) }
  .paqui__v--fina, .paqui__v--media, .paqui__v--grossa{ transition:opacity .45s var(--saida) }
}

/* ---------- microscopia especular: o mosaico do endotélio ---------- */
.espec__foto svg{ border-radius:6px; border:1px solid #2A3C6E }
.espec__mosaico--velha{ opacity:0 }
.espec[data-idade="velha"] .espec__mosaico--jovem{ opacity:0 }
.espec[data-idade="velha"] .espec__mosaico--velha{ opacity:1 }
.espec__celulas polygon{ stroke:#23272E; stroke-width:2.4; stroke-linejoin:round }
.espec__ponto{ fill:#FF7A45; stroke:#fff; stroke-width:1.2; opacity:0 }
.espec__ponto.dma-on{ opacity:1 }
.espec [data-espec-conta]{ font-weight:700; color:#fff }
@media (prefers-reduced-motion:no-preference){ .espec__mosaico{ transition:opacity .6s var(--saida) } }

/* ---------- lentes de contato: tigela ou pratinho ---------- */
.lcont__par{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-2) }
.lcont__svg{ background:#16264F; border-radius:var(--r) }
.lcont__dedo{ fill:#D9A07E }
.lcont__unha{ fill:#F2CDBA }
.lcont__lente{ fill:rgba(143,220,255,.22); stroke:#8FDCFF; stroke-width:5; stroke-linecap:round;
  transform-box:fill-box; transform-origin:50% 100% }
.lcont__teste[data-estado="certa"] .lcont__lente--avesso,
.lcont__teste[data-estado="avesso"] .lcont__lente--certa{ opacity:0 }
.lcont__pergunta{ font-family:Archivo; font-weight:700; font-size:var(--t-1); color:#fff }
.lcont__lado .dma-opcoes{ margin-top:var(--e-1) }
.lcont__lado .dma-acoes{ margin-top:.6rem }
.lcont__fig b{ color:#fff }
html[data-contraste="alto"] .lcont__svg{ background:#000; outline:2px solid #fff }
@keyframes lcont-vira{ 0%{ transform:scaleY(1) } 45%{ transform:scaleY(.15) } 100%{ transform:scaleY(1) } }
@media (prefers-reduced-motion:no-preference){
  .lcont__lente{ transition:opacity .3s var(--saida) }
  .lcont__svg.dma-vira .lcont__lente{ animation:lcont-vira .45s var(--saida) }
}

/* ---------- gonioscopia: o ângulo e a lente com espelho ---------- */
.gonio .dma-svgtxt{ font-size:18px }
.gonio__camara{ fill:#16305F }
.gonio__cristalino{ fill:#C9D6EA }
.gonio__esclera{ fill:#E9EEF5 }
.gonio__ciliar{ fill:#8A4A3A }
.gonio__malha{ fill:none; stroke:#FFB08A; stroke-width:5; stroke-dasharray:2 1.6 }
.gonio__canal{ fill:#16305F; stroke:#FFB08A; stroke-width:1.5 }
.gonio__cornea{ fill:rgba(191,227,245,.42); stroke:#CFE6FF; stroke-width:1.5 }
.gonio__iris{ fill:#7A5236 }
.gonio[data-angulo="aberto"] .gonio__iris--estreito,
.gonio[data-angulo="estreito"] .gonio__iris--aberto{ opacity:0 }
.gonio__rota{ fill:none; stroke:#8FE3FF; stroke-width:2; stroke-dasharray:5 5; opacity:.5 }
.gonio[data-angulo="aberto"] .gonio__rota--estreito,
.gonio[data-angulo="estreito"] .gonio__rota--aberto{ opacity:0 }
.gonio__guia{ stroke:#E6ECF8; stroke-width:1.5 }
/* o rótulo "íris" fica no caminho das gotas: um contorno da cor da câmara o separa delas */
.gonio__rotulo-iris{ paint-order:stroke; stroke:#16305F; stroke-width:5px; stroke-linejoin:round }
html[data-contraste="alto"] .gonio__rotulo-iris{ stroke:#000 }
.gonio__lente{ opacity:0 }
.gonio[data-lente="com"] .gonio__lente{ opacity:1 }
.gonio__vidro{ fill:rgba(200,230,255,.12); stroke:#CFE8FF; stroke-width:2 }
.gonio__espelho{ stroke:#fff; stroke-width:6; stroke-linecap:round }
.gonio__raio{ opacity:0 }
.gonio__raio path{ fill:none; stroke:#FFD75E; stroke-width:3; stroke-linejoin:round }
.gonio__raio .gonio__volta{ stroke-dasharray:6 5 }
.gonio[data-lente="sem"][data-angulo="aberto"] .gonio__raio--sem-aberto,
.gonio[data-lente="sem"][data-angulo="estreito"] .gonio__raio--sem-estreito,
.gonio[data-lente="com"][data-angulo="aberto"] .gonio__raio--com-aberto,
.gonio[data-lente="com"][data-angulo="estreito"] .gonio__raio--com-estreito{ opacity:1 }
.gonio__controles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--e-2); align-items:end }
.gonio__controles > div > :first-child{ margin-top:0 }
/* no celular, cada grupo numa coluna e os dois botões um embaixo do outro: ocupa menos altura */
.gonio .dma-opcoes{ display:grid; grid-template-columns:minmax(0,1fr) }
@media (min-width:62rem){
  .gonio__controles{ display:flex; flex-wrap:wrap; gap:0 var(--e-3) }
  .gonio .dma-opcoes{ display:flex }
  .gonio .dma-opc{ padding-inline:.8rem }
}

/* as gotas do líquido: só com JavaScript (que pausa fora da tela) e sem pedido de calma */
.gonio__gota{ fill:#8FE3FF; display:none }
.gonio[data-angulo="aberto"] .gonio__gotas--estreito,
.gonio[data-angulo="estreito"] .gonio__gotas--aberto{ display:none }
@keyframes gonio-aberto{
  0%  { transform:translate(100px,270px); opacity:0 }
  6%  { opacity:1 }
  22% { transform:translate(130px,255px) }
  36% { transform:translate(165px,247px) }
  46% { transform:translate(170px,232px) }
  62% { transform:translate(150px,205px) }
  78% { transform:translate(115px,214px) }
  90% { transform:translate(94px,234px); opacity:1 }
  100%{ transform:translate(82px,240px); opacity:0 }
}
@keyframes gonio-estreito{
  0%  { transform:translate(100px,270px); opacity:0 }
  6%  { opacity:1 }
  30% { transform:translate(130px,255px) }
  52% { transform:translate(165px,248px) }
  62% { transform:translate(170px,234px) }
  76% { transform:translate(148px,214px) }
  86% { transform:translate(116px,219px) }
  92% { transform:translate(108px,222px); opacity:1 }
  100%{ transform:translate(108px,222px); opacity:0 }
}
@keyframes gonio-passa{
  0%  { transform:translate(100px,270px); opacity:0 }
  6%  { opacity:1 }
  30% { transform:translate(130px,255px) }
  52% { transform:translate(165px,248px) }
  62% { transform:translate(170px,234px) }
  76% { transform:translate(148px,214px) }
  86% { transform:translate(112px,220px) }
  94% { transform:translate(96px,233px); opacity:1 }
  100%{ transform:translate(84px,240px); opacity:0 }
}
@media (prefers-reduced-motion:no-preference){
  .js .gonio__gota{ display:block; animation:gonio-aberto 7s linear infinite; animation-play-state:paused }
  .js .gonio__gota--estreito{ animation-name:gonio-estreito; animation-duration:9.5s }
  .js .gonio__gota--passa{ animation-name:gonio-passa }
  .gonio.dma-ver .gonio__gota{ animation-play-state:running }
  .gonio__iris, .gonio__rota, .gonio__lente, .gonio__raio{ transition:opacity .5s var(--saida) }
}
@media (prefers-reduced-motion:reduce){ .gonio__rota{ opacity:.9 } }
html[data-contraste="alto"] .gonio__camara{ fill:#000; stroke:#fff }