/* ============================================================
   Laboratório Vitória — 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(5,147,143,.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(12,64,61,.35);backdrop-filter:blur(2px)}

/* ---------- STATS: brilho interno + acento ---------- */
.stats{position:relative;isolation:isolate;
  background:linear-gradient(140deg,#0f5450 0%,var(--petrol) 55%,#123634 100%)}
.stats::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(420px 180px at 12% -20%,rgba(23,184,166,.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(5,147,143,.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(4,116,112,.7)}
.btn-primary:hover{box-shadow:0 16px 30px -12px rgba(4,116,112,.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(5,147,143,.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}
}

/* ============================================================
   Laboratório Vitória — acentos da marca (lime #8FD400) + polish
   Carrega por último; vence os defaults teal->cyan acima.
   ============================================================ */
:root{ --lime:#8FD400; }
.slide h1 em{color:var(--lime)}
.slide .eyebrow{border-color:rgba(143,212,0,.5)}
.section-head .eyebrow::before,.page-hero .eyebrow::before{
  background:var(--lime);box-shadow:0 0 0 3px rgba(143,212,0,.22)}
.section-head h2::after{background:linear-gradient(90deg,var(--teal),var(--lime))}
.card.has-media::before{background:linear-gradient(90deg,var(--teal),var(--lime))}
.stat b em{color:var(--lime)}
.stat b .num{background:linear-gradient(120deg,#fff,#d7f59a);-webkit-background-clip:text;background-clip:text;color:transparent}
footer::before{background:linear-gradient(90deg,var(--teal),var(--lime),var(--teal))}
/* feature icons: teal->lime (assinatura duotone da marca) */
.feat .fi{background:linear-gradient(140deg,var(--teal),var(--lime))}
.seg-ic{background:linear-gradient(140deg,var(--teal),var(--lime));color:#fff}
/* eyebrow de seção: leve tint lime */
.eyebrow{background:linear-gradient(90deg,rgba(5,147,143,.08),rgba(143,212,0,.10))}
/* CTA primário: micro-brilho lime na sombra do hover */
.btn-primary:hover{box-shadow:0 16px 30px -12px rgba(143,212,0,.55)}

/* ============================================================
   Laboratório Vitória — design polish v2 (2026-07-19)
   ============================================================ */
/* ---- Hero: scrim cinematográfico + tipografia confiante ---- */
.hero-slider{height:min(90vh,780px)}
.slide::after{background:linear-gradient(100deg,rgba(7,42,40,.94) 0%,rgba(7,42,40,.72) 38%,rgba(7,42,40,.30) 66%,rgba(7,42,40,.06) 100%)}
.slide-inner{max-width:610px}
.slide h1{font-size:clamp(2.5rem,5.4vw,4rem);font-weight:800;letter-spacing:-.035em;margin:14px 0 14px}
.slide p{color:#eef6f4;font-size:1.2rem;max-width:520px}
.slide .eyebrow{background:rgba(143,212,0,.16);border-color:rgba(143,212,0,.42);color:#eafbcf}
/* trust pills no hero */
.hero-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-trust span{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:9px 15px;border-radius:999px;backdrop-filter:blur(6px)}
.hero-trust span svg{width:16px;height:16px;color:var(--lime);flex:none}

/* ---- Stats: mais presença ---- */
.stats{padding:52px 46px;border-radius:28px;box-shadow:0 44px 90px -34px rgba(7,42,40,.55)}
.stat b{font-size:2.6rem}

/* ---- Ritmo das seções ---- */
section{padding:110px 0}
.section-head{margin-bottom:62px}
.section-head h2{font-size:clamp(2rem,4.4vw,3.05rem)}

/* ---- Cards: profundidade + zoom na imagem ---- */
.card{border-radius:24px}
.card.has-media .card-media{overflow:hidden}
.card.has-media .card-media img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card.has-media:hover{transform:translateY(-8px)}
.card.has-media:hover .card-media img{transform:scale(1.06)}
.seg-card{border-radius:22px}

/* ---- Botões: leve upgrade ---- */
.btn-primary{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-600) 100%);font-weight:700}
.btn-ghost{font-weight:700}

/* ---- Portal band: brilho lime sutil ---- */
.portal{box-shadow:0 40px 90px -40px rgba(7,42,40,.6)}

@media(max-width:640px){
  .hero-slider{height:auto;min-height:0}
  .slide h1{font-size:clamp(2rem,8vw,2.6rem)}
  section{padding:64px 0}
  .section-head{margin-bottom:40px}
}

/* ============================================================
   Laboratório Vitória — design polish v3 (2026-07-19)
   ============================================================ */
/* ---- Faixa de compromisso (slogan da marca) ---- */
#compromisso{position:relative;overflow:hidden;text-align:center;
  background:radial-gradient(900px 420px at 12% -30%,var(--bg-tint),transparent 60%),
             radial-gradient(760px 420px at 100% 130%,#eafaf3,transparent 55%)}
#compromisso::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--teal),var(--lime),var(--teal))}
#compromisso .slogan-inner{max-width:780px;margin:0 auto;position:relative;z-index:2}
#compromisso h2{font-size:clamp(2.1rem,5vw,3.5rem);letter-spacing:-.035em;margin:16px 0 18px;line-height:1.08}
#compromisso h2 em{font-style:normal;background:linear-gradient(100deg,var(--teal),var(--lime));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#compromisso p{color:var(--slate);font-size:1.16rem;max-width:640px;margin:0 auto 30px}
#compromisso .slogan-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
#compromisso .mol-deco{top:-50px;right:-40px;width:380px;height:340px;opacity:.10;z-index:0}

/* ---- Cards: scrim inferior sutil na imagem (profundidade) ---- */
.card.has-media .card-media{position:relative}
.card.has-media .card-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(7,42,40,.14))}

/* ---- Header: sombra ao rolar ---- */
header.scrolled{box-shadow:0 8px 30px -14px rgba(7,42,40,.22)}

/* ---- Convênios: tiles mais refinados ---- */
.conv{border-radius:16px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.conv:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 12px 26px -14px rgba(5,147,143,.4)}

/* ---- Comodidades: textura molecular sutil (dots) ---- */
#comodidades{position:relative;isolation:isolate}
#comodidades::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(5,147,143,.05) 1.5px,transparent 1.6px);background-size:30px 30px}

/* ---- seg-cards: acento lime no topo ao hover ---- */
.seg-card{position:relative;overflow:hidden}
.seg-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--lime));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.seg-card:hover::before{transform:scaleX(1)}
.seg-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

@media(max-width:640px){ #compromisso .slogan-actions{flex-direction:column} #compromisso .slogan-actions .btn{width:100%} }

/* ============================================================
   Catálogo de exames (/exames/)
   ============================================================ */
.exam-tools{display:flex;flex-direction:column;gap:18px;margin-bottom:24px}
.exam-search{position:relative;max-width:560px}
.exam-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.exam-search input{width:100%;padding:15px 18px 15px 48px;border:1px solid var(--line);border-radius:999px;font-size:1rem;font-family:inherit;background:#fff;transition:.18s}
.exam-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(5,147,143,.12)}
.exam-chips{display:flex;flex-wrap:wrap;gap:8px}
.exam-chip{border:1px solid var(--line);background:#fff;color:var(--slate);font-weight:600;font-size:.85rem;padding:8px 14px;border-radius:999px;cursor:pointer;transition:.16s;font-family:inherit}
.exam-chip:hover{border-color:var(--teal);color:var(--teal)}
.exam-chip.on{background:linear-gradient(135deg,var(--teal),var(--teal-600));color:#fff;border-color:transparent}
.exam-count{color:var(--muted);font-size:.9rem;margin-bottom:20px}
.exam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.exam-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:.2s ease}
.exam-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.exam-cat{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-600);background:var(--bg-tint);padding:4px 10px;border-radius:999px}
.exam-card h3{font-size:1.08rem;line-height:1.22}
.exam-prep{display:flex;align-items:center;gap:8px;font-size:.9rem;margin-top:auto;font-weight:500}
.exam-prep svg{width:16px;height:16px;flex:none}
.exam-prep.is-fast{color:#b45309}.exam-prep.is-fast svg{color:#d97706}
.exam-prep.no-fast{color:#047857}.exam-prep.no-fast svg{color:#059669}
.exam-wa{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;color:var(--teal);margin-top:2px}
.exam-wa svg{width:15px;height:15px;transition:.2s}.exam-wa:hover svg{transform:translateX(3px)}
.exam-empty{text-align:center;color:var(--slate);padding:30px;background:var(--bg-soft);border-radius:16px}
.exam-empty a{color:var(--teal);font-weight:600}
.exam-note{display:flex;gap:14px;align-items:flex-start;margin-top:34px;padding:20px 22px;background:var(--bg-tint);border:1px solid var(--line);border-radius:16px}
.exam-note>svg{width:24px;height:24px;color:var(--teal);flex:none;margin-top:2px}
.exam-note p{color:var(--slate);font-size:.95rem}.exam-note a{color:var(--teal);font-weight:600}
@media(max-width:900px){.exam-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.exam-grid{grid-template-columns:1fr}}

/* ============================================================
   Hero slideshow — transição limpa (2026-07-22)
   Corrige a sobreposição de dois títulos durante a troca:
   o texto do slide que SAI some na hora (sem fade-out), só o
   slide que ENTRA anima. Crossfade de imagem mais suave.
   ============================================================ */
.slide{transition:opacity .7s ease}
.slide-inner{transition:opacity .6s ease,transform .6s ease}
.slide.active .slide-inner{transition:opacity .6s ease .28s,transform .6s ease .28s}
.slide:not(.active){pointer-events:none}
.slide:not(.active) .slide-inner{opacity:0;transform:translateY(16px);transition:none}
.slide:not(.active) .slide-img{transition:transform .1s ease}
/* crossfade em camada: slide ativo por cima (nunca mostra o fundo escuro no meio da troca) */
.hero-slider .slide{z-index:1}
.hero-slider .slide.active{z-index:2}

/* crossfade robusto: o slide que sai (.leaving) fica opaco por baixo até
   o novo cobri-lo — nunca expõe o fundo. Texto de saída some na hora. */
.hero-slider .slide.leaving{opacity:1;z-index:1;transition:none}
.hero-slider .slide.leaving .slide-inner{opacity:0;transform:translateY(16px);transition:none}

/* ---- Catálogo v2: blocos por categoria + barra de busca fixa ---- */
.exam-tools{position:sticky;top:86px;z-index:20;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(10px);padding:16px 0 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.exam-legend{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted);margin:0}
.exam-legend .lg{font-size:1.05rem;line-height:1}
.exam-legend .lg.no-fast{color:#059669}
.exam-legend .lg.is-fast{color:#d97706;margin-left:10px}
.exam-block{margin:36px 0}
.exam-block-title{display:flex;align-items:center;gap:11px;font-size:1.2rem;margin-bottom:18px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.exam-block-title::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--teal),var(--lime))}
.exam-block-n{font-size:.76rem;font-weight:700;color:var(--teal-600);background:var(--bg-tint);
  padding:3px 10px;border-radius:999px}
/* [hidden] precisa vencer o display:flex/grid dos cards */
.exam-card[hidden],.exam-block[hidden]{display:none !important}
@media(max-width:960px){.exam-tools{top:0}}
#examresults>.exam-block:first-child{margin-top:12px}
.exam-count{margin-bottom:4px}
#catalogo{padding-top:64px}
/* ---- Faixa de acreditação (selos DICQ/PNCQ reais) ---- */
.selos{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap}
.selos img{height:120px;width:auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:16px 24px;box-shadow:var(--shadow-sm)}
@media(max-width:600px){.selos img{height:92px;padding:12px 16px}}

/* ---- Galeria "Nossas instalações" + lightbox ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-item{position:relative;margin:0;border-radius:16px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;box-shadow:var(--shadow-sm)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}
.gal-item:hover img{transform:scale(1.06)}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;color:#fff;font-size:.9rem;font-weight:600;
  background:linear-gradient(transparent,rgba(7,42,40,.8));opacity:0;transform:translateY(6px);transition:.22s}
.gal-item:hover figcaption{opacity:1;transform:none}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gallery{gap:10px}}
.gal-lightbox{position:fixed;inset:0;z-index:200;background:rgba(7,42,40,.93);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.gal-lightbox.open{display:flex}
.gal-lightbox img{max-width:94vw;max-height:90vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.gal-close{position:absolute;top:16px;right:24px;background:none;border:0;color:#fff;font-size:2.6rem;line-height:1;cursor:pointer}