/* Cores e fontes padrão, neutras. Cada clínica troca pelas dela (clinicas/<slug>.json). */
:root {
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --texto: #17202c;
  --suave: #556070;
  --destaque: #17202c;
  --texto-destaque: #ffffff;
  --detalhe: #2f6f8f;
  --borda: #e1e5ea;
  --whatsapp: #127c46;
  --fonte-titulo: Georgia, 'Times New Roman', serif;
  --fonte-texto: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --raio: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); }
body {
  font-family: var(--fonte-texto);
  color: var(--texto);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--detalhe); outline-offset: 3px; }
h1:focus, h2:focus { outline: none; }

.topo, main, .rodape { width: 100%; max-width: 560px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.topo { padding-top: 18px; padding-bottom: 6px; }
.incorporado .topo { padding-right: 64px; } /* espaço para o X da janela do site */
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; min-height: 44px; }
.mono {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  border: 1.5px solid var(--detalhe); color: var(--detalhe);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; letter-spacing: .02em;
}
.mono:empty { display: none; }
.nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: 19px; line-height: 1.15; }

main { flex: 1; padding-top: 12px; padding-bottom: 32px; }
:is(.tela, .cabecalho, .foto, .painel) > * + * { margin-top: 16px; }
.sobre { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--detalhe); }
h1, h2 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(34px, 9vw, 44px); }
.sobre + h1 { margin-top: 8px; }
h2 { font-size: clamp(27px, 7vw, 32px); }
p { margin: 0; }
.nota { font-size: 14px; color: var(--suave); }

.aviso {
  font-size: 13.5px; line-height: 1.45; color: var(--suave);
  background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--detalhe);
  border-radius: 10px; padding: 12px 14px;
}

.aceite { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.aceite input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--destaque); cursor: pointer; }
.aceite .link { display: flex; align-items: center; min-height: 40px; }

.acoes { display: grid; gap: 10px; margin-top: 22px; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 20px; border-radius: 999px;
  font: 600 16px/1.2 var(--fonte-texto); text-align: center; text-decoration: none; cursor: pointer;
  background: var(--superficie); color: var(--texto); border: 1.5px solid var(--borda);
  transition: transform .12s ease, opacity .12s ease;
}
.botao:active { transform: scale(.98); }
.botao:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.botao.primario { background: var(--destaque); color: var(--texto-destaque); border-color: var(--destaque); }
.botao.whatsapp { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); }
.botao.whatsapp::before {
  content: ''; width: 22px; height: 22px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url(/assets/whatsapp.svg) center / contain no-repeat; mask: url(/assets/whatsapp.svg) center / contain no-repeat;
}
.botao.link, button.link {
  background: none; border: 0; min-height: 44px; padding: 0; color: var(--texto);
  text-decoration: underline; text-underline-offset: 3px; font: inherit; font-weight: 600; cursor: pointer;
}
.botao.link { justify-self: center; }
.link.refazer { font-weight: 500; font-size: 15px; color: var(--suave); }
.ressalva { font-size: 13px; line-height: 1.45; color: var(--suave); }
.alternativa { margin-top: 4px; font-size: 15px; color: var(--suave); text-align: center; }
/* O WhatsApp do resultado. No celular, a foto ocupa a tela: o botão fica grudado no
   pé da tela enquanto a pessoa compara, e volta para o lugar dele quando ela rola até lá. */
.botao.destaque {
  display: flex; width: 100%; min-height: 56px; padding-left: 16px; padding-right: 16px; font-size: 17px;
  position: sticky; z-index: 2; bottom: calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

.quadro, .camera, .comparar {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--raio); overflow: hidden;
  background: var(--borda); border: 1px solid var(--borda);
}
.quadro img, .camera video, .comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Foto da primeira tela. No celular é uma faixa baixa, para a escolha e o botão
   aparecerem logo; na tela larga vira retrato, no lugar onde depois fica a câmera. */
