/* ======================================================================
   ALTO CUSTO — Página "Quem Somos"
   Conceito: startup pioneira em saúde — inovação + confiança clínica.
   Base institucional (verde/teal) · calor humano (coral) só nos momentos
   humanos e CTAs · muito respiro · movimento sutil.
   Estende site.css.
   ====================================================================== */

body.p-quem{
  /* âncora institucional como acento principal */
  --accent:#0C5C4F;
  --accent-soft:#E2EFE9;
  --accent-ink:#0A483E;
  /* papel claro, levemente esverdeado — clínico, mas vivo */
  --papel:#F4F7F4;
  --papel-2:#E9EFE9;
  /* calor humano reservado */
  --coral:#E36A3A;
  --coral-ink:#C0501F;
  --coral-soft:#FBE6DA;
  /* tipografia com leve calor humanista */
  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
}

/* Fraunces fine-tuning */
body.p-quem .display{letter-spacing:-.038em;font-weight:400}
body.p-quem h2{letter-spacing:-.028em;font-weight:400}
body.p-quem h3{letter-spacing:-.018em}
body.p-quem .lead{font-weight:400}
body.p-quem em{font-style:italic}
body.p-quem h1 em,body.p-quem h2 em,body.p-quem .pull .hl{color:var(--coral-ink);font-style:italic}

/* fundos de seção (mesmo ritmo institucional/calor) */
body.p-quem .s-mist{background:#EAF0EC}
body.p-quem .s-warm{background:#F6EBE1}

/* ====================== SPINE — o traço que percorre a página ====================== */
.qs-spine{position:fixed;left:max(18px,calc((100vw - var(--maxw))/2 - 30px));top:0;bottom:0;width:2px;z-index:40;pointer-events:none}
.qs-spine .track{position:absolute;inset:0;background:var(--linha);border-radius:2px}
.qs-spine .fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--accent),var(--verde-vida) 60%,var(--coral));border-radius:2px;transition:height .12s linear}
.qs-spine .bead{position:absolute;left:50%;width:9px;height:9px;border-radius:50%;background:var(--papel);border:2px solid var(--linha);transform:translate(-50%,-50%);transition:border-color .3s,background .3s,transform .3s}
.qs-spine .bead.lit{border-color:var(--accent);background:var(--accent)}
.qs-spine .bead.coral.lit{border-color:var(--coral);background:var(--coral)}
@media(max-width:1320px){.qs-spine{display:none}}

/* ====================== HERO — emocional, silêncio visual ====================== */
.qs-hero{background:var(--papel);color:var(--tinta);position:relative;overflow:hidden;
  padding:clamp(72px,12vw,150px) 0 clamp(56px,8vw,104px)}
.qs-hero .wrap{position:relative;z-index:2}
.qs-hero .eyebrow{justify-content:flex-start}
.qs-hero h1{font-size:clamp(2.5rem,6.4vw,5rem);line-height:1.02;letter-spacing:-.04em;font-weight:400;max-width:16ch;color:var(--tinta)}
.qs-hero .lead{max-width:50ch;margin-top:clamp(26px,4vw,40px);color:var(--grafite);font-size:clamp(1.18rem,2vw,1.55rem)}
/* horizonte sutil — imagem real tratada com suavidade */
.qs-hero-media{margin-top:clamp(48px,7vw,88px);position:relative}
.qs-hero-photo{display:block;width:100%;height:auto;aspect-ratio:21/8;border-radius:22px;box-shadow:0 40px 90px -40px rgba(12,46,40,.5)}
.qs-hero-photo::part(frame){background:rgba(12,46,40,.04)}
.qs-hero-photo::part(ring){border-color:rgba(12,46,40,.22)}
.qs-hero-photo::part(empty){color:#6f8278}
.qs-hero-cap{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cinza)}
/* glow institucional muito leve atrás do título */
.qs-hero-glow{position:absolute;top:-12%;right:-8%;width:min(52vw,640px);height:min(52vw,640px);border-radius:50%;
  background:radial-gradient(circle,var(--verde-tint) 0%,transparent 65%);opacity:.7;z-index:1;pointer-events:none}
@media(max-width:680px){.qs-hero-photo{aspect-ratio:5/4}}

