/* Círia · página "em breve" · v1 (06/10/2026) — sem dependências externas */
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Lora;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/lora-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Lora;font-weight:400;font-style:italic;font-display:swap;src:url(fonts/lora-latin-400-italic.woff2) format("woff2")}

:root{
  --deep:#15486B; --deeper:#0d324c; --night:#0a2539;
  --teal:#157A8E; --green:#1B9C8A; --aqua:#4FC2D6;
  --orange:#E87A4B; --orange-soft:#F5A05A;
  --paper:#FAF9F5; --mist:#bcd3df; --dim:#86a6b9;
  --accent:var(--aqua);
  --head:Poppins,"Segoe UI",Arial,sans-serif;
  --body:Lora,Georgia,serif;
}
body[data-area="medico"]   {--accent:#8fc3e6}
body[data-area="paciente"] {--accent:#5FD3C0}
body[data-area="parceiros"]{--accent:var(--orange-soft)}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);color-scheme:dark}
body{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  font-family:var(--body);color:var(--paper);line-height:1.6;
  background:
    radial-gradient(60rem 40rem at 78% 42%, rgba(79,194,214,.16), transparent 60%),
    radial-gradient(50rem 36rem at 10% 110%, rgba(27,156,138,.18), transparent 60%),
    linear-gradient(160deg, var(--deep) 0%, var(--deeper) 55%, var(--night) 100%);
  overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange-soft);outline-offset:3px;border-radius:6px}

/* topo */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:28px clamp(16px,5vw,64px) 0}
.wordmark{display:block;height:34px;width:auto}
.wordmark-link{display:inline-flex;text-decoration:none}
.pill{font-family:var(--head);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);border:1px solid rgba(250,249,245,.22);border-radius:40px;padding:7px 14px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--orange);display:block;
  box-shadow:0 0 0 0 rgba(232,122,75,.6);animation:beat 2.4s ease-out infinite}

/* palco */
main{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  gap:clamp(24px,4vw,64px);padding:clamp(28px,5vh,64px) clamp(16px,5vw,64px);max-width:1280px;width:100%;margin:0 auto}
.copy{max-width:600px}
.eyebrow{font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px;opacity:0;animation:rise .8s .2s ease-out forwards}
h1{font-family:var(--head);font-weight:600;font-size:clamp(36px,5.6vw,68px);line-height:1.06;letter-spacing:-.025em;
  margin-bottom:26px;opacity:0;animation:rise .9s .35s ease-out forwards}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--paper));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--mist);max-width:540px;
  opacity:0;animation:rise .9s .55s ease-out forwards}
.hook{margin-top:30px;font-family:var(--body);font-style:italic;font-size:clamp(17px,1.4vw,19px);color:var(--paper);
  display:flex;align-items:center;gap:14px;opacity:0;animation:rise .9s .8s ease-out forwards}
.hook::before{content:"";width:34px;height:2px;background:var(--orange);border-radius:2px;flex-shrink:0}

/* símbolo */
.stage{position:relative;display:flex;justify-content:center;opacity:0;animation:fade 1s .1s ease-out forwards}
.cycle{width:min(100%,600px);height:auto;overflow:visible}
.cycle .arc{fill:none;stroke-width:13;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 1.1s cubic-bezier(.6,.05,.3,1) forwards}
.cycle .a1{animation-delay:.5s}.cycle .a2{animation-delay:1.0s}.cycle .a3{animation-delay:1.5s}.cycle .a4{animation-delay:2.0s}
.cycle .dot{transform-origin:100px 42px;transform:scale(0);animation:pop .6s 3.0s cubic-bezier(.3,1.6,.5,1) forwards}
.cycle .halo{fill:none;stroke:var(--orange);stroke-width:1.5;transform-origin:100px 42px;opacity:0;
  animation:halo 3.2s 3.4s ease-out infinite}
.cycle .orbit{fill:none;stroke:rgba(188,211,223,.14);stroke-width:.6;stroke-dasharray:1.5 4;
  transform-origin:100px 100px;animation:spin 90s linear infinite}
.cycle .lbl{font-family:var(--head);font-size:9.5px;font-weight:500;letter-spacing:.08em;fill:var(--mist);
  opacity:0;animation:fade .8s forwards}
.cycle .l1{animation-delay:1.1s}.cycle .l2{animation-delay:1.6s}.cycle .l3{animation-delay:2.1s}.cycle .l4{animation-delay:2.6s}
.cycle .tick{fill:var(--accent);opacity:0;animation:fade .8s forwards}
.cycle .t1{animation-delay:1.1s}.cycle .t2{animation-delay:1.6s}.cycle .t3{animation-delay:2.1s}.cycle .t4{animation-delay:2.6s}

/* para quem */
.paths{padding:0 clamp(16px,5vw,64px) 8px;max-width:1280px;width:100%;margin:0 auto;
  opacity:0;animation:rise .9s 1.1s ease-out forwards}
.paths h2{font-family:var(--head);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.paths ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.paths a{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--head);font-size:15px;font-weight:500;
  padding:13px 18px 13px 16px;border-radius:14px;border:1px solid rgba(250,249,245,.14);background:rgba(250,249,245,.04);
  transition:background .2s,border-color .2s,transform .2s}
.paths a:hover{background:rgba(250,249,245,.09);border-color:rgba(250,249,245,.3);transform:translateY(-2px)}
.paths a small{display:block;font-family:var(--body);font-size:13px;font-weight:400;color:var(--dim);margin-top:1px}
.paths a b{font-weight:500}
.paths a .sw{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.paths a[aria-current="page"]{border-color:var(--accent);background:rgba(250,249,245,.07)}
.paths a .arr{margin-left:auto;padding-left:10px;color:var(--dim);transition:transform .2s}
.paths a:hover .arr{transform:translateX(3px);color:var(--paper)}

/* rodapé */
footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;
  padding:26px clamp(16px,5vw,64px) 30px;max-width:1280px;width:100%;margin:0 auto;
  font-family:var(--head);font-size:12.5px;color:var(--dim);border-top:1px solid rgba(250,249,245,.08);margin-top:28px}
footer a{color:var(--mist);text-decoration:none;border-bottom:1px solid rgba(188,211,223,.3)}
footer a:hover{color:var(--paper);border-color:var(--paper)}
footer strong{color:var(--paper);font-weight:500}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes halo{0%{opacity:.8;transform:scale(1)}80%,100%{opacity:0;transform:scale(3.4)}}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(232,122,75,.6)}70%,100%{box-shadow:0 0 0 9px rgba(232,122,75,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

@media (max-width:860px){
  main{grid-template-columns:1fr;padding-top:20px}
  .stage{order:-1}
  .cycle{width:min(88vw,360px)}
  .copy{max-width:none}
}
@media (max-width:520px){
  .top{padding-top:20px}
  .wordmark{height:28px}
  .pill{font-size:10.5px;padding:6px 11px}
  .paths ul{flex-direction:column}
  .paths a{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .cycle .halo{display:none}
}