/* ============================================================
   SALA DE ESPERA — a espera que prepara
   Ambiente generativo + trilha sintetizada + voz-guia.
   Design system: fundo vivo, tipografia calma, cor por exame.
   ============================================================ */

:root{
  /* cores dinâmicas por exame (JS sobrescreve via --e-*) */
  --e-bg1:#0b1622; --e-bg2:#0e2230; --e-bg3:#081019;
  --e-orb:#7fd6d0; --e-glow:#48c0c8; --e-accent:#a9e7e2;
  --e-particle:#bfeee9; --e-ink:#eaf6f4;

  --ink:#eef4f5;
  --ink-soft:rgba(238,244,245,.72);
  --ink-faint:rgba(238,244,245,.5);
  --line:rgba(255,255,255,.14);
  --panel:rgba(10,18,26,.55);
  --panel-solid:rgba(9,16,24,.86);
  --radius:18px;
  --dur:.5s;
  --ease:cubic-bezier(.4,.14,.2,1);
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
  --font-d:"Fraunces",Georgia,serif;
  --font-u:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden;background:#06090d}
body{
  font-family:var(--font-u);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--e-accent);outline-offset:3px;border-radius:6px}

/* ---------- palco ---------- */
#app{
  position:fixed;inset:0;
  background:radial-gradient(120% 120% at 50% 30%,var(--e-bg2),var(--e-bg1) 55%,var(--e-bg3) 100%);
  transition:background 1.4s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
#vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%,transparent 40%,rgba(0,0,0,.28) 78%,rgba(0,0,0,.55) 100%);
}

/* ---------- guia de respiração (centro) ---------- */
#breath{
  position:absolute;left:50%;top:60%;transform:translateX(-50%);
  z-index:5;text-align:center;pointer-events:none;
  transition:opacity .8s var(--ease);
}
#breathLabel{
  font-family:var(--font-d);
  font-weight:300;
  font-size:clamp(1.5rem,4.4vw,2.5rem);
  letter-spacing:.08em;
  color:var(--e-ink);
  text-shadow:0 2px 30px rgba(0,0,0,.5);
  font-variation-settings:"opsz" 40;
}
#breathSub{
  margin-top:.4rem;
  font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;
}

/* ---------- topbar ---------- */
#topbar{
  position:absolute;left:0;right:0;top:0;z-index:8;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:clamp(14px,2.4vw,26px) clamp(14px,3vw,34px);
  pointer-events:none;
}
#topbar > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--e-accent),var(--e-glow) 60%,transparent 72%);
  box-shadow:0 0 22px -2px var(--e-glow);
  flex:0 0 auto;
}
.brand-name{
  font-family:var(--font-d);font-weight:500;font-size:1.02rem;letter-spacing:.01em;
  font-variation-settings:"opsz" 30;
}
.badge{
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  padding:.28em .6em;border:1px solid var(--line);border-radius:99px;
  color:var(--ink-soft);background:rgba(255,255,255,.04);white-space:nowrap;
}
.exam-now{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  text-align:right;padding:6px 4px;border-radius:12px;transition:opacity .3s;
}
.exam-now-kicker{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.exam-now-name{font-family:var(--font-d);font-size:1.05rem;font-weight:500;color:var(--e-accent);font-variation-settings:"opsz" 24}
.exam-now-ctx{font-size:.66rem;color:var(--ink-soft);letter-spacing:.02em;margin-top:1px}

/* ---------- legenda / narração ---------- */
#caption{
  position:absolute;left:50%;bottom:clamp(104px,15vh,150px);transform:translateX(-50%);
  z-index:7;width:min(680px,88vw);text-align:center;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
#caption.swap{opacity:0;transform:translateX(-50%) translateY(10px)}
.cap-kicker{
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  color:var(--ink-faint);margin-bottom:.7rem;
}
.cap-text{
  font-family:var(--font-d);font-weight:400;
  font-size:clamp(1.14rem,2.9vw,1.72rem);
  line-height:1.42;color:var(--ink);
  text-shadow:0 2px 26px rgba(0,0,0,.55);
  font-variation-settings:"opsz" 60;
  text-wrap:balance;
}
.cap-text .hl{color:var(--e-accent);font-weight:500}

/* ---------- dock ---------- */
#dock{
  position:absolute;left:50%;bottom:clamp(46px,7vh,58px);transform:translateX(-50%);
  z-index:9;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  padding:8px 10px;border:1px solid var(--line);border-radius:99px;
  background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);max-width:calc(100vw - 24px);
}
.ctl{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 14px;border-radius:99px;font-size:.78rem;font-weight:500;
  color:var(--ink-soft);transition:background .25s,color .25s,transform .15s;
}
.ctl:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.ctl:active{transform:scale(.96)}
.ctl[aria-pressed="true"]{color:var(--e-accent)}
.ctl .ctl-tx{letter-spacing:.02em}
.ctl-alt{color:var(--ink-faint)}
.ico{width:16px;height:16px;flex:0 0 auto;display:inline-block;background:currentColor;
  -webkit-mask:center/contain no-repeat var(--m);mask:center/contain no-repeat var(--m)}