/* ====================== ORIGEM — narrativa humana → racional ====================== */
.qs-origin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:start}
.qs-origin .body p+p{margin-top:20px}
.qs-origin .aside{position:relative;align-self:stretch}
.qs-origin-photo{display:block;width:100%;height:100%;min-height:340px;border-radius:18px;box-shadow:var(--shadow-md)}
.qs-origin-photo::part(empty){color:#6f8278}
@media(max-width:860px){.qs-origin{grid-template-columns:1fr;gap:32px}.qs-origin-photo{min-height:280px}}

/* ====================== PROBLEMA — o caminho com obstáculos ====================== */
.qs-path-fig{margin:clamp(36px,5vw,56px) 0 0;width:100%}
.qs-path-fig svg{width:100%;height:auto;display:block;overflow:visible}
.qs-path .endpoint .ring{fill:#fff;stroke:var(--accent);stroke-width:3}
.qs-path .endpoint .lbl{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;fill:var(--accent-ink)}
.qs-path .endpoint .sub{font-family:var(--sans);font-size:13px;fill:var(--cinza)}
/* obstáculos */
.qs-path .obst circle{fill:#fff;stroke:var(--coral);stroke-width:2.5}
.qs-path .obst line{stroke:var(--coral);stroke-width:2.5;stroke-linecap:round}
.qs-path .obst text{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;fill:var(--coral-ink);text-transform:uppercase}
/* paredes do labirinto (fundo decorativo) */
.qs-path .qs-maze path{fill:none;stroke:#A9B7AF;stroke-width:2;stroke-linecap:square;opacity:.55}
.qs-path .tangled{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:1;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.qs-path.drawn .tangled{transition:stroke-dashoffset 1.6s cubic-bezier(.5,0,.2,1);stroke-dashoffset:0}
.qs-path .obst{opacity:0;transform:scale(.6);transform-origin:center;transition:opacity .5s,transform .5s}
.qs-path.drawn .obst{opacity:1;transform:scale(1)}
.qs-path .waiting text{font-family:var(--serif);font-style:italic;font-size:18px;fill:var(--grafite)}

.qs-four-isolated{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,5vw,52px)}
.qs-iso{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:22px 22px 24px}
.qs-iso .ti{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.qs-iso .ti .d{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.qs-iso p{font-size:.97rem;color:var(--grafite);line-height:1.5}
@media(max-width:860px){.qs-four-isolated{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.qs-four-isolated{grid-template-columns:1fr}}

/* ====================== HUB — as 4 pontas (o coração do design) ====================== */
.qs-hub-wrap{position:relative;max-width:920px;margin:clamp(40px,6vw,64px) auto 0;aspect-ratio:1000/720}
@media(max-width:760px){.qs-hub-wrap{display:none}}
.qs-hub-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.qs-hub-svg .link{fill:none;stroke:var(--accent);stroke-width:2.5;opacity:.32;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.qs-hub.drawn .qs-hub-svg .link{transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1);stroke-dashoffset:0}
.qs-hub-svg .link.active{stroke:var(--coral);opacity:1;stroke-width:3.5}
.qs-hub-svg .pulse{fill:var(--coral);opacity:0}

/* center */
.qs-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;text-align:center;
  width:188px;height:188px;border-radius:50%;background:var(--verde-escuro);color:#EAF1ED;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 24px 60px -20px rgba(12,46,40,.6);padding:18px}
.qs-center svg{width:46px;height:46px}
.qs-center .nm{font-family:var(--serif);font-size:1.18rem;line-height:1.1}
.qs-center .rl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-vida)}
.qs-center::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--verde-vida);opacity:.3}

/* nodes */
.qs-node{position:absolute;z-index:4;width:218px;transform:translate(-50%,-50%);
  background:#fff;border:1px solid var(--linha);border-radius:16px;padding:20px 20px 22px;
  box-shadow:var(--shadow-sm);cursor:default;transition:transform .25s,box-shadow .25s,border-color .25s}
.qs-node:hover,.qs-node.active{transform:translate(-50%,-50%) scale(1.04);box-shadow:var(--shadow-md);border-color:var(--coral)}
.qs-node .head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.qs-node .ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;transition:background .25s}
.qs-node .ic svg{width:21px;height:21px;color:var(--accent-ink);transition:color .25s}
.qs-node.active .ic{background:var(--coral-soft)}
.qs-node.active .ic svg{color:var(--coral-ink)}
.qs-node .nm{font-family:var(--serif);font-size:1.22rem;color:var(--tinta);line-height:1.05}
.qs-node p{font-size:.92rem;color:var(--grafite);line-height:1.48}
/* posições (diamante) — casam com a geometria do SVG */
.qs-node.n-pac{left:50%;top:13%}
.qs-node.n-med{left:84%;top:50%}
.qs-node.n-adv{left:50%;top:87%}
.qs-node.n-far{left:16%;top:50%}

/* versão empilhada (mobile) */
.qs-hub-stack{display:none;margin-top:36px;gap:14px;grid-template-columns:1fr}
@media(max-width:760px){.qs-hub-stack{display:grid}}
.qs-stack-center{background:var(--verde-escuro);color:#EAF1ED;border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px}
.qs-stack-center svg{width:40px;height:40px;flex:none}
.qs-stack-center .nm{font-family:var(--serif);font-size:1.3rem}
.qs-stack-center .rl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-vida);margin-top:3px}
.qs-stack-node{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:20px;display:flex;gap:14px;align-items:flex-start}
.qs-stack-node .ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center}
.qs-stack-node .ic svg{width:21px;height:21px;color:var(--accent-ink)}
.qs-stack-node .nm{font-family:var(--serif);font-size:1.18rem;color:var(--tinta);margin-bottom:5px}
.qs-stack-node p{font-size:.95rem;color:var(--grafite)}

