/* =========================
   Quíron Pharma — Design System (AZUL DARK)
   Paleta base: #1F2C5C (azul), #008287 (teal), #D9D9D9, #8A8A8A, #FFFFFF, #000000
   ========================= */

:root{
  --blue:#1F2C5C;
  --teal:#008287;
  --white:#FFFFFF;
  --black:#000000;
  --gray:#8A8A8A;
  --gray-2:#D9D9D9;

  --ink:#0d1b2a;          /* texto padrão em light */
  --muted:#3d516b;        /* texto secundário */
  --surface: rgba(13,27,42,.05);  /* cartões “glass” */
  --surface-2: rgba(13,27,42,.08);
  --ring: 0 0 0 3px rgba(0,130,135,.18);
  --radius: 18px;
  --shadow: 0 14px 40px rgba(13,27,42,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body.theme-quiron-dark{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -5%, rgba(0,130,135,.10), transparent 70%),
    radial-gradient(1000px 600px at 110% 10%, rgba(31,44,92,.08), transparent 60%),
    linear-gradient(135deg, #f6fbff, #e9f5ff 35%, #f2f8ff 70%, #f9fcff);
  background-size: 200% 200%;
  animation: bgShift 18s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@keyframes bgShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;z-index:1000;background:#fff;color:#111;padding:.6rem .9rem;border-radius:10px}

/* ================= NAV ================= */
.site-header{
  height: 130px;
  display: flex;
  align-items:center;
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px) saturate(120%);
  background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(240,248,255,.55));
  border-bottom:1px solid rgba(13,27,42,.08);
}
.nav{display:flex;align-items:center;gap:18px;padding:2px 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:900;letter-spacing:.02em}
.brand strong{color:#0d1b2a}
.brand span{color:#0a6d7a}
.logo-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--teal),#67f0ff);box-shadow:0 0 18px rgba(103,240,255,.6)}
.menu{display:flex;gap:20px;margin-left:auto;margin-right:10px}
.menu a{font-weight:700;opacity:.9;position:relative;padding: 4px 6px}
.menu a:hover{opacity:1}
.menu a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--teal),#67f0ff);
  transform:scaleX(0); transform-origin:right; transition:transform .35s ease; border-radius:99px;
}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:2px solid transparent;border-radius:999px;
  padding:.7rem 1.1rem;font-weight:800;letter-spacing:.02em;cursor:pointer;
  transition:.2s ease; box-shadow: 0 10px 24px rgba(0,0,0,.25); position:relative; overflow:hidden
}
.btn::after{
  content:""; position:absolute; inset:-1px;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.btn:hover::after{transform:translateX(120%)}
.btn--primary{background:#0d4b8f;color:#fff}
.btn--primary:hover{filter:brightness(0.95)}
.btn--ghost{background:transparent;border-color:rgba(13,27,42,.25);color:#0d1b2a}
.btn--whiteblue{
  background:#fff;
  border-color:#1a6aa8;
  color:#1a6aa8;
}
.btn--whiteblue:hover{
  filter:brightness(0.97);
}
.hamb{display:none;background:transparent;border:0;padding:8px}
.hamb span{display:block;width:24px;height:2px;background:#e7f6ff;margin:5px 0;border-radius:2px}
@media (max-width:980px){
  .menu{display:none}
  .hamb{display:block}
}
.menu-mobile{display:none;border-top:1px solid rgba(13,27,42,.08);background:rgba(255,255,255,.8);backdrop-filter:blur(8px)}
.menu-mobile a{display:block;padding:14px 20px;border-bottom:1px solid rgba(13,27,42,.06);font-weight:700}
.menu-mobile.show{display:block}

/* ================ HERO ================ */
.hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(246,251,255,0) 0%, rgba(13,75,143,.12) 45%, rgba(13,27,42,.6) 100%),
    url("../img/agulha.png");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
}
.hero__wrap{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;min-height:520px;padding:44px 0}
.hero__title{font-size:clamp(1.9rem,3.8vw,3rem);margin:.4rem 0 .6rem;line-height:1.1;color:#fff}
.t-grad{
  background:linear-gradient(90deg,#0d4b8f,#1a6aa8,#0d4b8f); -webkit-background-clip:text; background-clip:text; color:transparent
}
.text-brand{color:var(--teal)}
.text-muted-light{color:#cfd8e3}
.text-white{color:#fff !important}
.hero__subtitle{color:var(--muted);max-width:55ch}
.hero__cta{display:flex;gap:12px;margin:12px 0 2px}
.badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid rgba(13,27,42,.12);padding:.45rem .7rem;border-radius:999px;color:#0d1b2a}

.hero__kpis{display:flex;gap:18px;list-style:none;padding:0;margin:18px 0 0}
.hero__kpis li{
  background:var(--surface);
  border:1px solid rgba(13,27,42,.12);
  padding:12px 16px;
  border-radius:14px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-weight:600;
}
.kpi__icon{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.kpi__icon-img{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
}
.kpi__icon-img--phone{
  width:42px;
  height:42px;
}


@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* fundo de partículas ocupa o hero todo */
.particles{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:45%;
  height:100%;
  pointer-events:none;
}

/* ============== SECTIONS ============== */
.section{padding:56px 0}
.section--glass{background:linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,.45)); border-top:1px solid rgba(13,27,42,.06); border-bottom:1px solid rgba(13,27,42,.06)}
.section--split .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:center}
.split__media{position:relative;min-height:320px;border:1px solid rgba(13,27,42,.12);border-radius:18px;background:var(--surface-2);overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:18px}
.stamp{position:absolute;top:16px;left:16px;background:#0d4b8f;border:1px solid rgba(13,75,143,.35);padding:.35rem .6rem;border-radius:999px;color:#fff}
.steps-rail{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:70%;width:6px;background:linear-gradient(to bottom, rgba(0,255,255,.2), rgba(0,0,0,0));border-radius:12px}
.steps-rail .dot{display:block;width:14px;height:14px;border-radius:50%;background:#9ef5ff;margin:24px auto;opacity:.35}
.steps-rail .dot.is-active{opacity:1;box-shadow:0 0 20px #7de9ff}
.split__content .steps{margin:10px 0 18px;padding-left:16px;color:var(--muted)}
.lead{color:var(--muted)}
.split__content .subhead{
  margin:16px 0 8px;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#2b4b6f;
}

/* grid de produtos */
.section__head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}
.section__head--hero{align-items:center;flex-wrap:wrap}
.section__tagline{
  max-width:60ch;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:clamp(.75rem,1.4vw,.95rem);
  color:#0d1b2a;
  padding:.6rem 1.2rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(13,75,143,.12), rgba(10,109,122,.08));
  border:1px solid rgba(13,75,143,.25);
  box-shadow:0 0 16px rgba(13,75,143,.12), inset 0 0 12px rgba(255,255,255,.2);
  text-align:left;
}
.searchbar{display:flex;gap:10px;align-items:center}
.searchbar input{
  width:300px;max-width:48vw;background:rgba(255,255,255,.7);color:#0d1b2a;border:1px solid rgba(13,27,42,.18);
  padding:.75rem .9rem;border-radius:12px;outline:none
}
.searchbar input:focus{box-shadow:var(--ring);border-color:#67f0ff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid--center{
  justify-items:center;
  justify-content:center;
  grid-template-columns:repeat(3,minmax(0,340px));
}
.grid--center .card{
  border:none;
}
.card-title-pill{
  display:inline-block;
  padding:.35rem .8rem;
  border-radius:999px;
  background:#0d4b8f;
  color:#fff;
  font-size:.95rem;
}
.grid--center .card{width:100%;max-width:360px;text-align:center}
@media (max-width:980px){.hero__wrap{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border:1px solid rgba(13,27,42,.12);
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease
}
.card:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 30px 70px rgba(0,0,0,.35)}
.card__media{
  aspect-ratio: 16/10;
  background:
    radial-gradient(260px 140px at 20% 20%, rgba(13,75,143,.18), transparent 60%),
    radial-gradient(240px 120px at 70% 50%, rgba(10,109,122,.16), transparent 60%),
    linear-gradient(180deg, #eef6ff, #dfeeff);
}
.card__body{padding:14px 16px}
.card__meta{color:var(--muted);margin:.25rem 0 .6rem}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card__actions{display:flex;gap:8px}
.price{font-weight:900;color:#0d1b2a}

/* Accordion */
.accordion{border:1px solid rgba(13,27,42,.12);border-radius:18px;overflow:hidden;background:var(--surface-2)}
.accordion details{border-top:1px solid rgba(13,27,42,.1)}
.accordion details:first-of-type{border-top:none}
.accordion summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:800}
.accordion summary::-webkit-details-marker{display:none}
.panel{padding:0 18px 18px;color:var(--muted)}

/* CTA */
.section--cta .cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.cta__title{font-size:clamp(1.4rem,3vw,2.2rem);margin:0}
.cta__sub{color:var(--muted);margin:0}
.cta__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* FOOTER */
.site-footer{border-top:1px solid rgba(13,27,42,.08);background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(235,245,255,1))}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:36px 0; align-items: flex-start;}
.footer__grid h4{margin:0 0 10px; font-size: 1rem;color:#1b2a44;}
.footer__grid a{display:block;padding:6px 0;color:#2b4b6f; transition: color 0.2s ease;}
.footer-logo { width: 200px; height: auto; display: block; margin-bottom: 1rem; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); transition: opacity 0.3s ease;}
.footer-logo:hover {opacity: 0.9;}
.footer__bottom{padding:12px 0;border-top:1px solid rgba(13,27,42,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#4a607a}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#0b122b;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.7rem 1rem;box-shadow:var(--shadow);z-index:80;display:none}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* Alto contraste opcional */
.high-contrast{
  filter: contrast(1.1) saturate(1.1);
}
.section__head--center{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.section__head--center h2{
  margin: 0;
}
.section__head--center .sobre-title{
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
}
.pillars-title{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(2.2rem,4.4vw,3.3rem);
}
/* =========================
   MAIN PRODUCTS (Tabs + Panel)
   ========================= */

.section__head--mp{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.mp__lead{
  margin: 6px 0 0;
  color: rgba(15,23,42,.70);
}

.mp__search{
  min-width: min(520px, 100%);
}

.main-products{
  background: radial-gradient(900px 500px at 20% 10%, rgba(29,123,216,.10), transparent 55%),
              radial-gradient(900px 600px at 80% 25%, rgba(22,163,174,.08), transparent 60%),
              linear-gradient(180deg, rgba(245,250,255,.9), rgba(238,245,255,.9));
}

.mp{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

.mp__tabs{
  position: sticky;
  top: 90px;
}

.mp__tablist{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.mp__tab{
  display:flex;
  gap: 12px;
  align-items: center;
  width:100%;
  text-align:left;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 14px 14px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  box-shadow: 0 10px 26px rgba(2,10,40,.06);
}

.mp__tab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(2,10,40,.08);
  border-color: rgba(29,123,216,.22);
}

.mp__tab.is-active{
  background: rgba(255,255,255,.88);
  border-color: rgba(29,123,216,.32);
  box-shadow: 0 18px 44px rgba(2,10,40,.10);
}

.mp__tabIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(29,123,216,.10);
  border: 1px solid rgba(29,123,216,.18);
  font-size: 20px;
  flex: 0 0 auto;
}

.mp__tabText strong{
  display:block;
  color:#0f172a;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.mp__tabText span{
  display:block;
  margin-top: 4px;
  color: rgba(15,23,42,.65);
  font-size: 13px;
}

/* Painel */
.mp__panelWrap{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 46px rgba(2,10,40,.08);
  overflow:hidden;
  position: relative;
}

.mp__panel{
  display:none;
  animation: mpFade .22s ease;
}

.mp__panel.is-active{
  display:block;
}

@keyframes mpFade{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

.mp__panelHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  flex-wrap:wrap;
}

.mp__panelHead h3{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color:#0f172a;
  letter-spacing: -0.3px;
}

.mp__panelHead .muted{
  margin: 6px 0 0;
  max-width: 62ch;
}

.mp__chips{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 12px;
}

.mp__chip{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(29,123,216,.10);
  border: 1px solid rgba(29,123,216,.18);
  color: rgba(15,23,42,.78);
  font-size: 13px;
}

.mp__items{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.mp__item{
  text-align:left;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mp__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(2,10,40,.08);
  border-color: rgba(22,163,174,.22);
}

.mp__bullet{
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(22,163,174,.55);
  box-shadow: 0 0 0 6px rgba(22,163,174,.10);
  flex: 0 0 auto;
}

.mp__itemText strong{
  display:block;
  color:#0f172a;
  font-weight: 800;
}

.mp__itemText span{
  display:block;
  margin-top: 6px;
  color: rgba(15,23,42,.70);
  font-size: 13px;
  line-height: 1.45;
}

.mp__empty{
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(245,250,255,.9);
  border: 1px dashed rgba(15,23,42,.18);
}

.mp__empty strong{
  display:block;
  font-weight: 900;
  color:#0f172a;
}

.mp__empty p{
  margin: 6px 0 0;
}

/* Responsivo */
@media (max-width: 980px){
  .mp{
    grid-template-columns: 1fr;
  }
  .mp__tabs{
    position: relative;
    top: auto;
  }
  .mp__items{
    grid-template-columns: 1fr;
  }
  .mp__search{
    min-width: 100%;
  }
}

/* ===== Fornecedores (carrossel) ===== */
:root{
  --suppliers-blue: #0b3b7a; /* troque pelo azul do seu site */
}

.suppliers{
  background: var(--suppliers-blue);
  padding: 64px 0;
}

.suppliers__wrap{
  text-align: center;
}

.suppliers__title{
  color: rgba(255,255,255,.92);
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 0 0 28px;
  font-weight: 600;
}

/* slider */
.suppliers__slider{
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 18px;
}

.suppliers__nav{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  font-size: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.suppliers__nav:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}

.suppliers__nav:disabled{
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

/* viewport + track */
.suppliers__viewport{
  overflow: hidden;
  border-radius: 18px;
}

.suppliers__track{
  display: flex;
  align-items: center;
  gap: 42px;
  padding: 10px 6px;
  transform: translateX(0);
  transition: transform .45s ease;
  will-change: transform;
}

/* item */
.suppliers__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
}

/* bolha */
.suppliers__bubble{
  width: 220px;
  height: 220px;
  background: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 18px 40px rgba(0,0,0,.25),
    0 2px 0 rgba(255,255,255,.25) inset;
  transition: transform .25s ease;
}

.suppliers__item:hover .suppliers__bubble{
  transform: translateY(-6px);
}

.suppliers__bubble img{
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  filter: saturate(1.05);
}

/* dots */
.suppliers__dots{
  display: inline-flex;
  gap: 10px;
  margin-top: 22px;
  align-items: center;
  justify-content: center;
}

.suppliers__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.65);
  background: transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.suppliers__dot.is-active{
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.95);
  transform: scale(1.05);
}

/* responsivo */
@media (max-width: 1024px){
  .suppliers__bubble{ width: 180px; height: 180px; }
  .suppliers__track{ gap: 28px; }
}

@media (max-width: 640px){
  .suppliers__slider{ grid-template-columns: 44px 1fr 44px; gap: 10px; }
  .suppliers__nav{ width: 40px; height: 40px; font-size: 26px; }
  .suppliers__bubble{ width: 150px; height: 150px; }
}
/* CARROSSEL FORNECEDORES - SCROLL NATIVO (ROBUSTO) */
.suppliers__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 18px;
}
.suppliers__viewport::-webkit-scrollbar{ display:none; }

.suppliers__track{
  display: flex;
  gap: 42px;
  padding: 10px 6px;
  width: max-content;
}

.suppliers__item{ flex: 0 0 auto; }

/* opcional: snap bonito */
.suppliers__viewport{ scroll-snap-type: x mandatory; }
.suppliers__item{ scroll-snap-align: center; }