/* ==========================================================================
   Volvifan · animación de hero — estilos
   Todo lo estático vive acá; hero-animation.js solo escribe los valores
   que cambian en el tiempo (transform, opacity, altura de la barra, textos).
   El lienzo mide 1280 × 960 px y se escala completo con --vfa-fit.
   ========================================================================== */

.vfa-hero {
  /* Paleta Volvifan: violeta firma + coral + neutrales */
  --vfa-ink: #36324A;
  --vfa-ink2: #1B1F26;
  --vfa-purple: #5B348A;
  --vfa-card: #4A2A71;          /* fondo de la tarjeta de sellos */
  --vfa-p50: #F4EFFA;
  --vfa-p100: #E7DDF3;
  --vfa-p200: #CDBBE6;
  --vfa-p300: #AE93D4;
  --vfa-coral: #FF2F4B;
  --vfa-coral-action: #D8203D;
  --vfa-mist: #F9F8FA;
  --vfa-n50: #F3F1F6;
  --vfa-n200: #E6E3EB;
  --vfa-n500: #7C7B8C;
  --vfa-n600: #5D6070;

  /* Tipografía: si el theme ya carga estas familias se usan;
     si no, cae a la del sistema sin pedir nada a un servidor externo. */
  --vfa-font-brand: "Plus Jakarta Sans", "Avenir Next", system-ui, Arial, sans-serif;
  --vfa-font-product: "Inter", system-ui, Arial, sans-serif;

  --vfa-fit: 1;                 /* la escribe el JS según el ancho disponible */

  position: relative;
  width: 100%;
  font-family: var(--vfa-font-product);
  color: var(--vfa-ink2);
}

/* Caja responsive: conserva la proporción 4:3 del lienzo */
.vfa-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(145deg, #FFFFFF 18%, #FAF8FC 100%);
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px rgba(91, 52, 138, .07);
}

.vfa-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 960px;
  transform-origin: 0 0;
  transform: scale(var(--vfa-fit));
  background: transparent;
}

.vfa-mist {
  position: absolute;
  left: 34px;
  top: 82px;
  width: 850px;
  height: 790px;
  border-radius: 50%;
  background: linear-gradient(145deg, #F7F3FA, var(--vfa-mist));
}

.vfa-camera {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.vfa-num { font-variant-numeric: tabular-nums; }

.vfa-ico { display: block; width: 100%; height: 100%; }

/* ── Panel del negocio ─────────────────────────────────────────────── */
.vfa-panel {
  position: absolute;
  left: 62px;
  top: 218px;
  width: 620px;
  height: 420px;
  box-sizing: border-box;
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid var(--vfa-n200);
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(54, 50, 74, .08);
}

.vfa-panel-title {
  margin: 0;
  font: 700 19px var(--vfa-font-brand);
  color: var(--vfa-ink2);
}

.vfa-tiles { display: flex; align-items: flex-start; gap: 16px; margin-top: 21px; }

.vfa-tile {
  box-sizing: border-box;
  width: 258px;
  height: 98px;
  padding: 16px 18px;
  background: var(--vfa-n50);
  border-radius: 12px;
}

.vfa-tile--purchases {
  width: 326px;
  height: 110px;
  background: var(--vfa-p50);
  border: 1px solid var(--vfa-p100);
  transform-origin: 34% 50%;
}

.vfa-tile--visits {
  width: 158px;
  height: 92px;
  background: var(--vfa-n50);
  opacity: .82;
}

.vfa-label {
  margin: 0;
  font: 600 12px var(--vfa-font-product);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vfa-n500);
}

.vfa-label--spaced { margin-top: 20px; }

.vfa-tile-value {
  margin: 8px 0 0;
  font: 800 28px var(--vfa-font-brand);
  color: var(--vfa-ink2);
}

.vfa-tile--purchases .vfa-tile-value {
  margin-top: 6px;
  font-size: 36px;
  color: var(--vfa-purple);
}

.vfa-tile--visits .vfa-tile-value { font-size: 24px; }

.vfa-tile-value--brand { color: var(--vfa-purple); }

.vfa-bars {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  height: 150px;
  margin-top: 12px;
}

.vfa-bar { width: 60px; border-radius: 8px 8px 4px 4px; }

.vfa-panel-note {
  margin: 16px 0 0;
  font: 400 13px var(--vfa-font-product);
  color: var(--vfa-n500);
}

/* ── Chip flotante ─────────────────────────────────────────────────── */
.vfa-chip {
  position: absolute;
  left: 306px;
  top: 688px;
  width: 290px;
  min-height: 90px;
  box-sizing: border-box;
  padding: 18px 22px;
  background: #FFFFFF;
  border: 1px solid var(--vfa-n200);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 31, 38, .04);
}

