/* ═══════════════════════════════════════════════════════════════════
   INNOVA HOST — hospedagem-de-sites-promo.css
   Estilos exclusivos da variante promocional (teste A/B) da página
   de Hospedagem de Sites.

   Depende de: style.css + hospedagem-de-sites.css (carregar ANTES)
   ═══════════════════════════════════════════════════════════════════ */

/* ── BARRA DE ANÚNCIO (topo) ────────────────────────────────────── */
.promo-bar {
  background: linear-gradient(90deg, #FF6B35 0%, #F7931E 50%, #FF6B35 100%);
  background-size: 200% 100%;
  animation: promoBarShine 6s linear infinite;
  color: #fff;
  padding: 9px 0;
  position: relative;
  z-index: 101;
}

@keyframes promoBarShine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.promo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .84rem;
  line-height: 1.4;
}

.promo-bar-flame {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.promo-bar-text { font-weight: 500; }
.promo-bar-text strong { font-weight: 800; letter-spacing: .01em; }

.promo-bar-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: rgba(0, 0, 0, .18);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.promo-bar-cta {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: opacity .2s;
}
.promo-bar-cta:hover { opacity: .82; }

/* ── BADGE DO HERO ──────────────────────────────────────────────── */
.promo-hero-badge {
  background: rgba(255, 107, 53, .16) !important;
  border-color: rgba(255, 107, 53, .42) !important;
  color: #FFB088 !important;
}

/* ── CONTADOR REGRESSIVO ────────────────────────────────────────── */
.promo-countdown {
  max-width: 520px;
  margin: 0 auto 40px;
  padding: 22px 28px;
  text-align: center;
  background: linear-gradient(160deg, #FFF6F1, #FFEFE6);
  border: 1.5px solid rgba(255, 107, 53, .3);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(255, 107, 53, .12);
}

.promo-countdown-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #C2410C;
  margin-bottom: 12px;
}

.promo-countdown-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.pc-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  background: #fff;
  border: 1px solid rgba(255, 107, 53, .22);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
}

.pc-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: #EA580C;
  font-variant-numeric: tabular-nums;
}

.pc-cap {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray);
  margin-top: 4px;
}

.pc-sep {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(234, 88, 12, .38);
  line-height: 1.7;
}

.promo-countdown-sub {
  font-size: .78rem;
  color: var(--gray);
  margin-top: 12px;
}

/* ── BLOCO DE PREÇO PROMOCIONAL ─────────────────────────────────── */
.promo-price { position: relative; }

.promo-off-badge {
  display: inline-block;
  background: linear-gradient(90deg, #FF6B35, #F7931E);
  color: #fff;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(255, 107, 53, .3);
}

.promo-old {
  color: var(--gray);
  text-decoration-color: #FF6B35;
  text-decoration-thickness: 2px;
  font-weight: 600;
}

.plan-card.popular .promo-old { color: rgba(255, 255, 255, .55); }

.promo-terms {
  font-size: .74rem;
  line-height: 1.55;
  color: var(--gray);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.plan-card.popular .promo-terms {
  color: rgba(255, 255, 255, .5);
  border-top-color: rgba(255, 255, 255, .14);
}

/* ── NOTA DE RODAPÉ DOS PLANOS ──────────────────────────────────── */
.promo-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding: 12px 20px;
  background: rgba(0, 212, 170, .07);
  border: 1px solid rgba(0, 212, 170, .22);
  border-radius: var(--radius);
  font-size: .82rem;
  color: var(--text);
  font-weight: 500;
  text-align: center;
}

.promo-footnote svg {
  color: var(--teal);
  flex-shrink: 0;
}

/* ── RESPONSIVO ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .promo-bar { padding: 8px 0; }
  .promo-bar-inner { gap: 8px; font-size: .76rem; }
  .promo-bar-cta { width: 100%; text-align: center; }

  .promo-countdown { padding: 18px 16px; margin-bottom: 32px; }
  .promo-countdown-label { font-size: .74rem; }
  .pc-unit { min-width: 46px; padding: 7px 4px; }
  .pc-num { font-size: 1.4rem; }
  .pc-cap { font-size: .6rem; }
  .pc-sep { font-size: 1.2rem; line-height: 1.5; }

  .promo-footnote { font-size: .78rem; flex-direction: row; text-align: left; }
}

@media (max-width: 400px) {
  .promo-bar-timer { font-size: .72rem; padding: 2px 8px; }
  .pc-unit { min-width: 40px; }
  .pc-num { font-size: 1.25rem; }
  .pc-sep { display: none; }
  .promo-countdown-clock { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-bar { animation: none; }
}