/* =========================================================
   TRATAMIENTOS COMPLEMENTARIOS — REDISEÑO
   Namespace propio (.ct-*) para no chocar con las reglas
   .comp-* existentes (hay varias versiones duplicadas en
   styles.css). Usa las fuentes y colores reales de marca:
   Merriweather / Plus Jakarta Sans / Sora, paleta navy-teal.
   ========================================================= */

#complementos .ct-shell {
  position: relative;
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px;
  border-radius: 40px;
  background:
    radial-gradient(circle at 0% 0%, rgba(184, 234, 244, 0.35), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(234, 247, 252, 0.9));
  border: 1px solid rgba(13, 61, 82, 0.08);
  box-shadow: 0 26px 64px rgba(7, 45, 61, 0.12);
}

/* ---------- Intro ---------- */
.ct-intro { max-width: 620px; margin-bottom: 40px; }
.ct-title {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
  line-height: 1.15;
  color: #0d3d52;
  margin: 20px 0 12px;
}
.ct-title em { font-style: italic; color: #1a6b8a; }
.ct-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(13, 61, 82, 0.68);
  margin: 0;
  max-width: 480px;
}

/* ---------- Layout: lista + panel ---------- */
.ct-grid {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}
.ct-panels { flex: 1 1 0%; min-width: 0; }

/* ---------- Lista de categorías ---------- */
.ct-nav { flex: 0 0 330px; display: flex; flex-direction: column; gap: 7px; }
.ct-tab {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ct-tab:hover { background: rgba(13, 61, 82, 0.045); }
.ct-tab--active {
  background: rgba(var(--ct-accent-rgb), 0.09);
  border-color: rgba(var(--ct-accent-rgb), 0.22);
  box-shadow: inset 3px 0 0 0 var(--ct-accent);
}
.ct-tab__icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--ct-accent-rgb), 0.12);
  color: var(--ct-accent);
  transition: background .18s ease, color .18s ease;
}
.ct-tab__icon svg { width: 20px; height: 20px; }
.ct-tab--active .ct-tab__icon { background: var(--ct-accent); color: #fff; }
.ct-tab__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-tab__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: #0d3d52;
  transition: color .18s ease;
}
.ct-tab--active .ct-tab__name { color: var(--ct-accent); }
.ct-tab__hint {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: rgba(13, 61, 82, 0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-tab__chev { flex: none; width: 15px; height: 15px; color: rgba(13, 61, 82, 0.28); transition: transform .18s ease, color .18s ease; }
.ct-tab--active .ct-tab__chev { color: var(--ct-accent); transform: translateX(2px); }

/* ---------- Panel de detalle ---------- */
.ct-panels { position: relative; }
.ct-panel { display: none; }
.ct-panel--active { display: block; }

.ct-detail {
  position: relative;
  overflow: hidden;
  padding: 42px;
  border-radius: 28px;
  background: linear-gradient(165deg, #ffffff, rgba(var(--ct-accent-rgb), 0.045));
  border: 1px solid rgba(var(--ct-accent-rgb), 0.16);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.ct-detail::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ct-accent-rgb), 0.16), transparent 72%);
  pointer-events: none;
}
.ct-detail__head { position: relative; display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.ct-detail__icon {
  width: 66px; height: 66px; flex: none;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--ct-accent), rgba(var(--ct-accent-rgb), 0.78));
  color: #fff;
  box-shadow: 0 14px 28px rgba(var(--ct-accent-rgb), 0.32);
}
.ct-detail__icon svg { width: 32px; height: 32px; }
.ct-detail__eyebrow {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ct-accent);
  margin: 4px 0 6px;
}
.ct-detail h3 {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem);
  line-height: 1.2;
  color: #0d3d52;
  margin: 0;
}
.ct-detail__desc {
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.68;
  color: rgba(13, 61, 82, 0.76);
  margin: 0 0 24px;
  max-width: 560px;
}

/* ---------- Indicaciones (tags) ---------- */
.ct-indications { margin: 0 0 28px; }
.ct-indications__label {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(13, 61, 82, 0.5);
  margin-bottom: 12px;
}
.ct-indications__grid { display: flex; flex-wrap: wrap; gap: 9px; max-width: 460px; }
.ct-indications__grid .ct-tag { flex: 1 1 calc(50% - 5px); }
.ct-tag {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 13px;
  background: rgba(var(--ct-accent-rgb), 0.08);
  color: var(--ct-accent);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
}
.ct-tag svg { width: 14px; height: 14px; flex: none; }

