/* ============================================================
   HostingPulga.com — Precios tachados y descuento
   ------------------------------------------------------------
   Se carga después de styles.css y solo agrega reglas nuevas:
   no pisa ninguna de las que ya tenías.

   Si prefieres tener un solo archivo, copia todo lo de abajo al
   final de styles.css y quita de los HTML la línea:
       <link rel="stylesheet" href="/assets/css/descuentos.css">
   ============================================================ */

/* ---------- Tarjetas de plan ---------- */

.plan-precio .plan-antes{
  display:flex; align-items:baseline; justify-content:center; gap:.45rem;
  margin-bottom:.4rem;
  font-family:var(--texto, inherit); font-size:.82rem; font-weight:700;
  color:var(--tinta-suave, #56698A);
  text-transform:uppercase; letter-spacing:.06em;
  flex-wrap:wrap;
}

/* El precio anterior, en grande y legible.
   La raya va delgada y semitransparente para que NO tape el número:
   con text-decoration-thickness fijo en 2px sobre un texto más grande,
   la línea pesa proporcionalmente mucho menos que antes. */
.plan-precio .plan-antes s{
  font-family:var(--display, inherit);
  font-size:1.75rem;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  color:var(--tinta, #12243F);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(220,38,38,.8);
  text-underline-offset:0;
}

.plan-off{
  display:inline-block; align-self:center;
  background:var(--amarillo, #FFC220);
  color:var(--noche, #061A3F);
  font-family:var(--display, inherit);
  font-weight:800; font-size:.95rem; line-height:1;
  padding:.34rem .68rem; border-radius:999px;
  letter-spacing:.01em; white-space:nowrap; text-transform:none;
}

.plan-precio .plan-ahorro{
  display:block; margin-top:.55rem;
  font-family:var(--display, inherit);
  font-weight:800; font-size:1rem;
  color:var(--verde, #16A34A);
}

/* Cada plan tiña su descuento con el color de su cabecera */
.plan-turbo .plan-off{ background:var(--naranja, #F5821F); color:#fff; }
.plan-patron .plan-off{ background:var(--morado, #7A2FD4); color:#fff; }

/* ---------- Tabla comparativa ---------- */

table.comparativa thead th small s{
  text-decoration:line-through;
  text-decoration-color:#F87171;
  opacity:.75; margin-right:.25rem;
}

table.comparativa thead th small .th-off{
  display:inline-block; margin-left:.25rem;
  background:var(--amarillo, #FFC220);
  color:var(--noche, #061A3F);
  font-weight:800; font-size:.7rem; line-height:1;
  padding:.16rem .4rem; border-radius:999px;
  white-space:nowrap;
}

/* ---------- Pantallas chicas ---------- */

@media (max-width:640px){
  .plan-precio .plan-antes{ font-size:.76rem; gap:.4rem; }
  .plan-precio .plan-antes s{ font-size:1.5rem; }
  .plan-off{ font-size:.86rem; padding:.3rem .6rem; }
  .plan-precio .plan-ahorro{ font-size:.94rem; }
  table.comparativa thead th small .th-off{ display:none; }
}

/* ---------- Impresión ---------- */

@media print{
  .plan-off, .th-off{ border:1px solid #000; background:none; color:#000; }
}