/* Identidade CR Fisioterapia: aquarela rosa + vidro líquido (mesma receita do site da A.NUNES, em rosa). */
:root{
  --vinho:#3a0f1c; --rose:#be5453; --blush:#f6bbb9; --areia:#e3d4a9; --ink:#3a2a2a; --on-blush:#5a1424;
  --vidro:linear-gradient(145deg,rgba(246,187,185,.36) 0%,rgba(190,84,83,.46) 55%,rgba(58,12,24,.55) 100%);
  --vidro-borda:rgba(255,255,255,.26);
  --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 40px rgba(255,255,255,.05);
  --btn:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(246,187,185,.26) 100%);
  --btn-h:linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(246,187,185,.36) 100%);
  --btn-brilho:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),0 4px 14px rgba(120,30,50,.18);
  --serif:'Baskervville',Georgia,serif; --sans:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:var(--sans);color:#fff;-webkit-font-smoothing:antialiased;overflow:hidden;position:relative;
  background:
    radial-gradient(60% 55% at 12% 8%,rgba(246,187,185,.75),transparent 62%),
    radial-gradient(55% 50% at 92% 30%,rgba(210,96,110,.85),transparent 65%),
    radial-gradient(60% 55% at 20% 100%,rgba(227,212,169,.5),transparent 62%),
    radial-gradient(70% 60% at 85% 100%,rgba(166,69,68,.9),transparent 65%),
    var(--vinho);
}
.mancha{position:fixed;border-radius:50%;filter:blur(40px);pointer-events:none;z-index:0}
.m1{width:300px;height:300px;left:-90px;top:30%;background:rgba(246,187,185,.5)}
.m2{width:260px;height:260px;right:-70px;bottom:6%;background:rgba(227,212,169,.38)}

