/* Smile Clinic: claro, suave e clínico. Laranja e azul-marinho do logótipo, Poppins como no site deles. */
:root{
  --bg:#FAFBFD; --bg-2:#F3F5F9; --card:#FFFFFF; --card-2:#F4F6FA;
  --line:rgba(20,38,74,.08); --line-2:rgba(20,38,74,.16);
  --text:#14203A; --muted:#5C667A; --faint:#8A93A6;
  --accent:#1FB5A8; --accent-text:#0B7A70;
  --btn:#0F2E3D; --btn-ink:#FFFFFF;
  --bubble-me:#0F2E3D; --bubble-me-ink:#FFFFFF; --bubble-bot:#EEF1F6;
  --glow:rgba(31,181,168,.4);
  --font:"Poppins","Helvetica Neue",Arial,sans-serif; --display-track:-.035em; --display-weight:600;
  --r:32px; --r-sm:18px;
  --shadow-card:0 1px 0 rgba(20,38,74,.05),0 24px 48px -28px rgba(20,38,74,.22);
  --shadow-lift:0 1px 0 rgba(20,38,74,.05),0 44px 80px -36px rgba(20,38,74,.32);
  --shadow-phone:0 60px 120px -40px rgba(20,38,74,.45),0 40px 160px -50px rgba(31,181,168,.6);
  --spot:rgba(31,181,168,.10);
}
body{background:radial-gradient(1100px 560px at 88% -8%,rgba(31,181,168,.11),transparent 62%),radial-gradient(900px 520px at -12% 26%,rgba(20,38,74,.06),transparent 60%),var(--bg);background-repeat:no-repeat}

/* sorriso desenhado por baixo do nome */
.smile{position:relative;white-space:nowrap}
.smile::after{content:"";position:absolute;left:4%;right:4%;bottom:-.12em;height:.3em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M4 6 C 60 32, 140 32, 196 6' stroke='%231FB5A8' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;clip-path:inset(0 100% 0 0);animation:smile 1.3s var(--ease) 1.1s forwards}
@keyframes smile{to{clip-path:inset(0 0 0 0)}}

/* órbita do logótipo à volta do telemóvel */
.orbit{position:absolute;top:50%;left:50%;width:min(470px,92vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(31,181,168,.35);animation:spin 40s linear infinite;z-index:0}
.orbit::after{content:"";position:absolute;top:8%;left:12%;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(31,181,168,.18)}
.halo{position:absolute;top:50%;left:50%;width:360px;height:360px;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(31,181,168,.22),transparent);filter:blur(10px);z-index:0}
@keyframes spin{to{rotate:360deg}}
.hero-visual .phone{z-index:1}
.float{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 40px -20px rgba(20,38,74,.35);font-size:13px;opacity:0;animation:floatin .9s var(--spring) forwards,bob 6s ease-in-out infinite}
.float b{font-weight:600;color:var(--text)}
.float span{color:var(--muted);font-size:12px}
.float b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:1px}
.float.f1{top:22%;left:-6%;animation-delay:2.6s,3.5s}
.float.f2{bottom:16%;right:-8%;animation-delay:3.1s,4s}
.float.f2 b::before{background:var(--accent)}
@keyframes floatin{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes bob{50%{translate:0 -8px}}

.step .num{display:inline-flex;align-items:center;gap:10px}
.step .num::after{content:"";width:28px;height:2px;border-radius:2px;background:var(--accent)}
.cell .pill{background:var(--card-2);border-color:transparent}
.cell .pill.on{background:var(--btn);color:#fff}
.cta-mark{filter:drop-shadow(0 16px 24px rgba(31,181,168,.35))}
@media (max-width:980px){.float.f1{left:0}.float.f2{right:0}}
@media (max-width:560px){.float{display:none}}