.quadro.capa { margin: 0; aspect-ratio: 5 / 2; background: #fff; }
.quadro.capa img { object-position: 64% 42%; }
.etiqueta.e-capa { top: auto; bottom: 10px; left: 10px; font-size: 11px; font-weight: 500; letter-spacing: .03em; text-transform: none; }

.camera { background: #000; }
.camera video { transform: scaleX(-1); }
.guia {
  position: absolute; left: 17%; right: 17%; top: 10%; bottom: 16%;
  border: 2px dashed rgba(255, 255, 255, .85); border-radius: 50% / 46%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .28);
}
.dica { font-size: 15px; text-align: center; color: var(--suave); }

.turnstile:empty { display: none; }
.turnstile { display: flex; justify-content: center; min-height: 0; }

.gerando img { filter: saturate(.85) brightness(.97); }
.brilho {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  background-size: 250% 100%; animation: brilho 2.2s linear infinite;
}
@keyframes brilho { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.status { font-size: 18px; font-weight: 600; text-align: center; }
#tela-gerando .nota { text-align: center; }

.comparar { --pos: 50%; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.comparar .camada { position: absolute; inset: 0; overflow: hidden; }
.comparar .camada.antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* Sem eventos nas fotos: no computador, apertar e arrastar uma imagem inicia o
   "arrastar arquivo" do navegador e cancela o divisor. Quem recebe tudo é a caixa. */
.comparar .camada img { pointer-events: none; -webkit-user-drag: none; user-select: none; }

.aviso-campo { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: #b3261e; }
.aceite.alerta input { outline: 2px solid #b3261e; outline-offset: 2px; }
.estilos.alerta .estilo { border-color: #b3261e; }
.aviso.aviso-erro { border-left-color: #b3261e; color: var(--texto); }
.status-camera { text-align: center; }
/* "Qual você prefere?": os dois estilos lado a lado, como cartões de escolher. */
.estilos { border: 0; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.estilos legend { padding: 0; margin-bottom: 10px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 22px; line-height: 1.15; }
.estilos .aviso-campo { grid-column: 1 / -1; }
.estilo {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; cursor: pointer;
  background: var(--superficie); border: 1.5px solid var(--borda); border-radius: 12px; padding: 12px;
}
.estilo:has(input:checked) { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque); }
.estilo input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--destaque); cursor: pointer; }
.estilo span { font-size: 13.5px; line-height: 1.4; color: var(--suave); }
.estilo b { display: block; font-size: 16px; color: var(--texto); margin-bottom: 2px; }
.divisor { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .35); pointer-events: none; }
/* Alça no centro da foto. */
.divisor span {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.divisor span::before, .divisor span::after {
  content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent;
}
.divisor span::before { left: 7px; border-right-color: var(--texto); }
.divisor span::after { right: 7px; border-left-color: var(--texto); }
.comparar:focus-within .divisor span { outline: 3px solid var(--detalhe); outline-offset: 2px; }
.etiqueta {
  position: absolute; top: 10px; padding: 5px 9px; border-radius: 6px; pointer-events: none;
  background: rgba(11, 17, 40, .62); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.e-antes { left: 10px; }
.e-depois { right: 10px; }
#deslizar { position: absolute; width: 1px; height: 1px; opacity: 0; bottom: 0; left: 50%; }

dialog {
  width: min(520px, calc(100% - 32px)); border: 0; border-radius: var(--raio); padding: 24px;
  color: var(--texto); background: var(--superficie); box-shadow: 0 30px 80px -20px rgba(11, 17, 40, .45);
}
dialog::backdrop { background: rgba(11, 17, 40, .5); }
dialog ul { padding-left: 20px; margin: 14px 0 20px; display: grid; gap: 8px; font-size: 15px; }
dialog .botao { width: 100%; }

.rodape { padding-top: 18px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); font-size: 13px; color: var(--suave); }
.rodape p + p { margin-top: 6px; }
.rodape a { color: var(--texto); min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 600px) {
  .acoes { grid-template-columns: 1fr 1fr; }
  .acoes .botao.primario:only-child { grid-column: 1 / -1; }
  #tela-erro .acoes { grid-template-columns: 1fr; }
}

/* Tela larga: a janela do simulador no computador (widget.js) ou a página aberta no
   computador. A foto fica à esquerda e o texto e os botões à direita, tudo à vista
   sem rolar, principalmente o WhatsApp do resultado. A janela do widget.js só fica
   larga quando esta regra vale (mais de 800 px de largura, mais larga que alta). */
@media (min-width: 800px) and (min-aspect-ratio: 1 / 1) {
  /* Altura das fotos: o que cabe na janela sem rolar, sem estreitar demais a coluna da direita. */
  :root { --alto-foto: clamp(300px, min(calc(100vh - 124px), calc((100vw - 460px) * 4 / 3)), 620px); }
  .topo, main, .rodape { max-width: 1040px; padding-left: 28px; padding-right: 28px; }
  main { padding-bottom: 24px; }
  #tela-carregando, #tela-erro { max-width: 560px; margin: 0 auto; }
  .lado-a-lado h1 { font-size: 38px; }

  .lado-a-lado {
    display: grid; grid-template-columns: auto minmax(0, 440px); column-gap: 48px; justify-content: center;
    /* As linhas 1fr, em cima e embaixo, centralizam a coluna da direita na altura da foto. */
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "foto ." "foto cabecalho" "foto destaque" "foto painel" "foto .";
  }
  .lado-a-lado > * { margin-top: 0; }
  .lado-a-lado > .foto { grid-area: foto; align-self: center; width: calc(var(--alto-foto) * 3 / 4); }
  .lado-a-lado > .cabecalho { grid-area: cabecalho; }
  .lado-a-lado > .destaque { grid-area: destaque; margin-top: 24px; position: static; box-shadow: none; }
  .lado-a-lado > .painel { grid-area: painel; }
  .lado-a-lado > .cabecalho ~ .painel { margin-top: 24px; }
  .lado-a-lado > .destaque ~ .painel { margin-top: 20px; }
  .painel > :first-child { margin-top: 0; }
  .quadro.capa { aspect-ratio: 3 / 4; }
  .quadro.capa img { object-position: 70% 50%; }
  .painel .dica, .painel .status, .painel .status-camera, .alternativa, #tela-gerando .nota { text-align: left; }
  /* Links no meio do texto, sem a altura de toque do celular: a primeira tela cabe sem rolar. */
  .aceite .link, .alternativa .link { display: inline-flex; min-height: 24px; vertical-align: baseline; }
  /* Botões lado a lado quando cabem, sempre com o texto inteiro numa linha. */
  .painel .acoes { display: flex; flex-wrap: wrap; gap: 10px; }
  .painel .acoes > .botao { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .brilho { animation: none; }
  .botao { transition: none; }
}