/* Miniaturas */
.thumb-strip {
  margin-top: .75rem;
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
}
.thumb-strip img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: .35rem;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  flex-shrink: 0;
}
.thumb-strip img:hover {
  border-color: var(--nc-accent, #e53935);
}

/* Lista artículos */
.article-list { list-style:none; padding-left:0; margin:.4rem 0 0; }
.article-list li { margin-bottom:.35rem; font-size:.9rem; }
.article-list a { text-decoration:none; color:var(--nc-accent, #e53935); }
.article-list a:hover { text-decoration:underline; }
.article-date { margin-left:.25rem; color:var(--nc-text-soft, #aaa); font-size:.8rem; }

/* Reseñas */
.reviews-list {
  display:flex; flex-direction:column; gap:.85rem;
  margin-top:.6rem; max-height:33rem; overflow-y:auto; padding-right:.3rem;
}
.review-item {
  padding:.7rem .8rem; border-radius:.55rem;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
}
.review-header { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.review-title { font-weight:600; font-size:.95rem; }
.review-stars { font-size:.9rem; letter-spacing:.08em; white-space:nowrap; }
.review-stars .stars-full { color:#ffcc33; }
.review-stars .stars-empty { opacity:.3; }
.review-meta { margin-top:.2rem; font-size:.8rem; color:var(--nc-text-soft, #aaa); }
.review-text { margin-top:.4rem; font-size:.9rem; line-height:1.4; }
.no-reviews { font-size:.9rem; color:var(--nc-text-soft, #aaa); margin-top:.4rem; }

/* Modal (reutilizable para presupuesto y avisarme) */
.presupuesto-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-out;
}
.presupuesto-modal-backdrop.presupuesto-visible { opacity: 1; pointer-events: auto; }
.presupuesto-modal-box {
  background: var(--nc-bg-elevated, #151515);
  border-radius: .9rem;
  padding: 1.3rem 1.4rem 1.1rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.55);
  position: relative;
}
.presupuesto-close {
  position: absolute;
  top: .4rem;
  right: .6rem;
  border: none;
  background: transparent;
  color: var(--nc-text-soft, #aaa);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.presupuesto-close:hover { color:#fff; }
.presupuesto-title { margin:0 0 .35rem; font-size:1.1rem; }
.presupuesto-intro { margin:0 0 .8rem; font-size:.9rem; color:var(--nc-text-soft, #aaa); }
.presupuesto-form { display:flex; flex-direction:column; gap:.7rem; }
.presupuesto-field label { display:block; font-size:.8rem; margin-bottom:.2rem; color:var(--nc-text-soft, #ccc); }
.presupuesto-field input {
  width: 100%;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,0.12);
  padding: .45rem .6rem;
  font-size: .9rem;
  background: rgba(0,0,0,0.35);
  color: #fff;
  outline: none;
}
.presupuesto-field input:focus {
  border-color: var(--nc-accent, #e53935);
  box-shadow: 0 0 0 1px rgba(229,57,53,0.25);
}
.presupuesto-actions {
  margin-top: .4rem;
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}
.presupuesto-actions .btn-primary,
.presupuesto-actions .btn-ghost {
  min-width: 120px;
  text-align: center;
  justify-content: center;
}


/* =========================================================
   PRODUCTO - PROMOCIONES Y FINANCIACIÓN
   ========================================================= */

.financiacion-box {
  margin-top: 16px;
}

.financiacion-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.financiacion-titulo {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  color: var(--nc-text);
}

.financiacion-subtitulo {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.35;
  color: var(--nc-text-soft);
}

/* Canales */
.promo-canales {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.promo-canal {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 7px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

.promo-canal-online {
  color: #bde7ff;
  border: 1px solid rgba(49, 171, 255, .26);
  background: rgba(49, 171, 255, .10);
}

.promo-canal-presencial {
  color: #c8f8d1;
  border: 1px solid rgba(65, 211, 113, .26);
  background: rgba(65, 211, 113, .10);
}

/* =========================================================
   MEDIOS DE PAGO - TARJETAS COMPACTAS
   ========================================================= */

.promos-directas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.promo-directa-card {
  min-width: 0;
  padding: 10px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.promo-directa-card--reintegro {
  border-color: rgba(255, 201, 74, .18);
  background:
    linear-gradient(135deg, rgba(255, 196, 54, .045), transparent 55%),
    rgba(255,255,255,.018);
}

.promo-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.promo-card-title {
  min-width: 0;
  font-size: 9px;
  line-height: 1.25;
  font-weight: 900;
  color: var(--nc-text);
  overflow-wrap: anywhere;
}

.promo-final-label,
.promo-standard-label {
  margin-top: 9px;
  font-size: 7px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.promo-final-label {
  color: #ffd96b;
}

.promo-standard-label {
  color: var(--nc-text-soft);
}

.promo-final-price,
.promo-standard-price {
  margin-top: 2px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.035em;
  color: var(--nc-text);
  white-space: nowrap;
}

.promo-final-price {
  font-size: 24px;
}

.promo-standard-price {
  font-size: 20px;
}

.promo-final-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.promo-original-price {
  font-size: 8px;
  color: var(--nc-text-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.promo-saving {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 900;
  color: #bdf5c8;
  background: rgba(61, 199, 102, .10);
  border: 1px solid rgba(61, 199, 102, .18);
}

.promo-benefit-line {
  margin-top: 5px;
  font-size: 7.5px;
  line-height: 1.3;
  color: var(--nc-text-soft);
}

/* =========================================================
   CHEQUES / ECHEQ
   ========================================================= */

.promos-cheque-grid {
  display: grid;
  gap: 7px;
}

.promo-cheque-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.018);
}

.promo-cheque-plan {
  margin-top: 3px;
  font-size: 8px;
  color: var(--nc-text-soft);
}

.promo-cheque-total {
  flex: 0 0 auto;
  text-align: right;
}

.promo-cheque-total span {
  display: block;
  font-size: 7px;
  color: var(--nc-text-soft);
}

.promo-cheque-total strong {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  color: var(--nc-text);
}

/* =========================================================
   BANCOS / CUOTAS - ACORDEÓN
   ========================================================= */

.promos-bancos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.promo-bank {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.015);
}

.promo-bank summary {
  list-style: none;
}

.promo-bank summary::-webkit-details-marker {
  display: none;
}

.promo-bank-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,.028);
}

.promo-bank-summary:hover {
  background: rgba(255,255,255,.045);
}

.promo-bank-heading {
  min-width: 0;
}

.promo-bank-resume {
  margin-top: 3px;
  font-size: 7.5px;
  line-height: 1.25;
  color: var(--nc-text-soft);
}

.promo-bank-summary-right {
  display: flex;
  align-items: center;
  gap: 7px;
}

.promo-bank-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--nc-text-soft);
  background: rgba(255,255,255,.045);
  transition: transform .18s ease;
}

.promo-bank[open] .promo-bank-arrow {
  transform: rotate(180deg);
}

.promo-bank-plans {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.promo-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}

.promo-plan--reintegro {
  border: 1px solid rgba(255, 208, 82, .12);
  background: rgba(255, 208, 82, .025);
}

.promo-plan-left,
.promo-plan-right {
  min-width: 0;
}

.promo-plan-right {
  text-align: right;
}

.promo-plan-cuotas {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--nc-text);
}

.promo-plan-aplica,
.promo-plan-detail,
.promo-plan-total,
.promo-plan-charge,
.promo-plan-benefit {
  margin-top: 2px;
  font-size: 7px;
  line-height: 1.25;
  color: var(--nc-text-soft);
}

.promo-plan-aplica {
  font-weight: 800;
}

.promo-plan-cuota-price,
.promo-plan-final-price {
  font-weight: 950;
  line-height: 1.05;
  color: var(--nc-text);
  white-space: nowrap;
}

.promo-plan-cuota-price {
  font-size: 13px;
}

.promo-plan-cuota-price span {
  font-size: 7px;
  font-weight: 600;
  color: var(--nc-text-soft);
}

.promo-plan-final-label {
  font-size: 6.5px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .055em;
  color: #ffd96b;
}

.promo-plan-final-price {
  margin-top: 2px;
  font-size: 16px;
}

.promo-plan-benefit {
  color: #d7c176;
}

/* =========================================================
   PROMOCIÓN ESPECIAL - SOLO PRESENCIAL
   ========================================================= */

.promo-especial-banner {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 58, 58, .55);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 55, 55, .22), transparent 38%),
    linear-gradient(135deg, #5c0d0d 0%, #300808 55%, #1e0505 100%);
  box-shadow: 0 16px 35px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.07);
}

.promo-especial-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 14px;
  align-items: stretch;
  padding: 1.15rem 1.25rem;
}

.promo-especial-main {
  min-width: 0;
}

.promo-especial-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
}

.promo-especial-icono {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .55rem;
  font-size: 1rem;
  background: #ec101b;
  box-shadow: 0 5px 15px rgba(255, 0, 0, .30);
}

.promo-especial-badge {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .055em;
  color: #ffb9bd;
}

.promo-especial-cuotas {
  font-size: 1.2rem;
  line-height: 1.1;
  font-weight: 950;
  color: #fff;
}

.promo-especial-valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .25rem;
}

.promo-especial-valor strong {
  font-size: 2.65rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.045em;
  color: #fff29c;
}

.promo-especial-de,
.promo-especial-cada {
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255,255,255,.84);
}

.promo-especial-total {
  margin-top: .4rem;
  font-size: .82rem;
  color: rgba(255,255,255,.80);
}

.promo-especial-total strong {
  color: #fff;
}

.promo-especial-separador {
  height: 1px;
  margin: .75rem 0 .65rem;
  background: linear-gradient(to right, rgba(255,255,255,.2), rgba(255,255,255,.03));
}

.promo-especial-texto {
  font-size: .78rem;
  line-height: 1.4;
  font-weight: 600;
  color: rgba(255,255,255,.90);
}

.promo-especial-locales {
  margin-top: .22rem;
  font-size: .7rem;
  color: rgba(255,255,255,.62);
}

.promo-especial-side {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,.09);
  padding-left: 14px;
}

.promo-especial-stamp {
  width: 118px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 2px dashed rgba(255,255,255,.40);
  background: rgba(255,255,255,.055);
  transform: rotate(-6deg);
  text-align: center;
}

.promo-especial-stamp span {
  font-size: .85rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .11em;
  color: rgba(255,255,255,.82);
}

.promo-especial-stamp strong {
  margin-top: 5px;
  font-size: 1rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .035em;
  color: #fff;
}

/* Tema claro */
[data-theme="light"] .promo-directa-card,
[data-theme="light"] .promo-cheque-card,
[data-theme="light"] .promo-bank {
  border-color: rgba(0,0,0,.09);
  background: rgba(0,0,0,.018);
}

[data-theme="light"] .promo-directa-card--reintegro,
[data-theme="light"] .promo-plan--reintegro {
  border-color: rgba(150, 105, 0, .16);
  background: rgba(235, 170, 0, .035);
}

[data-theme="light"] .promo-bank-summary,
[data-theme="light"] .promo-plan {
  background: rgba(0,0,0,.022);
}

[data-theme="light"] .promo-final-label,
[data-theme="light"] .promo-plan-final-label,
[data-theme="light"] .promo-plan-benefit {
  color: #8a6200;
}

[data-theme="light"] .promo-saving {
  color: #176c31;
}

[data-theme="light"] .promo-especial-banner {
  border-color: rgba(210, 0, 0, .3);
  background: linear-gradient(135deg, #fff2f2, #ffe3e3);
}

[data-theme="light"] .promo-especial-badge { color: #a9000a; }
[data-theme="light"] .promo-especial-cuotas,
[data-theme="light"] .promo-especial-total strong,
[data-theme="light"] .promo-especial-stamp strong { color: #171717; }
[data-theme="light"] .promo-especial-valor strong { color: #b6000c; }
[data-theme="light"] .promo-especial-de,
[data-theme="light"] .promo-especial-cada,
[data-theme="light"] .promo-especial-total,
[data-theme="light"] .promo-especial-texto,
[data-theme="light"] .promo-especial-stamp span { color: #444; }
[data-theme="light"] .promo-especial-locales { color: #666; }
[data-theme="light"] .promo-especial-side { border-left-color: rgba(0,0,0,.08); }
[data-theme="light"] .promo-especial-stamp { border-color: rgba(160,0,0,.28); background: rgba(160,0,0,.035); }

@media (max-width: 760px) {
  .promos-directas-grid {
    grid-template-columns: 1fr;
  }

  .promo-especial-layout {
    grid-template-columns: 1fr;
  }

  .promo-especial-side {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.09);
    padding: 12px 0 0;
    justify-content: flex-start;
  }

  .promo-especial-stamp {
    width: auto;
    height: auto;
    min-width: 145px;
    padding: 10px 14px;
    flex-direction: row;
    gap: 7px;
    transform: rotate(-3deg);
  }

  .promo-especial-stamp strong {
    margin-top: 0;
  }
}

@media (max-width: 520px) {
  .promo-bank-summary {
    align-items: flex-start;
  }

  .promo-bank-summary-right {
    align-items: flex-end;
  }

  .promo-plan {
    grid-template-columns: 1fr auto;
    gap: 6px;
  }

  .promo-final-price {
    font-size: 22px;
  }

  .promo-especial-valor strong {
    font-size: 2.25rem;
  }
}

/* Día de vigencia debajo del badge Presencial */
.promo-canal-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.promo-dia-semana {
  font-size: 7px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--nc-text-soft);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* =========================================================
   DÍAS DE LAS PROMOCIONES
   ========================================================= */
.promo-canal-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.promo-dia-semana {
  font-size: 8px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--nc-text-soft);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.promo-plan-days {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--nc-text-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.promo-cheque-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

@media (max-width: 640px) {
  .promo-cheque-side {
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
  }

  .promo-dia-semana {
    font-size: 7px;
  }
}