/* ---------- Lista de precios (Adicionales) ---------- */
.ct-price-list { list-style: none; margin: 0 0 28px; padding: 0; max-width: 420px; }
.ct-price-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(13, 61, 82, 0.09);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  color: rgba(13, 61, 82, 0.8);
}
.ct-price-list li:last-child { border-bottom: none; }
.ct-price-list strong { font-family: 'Merriweather', serif; font-weight: 900; color: #0d3d52; font-size: 15px; }

.ct-detail > .btn { position: relative; align-self: flex-start; margin-top: auto; }

/* El acordeón es exclusivo de móvil (ver @media max-width:820px);
   en escritorio se usa el panel .ct-panels de al lado. */
.ct-accordion { display: none; }

/* ---------- Colores por categoría (verificados AA sobre blanco) ---------- */
[data-comp="adicionales"] { --ct-accent: #0d3d52; --ct-accent-rgb: 13, 61, 82; }
[data-comp="hierro"]      { --ct-accent: #8a3f1e; --ct-accent-rgb: 138, 63, 30; }
[data-comp="colageno"]    { --ct-accent: #8c4258; --ct-accent-rgb: 140, 66, 88; }
[data-comp="hormonas"]    { --ct-accent: #8c6420; --ct-accent-rgb: 140, 100, 32; }
[data-comp="oligo"]       { --ct-accent: #5b4a80; --ct-accent-rgb: 91, 74, 128; }
[data-comp="inyecto"]     { --ct-accent: #226b5c; --ct-accent-rgb: 34, 107, 92; }
[data-comp="nebulizaciones"] { --ct-accent: #3d5a80; --ct-accent-rgb: 61, 90, 128; }

/* ---------- Focus visible (accesibilidad) ---------- */
.ct-tab:focus-visible,
.ct-detail > .btn:focus-visible {
  outline: 2px solid #0d3d52;
  outline-offset: 2px;
}

/* ---------- Responsive (mismos breakpoints del sitio) ---------- */
@media (max-width: 1024px) {
  #complementos .ct-shell { padding: 38px 32px; }
  .ct-grid { gap: 20px; }
  .ct-nav { flex-basis: 280px; }
  .ct-detail { padding: 34px; }
}

@media (max-width: 820px) {
  #complementos .ct-shell { padding: 32px 24px; border-radius: 30px; }
  .ct-grid { flex-direction: column; }
  .ct-nav { flex-basis: auto; }
  .ct-panels { display: none; }

  .ct-item { display: flex; flex-direction: column; }

  .ct-tab {
    border-radius: 18px;
    transition: border-radius .2s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .ct-tab--active { border-radius: 18px 18px 6px 6px; }
  .ct-tab__chev { transition: transform .28s ease, color .18s ease; }
  .ct-tab--active .ct-tab__chev { transform: rotate(90deg); }

  .ct-accordion {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s ease;
  }
  .ct-accordion--open { max-height: 900px; }
  .ct-accordion__inner { overflow: hidden; min-height: 0; }
  .ct-accordion__body {
    padding: 2px 18px 22px 65px;
    border-radius: 0 0 18px 18px;
    background: rgba(var(--ct-accent-rgb), 0.06);
    border: 1px solid rgba(var(--ct-accent-rgb), 0.2);
    border-top: none;
  }
  .ct-accordion__desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.62;
    color: rgba(13, 61, 82, 0.76);
    margin: 12px 0 16px;
  }
  .ct-accordion .ct-indications { margin: 0 0 16px; }
  .ct-accordion .ct-indications__grid,
  .ct-accordion .ct-price-list { max-width: none; }
  .ct-accordion .ct-indications__grid .ct-tag { flex-basis: 100%; }
  .ct-accordion .ct-price-list { margin: 0 0 16px; }
  .ct-accordion .btn { width: 100%; justify-content: center; }

  .ct-indications__grid .ct-tag { flex-basis: 100%; }
  .ct-indications__grid { max-width: none; }
}

@media (max-width: 480px) {
  .ct-tab { padding: 10px 12px; }
  .ct-accordion__body { padding-left: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-tab, .ct-tab__icon, .ct-tab__name, .ct-tab__chev, .ct-accordion { transition: none; }
}