.vfa-chip-kicker {
  margin: 0;
  font: 500 14px var(--vfa-font-product);
  color: var(--vfa-n600);
}

.vfa-chip-value {
  margin: 8px 0 0;
  font: 800 22px var(--vfa-font-brand);
  color: var(--vfa-purple);
}

/* ── Teléfono ──────────────────────────────────────────────────────── */
.vfa-phone {
  position: absolute;
  left: 635px;
  top: 100px;
  width: 380px;
  height: 760px;
  box-sizing: border-box;
  padding: 13px;
  background: var(--vfa-ink);
  border-radius: 52px;
  box-shadow: 0 30px 68px rgba(54, 50, 74, .22), 0 4px 14px rgba(54, 50, 74, .12);
}

.vfa-screen {
  position: relative;
  width: 354px;
  height: 734px;
  background: #FFFFFF;
  border-radius: 40px;
  overflow: hidden;
}

.vfa-notch {
  position: absolute;
  left: 50%;
  top: 0;
  width: 132px;
  height: 26px;
  margin-left: -66px;
  background: var(--vfa-ink);
  border-radius: 0 0 16px 16px;
}

.vfa-statusbar {
  position: absolute;
  left: 20px;
  top: 16px;
  width: 314px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 13px var(--vfa-font-product);
  color: var(--vfa-ink);
}

.vfa-dots { display: flex; gap: 4px; }
.vfa-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--vfa-ink); }

.vfa-brand {
  position: absolute;
  left: 20px;
  top: 46px;
  margin: 0;
  font: 800 21px var(--vfa-font-brand);
  letter-spacing: -.01em;
  color: var(--vfa-purple);
}

.vfa-hello {
  position: absolute;
  left: 20px;
  top: 82px;
  margin: 0;
  font: 700 18px var(--vfa-font-brand);
  color: var(--vfa-ink2);
}

/* Las dos capas de la pantalla se cruzan por opacidad */
.vfa-layer {
  position: absolute;
  left: 20px;
  top: 0;
  width: 314px;
  height: 734px;
}

/* Estado inicial (cuadro 0): visible la tarjeta de sellos, oculto el canje */
.vfa-layer[data-vf="layer-b"] { opacity: 0; }

/* ── Tarjeta de sellos ─────────────────────────────────────────────── */
.vfa-card {
  position: absolute;
  left: 0;
  top: 116px;
  width: 314px;
  height: 250px;
  box-sizing: border-box;
  padding: 17px;
  background: var(--vfa-card);
  border-radius: 18px;
}

.vfa-card-kicker {
  margin: 0;
  font: 500 12px var(--vfa-font-product);
  color: rgba(255, 255, 255, .72);
}

.vfa-card-titlebox { display: flex; align-items: center; height: 50px; margin-top: 6px; }

.vfa-card-title {
  margin: 0;
  font: 800 21px/25px var(--vfa-font-brand);
  color: #FFFFFF;
  text-wrap: pretty;
}

.vfa-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: 280px;
  margin-top: 10px;
}

.vfa-stamp { position: relative; width: 44px; height: 44px; }

.vfa-ring {
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 3px solid var(--vfa-coral);
  opacity: 0;
}

.vfa-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1.5px solid rgba(255, 255, 255, var(--vfa-border-alpha, .2));
  color: var(--vfa-card);
}

.vfa-stamp.is-filled .vfa-slot,
.vfa-stamp--cup .vfa-slot {
  background: #FFFFFF;
  border-color: transparent;
  border-width: 0;
}

.vfa-check { width: 22px; height: 22px; opacity: 0; }
.vfa-coffee { width: 24px; height: 24px; }

.vfa-stamp--cup.is-prize .vfa-slot { color: var(--vfa-coral-action); }

/* Rayos del motivo de premio (barra coral de esquinas redondeadas) */
.vfa-rays {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.vfa-rays i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 11px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--vfa-coral);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--vfa-ray-out, 28px)));
}

