/* ============================================================
   BARRA DE RETENCIÓN BAJO LA VSL (llamada David/Emilio/Alex 21-oct-2026)
   «Una barra debajo y un contador: podrás agendar una llamada en tanto
   rato». Se carga DESPUÉS de style.css / verde.css / compacta.css y solo
   añade la barra, el estado bloqueado de los botones y la línea «Clase
   gratuita de 10 minutos» sobre el wordmark (David: «llegan a la landing y
   no saben ni que tienen que ver una clase»).
   ============================================================ */

/* Línea sobre el wordmark */
.header-kicker {
  text-align: center;
  color: var(--hl-dark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.site-header .container { flex-direction: column; }

/* «Mira la clase de 8 minutos aquí», en pequeño justo encima de la VSL */
.mira-clase {
  color: var(--hl-dark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .02em;
  margin: -6px 0 12px;
}
.mira-clase span { display: inline-block; margin-left: 4px; animation: mira-bajar 1.6s ease-in-out infinite; }
@keyframes mira-bajar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Barra + contador */
.barra-wrap {
  max-width: 760px;
  margin: 22px auto 0;
  text-align: center;
}
.barra-texto {
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 10px;
}
.barra-texto strong { color: var(--hl-dark); font-variant-numeric: tabular-nums; }
.barra-texto .listo { display: none; }
.barra {
  height: 14px;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.barra-fill {
  position: relative;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--verde) 0%, var(--verde-bright) 100%);
  border-radius: 999px;
  transition: width .45s linear;
}
/* Brillo que recorre la parte llena para que se vea que «va» */
.barra-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: barra-brillo 2.2s ease-in-out infinite;
}
@keyframes barra-brillo {
  0%, 35% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.barra-nota {
  font-size: .84rem;
  color: rgba(247, 243, 235, .78);
  margin: 8px 0 0;
}

/* Estado desbloqueado */
.barra-wrap.lista .barra-texto .espera { display: none; }
.barra-wrap.lista .barra-texto .listo { display: inline; color: var(--verde-bright); }
.barra-wrap.lista .barra-fill::after { animation: none; }
.barra-wrap.lista .barra-nota { display: none; }

/* Aviso al pulsar un botón bloqueado: sacudida de la barra */
.barra-wrap.aviso { animation: barra-sacudida .5s ease; }
@keyframes barra-sacudida {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* Botones de agendar mientras la barra no ha llegado */
.btn.bloqueado,
.btn.bloqueado:hover,
.btn.bloqueado:active {
  filter: grayscale(.9) brightness(.8);
  opacity: .5;
  cursor: not-allowed;
  animation: none !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 640px) {
  .header-kicker { font-size: .66rem; letter-spacing: .16em; }
  .barra-wrap { margin-top: 14px; }
  .barra-texto { font-size: .95rem; }
  .mira-clase { font-size: .88rem; margin: -2px 0 10px; }
  .barra { height: 12px; }
}