.shell{position:relative;z-index:1;height:100dvh;display:flex;justify-content:center}
.glass{background:var(--vidro);border:1px solid var(--vidro-borda);box-shadow:var(--vidro-brilho),0 30px 80px rgba(30,0,10,.5);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7)}
.app,.hero{background:var(--vidro);border:1px solid var(--vidro-borda);box-shadow:var(--vidro-brilho),0 30px 80px rgba(30,0,10,.5);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);position:relative;isolation:isolate}
.app::before,.hero::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.22),transparent 55%),radial-gradient(90% 60% at 100% 100%,rgba(246,187,185,.2),transparent 60%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.app,.hero{background:linear-gradient(145deg,#8a3a44,#4a1523)}}

.app{width:100%;max-width:560px;display:flex;flex-direction:column;min-height:0;border-top:0;border-bottom:0}
.hero{display:none}

@media(min-width:960px){
  .shell{align-items:center;padding:24px}
  .shell>*{height:min(100%,800px)}
  .hero{display:block;flex:1.1;max-width:640px;border-radius:28px 0 0 28px;border-right:0;overflow:hidden}
  .app{flex:.9;max-width:520px;border-radius:0 28px 28px 0;border:1px solid var(--vidro-borda);overflow:hidden}
}

/* ---------- painel de apresentação ---------- */
.hero-in{height:100%;padding:34px 44px 30px;display:flex;flex-direction:column;gap:22px}
.hero-logo{height:40px;width:auto;display:block;align-self:flex-start}
.hero-meio{display:flex;gap:30px;align-items:center;flex:1;min-height:0}
.hero-foto{flex:0 0 42%;max-width:260px;aspect-ratio:3/4;border-radius:200px 200px 24px 24px;overflow:hidden;border:1px solid rgba(255,255,255,.35);box-shadow:0 30px 70px rgba(30,0,10,.45)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.rotulo{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;color:#fff;opacity:.9}
.rotulo::before{content:"";width:26px;height:2px;background:var(--blush)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.7vw,38px);line-height:1.12;text-wrap:balance}
.hero-texto p{margin-top:14px;font-size:15px;line-height:1.6;opacity:.92;max-width:34ch}
.fotos{list-style:none;padding:0;display:flex;gap:12px}
.fotos li{flex:1;aspect-ratio:1.25;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.3)}
.fotos img{width:100%;height:100%;object-fit:cover;display:block}
.hero-links{display:flex;gap:12px}
.hero-links .icone{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--btn);border:1px solid rgba(255,255,255,.5);box-shadow:var(--btn-brilho);transition:transform .2s,background .2s}
.hero-links .icone svg{width:20px;height:20px}
.hero-links .icone:hover,.hero-links .icone:focus-visible{background:var(--btn-h);transform:translateY(-2px);outline:none}
.hero-links .icone:focus-visible{box-shadow:var(--btn-brilho),0 0 0 3px rgba(255,255,255,.7)}
@media(min-width:960px) and (max-height:720px){.fotos{display:none}}

/* ---------- conversa ---------- */
.top{display:flex;align-items:center;gap:12px;padding:14px 18px;flex:none;background:rgba(58,12,24,.22);border-bottom:1px solid rgba(255,255,255,.14)}
.avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--blush)}
.who b{display:block;font-size:14px;font-weight:600}
.who span{font-size:12px;opacity:.85;display:flex;align-items:center;gap:6px}
.live{width:7px;height:7px;border-radius:50%;background:#9be3a6;box-shadow:0 0 0 0 rgba(155,227,166,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(155,227,166,0)}100%{box-shadow:0 0 0 0 rgba(155,227,166,0)}}
.hback{margin-left:auto;display:inline-flex;align-items:center;gap:6px;-webkit-appearance:none;appearance:none;background:var(--btn);border:1px solid rgba(255,255,255,.5);color:#fff;font:500 13px var(--sans);padding:8px 14px 8px 10px;border-radius:99px;cursor:pointer;box-shadow:var(--btn-brilho)}
.hback:hover,.hback:focus-visible{background:var(--btn-h);outline:none}
.hback[hidden]{display:none}
.progress{height:3px;background:rgba(255,255,255,.18);flex:none}
.progress i{display:block;height:100%;width:0;background:var(--blush);transition:width .5s ease;box-shadow:0 0 10px rgba(246,187,185,.8)}

.chat{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 8px;display:flex;flex-direction:column;gap:8px;min-height:0}
.bub{background:rgba(255,250,248,.93);color:var(--ink);padding:11px 15px;border-radius:4px 18px 18px 18px;font-size:15px;line-height:1.5;max-width:88%;animation:in .3s ease both;box-shadow:0 2px 10px rgba(60,10,25,.14)}
.bub.me{align-self:flex-end;background:linear-gradient(180deg,#fff0ee,var(--blush));color:var(--on-blush);border-radius:18px 4px 18px 18px;font-weight:500;overflow-wrap:anywhere}
.bub.marca{padding:16px}
.bub.marca img{display:block;height:34px;width:auto;margin-bottom:10px}
.bub .titulo{font-family:var(--serif);font-size:20px;line-height:1.25;color:#7a2230}
.typing{display:flex;gap:4px;padding:14px 16px;width:62px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--rose);opacity:.35;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:1;transform:translateY(-2px)}}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.sending{display:flex;align-items:center;gap:10px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(190,84,83,.3);border-top-color:var(--rose);animation:gira .8s linear infinite;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- área de resposta ---------- */
.dock{flex:none;padding:12px 14px calc(14px + env(safe-area-inset-bottom));background:rgba(58,12,24,.3);border-top:1px solid rgba(255,255,255,.16);max-height:48dvh;overflow-y:auto}
.dock:empty{display:none}
.opts{display:flex;flex-direction:column}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;gap:8px;align-items:flex-start}
.field input{margin-bottom:0}
input,select{
  -webkit-appearance:none;appearance:none;width:100%;height:52px;border:1px solid rgba(255,255,255,.45);border-radius:14px;padding:0 16px;
  background:rgba(255,255,255,.2);color:#fff;font:16px var(--sans);margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:border-color .2s,background .2s,box-shadow .2s;min-width:0}
input::placeholder{color:rgba(255,255,255,.75)}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:38px}
select option{background:#5a1a28;color:#fff}
input:focus,select:focus{outline:none;border-color:#fff;background-color:rgba(255,255,255,.3);box-shadow:0 0 0 4px rgba(246,187,185,.4)}
input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 60px #8a3a44 inset}
input[aria-invalid=true],select[aria-invalid=true]{border-color:#ffd2c8;box-shadow:0 0 0 3px rgba(255,150,130,.35)}

.op{-webkit-appearance:none;appearance:none;display:block;width:100%;text-align:left;min-height:52px;padding:13px 16px;border:1px solid rgba(255,255,255,.5);
  background:var(--btn);color:#fff;border-radius:14px;font:500 15px/1.35 var(--sans);margin-bottom:8px;cursor:pointer;box-shadow:var(--btn-brilho);
  text-shadow:0 1px 2px rgba(90,20,40,.35);transition:transform .15s,background .15s}
.op:hover,.op:focus-visible{background:var(--btn-h);transform:translateX(2px);outline:none}
.op:focus-visible{box-shadow:var(--btn-brilho),0 0 0 3px rgba(255,255,255,.7)}

.btn,.send{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;font:600 16px var(--sans);color:var(--on-blush);
  background:linear-gradient(180deg,#fff0ee,var(--blush));box-shadow:inset 0 1px 0 #fff,0 8px 24px rgba(246,187,185,.4);transition:transform .2s}
.btn{width:100%;height:54px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;padding:0 22px}
.btn.cta{justify-content:space-between;animation:brilho 2.4s ease-in-out infinite}
.btn.vidro{background:var(--btn);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:var(--btn-brilho);text-shadow:0 1px 2px rgba(90,20,40,.35)}
@keyframes brilho{50%{box-shadow:inset 0 1px 0 #fff,0 8px 34px rgba(246,187,185,.75),0 0 0 6px rgba(246,187,185,.18)}}
.send{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.send svg{width:20px;height:20px}
.btn:hover,.btn:focus-visible,.send:hover,.send:focus-visible{transform:translateY(-2px);outline:none}
.btn:focus-visible,.send:focus-visible{box-shadow:inset 0 1px 0 #fff,0 0 0 3px #fff}
.btn[disabled],.send[disabled]{filter:saturate(.6) brightness(.9);cursor:progress;transform:none;animation:none}
.btn+.btn{margin-top:10px}
.pular{display:block;margin:10px auto 0;background:none;border:0;color:#fff;font:13px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:.9}
.erro{font-size:13px;line-height:1.4;color:#fff;background:rgba(120,20,40,.5);border-radius:8px;padding:7px 11px;margin:0 0 8px}
.erro[hidden]{display:none}
.legal{font-size:12px;opacity:.85;margin-top:10px;line-height:1.4;text-align:center}

.credito{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 18px calc(10px + env(safe-area-inset-bottom));font-size:11px;opacity:.85;border-top:1px solid rgba(255,255,255,.1)}
.cr-widz{display:inline-flex;align-items:center;gap:6px;font-style:italic}
.widz-mark{display:inline-flex;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-style:italic;font-size:15px;text-decoration:none;letter-spacing:.2px}
.widz-mark .w{color:#C6FF00}.widz-mark .rest{color:#F5F5F3}
.ts{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:5}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:380px){.linha{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- tela de confirmação ---------- */
[hidden]{display:none!important}
.confirma{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 26px;animation:in .4s ease both}
.confirma .ok{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#fff0ee,var(--blush));color:var(--on-blush);margin-bottom:20px;box-shadow:0 10px 30px rgba(246,187,185,.45)}
.confirma .ok svg{width:38px;height:38px}
.confirma h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,32px);line-height:1.15;margin-bottom:12px;text-wrap:balance}
.confirma .texto{font-size:15px;line-height:1.6;opacity:.95;max-width:34ch}
.confirma .ou{margin:26px 0 12px;font-size:13px;font-weight:500;letter-spacing:.04em;opacity:.9;display:flex;align-items:center;gap:12px;width:100%;max-width:340px}
.confirma .ou::before,.confirma .ou::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.3)}
.confirma .btn{max-width:340px}
.confirma .mini{margin-top:10px;font-size:12px;opacity:.8}
.chat::after{content:"";flex:none;height:10px}
