/* Página inicial: imagens do mundo da aplicação em movimento lento, tipografia contida, só as cores do logótipo. Sem texturas. */
.entry{min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text)}
.entry .in{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
:root{--logo-on-photo:url(/brand/logo-oficial-claro.webp)}

/* Barra de topo: transparente no topo; vidro Ink enquanto está sobre a imagem; fundo da página depois do herói */
.e-top{position:fixed;top:0;left:0;right:0;z-index:40;transition:background-color .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.e-top .in{height:76px;display:flex;align-items:center;gap:22px}
.e-top .logo{display:block;width:172px;height:40px;background:var(--logo-on-photo) left center/contain no-repeat;flex:none;opacity:0;clip-path:inset(0 100% 0 0);animation:logoin 1.1s cubic-bezier(.65,0,.2,1) .2s forwards;transition:background-image .3s ease}
@keyframes logoin{0%{opacity:0;clip-path:inset(0 100% 0 0)}25%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0)}}
.e-top .sp{flex:1}
.e-top .lnk{font:600 15px/1 var(--h);color:rgba(252,248,241,.85);text-decoration:none;padding:10px 4px;transition:color .15s ease}
.e-top .lnk:hover{color:#FCF8F1}
.e-top .btn.primary{min-height:42px;padding:0 20px;border-radius:10px;background:#FCF8F1;border-color:#FCF8F1;color:#002032}
.e-top .btn.primary:hover{filter:none;background:#EEE2D1;border-color:#EEE2D1}
.e-top.scrolled{background:rgba(0,32,50,.55);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:rgba(252,248,241,.08)}
.e-top.solid{background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom-color:var(--border)}
.e-top.solid .logo{background-image:var(--logo-oficial)}
.e-top.solid .lnk{color:var(--text-2)}
.e-top.solid .lnk:hover{color:var(--text)}
.e-top.solid .btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}

/* Herói: a sala do posto de saúde a mover-se devagar (e em parallax ao deslizar), véu Ink para leitura, texto em Paper */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:#002032;color:#FCF8F1;isolation:isolate}
.hero .photo{position:absolute;inset:-6% -4%;z-index:-2;background:url(/brand/hero-posto-960.webp) 60% 50%/cover no-repeat;animation:kenburns 34s ease-in-out infinite alternate;translate:0 calc(var(--hp,0) * 1px);will-change:transform,translate}
@media (min-width:900px){.hero .photo{background-image:url(/brand/hero-posto-1920.webp)}}
@media (max-width:720px){.hero .photo{background-image:url(/brand/hero-posto-m.webp);background-position:50% 50%}}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.1) translate(-1.8%,1%)}}
.hero .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,32,50,.62) 0%,rgba(0,32,50,.14) 24%,rgba(0,32,50,.12) 46%,rgba(0,32,50,.86) 100%),linear-gradient(90deg,rgba(0,32,50,.62) 0%,rgba(0,32,50,.2) 45%,rgba(0,32,50,0) 70%)}
.hero .in{width:100%;padding-top:120px;padding-bottom:clamp(56px,8vw,96px)}
.hero .copy{max-width:600px;opacity:calc(1 - var(--hq,0) * .9);translate:0 calc(var(--hq,0) * -40px)}
.hero .k{margin:0 0 16px;font:700 12.5px/1 var(--h);letter-spacing:.22em;text-transform:uppercase;color:#E8A27F}
.hero h1{font:800 clamp(1.9rem,1rem + 2.6vw,3.1rem)/1.08 var(--h);letter-spacing:-.03em;margin:0;color:#FCF8F1;text-wrap:balance}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.35em);animation:word .7s cubic-bezier(.2,.8,.2,1) forwards}
.hero .sub{margin:20px 0 0;max-width:46ch;font-size:clamp(16px,1.15vw,18px);line-height:1.5;color:rgba(252,248,241,.86)}
.hero .cta{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.hero .btn.primary{background:#FCF8F1;border-color:#FCF8F1;color:#002032}
.hero .btn.primary:hover{background:#EEE2D1;border-color:#EEE2D1;filter:none}
.btn.lg{min-height:52px;padding:0 26px;font-size:15px;border-radius:11px}
.hero .more{display:inline-flex;align-items:center;gap:6px;font:700 15px/1 var(--h);color:#FCF8F1;text-decoration:none;padding:10px 0;transition:gap .2s ease}
.hero .more svg{width:16px;height:16px;transform:rotate(90deg);color:#E8A27F}
.hero .more:hover{gap:10px}
@keyframes word{to{opacity:1;transform:none}}

/* As duas pontas: as imagens abrem-se ao entrar no ecrã e voltam a fechar-se quando saem (nos dois sentidos) */
.ends{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px;align-items:start}
.end{margin:0}
.end:nth-child(2){margin-top:88px}
.end .ph{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3;background:#002032;clip-path:inset(9% 7% 9% 7% round 16px);transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1)}
.end .ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transform:scale(1.14);transition:transform 1.4s cubic-bezier(.2,.8,.2,1);translate:0 calc(var(--py,0) * 1px)}
.end:first-child .ph img{object-position:64% 50%}
.end:nth-child(2) .ph img{object-position:58% 50%}
.end.on .ph{clip-path:inset(0 0 0 0 round 16px)}
.end.on .ph img{transform:scale(1)}
.end figcaption{margin-top:18px;display:grid;gap:6px}
.end figcaption b{font:800 19px/1.2 var(--h);letter-spacing:-.01em}
.end figcaption span{color:var(--text-2);font-size:15.5px;line-height:1.5;max-width:46ch}

/* Secções */
.sec .in{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px)}
.entry h2{font:800 clamp(1.7rem,1.05rem + 2vw,2.5rem)/1.1 var(--h);letter-spacing:-.035em;margin:0;max-width:22ch}
.entry .lead{color:var(--text-2);font-size:17.5px;line-height:1.55;max-width:58ch;margin:18px 0 0}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}

.steps-list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--border)}
.steps-list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:30px 0;border-bottom:1px solid var(--border)}
.steps-list .n{font:800 22px/1 var(--h);color:#D27046;letter-spacing:-.02em;padding-top:4px}
.steps-list b{display:block;font:800 21px/1.2 var(--h);letter-spacing:-.02em}
.steps-list p{margin:8px 0 0;max-width:62ch;color:var(--text-2);font-size:16.5px;line-height:1.5}

.who{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:40px 56px}
.who li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start}
.who .ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#EEE2D1;color:#002032}
:root[data-theme="dark"] .who .ic{background:color-mix(in srgb,#002032 80%,#FCF8F1);color:#FCF8F1}
.who .ic svg{width:22px;height:22px}
.who b{display:block;font:800 18px/1.2 var(--h);letter-spacing:-.01em}
.who p{margin:6px 0 0;color:var(--text-2);font-size:15.5px;line-height:1.5}

.band{background:#EEE2D1;color:#002032}
:root[data-theme="dark"] .band{background:color-mix(in srgb,#002032 90%,#FCF8F1);color:#FCF8F1}
.band .in{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px)}
.band h2{max-width:28ch}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}
.three b{display:block;font:800 17px/1.25 var(--h);margin-bottom:8px}
.three p{margin:0;font-size:15.5px;line-height:1.55;opacity:.85}

.e-foot{border-top:1px solid var(--border)}
.e-foot .in{padding-top:28px;padding-bottom:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--text-3);font-size:13.5px}
.e-foot .logo{width:150px;height:34px;background:var(--logo-oficial) left center/contain no-repeat}
.e-foot .sp{flex:1}

/* Entrada: modal centrado sobre a página */
.auth{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(0,32,50,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s ease}
.auth .sheet{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--bg);color:var(--text);border-radius:18px;box-shadow:0 30px 80px rgba(0,16,26,.45);padding:28px clamp(22px,4vw,36px) 26px;animation:rise .28s cubic-bezier(.2,.8,.2,1)}
.auth.closing{animation:fadeout .18s ease forwards}
.auth.closing .sheet{animation:sink .18s ease forwards}
.auth .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.auth .logo{width:160px;height:38px;background:var(--logo-oficial) left center/contain no-repeat}
.auth h2{font:800 1.55rem/1.1 var(--h);letter-spacing:-.03em;margin:0 0 6px;max-width:none}
.auth .lead{color:var(--text-2);margin:0 0 22px;font-size:15px}
.auth .form{gap:14px}
.pw{position:relative}
.pw .input{padding-right:84px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--text-2);font:700 12.5px var(--h);padding:8px 10px;border-radius:6px;cursor:pointer}
.pw button:hover{background:var(--surface-2)}
.auth .btn.primary{min-height:48px;font-size:15px;width:100%;border-radius:10px}
.auth .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.linkbtn{border:0;background:none;padding:0;color:var(--link);font:600 14px var(--b);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.auth .invite{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border);color:var(--text-3);font-size:13.5px}
.alert{border-radius:9px;padding:11px 13px;font-size:14px;margin-bottom:6px}
.alert.error{background:var(--danger-bg);color:var(--text);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent)}
.alert.ok{background:var(--ok-bg);color:var(--text);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.rules{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--text-3)}
.rules li::before{content:"○";display:inline-block;width:18px;color:var(--text-3)}
.rules li.ok{color:var(--ok)}
.rules li.ok::before{content:"●";color:var(--ok)}

@media (max-width:980px){
  .three{grid-template-columns:1fr;gap:28px}
}
@media (max-width:720px){
  .e-top .in{height:66px;gap:12px}
  .e-top .logo{width:150px;height:34px}
  .e-top .lnk{display:none}
  .e-top .btn.primary{min-height:40px;padding:0 16px;font-size:13.5px}
  .hero{min-height:92vh;min-height:92dvh}
  .hero .in{padding-top:96px;padding-bottom:40px}
  .hero h1{font-size:clamp(1.7rem,1.1rem + 3vw,2.15rem)}
  .hero .sub{margin-top:14px;font-size:16px}
  .hero .cta{margin-top:24px;gap:16px}
  .hero .cta .btn{flex:1 1 100%}
  .hero .veil{background:linear-gradient(180deg,rgba(0,32,50,.6) 0%,rgba(0,32,50,.1) 22%,rgba(0,32,50,.2) 45%,rgba(0,32,50,.9) 78%,rgba(0,32,50,.94) 100%)}
  .ends{grid-template-columns:1fr;gap:36px;margin-top:36px}
  .end:nth-child(2){margin-top:0}
  .steps-list li{grid-template-columns:56px minmax(0,1fr);padding:22px 0}
  .steps-list b{font-size:18px}
  .who{grid-template-columns:1fr;gap:28px}
  .auth{padding:0;place-items:end stretch}
  .auth .sheet{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;animation:slideup .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes slideup{from{transform:translateY(30px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .w,.e-top .logo{opacity:1;transform:none;clip-path:none;animation:none}
  .hero .photo{animation:none;translate:none}
  .hero .copy{opacity:1;translate:none}
  .end .ph{clip-path:inset(0 0 0 0 round 16px);transition:none}
  .end .ph img{transform:none;translate:none;transition:none}
  .rv{opacity:1;transform:none;transition:none}
}