/* A trilha da implantação se torna um ciclo de acompanhamento. */
.h-care{position:relative;isolation:isolate;padding-block:clamp(88px,11vh,144px);border:0;color:var(--paper);--tx:var(--paper);--tx-2:var(--cream);--signal-text:var(--signal);background:linear-gradient(var(--soot),var(--ink) 36%,var(--ink))}
.h-care-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);align-items:end;gap:80px;margin-bottom:72px}
.h-care h2{font-size:clamp(36px,3.5vw,50px);line-height:1.13;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.h-care h2 em{color:var(--signal)}
.h-care-heading>p{font-size:16px;line-height:1.8;color:var(--cream);max-width:44ch;padding-bottom:5px}
.h-care-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(60px,8vw,128px);align-items:start}
.h-care-intro{position:static;top:calc(var(--home-header,89px) + 36px);width:100%;max-width:460px;justify-self:center}
.h-care[data-care-sticky="true"] .h-care-intro{position:sticky}
.h-care-diagram{position:relative;aspect-ratio:1;isolation:isolate;pointer-events:none;user-select:none;-webkit-user-select:none}
.h-care-diagram::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--signal) 6%,transparent),transparent 70%);z-index:-1}
.h-care-orbit{width:100%;height:auto;display:block;overflow:visible;stroke-linecap:round;stroke-linejoin:round}
.h-care-orbit :is(path,circle){vector-effect:non-scaling-stroke}
.h-care-orbit-outer{stroke:color-mix(in srgb,var(--paper) 7%,transparent);stroke-width:1;stroke-dasharray:1 8}
.h-care-orbit-track{stroke:color-mix(in srgb,var(--paper) 20%,transparent);stroke-width:1}
.h-care-orbit-axis{stroke:color-mix(in srgb,var(--paper) 12%,transparent);stroke-width:1}
.h-care-node-shell{fill:var(--ink);stroke:color-mix(in srgb,var(--paper) 30%,var(--ink));stroke-width:1}
.h-care-node-glow{stroke:var(--signal);stroke-width:1.5;opacity:var(--care-node,1)}
.h-care-orbit text{fill:var(--cream);font-family:var(--code);font-size:11px}
.h-care-light,.h-care-trail{fill:var(--signal);opacity:0}
.h-care-light-halo{opacity:.15}
.h-care-trail{transform-origin:180px 180px;fill:none;stroke:url(#care-trail-gradient);stroke-width:2}
.h-care-orbit stop{stop-color:var(--signal)}
.h-care-trail-soft{stroke-width:7;opacity:.12}
.h-care-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.h-care-centre>span{font-family:var(--code);font-size:11px;letter-spacing:.08em;color:var(--cream);margin-bottom:14px}
.h-care-centre strong{font-size:26px;letter-spacing:-.035em;font-weight:500}
.h-care-centre small{font-size:13px;line-height:1.6;color:var(--cream);margin-top:8px}
.h-care-caption{text-align:center;font-size:13px;line-height:1.7;color:var(--cream);margin-top:14px}
.h-care-articles{min-width:0}
.h-care-articles article{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:22px;padding-block:32px 42px;border-top:1px solid color-mix(in srgb,var(--paper) 16%,transparent);min-height:204px}
.h-care-number{font-family:var(--code);font-size:11px;color:var(--cream);padding-top:7px}
.h-care-articles article::before{content:"";position:absolute;top:-1px;left:0;width:54px;height:2px;background:var(--signal);opacity:var(--care-focus,1);box-shadow:0 0 12px color-mix(in srgb,var(--signal) 20%,transparent);pointer-events:none}
.h-care-articles h3{font-size:27px;font-weight:500;line-height:1.25;letter-spacing:-.025em;margin-bottom:16px;text-wrap:balance}
.h-care-articles p{font-size:16px;line-height:1.8;color:var(--cream);max-width:44ch}
@media(max-width:1000px){.h-care-heading{gap:40px}.h-care-layout{gap:48px}.h-care-centre strong{font-size:23px}.h-care-articles h3{font-size:25px}}
@media(max-width:767px){.h-care{padding-block:72px}.h-care-heading{display:block;margin-bottom:32px}.h-care h2{font-size:clamp(32px,9.2vw,36px)}.h-care-heading>p{font-size:15px;margin-top:24px;line-height:1.75}.h-care-layout{display:block}.h-care[data-care-sticky] .h-care-intro{position:static}.h-care-intro{max-width:260px;margin:0 auto 36px}.h-care-articles article{min-height:0;grid-template-columns:26px minmax(0,1fr);gap:16px;padding-block:28px 36px}.h-care-articles h3{font-size:24px}.h-care-articles p{font-size:15px;line-height:1.75}.h-care-orbit text{font-size:15px}.h-care-centre>span{font-size:10px;margin-bottom:8px}.h-care-centre strong{font-size:19px}.h-care-centre small{font-size:12px;margin-top:6px}}
@media(prefers-reduced-motion:reduce){.h-care[data-care-sticky] .h-care-intro{position:static}.h-care-node-glow,.h-care-articles article::before{opacity:1!important}.h-care-light,.h-care-trail{opacity:0!important;will-change:auto!important}}
/* A trilha da implantação chega ao ciclo: filete no topo, desenhado ao entrar. */
.h-care::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:clamp(64px,11vh,128px);pointer-events:none;transform-origin:50% 0;background:linear-gradient(90deg,transparent 12%,color-mix(in srgb,var(--signal) 32%,transparent),transparent 88%) top/100% 1px no-repeat,linear-gradient(color-mix(in srgb,var(--signal) 50%,transparent),transparent) 50% 0/1px 100% no-repeat}
/* Melhoria progressiva: a luz e o rastro percorrem o ciclo pela linha do tempo
   dos artigos (52% da viewport até o último artigo, --care-span medido pelo JS).
   Com data-care-driver="css" o JS não escreve transform/opacidade nesses dois. */
@supports (animation-timeline:view()) and (timeline-scope:none){
 @media(prefers-reduced-motion:no-preference){
  .h-care{view-timeline:--h-care block}
  .h-care-layout{timeline-scope:--h-care-articles}
  .h-care-articles{view-timeline:--h-care-articles block}
  .h-care[data-care-mode="animated"][data-care-driver="css"] .h-care-light{opacity:1;transform-origin:0 0;animation:h-care-light linear both;animation-timeline:--h-care-articles;animation-range:cover 48vh cover calc(48vh + var(--care-span,1px))}
  .h-care[data-care-mode="animated"][data-care-driver="css"] .h-care-trail{opacity:.6;animation:h-care-trail linear both;animation-timeline:--h-care-articles;animation-range:cover 48vh cover calc(48vh + var(--care-span,1px))}
  .h-care[data-care-mode="animated"]::before{animation:h-care-filament linear both;animation-timeline:--h-care;animation-range:entry 0% entry 45%}
  .h-care[data-care-mode="animated"] .h-care-diagram::before{animation:h-care-depth linear both;animation-timeline:--h-care;animation-range:cover 10% cover 90%}
 }
}
@keyframes h-care-light{from{transform:translate(180px,180px) rotate(0deg) translate(0,-136px)}to{transform:translate(180px,180px) rotate(270deg) translate(0,-136px)}}
@keyframes h-care-trail{from{transform:rotate(0deg)}to{transform:rotate(270deg)}}
@keyframes h-care-filament{from{opacity:0;transform:scale(.18,0)}to{opacity:1;transform:none}}
@keyframes h-care-depth{from{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1)}to{opacity:.55;transform:scale(1.08)}}
