/* ============================================================
   LabCentro — camada de refinamento visual (identidade molecular)
   Carrega por último; reaproveita os tokens (--teal, --petrol...).
   ============================================================ */

/* ---------- Motivo molecular (assinatura da marca) ---------- */
.mol-deco{position:absolute;pointer-events:none;z-index:1;opacity:.5}
.mol-deco svg{width:100%;height:100%;display:block}
.mol-deco .mnode{fill:var(--teal)}
.mol-deco .mline{stroke:var(--teal);stroke-width:2;opacity:.5}
.mol-deco .mnode.c{fill:var(--cyan)}

/* hero (foto escura): traços em ciano suave no canto */
.hero-slider .mol-deco{top:-40px;right:-30px;width:340px;height:300px;opacity:.28;z-index:3}
.hero-slider .mol-deco .mnode{fill:#bfe6e6}
.hero-slider .mol-deco .mline{stroke:#bfe6e6}

/* page-hero (claro): motivo maior à direita */
.page-hero{overflow:hidden}
.page-hero .mol-deco{top:-30px;right:-40px;width:420px;height:360px;opacity:.14}

/* seções claras: watermark discreto */
#diferenciais .mol-deco,#historia .mol-deco{bottom:-60px;left:-50px;width:360px;height:320px;opacity:.06;z-index:0}

/* ---------- Header: logo maior e nítida ---------- */
header .brand-logo{height:50px}
header.scrolled .brand-logo{height:44px;transition:height .2s ease}
.topbar-left svg{color:var(--cyan)}

/* ---------- Eyebrow: bolinha molecular ---------- */
.section-head .eyebrow::before,.page-hero .eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 3px rgba(21,158,150,.18);flex:none}

/* ---------- Section head: régua com gradiente ---------- */
.section-head h2{position:relative;display:inline-block}
.section-head h2::after{
  content:"";display:block;width:64px;height:4px;border-radius:999px;margin:18px auto 0;
  background:linear-gradient(90deg,var(--teal),var(--cyan))}

/* ---------- Cards de serviço: barra de acento no topo ---------- */
.card.has-media{position:relative}
.card.has-media::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.card.has-media:hover::before{transform:scaleX(1)}
.card-badge{box-shadow:0 6px 18px -8px rgba(31,59,100,.35);backdrop-filter:blur(2px)}

/* ---------- STATS: brilho interno + acento ---------- */
.stats{position:relative;isolation:isolate;
  background:linear-gradient(140deg,#22406e 0%,var(--petrol) 55%,#16283f 100%)}
.stats::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(420px 180px at 12% -20%,rgba(51,180,170,.28),transparent 60%)}
.stat{position:relative;padding-left:2px}
.stat + .stat::before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:1px;
  background:rgba(255,255,255,.10)}
@media(max-width:960px){.stat + .stat::before{display:none}}
.stat b .num{background:linear-gradient(120deg,#fff,#bfe6e6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Comodidades (seg-cards): ícone com halo ---------- */
.seg-ic{box-shadow:0 10px 22px -10px rgba(21,158,150,.55)}
.seg-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}

/* ---------- Botões: sombra colorida da marca ---------- */
.btn-primary{box-shadow:0 10px 24px -12px rgba(14,128,122,.7)}
.btn-primary:hover{box-shadow:0 16px 30px -12px rgba(14,128,122,.75)}

/* ---------- Accordions (serviços): acento quando aberto ---------- */
.acc{transition:box-shadow .2s ease,border-color .2s ease}
.acc[open]{border-color:transparent;box-shadow:var(--shadow)}
.acc[open] summary{background:linear-gradient(90deg,rgba(21,158,150,.06),transparent)}

/* ---------- Portal / faixa CTA: brilho molecular ---------- */
.portal{position:relative;isolation:isolate}
.portal .mol-deco{bottom:-50px;right:-30px;width:300px;height:260px;opacity:.16;z-index:0}
.portal .mol-deco .mnode,.portal .mol-deco .mline{fill:#fff;stroke:#fff}

/* ---------- Footer: régua superior em gradiente ---------- */
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--cyan),var(--mint))}

/* ---------- Foco acessível ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* ---------- Responsivo ---------- */
@media(max-width:700px){
  .hero-slider .mol-deco{width:200px;height:180px;opacity:.2}
  .page-hero .mol-deco{width:240px;height:210px;opacity:.1}
}

/* ---------- Card de unidade sem foto ----------
   A unidade de Angélica não tem foto no site oficial do cliente, e é melhor
   não ter imagem do que usar a de outra unidade. Sem a foto o card fica com
   a mesma altura dos vizinhos (carrossel), então o conteúdo é centralizado
   para não abrir um vão no meio. */
.unit-card.sem-foto .unit-body{justify-content:center}
.unit-card.sem-foto .unit-actions{margin-top:22px}

/* ---------- Logos de convênio ---------- */
.conv img{max-width:100%;max-height:100%;object-fit:contain;filter:saturate(.9)}
.conv:hover img{filter:none}
.conv-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ---------- Grade de equipamentos ----------
   As fotos do cliente são quadradas; 16/10 cortaria demais o equipamento. */
.eq-grid{grid-template-columns:repeat(3,1fr)}
.eq-grid .card-media{aspect-ratio:4/3}
.eq-grid .card-inner h3{font-size:1.05rem}
@media(max-width:900px){.eq-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.eq-grid{grid-template-columns:1fr}}

/* ---------- Blog: página do artigo ---------- */
.artigo{max-width:760px;margin:0 auto}
.artigo-capa{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:3/2;margin-bottom:34px;background:var(--bg-tint)}
.artigo-capa img{width:100%;height:100%;object-fit:cover;display:block}
.artigo .prose > *:first-child{margin-top:0}
.artigo .prose h2{font-family:'Sora','Inter',sans-serif;font-size:clamp(1.22rem,2.4vw,1.5rem);
  line-height:1.3;color:var(--ink);margin:34px 0 12px;letter-spacing:-.01em}
.artigo .prose p{font-size:1.06rem;line-height:1.78;margin-bottom:18px}
.artigo .prose ul{margin:0 0 20px;padding-left:22px}
.artigo .prose li{color:var(--slate);font-size:1.04rem;line-height:1.72;margin-bottom:10px}
.artigo .prose li::marker{color:var(--teal)}
.artigo .blog-cta{flex-wrap:wrap;gap:4px}
@media(max-width:640px){.artigo-capa{aspect-ratio:4/3;margin-bottom:26px}}