.ico[data-ico="pause"]{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='6' y='5' width='4' height='14' rx='1'/><rect x='14' y='5' width='4' height='14' rx='1'/></svg>")}
.ico[data-ico="play"]{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4l13 8-13 8z'/></svg>")}
.ico[data-ico="sound"]{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9z'/><path d='M16 8a5 5 0 010 8' fill='none' stroke='black' stroke-width='2'/></svg>")}
.ico[data-ico="mute"]{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9z'/><path d='M22 9l-6 6M16 9l6 6' fill='none' stroke='black' stroke-width='2'/></svg>")}
.ico[data-ico="voice"]{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='9' y='3' width='6' height='11' rx='3'/><path d='M6 11a6 6 0 0012 0M12 17v4' fill='none' stroke='black' stroke-width='2'/></svg>")}
.ico[data-ico="grid"]{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='7' height='7' rx='1.5'/><rect x='13' y='4' width='7' height='7' rx='1.5'/><rect x='4' y='13' width='7' height='7' rx='1.5'/><rect x='13' y='13' width='7' height='7' rx='1.5'/></svg>")}
.ico[data-ico="full"]{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/></svg>")}
.dock-progress{width:64px;height:3px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;flex:0 0 auto;margin:0 2px}
.dock-progress-bar{height:100%;width:0;background:var(--e-accent);border-radius:99px;transition:width .3s linear}
.dock-timer{font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--ink-faint);min-width:30px;text-align:center;flex:0 0 auto}

/* ---------- recepção ---------- */
#reception{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,40px);
  background:radial-gradient(120% 120% at 50% 22%,rgba(14,34,48,.62),rgba(7,13,20,.9));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  overflow-y:auto;overflow-x:hidden;
  transition:opacity .7s var(--ease);
}
.rec-card{
  width:min(720px,calc(100vw - 30px));
  max-width:100%;
  background:linear-gradient(180deg,rgba(16,26,38,.82),rgba(9,15,23,.9));
  border:1px solid var(--line);border-radius:26px;
  padding:clamp(22px,3.4vw,40px);box-shadow:var(--shadow);
  margin:auto;
}
#recTitle,.rec-lead{overflow-wrap:break-word}
.rec-eyebrow{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--e-accent);font-weight:600}
#recTitle{
  font-family:var(--font-d);font-weight:400;
  font-size:clamp(1.7rem,5vw,2.7rem);line-height:1.08;margin:.5rem 0 .7rem;
  font-variation-settings:"opsz" 100;letter-spacing:-.01em;
}
.rec-lead{color:var(--ink-soft);font-size:.98rem;line-height:1.6;max-width:56ch}

.rec-exams{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:26px 0 22px}
.exam-opt{
  display:flex;flex-direction:column;gap:8px;text-align:left;
  padding:16px 16px 15px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.03);transition:border-color .3s,background .3s,transform .2s;
  position:relative;overflow:hidden;
}
.exam-opt:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.exam-opt[aria-checked="true"]{border-color:var(--eo);background:color-mix(in srgb,var(--eo) 14%,transparent)}
.exam-opt[aria-checked="true"]::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--eo)}
.exam-opt .eo-swatch{width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%,var(--eo-l),var(--eo) 65%,transparent 78%);
  box-shadow:0 0 20px -3px var(--eo)}
.exam-opt .eo-name{font-family:var(--font-d);font-size:1.12rem;font-weight:500}
.exam-opt .eo-tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.exam-opt .eo-desc{font-size:.82rem;color:var(--ink-soft);line-height:1.45}

.rec-consult{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;
  padding-top:20px;border-top:1px solid var(--line)}
.rec-field label,.field-label{display:block;font-size:.82rem;font-weight:500;margin-bottom:10px;color:var(--ink)}
.opt{color:var(--ink-faint);font-weight:400;font-size:.76rem}
.age-row{display:flex;align-items:center;gap:14px}
#ageVal{font-family:var(--font-d);font-size:1.15rem;color:var(--e-accent);min-width:74px;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:rgba(255,255,255,.16);outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--e-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--e-accent) 25%,transparent);cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;
  background:var(--e-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--e-accent) 25%,transparent);cursor:pointer}