.qs-hub-foot{text-align:center;max-width:48ch;margin:clamp(36px,5vw,52px) auto 0;font-family:var(--serif);
  font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.35;color:var(--grafite)}
.qs-hub-foot b{font-style:normal;font-weight:500;color:var(--accent-ink)}

/* ====================== VALORES — cards com ícones de conexão ====================== */
.qs-values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.qs-value{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:30px 28px 32px;box-shadow:var(--shadow-sm)}
.qs-value .ic{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:20px}
.qs-value .ic svg{width:26px;height:26px;color:var(--accent-ink)}
.qs-value h3{font-size:1.24rem;margin-bottom:9px}
.qs-value p{color:var(--grafite);font-size:.98rem;line-height:1.55}
.qs-value:first-child .ic{background:var(--coral-soft)}
.qs-value:first-child .ic svg{color:var(--coral-ink)}
@media(max-width:860px){.qs-values{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.qs-values{grid-template-columns:1fr}}

/* ====================== REDE — números com contador ====================== */
.qs-net{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,6vw,72px);align-items:center}
.qs-counters{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:18px;overflow:hidden}
.qs-counter{background:#fff;padding:30px 28px}
.qs-counter .big{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--accent-ink);font-weight:500;display:flex;align-items:baseline;gap:4px}
.qs-counter .big .pre,.qs-counter .big .suf{font-size:.5em;color:var(--coral-ink);font-weight:500}
.qs-counter .lbl{margin-top:12px;font-size:.96rem;color:var(--grafite);line-height:1.45}
@media(max-width:860px){.qs-net{grid-template-columns:1fr;gap:30px}}
@media(max-width:480px){.qs-counters{grid-template-columns:1fr}}

/* ====================== ACESSO RESPONSÁVEL — sóbrio, institucional ====================== */
.qs-resp{background:var(--verde-escuro);color:#D7E2DC}
.qs-resp h2{color:#F4F8F5}
.qs-resp h2 em{color:var(--laranja-claro)}
.qs-resp .lead{color:#AFC4BA}
.qs-resp .eyebrow{color:var(--laranja-claro)}
.qs-resp .eyebrow::before{background:var(--laranja)}
.qs-resp .intro p+p{margin-top:18px}
.qs-resp .intro{max-width:62ch}
.qs-principles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;margin-top:clamp(34px,5vw,52px)}
.qs-principle{background:var(--verde-escuro);padding:30px 32px}
.qs-principle .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--laranja-claro);margin-bottom:14px}
.qs-principle h4{font-family:var(--serif);font-size:1.28rem;color:#F4F8F5;margin-bottom:9px;line-height:1.15}
.qs-principle p{font-size:.97rem;color:#B7Cabf;line-height:1.55}
.qs-resp .gov{margin-top:clamp(30px,4vw,44px);font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.4;color:#DCE7E1;max-width:60ch}
.qs-resp .gov b{font-style:normal;font-weight:500;color:#fff}
@media(max-width:760px){.qs-principles{grid-template-columns:1fr}}

/* ====================== MISSÃO — fechamento ====================== */
.qs-mission{text-align:center}
.qs-mission .eyebrow{justify-content:center}
.qs-mission .stmt{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,4.2vw,3rem);
  line-height:1.22;letter-spacing:-.02em;max-width:22ch;margin:0 auto clamp(34px,5vw,46px)}
.qs-mission .stmt em{color:var(--coral-ink);font-style:italic}
.qs-mission .btn-row{justify-content:center}


/* ====================== Transparência / dados institucionais ====================== */
.qs-facts-sec .sec-head{margin-bottom:8px}
.qs-facts{margin-top:36px;max-width:900px;border-top:1px solid #D7E2DA}
.qs-facts > div{display:grid;grid-template-columns:260px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid #D7E2DA;align-items:baseline}
.qs-facts dt{font-weight:600;color:#0C5C4F;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em}
.qs-facts dd{margin:0;color:#3E4A44;font-size:1.08rem;line-height:1.55}
.qs-facts dd a{color:#0C5C4F;text-decoration:none;border-bottom:1px solid rgba(12,92,79,.28)}
.qs-facts dd a:hover{border-color:#0C5C4F}
.qs-channels{display:flex;flex-wrap:wrap;gap:10px 22px}
.qs-facts-note{margin-top:26px;max-width:760px;color:#7C8A82;font-size:.92rem;line-height:1.6}
@media(max-width:640px){
  .qs-facts > div{grid-template-columns:1fr;gap:7px;padding:18px 0}
  .qs-channels{gap:8px 16px}
}