/* ============================================================
   plan-offer.css — Oferta Relámpago + Plan Cards
   Cooperativo: NO redefine variables ni reglas base de landing.css
   Solo agrega / extiende lo necesario para .plan-card con oferta.
   ============================================================ */

/* ── Contenedor ── */
.plan-card {
  padding: 0;
  overflow: hidden;
}

/* ── Línea de color superior ── */
.pc-topbar {
  height: 3px;
  background: var(--accent); /* hereda el acento del plan por defecto */
}
.pc-topbar.tb-free { background: #94a3b8; }
.pc-topbar.tb-corp { background: linear-gradient(90deg, #7c3aed, #a855f7); }

/* ── Padding interno (reemplaza el padding quitado de .plan-card) ── */
.pc-inner {
  padding: 20px;
}

/* ─────────────────────────────────────────
   BARRA OFERTA RELÁMPAGO
   ───────────────────────────────────────── */
.pc-oferta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 14px;
  background: #c2410c; /* naranja quemado sólido, no transparente */

  /* Transición suave cuando JS la oculta al expirar */
  transition: opacity 0.4s ease, max-height 0.5s ease, padding 0.5s ease;
}

/* Label "OFERTA RELÁMPAGO" */
.pc-oferta-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}
.pc-oferta-lbl svg {
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   COUNTDOWN
   ───────────────────────────────────────── */
.pc-cd {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'IBM Plex Mono', monospace;
}

/* Unidad (día / hora / min / seg) */
.pc-cd-u {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Número en caja */
.pc-cd-n {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 3px;
  padding: 1px 4px;
  min-width: 22px;
  text-align: center;

  /* Flip suave al cambiar el dígito */
  transition: transform 0.15s ease;
}
.pc-cd-n.flip {
  transform: scaleY(0.6);
}

/* Etiqueta "días / hrs / min / seg" */
.pc-cd-l {
  font-size: 7px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1px;
  letter-spacing: 0.3px;
}

/* Separador ":" */
.pc-cd-sep {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  padding: 0 1px;
  padding-bottom: 8px; /* alinea visualmente con los números */
}

/* ─────────────────────────────────────────
   PRECIO CON OFERTA
   ───────────────────────────────────────── */

/* Precio original tachado */
.pprice-orig {
  font-size: 12px;
  color: var(--text3, #94a3b8);
  text-decoration: line-through;
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 1px;
}

/* Precio de oferta en rojo */
.pprice.pprice-oferta {
  color: #b91c1c;
}

/* Badge de porcentaje "-XX%" */
.pc-disc {
  display: inline-block;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  font-family: 'IBM Plex Mono', monospace;
  vertical-align: middle;
}

/* ─────────────────────────────────────────
   SPIN (botón procesando del formulario)
   ───────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}