/* Demonstrações do grupo "c" (rodada 11): retinografia, angiofluoresceinografia,
   autofluorescência, ultrassonografia B e teste do olhinho.
   Sempre sobre faixa escura: cor literal, nunca token. Só transform e opacity animam.
   Sem JavaScript cada uma mostra um estado parado; o JS põe .dc-vivo na raiz. */

/* ---------- peças comuns ---------- */
.dc figure{ margin:0 }
.dc figcaption{ margin-top:.55rem; font-size:var(--t--1); color:#CBD7F2; line-height:1.4 }
.dc :focus-visible{ outline:3px solid #FFB08A; outline-offset:3px }
.dc svg{ display:block; width:100%; height:auto }
.dc .btn{ min-height:44px }
.dc .btn:disabled{ opacity:.45; cursor:default; transform:none }
.dc-acoes{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--e-2) }
.dc-btn-linha{ border-color:#fff; color:#fff; background:transparent }
.dc-btn-linha:hover{ background:rgba(255,255,255,.1) }
.dc-fala{ margin-top:var(--e-3); font-size:var(--t-1); color:#fff; max-width:44rem }
.dc-fala:empty{ display:none }
.dc-regua{ display:block; width:100%; height:44px; margin:0; accent-color:#FF7A45; cursor:pointer }
.dc-regua:disabled{ opacity:.45; cursor:default }
.dc b{ color:#fff }

html[data-contraste="alto"] .dc-btn-linha{ background:#000; border-color:#FFD75E; color:#FFD75E }
html[data-contraste="alto"] .dc figcaption{ color:#fff }
html[data-contraste="alto"] .dc :focus-visible{ outline-color:#00E0FF }
html[data-contraste="alto"] .dc-regua{ accent-color:#FFD75E }

.dc-nota{ margin-top:var(--e-3) }

/* ---------- 1. retinografia: as partes da foto ---------- */
/* a foto encolhe pela altura: no celular desconta o que fica embaixo dela (--dc-fora);
   no PC fica ao lado do texto e tem a altura da tela */
.retg__in{ display:grid; gap:var(--e-2) var(--e-4); max-width:64rem }
.retg__foto{ position:relative; width:min(100%, 32rem); aspect-ratio:1; margin-inline:auto }
.dc-vivo .retg__foto{ width:min(100%, 32rem, calc(max(17rem, var(--tela)) - var(--dc-fora, 16rem) - 4px)) }
.retg__foto img{ display:block; width:100%; height:auto; border-radius:50% }
.retg__marcas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.retg__realce{ opacity:0 }
.retg[data-parte="disco"] .retg__realce[data-parte="disco"],
.retg[data-parte="macula"] .retg__realce[data-parte="macula"],
.retg[data-parte="fovea"] .retg__realce[data-parte="fovea"],
.retg[data-parte="arteria"] .retg__realce[data-parte="arteria"],
.retg[data-parte="veia"] .retg__realce[data-parte="veia"]{ opacity:1 }
.retg__halo{ fill:none; stroke:#000; stroke-opacity:.5; stroke-width:18 }
.retg__traco{ fill:none; stroke:#fff; stroke-width:7 }
.retg__traco--pont{ stroke-dasharray:22 16 }
.retg__faixa{ fill:none; stroke:#FFF3C4; stroke-opacity:.42; stroke-width:20;
  stroke-linecap:round; stroke-linejoin:round }

/* os números sobre a foto: 36 px de desenho, 44 px de toque */
.retg__pino{ position:absolute; width:2rem; height:2rem; margin:-1rem 0 0 -1rem;
  display:grid; place-items:center; border-radius:50%;
  background:#0E1F45; border:2px solid #fff; color:#fff;
  font-family:Archivo, Arial, sans-serif; font-weight:800; font-size:1rem; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.55) }
.retg__pino::after{ content:""; position:absolute; inset:-5px; border-radius:50% }
.dc-vivo .retg__pino{ cursor:pointer }
.retg__pino.dc-on{ background:#FFD75E; border-color:#FFD75E; color:#0E1F45 }

.retg__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem }
.retg__lista p{ margin:.2rem 0 .6rem 2.55rem; color:#CBD7F2; font-size:var(--t--1) }
.dc-vivo .retg__lista{ display:flex; flex-wrap:wrap }
.dc-vivo .retg__lista p{ display:none }
.retg__nome{ display:flex; align-items:center; gap:.5rem; width:100%; min-height:44px;
  padding:.35rem .65rem .35rem .4rem; border:2px solid #2A3C6E; border-radius:var(--r);
  background:transparent; color:#fff; font:inherit; font-weight:700; text-align:left;
  line-height:1.2; cursor:pointer }
.dc-vivo .retg__nome{ width:auto }
.retg__nome:disabled{ cursor:default; border-color:transparent; padding-left:0 }
.retg__nome:not(:disabled):hover{ background:rgba(255,255,255,.08) }
.retg__nome b{ flex:0 0 auto; display:grid; place-items:center; width:1.8rem; height:1.8rem;
  border-radius:50%; background:#16264F; border:2px solid #fff; color:#fff;
  font-family:Archivo, Arial, sans-serif; font-size:.9rem }
.retg__nome[aria-pressed="true"]{ background:#FFD75E; border-color:#FFD75E; color:#0E1F45 }
.retg__nome[aria-pressed="true"] b{ background:#0E1F45; border-color:#0E1F45; color:#FFD75E }
.retg__fala{ margin-top:var(--e-2); font-size:var(--t-0) }
@media (max-width:61.99rem){
  .retg > .cab{ margin-bottom:var(--e-3) }
  .retg__in{ gap:var(--e-1) }
  .dc-vivo .retg__foto{ min-width:min(100%, 11rem) }
  .retg .retg__fala{ margin-top:var(--e-1); font-size:var(--t--1); line-height:1.5 }
  .dc-vivo .retg__lista{ gap:.4rem .25rem }
  .dc-vivo .retg__nome{ gap:.25rem; padding:.25rem .3rem .25rem .15rem; font-size:var(--t--1) }
  .dc-vivo .retg__nome b{ width:1.4rem; height:1.4rem; font-size:.8rem }
}
/* PC: texto em cima, foto e lista lado a lado; a foto tem a altura que sobra */
@media (min-width:62rem){
  .retg > .cab{ max-width:58rem; margin-bottom:var(--e-3) }
  .retg__in{ grid-template-columns:auto minmax(0,1fr); align-items:start; max-width:none }
  .dc-vivo .retg__foto{ width:min(32rem, calc(var(--tela) - var(--dc-acima, 12rem) - 4px)) }
}
/* tela larga: o texto sobe para a coluna da lista e a foto ganha a altura inteira */
@media (min-width:80rem){
  .retg{ display:grid; grid-template-columns:min(var(--tela), 33%) minmax(0,1fr);
    grid-template-rows:auto 1fr; column-gap:var(--e-4); align-items:start }
  .retg__in{ display:contents }
  .retg__foto{ grid-column:1; grid-row:1 / span 2 }
  .retg > .cab{ grid-column:2; grid-row:1 }
  .retg__lado{ grid-column:2; grid-row:2 }
  .dc-vivo .retg__foto{ width:100% }
}
@media (min-width:80rem) and (min-height:50rem){
  .retg{ grid-template-columns:min(var(--tela), 45%) minmax(0,1fr) }
}

html[data-contraste="alto"] .retg__foto img,
html[data-contraste="alto"] .autof img{ filter:none }   /* a cor é a informação */
html[data-contraste="alto"] .retg__pino{ background:#000 }
html[data-contraste="alto"] .retg__pino.dc-on,
html[data-contraste="alto"] .retg__nome[aria-pressed="true"]{ background:#FFD75E; color:#000 }
html[data-contraste="alto"] .retg__nome{ border-color:#fff }
html[data-contraste="alto"] .retg__nome:disabled{ border-color:transparent }
html[data-contraste="alto"] .retg__lista p{ color:#fff }
@media (prefers-reduced-motion:no-preference){
  .retg__realce{ transition:opacity .35s var(--saida) }
}

/* ---------- 2. angiofluoresceinografia: o caminho do contraste ---------- */
/* o desenho encolhe pela altura; no PC o texto fica em cima, inteiro, e o desenho e os
   controles dividem a linha de baixo */
.angio__in{ display:grid; gap:var(--e-2) var(--e-4); max-width:64rem }
.angio__quadro{ width:min(100%, 30rem); margin-inline:auto }
.dc-vivo .angio__quadro{ width:min(100%, 30rem, calc(max(17rem, var(--tela)) - var(--dc-fora, 15rem) - 4px)) }
@media (max-width:61.99rem){
  .angio > .cab{ margin-bottom:var(--e-3) }
  .angio .angio__trilho{ flex-basis:7.5rem; min-width:7.5rem }
  .angio__linha .btn{ padding-inline:.75rem }
}
@media (min-width:62rem){
  .angio > .cab{ max-width:none; margin-bottom:var(--e-2) }
  .angio__in{ grid-template-columns:auto minmax(0,1fr); align-items:start; max-width:none }
  .angio .angio__tempo{ font-size:var(--t-1) }
  .dc-vivo .angio__quadro{ width:min(30rem, calc(var(--tela) - var(--dc-acima, 15rem) - 4px)) }
}
#angio-a path, #angio-v path{ fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-width:calc(var(--w) * var(--k, 1) * 1px) }
.angio__sombra{ stroke:#0b0b0b; --k:1 }
.angio__art{ stroke:#f2f2f2 }
.angio__vei{ stroke:#ececec }
.angio__lam1{ stroke:#e8e8e8 }
.angio__lam2{ stroke:#262626; --k:.42 }

/* o que aparece em cada fase (0 a 5); sem JS fica a fase 4, a dos vasos cheios */
.angio__coroide, .angio__manchas, .angio__disco, .angio__sombra, .angio__art,
.angio__lam, .angio__vei{ opacity:0 }
.angio[data-fase="1"] .angio__coroide{ opacity:1 }
.angio[data-fase="2"] .angio__coroide{ opacity:.92 }
.angio[data-fase="3"] .angio__coroide{ opacity:.88 }
.angio[data-fase="4"] .angio__coroide{ opacity:.82 }
.angio[data-fase="5"] .angio__coroide{ opacity:.42 }
.angio[data-fase="1"] .angio__manchas{ opacity:.7 }
.angio[data-fase="2"] .angio__manchas{ opacity:.25 }
.angio[data-fase="1"] .angio__disco{ opacity:.3 }
.angio[data-fase="2"] .angio__disco,
.angio[data-fase="3"] .angio__disco,
.angio[data-fase="4"] .angio__disco{ opacity:.6 }
.angio[data-fase="5"] .angio__disco{ opacity:1 }
.angio[data-fase="1"] .angio__sombra,
.angio[data-fase="2"] .angio__sombra,
.angio[data-fase="3"] .angio__sombra{ opacity:1 }
.angio[data-fase="5"] .angio__sombra{ opacity:.45 }
.angio[data-fase="2"] .angio__sombra--a,
.angio[data-fase="3"] .angio__sombra--a,
.angio[data-fase="5"] .angio__sombra--a{ opacity:0 }
.angio[data-fase="2"] .angio__art,
.angio[data-fase="3"] .angio__art,
.angio[data-fase="4"] .angio__art{ opacity:1 }
.angio[data-fase="5"] .angio__art{ opacity:.2 }
.angio[data-fase="3"] .angio__lam{ opacity:1 }
.angio[data-fase="4"] .angio__vei{ opacity:1 }
.angio[data-fase="5"] .angio__vei{ opacity:.2 }

.angio__cima{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:0 var(--e-2) }
.angio__tempo{ font-family:Archivo, Arial, sans-serif; font-weight:800; font-size:var(--t-2);
  color:#FFD75E; line-height:1.2; margin:0 }
.angio__rot{ display:block; font-weight:700; color:#fff }
.angio__linha{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.25rem var(--e-2); margin-top:.35rem }
.angio__trilho{ flex:1 1 9rem; min-width:9rem }
.angio__linha .dc-acoes{ margin-top:0 }
.angio__linha .btn{ min-width:9.8rem }   /* "Parar" ocupa o lugar de "Ver em sequência": nada pula */
.angio__ext{ display:flex; justify-content:space-between; font-size:var(--t--1); color:#CBD7F2;
  line-height:1.2; margin-top:-.2rem }
.angio__fala{ margin-top:var(--e-1); font-size:var(--t--1) }
@media (min-width:80rem){ .angio .angio__fala{ font-size:var(--t-0) } .angio .angio__tempo{ font-size:var(--t-2) } }
.angio__fases{ margin:var(--e-3) 0 0; padding-left:1.3rem; display:grid; gap:.5rem;
  color:#CBD7F2; font-size:var(--t--1) }
.dc-vivo .angio__fases{ display:none }
html[data-contraste="alto"] .angio__ext,
html[data-contraste="alto"] .angio__fases{ color:#fff }
@media (prefers-reduced-motion:no-preference){
  .angio__coroide, .angio__manchas, .angio__disco, .angio__sombra, .angio__art,
  .angio__lam, .angio__vei{ transition:opacity .7s var(--saida) }
}

/* ---------- 3. autofluorescência: a cortina ---------- */
.autof__palco{ position:relative; width:100%; max-width:30rem; aspect-ratio:1;
  overflow:hidden; border-radius:var(--r); background:#000; touch-action:pan-y }
.dc-vivo .autof__palco{ cursor:ew-resize }
.autof__palco img{ display:block; position:absolute; inset:0; width:100%; height:100%;
  user-select:none; -webkit-user-drag:none; pointer-events:none }
/* a cortina mostra a direita; a foto de dentro anda ao contrário e fica parada na tela */
.autof__cortina{ position:absolute; inset:0; overflow:hidden; transform:translateX(50%) }
.autof__cortina .autof__af{ transform:translateX(-50%) }
.autof__linha{ position:absolute; inset:0; pointer-events:none; transform:translateX(50%) }
.autof__linha::before{ content:""; position:absolute; top:0; bottom:0; left:-1.5px; width:3px;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.45) }
.autof__linha span{ position:absolute; left:0; top:50%; width:2.75rem; height:2.75rem;
  margin:-1.375rem 0 0 -1.375rem; border-radius:50%; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.6) }
.autof__linha span::before, .autof__linha span::after{ content:""; position:absolute; top:50%;
  margin-top:-.4rem; border-block:.4rem solid transparent }
.autof__linha span::before{ left:.55rem; border-right:.55rem solid #0E1F45 }
.autof__linha span::after{ right:.55rem; border-left:.55rem solid #0E1F45 }
.autof__rot{ position:absolute; top:3%; padding:.15rem .55rem; border-radius:999px;
  background:rgba(8,16,31,.82); color:#fff; font-size:.8rem; font-weight:700;
  line-height:1.5; pointer-events:none }
.autof__rot--e{ left:3% }
.autof__rot--d{ right:3% }
.autof__ctl{ display:block; max-width:30rem; margin-top:var(--e-1); font-weight:700; color:#fff }
/* as diferenças moram no .cab: lidas antes; embaixo ficam só foto, controle e fala */
.autof__dif{ margin:var(--e-2) 0 0; padding-left:1.2rem; display:grid; gap:.4rem;
  max-width:44rem; color:#CBD7F2; font-size:var(--t--1); line-height:1.5 }
.autof__fala{ margin-top:var(--e-1); font-size:var(--t--1); line-height:1.5; max-width:30rem }
.autof__palco{ margin-inline:auto }
.autof__ctl, .autof__fala{ margin-inline:auto }
.dc-vivo .autof__palco{ width:min(100%, 30rem, calc(max(17rem, var(--tela)) - var(--dc-fora, 8rem) - 4px)) }
/* celular deitado: a tela é baixa demais para caber; a imagem não encolhe além disto */
@media (max-height:28rem){
  .dc-vivo .angio__quadro, .dc-vivo .autof__palco{ min-width:min(100%, 12rem) }
}
.autof__palco + .autof__ctl, .autof__ctl + .autof__fala{ width:100% }
@media (max-width:61.99rem){
  .autof > .cab{ margin-bottom:var(--e-3) }
  .autof__in{ display:flex; flex-direction:column; align-items:center }
  .autof__ctl, .autof__fala{ width:min(100%, 30rem) }
}
/* PC: foto, controle e fala numa coluna; o texto e as diferenças na outra */
@media (min-width:62rem){
  .autof{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--e-4);
    align-items:start }
  .autof__in{ grid-column:1; grid-row:1 }
  .autof > .cab{ grid-column:2; grid-row:1; max-width:none; margin:0 }
  .dc-vivo .autof__palco{ width:min(30rem, max(15rem, 18vw), calc(var(--tela) - var(--dc-acima, 0px) - var(--dc-sob, 7rem) - 4px)) }
  .autof__ctl, .autof__fala{ max-width:none; width:auto }
  .autof__dif{ max-width:none; gap:.2rem; margin-top:var(--e-1); line-height:1.4 }
  .autof > .cab p{ margin-top:var(--e-1) }

  .autof__in{ width:min-content; min-width:15rem }
  .autof__in > *{ width:100% }
}
html[data-contraste="alto"] .autof__dif{ color:#fff }
html[data-contraste="alto"] .autof__rot{ background:#000; border:1px solid #fff }

/* ---------- 4. ultrassonografia B: o feixe de som ---------- */
/* os dois desenhos ficam sempre lado a lado; rótulos e números são HTML por cima do
   desenho, com letra de tamanho fixo (não encolhem junto com o SVG). A tela do aparelho
   é a peça medida: o JS passa ao CSS o que divide a altura com ela. */
.usg__in{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-1);
  align-items:start; max-width:64rem }
.usg__quadro{ padding:.4rem; background:#0A1633; border:1px solid #2A3C6E; border-radius:var(--r) }
.usg__desenho{ position:relative; margin-inline:auto }
.usg__desenho--olho{ aspect-ratio:340/250; width:min(100%, 26rem) }
.usg__desenho--tela{ aspect-ratio:330/320; width:min(100%, 26rem) }
.usg__desenho svg{ position:absolute; inset:0; width:100%; height:100% }
.dc-vivo .usg__desenho--tela{ width:min(100%, 26rem, max(8.5rem, calc((max(17rem, var(--tela)) - var(--dc-fora, 14rem) - 4px) * 330 / 320))) }
.usg__quadro figcaption{ text-align:center; font-weight:700; margin-top:.3rem; line-height:1.25 }
.usg__et{ position:absolute; color:#E6ECF8; font-size:clamp(.8rem, .55rem + .9vw, 1.05rem);
  line-height:1.1; white-space:nowrap; pointer-events:none }
.usg__et--sonda{ left:1%; top:59% }
.usg__et--catarata{ left:32.9%; top:22.4%; transform:translate(-50%,-100%) }
.usg__et--retina{ left:70.6%; top:16%; transform:translateY(-100%) }
.usg__et--nervo{ right:1%; top:72%; white-space:normal; text-align:right; width:4.5em }
.usg__pino{ position:absolute; width:1.6rem; height:1.6rem; margin:-.8rem 0 0 -.8rem;
  display:grid; place-items:center; border-radius:50%; background:#FFB08A; color:#0E1F45;
  border:2px solid #0E1F45; font-family:Archivo, Arial, sans-serif; font-weight:800;
  font-size:.85rem; line-height:1; pointer-events:none }
/* sem JS a tela mostra a imagem pronta; com JS ela começa apagada e o feixe revela */
.usg__capa path{ opacity:0 }
.dc-vivo .usg__capa path{ opacity:1 }
.dc-vivo .usg__capa path.dc-on{ opacity:0 }
.usg__tela .usg__feixe{ opacity:0 }
.dc-vivo .usg__tela .usg__feixe{ opacity:1 }
.dc-vivo:not(.usg--cheia) .usg__num{ opacity:0 }
.usg__ctl{ max-width:34rem; margin-top:var(--e-2) }
.usg__ctl .dc-acoes{ margin-top:var(--e-1) }
.usg__rotulo{ display:block; font-weight:700; color:#fff }
.usg__fala{ margin-top:var(--e-1); font-size:var(--t--1); line-height:1.5 }
.usg__leg{ list-style:none; margin:var(--e-2) 0 0; padding:0; display:grid; gap:.45rem;
  max-width:44rem; color:#CBD7F2; counter-reset:usg; font-size:var(--t--1); line-height:1.45 }
.usg__leg li{ position:relative; padding-left:2.2rem; counter-increment:usg }
.usg__leg li::before{ content:counter(usg); position:absolute; left:0; top:0; width:1.6rem;
  height:1.6rem; display:grid; place-items:center; border-radius:50%; background:#FFB08A;
  color:#0E1F45; font-family:Archivo, Arial, sans-serif; font-weight:800; font-size:.85rem }
@media (max-width:40rem){
  .usg__pino{ width:20px; height:20px; margin:-10px 0 0 -10px; font-size:12px; border-width:1.5px }
  .usg__quadro{ padding:.3rem }
}
@media (max-width:61.99rem){
  .usg > .cab{ margin-bottom:var(--e-3) }
  .usg__ctl{ max-width:none; margin-top:var(--e-1) }
  .usg__fala{ line-height:1.42 }
  .usg__ctl .dc-acoes{ gap:.5rem }
  .usg__ctl .dc-acoes .btn{ flex:1 1 auto; padding-inline:.6rem }
}
/* PC: texto e legenda em cima; os dois desenhos e, ao lado, controle e fala */
@media (min-width:62rem){
  .usg{ display:grid; grid-template-columns:auto minmax(15rem,1fr); grid-template-rows:auto auto 1fr; column-gap:var(--e-4);
    align-items:start }
  .usg > .cab{ grid-column:1 / -1; max-width:none; margin-bottom:var(--e-2) }
  .usg > .cab p{ max-width:62rem }
  .usg__leg{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem var(--e-3); max-width:none }
  .usg__in{ grid-column:1; grid-row:2 / span 2; grid-template-columns:auto auto;
    max-width:none; gap:var(--e-2) }
  /* altura da tela do aparelho: o que sobra abaixo do texto, mas nunca menos de 16rem
     (o texto com a legenda é alto demais para caber junto em tela baixa; aí cabe ao menos
     a legenda 1-4 com a parte de mexer inteira), nem mais do que a largura deixa ao lado do controle */
  .usg{ --usg-h:min(
      clamp(16rem, calc(var(--tela) - var(--dc-acima, 18rem) - var(--dc-sob, 2.5rem) - 4px),
            calc(var(--tela) - var(--dc-sob, 2.5rem) - 4px)),
      calc((min(100vw, 80.5rem) - 32.5rem) * .4776)) }
  .usg__desenho--olho{ width:calc(var(--usg-h) * 340 / 320) }
  .usg__desenho--tela, .dc-vivo .usg__desenho--tela{ width:calc(var(--usg-h) * 330 / 320) }
  .usg__ctl{ grid-column:2; grid-row:2; margin-top:0 }
  .usg__fala{ grid-column:2; grid-row:3 }
}
html[data-contraste="alto"] .usg__quadro{ background:#000; border-color:#fff }
html[data-contraste="alto"] .usg__leg,
html[data-contraste="alto"] .usg__et{ color:#fff }
html[data-contraste="alto"] .usg__pino,
html[data-contraste="alto"] .usg__leg li::before{ background:#FFD75E; color:#000 }
@media (prefers-reduced-motion:no-preference){
  .dc-vivo .usg__capa path{ transition:opacity .25s linear }
  .usg__num{ transition:opacity .5s var(--saida) }
}

/* ---------- 5. teste do olhinho: o reflexo vermelho ---------- */
/* a nota de quem faz o teste mora no .cab; embaixo ficam rosto, botões e fala */
.olhinho__in{ display:grid; gap:var(--e-2) var(--e-4); max-width:64rem }
.olhinho__rosto{ width:min(100%, 30rem); margin-inline:auto; border-radius:var(--r); background:#241A14 }
.dc-vivo .olhinho__rosto{ width:min(100%, 30rem, max(10rem, calc((max(17rem, var(--tela)) - var(--dc-fora, 14rem) - 4px) * 300 / 256))) }
.olhinho__branco{ opacity:0 }
.olhinho[data-luz="apagada"] .olhinho__reflexo{ opacity:0 }
.olhinho[data-luz="acesa"][data-modo="diferente"] .olhinho__olho--d .olhinho__reflexo{ opacity:0 }
.olhinho[data-luz="acesa"][data-modo="diferente"] .olhinho__olho--d .olhinho__branco{ opacity:1 }
.olhinho__lado .dc-acoes{ margin-top:0 }
.olhinho__fala{ margin-top:var(--e-1); font-size:var(--t--1); line-height:1.5 }
.olhinho__extra{ margin-top:var(--e-1); color:#CBD7F2; font-size:var(--t--1); max-width:44rem }
.faixa--escura .cab p.olhinho__extra{ color:#CBD7F2; font-size:var(--t--1) }
html[data-contraste="alto"] .olhinho__extra,
html[data-contraste="alto"] .faixa--escura .cab p.olhinho__extra{ color:#fff }
@media (max-width:61.99rem){
  .olhinho > .cab{ margin-bottom:var(--e-3) }
  .olhinho__in{ gap:var(--e-1) }
  .olhinho .dc-acoes{ gap:.5rem }
  .olhinho .dc-acoes .btn{ flex:1 1 auto; padding-inline:.7rem }
  .olhinho__fala{ line-height:1.42 }
}
/* PC: texto em cima; rosto e, ao lado, botões e fala. O rosto tem a altura que sobra,
   mas nunca menos de 13rem (aí cabe ao menos a parte de mexer inteira) */
@media (min-width:62rem){
  .olhinho > .cab{ max-width:60rem; margin-bottom:var(--e-2) }
  .olhinho__in{ grid-template-columns:auto minmax(0,1fr); align-items:center; max-width:none }
  .dc-vivo .olhinho__rosto{ width:calc(min(clamp(13rem, calc(var(--tela) - var(--dc-acima, 16rem) - 4px), var(--tela)), 24rem) * 300 / 256) }
}
/* celular estreito: os dois botões lado a lado, com o texto em duas linhas, gastam
   menos altura do que um embaixo do outro */
@media (max-width:23rem){
  .olhinho .dc-acoes{ flex-wrap:nowrap }
  .olhinho .dc-acoes .btn{ flex:1 1 0; min-width:0; white-space:normal; line-height:1.2;
    padding-block:.45rem; padding-inline:.5rem }
}
@media (prefers-reduced-motion:no-preference){
  .olhinho__reflexo, .olhinho__branco{ transition:opacity .45s var(--saida) }
}