/* =========================================================================
   MEDITEK · Promociones de octubre 2026 — 3 tarjetas por especialidad
   -------------------------------------------------------------------------
   100% aditivo: no modifica styles.css. Reutiliza las mismas variables de
   color, radios, sombras y easing ya definidas en :root (styles.css) para
   verse como parte del sitio. Todo el contenido se lee de
   window.MEDITEK_PROMOCIONES_CONFIG.promocionesEspecialidades — ver
   promo-specialties.js. Sustituye, visualmente, a promo-tabs.css (que se
   conserva sin enlazar por si hiciera falta volver atrás).
   ========================================================================= */

.promo-spec-wrap{ width: 100%; }

/* ---------- 3 tarjetas de especialidad, visualmente iguales ---------- */
.promo-cat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px){
  .promo-cat-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .promo-cat-grid{ grid-template-columns: 1fr; }
}

.promo-cat-card{
  display: flex;
  flex-direction: column;
  text-align: left;
  background: linear-gradient(160deg, var(--c-graphite) 0%, var(--c-black-deep) 100%);
  border: 1px solid rgba(192,197,204,0.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.promo-cat-card:hover,
.promo-cat-card:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -20px rgba(94,234,212,0.3);
  border-color: rgba(94,234,212,0.45);
}
@media (prefers-reduced-motion: reduce){
  .promo-cat-card{ transition: border-color var(--t-fast) var(--ease); }
  .promo-cat-card:hover, .promo-cat-card:focus-within{ transform: none; }
}

.promo-cat-card .img-frame{ aspect-ratio: 16/9; border-radius: 0; border: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
.promo-cat-card .img-frame img{ transition: transform .6s var(--ease); }
.promo-cat-card:hover .img-frame img{ transform: scale(1.05); }

.promo-cat-body{ padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.promo-cat-body h3{ font-size: 1.25rem; color: var(--c-white); }
.promo-cat-body p{ color: var(--text-muted); font-size: .92rem; line-height: 1.55; flex: 1; }

.promo-cat-count{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(94,234,212,0.1);
  border: 1px solid rgba(94,234,212,0.28);
  color: var(--c-turquoise);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.promo-cat-count.is-empty{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: var(--c-silver-2);
}

.promo-cat-card .btn{ margin-top: 4px; align-self: flex-start; }

/* ---------- Panel de una sola especialidad (nunca mezcla especialidades) ---------- */
.promo-cat-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.promo-cat-modal.is-open{ display: flex; }
body.promo-cat-open{ overflow: hidden; }

.promo-cat-modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.promo-cat-modal.is-open .promo-cat-modal-overlay{ opacity: 1; }

.promo-cat-panel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--c-black-deep);
  border: 1px solid rgba(94,234,212,0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: translateY(40px);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.promo-cat-modal.is-open .promo-cat-panel{ transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .promo-cat-modal-overlay, .promo-cat-panel{ transition: opacity .15s linear; transform: none; }
}
@media (max-width: 640px){
  .promo-cat-panel{ max-height: 92vh; }
}

.promo-cat-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.promo-cat-header h2{ font-size: 1.3rem; color: var(--c-white); margin: 0; }
.promo-cat-header p{ margin-top: 4px; color: var(--text-muted); font-size: .88rem; }
.promo-cat-close{
  flex-shrink: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--c-silver-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.promo-cat-close:hover, .promo-cat-close:focus-visible{ color: var(--c-turquoise); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce){
  .promo-cat-close:hover, .promo-cat-close:focus-visible{ transform: none; }
}

.promo-cat-body-panel{ padding: 28px; }

.promo-spec-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.promo-spec-grid[data-count="1"]{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.promo-spec-grid[data-count="2"]{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){
  .promo-spec-grid{ grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; }
}

/* ---------- Tarjeta individual de promoción (dentro del panel) ---------- */
.promo-spec-item{
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.promo-spec-item .img-frame{ aspect-ratio: 4/3; border-radius: 0; border: none; }
.promo-spec-item-body{ padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.promo-spec-item-body h4{ font-size: 1.02rem; color: var(--c-white); }
.promo-spec-item-body p{ color: var(--c-silver-2); font-size: .86rem; line-height: 1.5; }
.promo-spec-price{ color: var(--c-turquoise); font-size: 1.3rem; font-weight: 800; margin-top: 2px; }
.promo-spec-vigencia{ color: var(--text-muted); font-size: .8rem; }
.promo-spec-condiciones{ color: var(--text-muted); font-size: .8rem; }
.promo-spec-legend{ color: var(--text-faint); font-size: .74rem; font-style: italic; margin-top: 4px; }
.promo-spec-benefit{ color: var(--c-turquoise); font-size: .8rem; font-weight: 600; }
.promo-spec-item .btn{ margin-top: 10px; width: 100%; }
.promo-spec-item .btn[disabled]{ opacity: .5; cursor: not-allowed; }

/* ---------- Estado "draft" (próximamente): honesto, sin inventar datos ---------- */
.promo-spec-item--draft{ border-style: dashed; border-color: rgba(255,255,255,0.18); background: transparent; }
.promo-spec-item--draft .promo-spec-item-body{ align-items: center; text-align: center; justify-content: center; min-height: 160px; }
.promo-spec-item--draft h4{ color: var(--c-silver-2); }
.promo-spec-soon{
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-muted);
  font-size: .74rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------- Estados "expired" / "sold_out" ---------- */
.promo-spec-item--expired,
.promo-spec-item--sold-out{ opacity: .65; }
.promo-spec-status-note{
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--c-silver-2);
  font-size: .72rem;
  display: inline-block;
}

@media (max-width: 640px){
  .promo-cat-header{ padding: 16px 18px; }
  .promo-cat-body-panel{ padding: 18px; }
}