.motivo-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 13px;border:1px solid var(--line);border-radius:99px;
  font-size:.8rem;color:var(--ink-soft);background:rgba(255,255,255,.03);transition:.25s;
}
.chip:hover{background:rgba(255,255,255,.07)}
.chip[aria-pressed="true"]{border-color:var(--e-accent);color:var(--e-accent);background:color-mix(in srgb,var(--e-accent) 12%,transparent)}

.rec-start{
  display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;
  padding:16px 20px;border-radius:16px;
  background:linear-gradient(120deg,var(--e-glow),var(--e-orb));
  color:#06121a;box-shadow:0 16px 40px -14px var(--e-glow);
  transition:transform .18s,box-shadow .3s;
}
.rec-start:hover{transform:translateY(-2px);box-shadow:0 20px 50px -14px var(--e-glow)}
.rec-start:active{transform:translateY(0)}
.rec-start-tx{font-family:var(--font-d);font-size:1.18rem;font-weight:600}
.rec-start-sub{font-size:.74rem;font-weight:500;opacity:.82;letter-spacing:.01em}
.rec-clinic{margin-top:16px;display:flex;gap:10px;align-items:flex-start;
  font-size:.82rem;line-height:1.5;color:var(--ink-soft);
  padding:13px 15px;border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--e-accent) 7%,transparent)}
.rec-clinic-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px;
  background:var(--e-accent);box-shadow:0 0 12px -1px var(--e-accent)}
.rec-disc{margin-top:14px;font-size:.74rem;color:var(--ink-faint);line-height:1.5;text-align:center}
.rec-disc strong{color:var(--ink-soft)}

/* ---------- disclaimer strip ---------- */
.disclaimer-strip{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:8;
  font-size:.66rem;letter-spacing:.04em;color:var(--ink-faint);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  background:rgba(6,10,14,.4);padding:4px 12px;border-radius:99px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.disc-link{font-size:.66rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.disc-link:hover{color:var(--e-accent)}
.disc-mini{display:none}

#tapHint{
  position:absolute;left:50%;bottom:clamp(96px,13vh,124px);transform:translateX(-50%);z-index:9;
  font-size:.74rem;color:var(--ink-soft);background:var(--panel-solid);
  padding:8px 16px;border-radius:99px;border:1px solid var(--line);
  white-space:nowrap;max-width:calc(100vw - 28px);text-align:center;
  pointer-events:none;box-shadow:var(--shadow);
  animation:hintIn .6s var(--ease) both;
}
@keyframes hintIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (max-width:420px){#tapHint{white-space:normal;font-size:.72rem;line-height:1.35}}

/* ---------- estados ---------- */
#app[data-state="reception"] #caption,
#app[data-state="reception"] #dock,
#app[data-state="reception"] #breath,
#app[data-state="reception"] .disclaimer-strip,
#app[data-state="reception"] #examNow{opacity:0;pointer-events:none}
#app[data-state="session"] #reception{opacity:0;pointer-events:none}

/* ---------- responsivo ---------- */
@media (max-width:720px){
  .rec-card{padding:22px 18px}
  .rec-eyebrow{letter-spacing:.2em}
  .rec-exams{grid-template-columns:1fr;margin:20px 0 18px}
  .rec-consult{grid-template-columns:1fr;gap:18px}
  .rec-lead{font-size:.92rem}
  #recTitle{font-size:clamp(1.6rem,7vw,2.1rem)}
  #caption{bottom:clamp(118px,18vh,150px);width:calc(100vw - 46px)}
  .cap-text{font-size:clamp(.98rem,3.9vw,1.14rem);line-height:1.42;text-wrap:pretty}
  .cap-kicker{margin-bottom:.5rem}
  .ctl .ctl-tx{display:none}
  .ctl{padding:11px}
  .ctl-alt .ctl-tx{display:none}
  #dock{gap:4px;padding:7px 8px}
  .dock-progress{width:44px}
  .brand-name{font-size:.95rem}
  .exam-now-name{font-size:1rem}
  #modeBadge{display:none}
  .exam-now-kicker{display:none}
  #topbar{padding:16px 16px}
  .disclaimer-strip{white-space:nowrap;text-align:center;max-width:calc(100vw - 16px);
    justify-content:center;line-height:1.4;font-size:.6rem;padding:5px 12px;bottom:10px}
  .disc-full{display:none}
  .disc-mini{display:inline}
}
@media (max-width:420px){
  #caption{bottom:114px;width:calc(100vw - 40px)}
  .cap-text{font-size:1rem}
  .dock-timer{display:none}
}
@media (max-height:640px){
  #breath{top:38%}
  #caption{bottom:96px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* utilitário */
[hidden]{display:none !important}