.vfa-rays--light i { height: 13px; background: #FFFFFF; }

.vfa-counter {
  margin: 10px 0 0;
  font: 500 13px var(--vfa-font-product);
  color: rgba(255, 255, 255, .8);
}

/* ── Filas de detalle ──────────────────────────────────────────────── */
.vfa-row {
  position: absolute;
  left: 0;
  width: 314px;
  height: 50px;
  box-sizing: border-box;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid var(--vfa-n200);
  border-radius: 14px;
}

.vfa-row-label { font: 500 14px var(--vfa-font-product); color: var(--vfa-n600); white-space: nowrap; }
.vfa-row-value { font: 700 14px var(--vfa-font-product); color: var(--vfa-ink2); white-space: nowrap; }
.vfa-row-value--accent { color: var(--vfa-coral-action); }

/* ── Recompensa ────────────────────────────────────────────────────── */
.vfa-reward {
  position: absolute;
  left: 0;
  top: 500px;
  width: 314px;
  height: 92px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--vfa-p50);
  border-radius: 16px;
  opacity: 0;
}

.vfa-reward-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 14px;
  background: var(--vfa-p100);
  color: var(--vfa-card);
}

.vfa-reward-ico .vfa-ico { width: 24px; height: 24px; }
.vfa-reward-kicker { display: block; font: 500 13px var(--vfa-font-product); color: var(--vfa-n600); }
.vfa-reward-value { display: block; margin-top: 2px; font: 800 24px var(--vfa-font-brand); color: var(--vfa-card); }

/* ── Canje ─────────────────────────────────────────────────────────── */
.vfa-canje {
  position: absolute;
  left: 0;
  top: 116px;
  width: 314px;
  height: 236px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--vfa-card);
  border-radius: 18px;
}

.vfa-canje-mark { position: relative; width: 68px; height: 68px; margin-bottom: 6px; }

.vfa-canje-circle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--vfa-card);
}

.vfa-canje-circle .vfa-ico { width: 32px; height: 32px; }

.vfa-canje-title { margin: 0; font: 800 22px var(--vfa-font-brand); color: #FFFFFF; white-space: nowrap; }
.vfa-canje-sub { margin: 0; font: 400 14px var(--vfa-font-product); color: rgba(255, 255, 255, .78); }

.vfa-canje-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 42px;
  margin-top: 12px;
  border-radius: 12px;
  background: #FFFFFF;
  font: 700 14px var(--vfa-font-product);
  color: var(--vfa-card);
}

/* ── Reinicio del contador ─────────────────────────────────────────── */
.vfa-restart {
  position: absolute;
  left: 0;
  top: 368px;
  width: 314px;
  height: 146px;
  box-sizing: border-box;
  padding: 18px;
  background: #FFFFFF;
  border: 1px solid var(--vfa-n200);
  border-radius: 16px;
  opacity: 0;
}

.vfa-restart-head { display: flex; align-items: center; gap: 12px; }
.vfa-restart-ico { width: 22px; height: 22px; flex: none; color: var(--vfa-purple); }
.vfa-restart-title { display: block; font: 700 14px var(--vfa-font-product); color: var(--vfa-ink2); }
.vfa-restart-sub { display: block; font: 400 13px var(--vfa-font-product); color: var(--vfa-n500); }

.vfa-rings { display: flex; flex-wrap: wrap; gap: 8px; width: 262px; margin-top: 14px; }
.vfa-rings i {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1.5px solid var(--vfa-p200);
  background: var(--vfa-p50);
}

.vfa-restart-count {
  position: absolute;
  right: 18px;
  bottom: 16px;
  margin: 0;
  font: 500 13px var(--vfa-font-product);
  color: var(--vfa-n500);
}

/* ── Aviso de visita ───────────────────────────────────────────────── */
.vfa-toast {
  position: absolute;
  left: 15px;
  top: 74px;
  width: 284px;
  box-sizing: border-box;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid var(--vfa-n200);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(27, 31, 38, .12);
  opacity: 0;
}

.vfa-toast-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 999px;
  background: var(--vfa-p50);
  color: var(--vfa-card);
}

.vfa-toast-ico .vfa-ico { width: 22px; height: 22px; }
.vfa-toast-kicker { display: block; font: 500 13px var(--vfa-font-product); color: var(--vfa-n600); }
.vfa-toast-value { display: block; margin-top: 2px; font: 800 16px var(--vfa-font-brand); color: var(--vfa-purple); }
.vfa-toast-stamp { display: block; margin-top: 1px; font: 600 12px var(--vfa-font-product); color: var(--vfa-n500); }

/* ── Monto que vuela al panel ──────────────────────────────────────── */
.vfa-pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 104px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--vfa-coral-action);
  color: #FFFFFF;
  font: 700 16px var(--vfa-font-product);
  letter-spacing: .01em;
  opacity: 0;
}