/* ============================================================
   SOCIOS ECOM — Interior · estilo "sala de proyección" v2
   La plataforma por dentro, al nivel de la portada:

   - Cada sección abre con un banner: qué hay dentro y un ejemplo
     real hecho con la plataforma (siempre marcado como ejemplo).
   - Botones de cristal: nada de bloques sólidos. El principal es
     verde translúcido con borde de luz; el segundo, un contorno.
   - Superficies con degradado y filo de luz arriba.
   - Movimiento: la vista entra escalonada, las tarjetas aparecen
     en cascada y el banner responde al ratón.

   Se carga la última: pisa lo necesario del tema oscuro y deja el
   claro como estaba (el banner se ve oscuro en los dos).
   ============================================================ */

/* ============================================================
   1 · Tokens del tema oscuro
   ============================================================ */

[data-tema="oscuro"] {
  --in-verde: #14c39a;
  --in-verde-luz: #2fd4a8;
  --in-hielo: #eafff8;
  --in-vidrio: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  --in-filo: inset 0 1px 0 rgba(255, 255, 255, .06);
  --in-borde: rgba(255, 255, 255, .085);
  --in-salida: cubic-bezier(.16, .84, .24, 1);

  /* El botón principal deja de ser un bloque blanco */
  --se-accion: linear-gradient(180deg, rgba(47, 212, 168, .30), rgba(20, 195, 154, .10));
  --se-accion-hover: linear-gradient(180deg, rgba(47, 212, 168, .44), rgba(20, 195, 154, .18));
  --se-sobre-accion: var(--in-hielo);

  --se-nav-activo-fondo: linear-gradient(90deg, rgba(20, 195, 154, .17), rgba(20, 195, 154, .03) 80%);
  --se-nav-activo-texto: #fcfcfc;
  --se-nav-activo-icono: var(--in-verde-luz);

  --se-r-card: 16px;
}

/* ============================================================
   2 · Chasis: lienzo, barra lateral y barra superior
   ============================================================ */

[data-tema="oscuro"] .hoja {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 420px at 72% -120px, rgba(20, 195, 154, .10), transparent 70%),
    radial-gradient(700px 380px at 0% 30%, rgba(120, 140, 170, .05), transparent 70%),
    #09090b;
}
/* Una retícula de puntos que se apaga hacia abajo, como en la portada */
[data-tema="oscuro"] .hoja::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 520px;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}

[data-tema="oscuro"] .sidebar {
  background:
    radial-gradient(300px 260px at 0% 0%, rgba(20, 195, 154, .09), transparent 70%),
    linear-gradient(180deg, #0b0c0f, #070709);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
/* El sello de la marca: baldosa de cristal oscuro con el símbolo de los dos eslabones */
.sidebar__logo {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: radial-gradient(120% 120% at 28% 18%, #22302d, #07090a 72%);
  box-shadow:
    inset 0 0 0 1px rgba(47, 212, 168, .38),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 22px -6px rgba(20, 195, 154, .65);
}
.sidebar__logo svg { width: 25px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)); }
.sidebar__marca { gap: 11px; }
[data-tema="oscuro"] .sidebar__vista {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

[data-tema="oscuro"] .nav-item {
  position: relative;
  border-radius: 10px;
  color: #b9bec4;
  transition: background .25s ease, color .25s ease;
}
[data-tema="oscuro"] .nav-item__icono { transition: transform .35s var(--in-salida), color .25s ease; }
[data-tema="oscuro"] .nav-item:hover { background: rgba(255, 255, 255, .045); color: #fff; }
[data-tema="oscuro"] .nav-item:hover .nav-item__icono { transform: translateX(2px); }
[data-tema="oscuro"] .nav-item.es-activo { box-shadow: inset 0 0 0 1px rgba(20, 195, 154, .16); }
/* Una barra de luz marca dónde estás */
[data-tema="oscuro"] .nav-item.es-activo::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--in-verde);
  box-shadow: 0 0 12px 1px rgba(20, 195, 154, .7);
  animation: in-marca .5s var(--in-salida);
}
@keyframes in-marca { from { transform: scaleY(0); opacity: 0; } }

/* ---------- Menú lateral: grupos que se despliegan como ramas ---------- */
/* El chasis es oscuro en los dos temas, así que esto no depende del tema. */

.nav-grupo__hijos {
  display: grid !important;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.16, .84, .24, 1);
}
.nav-grupo.es-abierto .nav-grupo__hijos { grid-template-rows: 1fr; }
.nav-grupo__rama {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Cerrado, fuera del alcance del tabulador; se oculta cuando acaba de plegarse */
.nav-grupo:not(.es-abierto) .nav-grupo__rama { visibility: hidden; transition: visibility 0s .5s; }
/* El tronco: baja desde el icono del grupo hasta la última rama */
.nav-grupo__rama::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 19px;
  width: 1.5px;
  border-radius: 2px;
  background: linear-gradient(rgba(47, 212, 168, .85), rgba(255, 255, 255, .22) 75%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s cubic-bezier(.16, .84, .24, 1) .05s;
}
.nav-grupo.es-abierto .nav-grupo__rama::before { transform: scaleY(1); }
/* Una chispa recorre el tronco cada vez que se abre */
.nav-grupo__rama::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  width: 3.5px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(transparent, #9df3dc, transparent);
  box-shadow: 0 0 10px 2px rgba(47, 212, 168, .55);
  opacity: 0;
  pointer-events: none;
}
.nav-grupo.es-abierto .nav-grupo__rama::after { animation: rama-chispa .9s cubic-bezier(.4, 0, .2, 1) .1s; }
@keyframes rama-chispa {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  100% { top: calc(100% - 26px); opacity: 0; }
}

/* Cada hijo entra deslizándose, uno detrás de otro */
html .nav-grupo .nav-item--hijo {
  position: relative;
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity .35s ease calc(var(--i, 0) * 70ms + 120ms),
    transform .5s cubic-bezier(.16, .84, .24, 1) calc(var(--i, 0) * 70ms + 120ms),
    background .25s ease, color .25s ease;
}
html .nav-grupo.es-abierto .nav-item--hijo { opacity: 1; transform: none; }
/* Al cerrar, todos a la vez y rápido */
html .nav-grupo:not(.es-abierto) .nav-item--hijo { transition-delay: 0s; transition-duration: .18s; }

/* La rama curva que va del tronco a cada hijo; se dibuja de izquierda a derecha */
.nav-item--hijo::after {
  content: "";
  position: absolute;
  left: 21px;
  top: -3px;
  width: 11px;
  height: calc(50% + 3px);
  border-left: 1.5px solid rgba(255, 255, 255, .24);
  border-bottom: 1.5px solid rgba(255, 255, 255, .24);
  border-bottom-left-radius: 9px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s cubic-bezier(.16, .84, .24, 1) calc(var(--i, 0) * 70ms + 220ms), border-color .3s ease, filter .3s ease;
  pointer-events: none;
}
.nav-grupo.es-abierto .nav-item--hijo::after { clip-path: inset(0 0 0 0); }
.nav-item--hijo:hover::after { border-color: rgba(255, 255, 255, .35); }
.nav-item--hijo.es-activo::after {
  border-color: #2fd4a8;
  filter: drop-shadow(0 0 4px rgba(47, 212, 168, .8));
}
/* En el hijo activo, la barra de luz del borde sobra: ya lo marca su rama */
[data-tema] .nav-item--hijo.es-activo::before { display: none; }
.nav-item--hijo .nav-item__icono { transition: transform .35s cubic-bezier(.16, .84, .24, 1), color .25s ease; }
.nav-item--hijo:hover .nav-item__icono { transform: scale(1.12); }

/* El grupo abierto se enciende un poco */
.nav-grupo.es-abierto > .nav-grupo__cabeza { color: #fff; }
.nav-grupo.es-abierto > .nav-grupo__cabeza .nav-item__icono { color: #2fd4a8; opacity: 1; }
.nav-grupo__cabeza .nav-item__chevron { transition: transform .45s cubic-bezier(.16, .84, .24, 1); }

@media (prefers-reduced-motion: reduce) {
  .nav-grupo__hijos, .nav-grupo__rama::before, html .nav-grupo .nav-item--hijo, .nav-item--hijo::after { transition: none !important; }
  .nav-grupo.es-abierto .nav-grupo__rama::after { animation: none; }
}

/* ---------- El camino en el menú: pasos numerados unidos por una línea ---------- */

.nav-rotulo {
  margin: 14px 12px 6px;
  font: 600 11px/1 "Geist Mono", var(--se-fuente-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6f7772;
}
.nav-camino { position: relative; display: flex; flex-direction: column; gap: 2px; }
.nav-camino__riel {
  position: absolute;
  z-index: 0;
  width: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  pointer-events: none;
}
/* Lo recorrido hasta el paso actual, en verde */
.nav-camino__riel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--avance, 0) * 100%);
  background: linear-gradient(#14c39a, #6ee6c6);
  box-shadow: 0 0 10px rgba(47, 212, 168, .7);
  transition: height .8s cubic-bezier(.16, .84, .24, 1);
}
/* Y una luz que baja por el camino, para que se lea como un recorrido */
.nav-camino__riel i {
  position: absolute;
  left: -1px;
  width: 4px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(transparent, #b7f7e4, transparent);
  box-shadow: 0 0 12px 2px rgba(47, 212, 168, .55);
  animation: nav-camino-luz 4.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes nav-camino-luz { 0% { top: -34px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.nav-paso { position: relative; z-index: 1; }
.nav-paso__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -1.5px;
  border-radius: 50%;
  font: 700 11px/1 "Geist Mono", var(--se-fuente-mono);
  color: #9df3dc;
  background: #0b0d0f;
  box-shadow: inset 0 0 0 1.5px rgba(47, 212, 168, .45);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
html .nav-paso .nav-item__icono { opacity: 1; display: grid; place-items: center; }
.nav-item__nota { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; line-height: 1.2; color: #7f8783; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-paso .nav-item__texto { line-height: 1.25; }
.nav-paso > .nav-item, .nav-item.nav-paso { padding-top: 7px; padding-bottom: 7px; }

/* Los pasos que ya quedan atrás y el paso en el que estás */
.nav-paso.es-paso-antes .nav-paso__num { color: #03110c; background: #2fd4a8; box-shadow: none; }
.nav-paso.es-paso-actual .nav-paso__num {
  color: #fff;
  background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc);
  box-shadow: 0 0 0 3px rgba(20, 195, 154, .2), 0 0 14px rgba(20, 195, 154, .8);
  transform: scale(1.08);
  animation: nav-paso-latido 2.4s ease-out infinite;
}
@keyframes nav-paso-latido { 0% { box-shadow: 0 0 0 0 rgba(20, 195, 154, .55), 0 0 14px rgba(20, 195, 154, .8); } 80%, 100% { box-shadow: 0 0 0 9px rgba(20, 195, 154, 0), 0 0 14px rgba(20, 195, 154, .8); } }
html .nav-item.es-activo .nav-paso__num { color: #0b3d33; background: #fff; box-shadow: none; }
html .nav-item.es-activo .nav-item__nota { color: rgba(255, 255, 255, .8); }

/* Los hitos: se ven en su sitio del camino pero no son una pantalla */
.nav-item--hito { cursor: default; color: #8d9591 !important; }
.nav-item--hito:hover { background: transparent !important; }
.nav-item--hito .nav-paso__num { color: #8d9591; background: #0b0d0f; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.nav-item--hito[data-paso="6"] .nav-paso__num { color: #2b1d02; background: linear-gradient(135deg, #c8912c, #ffe0a0); box-shadow: 0 0 12px -2px rgba(230, 179, 74, .7); }

@media (prefers-reduced-motion: reduce) {
  .nav-camino__riel i, .nav-paso.es-paso-actual .nav-paso__num { animation: none; }
}


[data-tema="oscuro"] .topbar {
  background: rgba(9, 9, 11, .72);
  border-bottom-color: rgba(255, 255, 255, .06);
}
[data-tema="oscuro"] .creditos {
  background: linear-gradient(180deg, rgba(47, 212, 168, .16), rgba(20, 195, 154, .05));
  border-color: rgba(47, 212, 168, .35);
  color: var(--in-hielo);
  box-shadow: var(--in-filo), 0 0 20px -8px rgba(20, 195, 154, .6);
}
[data-tema="oscuro"] .creditos svg { color: var(--in-verde-luz); }
[data-tema="oscuro"] .usuario__avatar {
  background: linear-gradient(145deg, #2fd4a8, #0e8f6e);
  color: #03110c;
  box-shadow: 0 0 0 2px #09090b, 0 0 0 3px rgba(47, 212, 168, .4);
}
[data-tema="oscuro"] .tema-sello { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); }
[data-tema="oscuro"] .tema-sello button.es-activo { background: rgba(255, 255, 255, .1); }

/* ============================================================
   3 · Botones: viven en botones.css, compartidos con la portada
   ============================================================ */

/* Campos */
[data-tema="oscuro"] :is(.campo__control, .wfiltro__caja, .tg-campo, select.campo__control) {
  background-color: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .09);
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
[data-tema="oscuro"] :is(.campo__control, .wfiltro__caja):hover { border-color: rgba(255, 255, 255, .16); }
[data-tema="oscuro"] :is(.campo__control, .wfiltro__caja):focus {
  border-color: rgba(47, 212, 168, .6);
  background-color: rgba(20, 195, 154, .04);
  box-shadow: 0 0 0 4px rgba(20, 195, 154, .12);
}

/* ============================================================
   4 · Superficies
   ============================================================ */

[data-tema="oscuro"] :is(
  .tarjeta, .vacio, .crea, .previa__caja, .paso, .dato, .herramienta,
  .marco-portada, .marco-chat, .ficha, .guardado, .cr-plan, .cr-gasta, .cr-sueltos, .cr-tabla-caja,
  .tg-tabla-caja, .tg-caja, .tk-portada, .tk-barra, .tk-historial__lista, .wfiltros, .winner,
  .biblio__vacio, .biblio-ref, .tarjeta-galeria, .pieza, .en-marcha
) {
  background: var(--in-vidrio), #0d0e11;
  border-color: var(--in-borde);
  box-shadow: var(--in-filo), 0 24px 60px -36px rgba(0, 0, 0, .9);
}

/* Lo que se puede pulsar se levanta y se enciende */
[data-tema="oscuro"] :is(.winner, .herramienta, .guardado, .cr-plan, .biblio-ref, .tarjeta-galeria, .ficha, .dato) {
  transition: transform .45s var(--in-salida), border-color .35s ease, box-shadow .45s ease;
}
[data-tema="oscuro"] :is(.winner, .herramienta, .guardado, .cr-plan, .biblio-ref, .tarjeta-galeria, .ficha):hover {
  transform: translateY(-4px);
  border-color: rgba(47, 212, 168, .38);
  box-shadow: var(--in-filo), 0 30px 60px -30px rgba(0, 0, 0, .95), 0 18px 50px -28px rgba(20, 195, 154, .45);
}
[data-tema="oscuro"] .winner__foto img { transition: transform 1.2s var(--in-salida); }
[data-tema="oscuro"] .winner:hover .winner__foto img { transform: scale(1.06); }

/* El plan destacado lleva un halo */
[data-tema="oscuro"] .cr-plan.es-destacado {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(20, 195, 154, .16), transparent 70%),
    var(--in-vidrio), #0d0e11;
  border-color: rgba(47, 212, 168, .45);
}

/* Las filas de la tabla de tiendas */
[data-tema="oscuro"] .tg-fila { transition: background .25s ease; }
[data-tema="oscuro"] .tg-fila:hover { background: rgba(20, 195, 154, .045); }

/* El paso siguiente del inicio */
[data-tema="oscuro"] .paso {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(20, 195, 154, .14), transparent 60%),
    var(--in-vidrio), #0d0e11;
}

/* Pestañas en píldora */
[data-tema="oscuro"] .pestana { transition: color .25s ease, border-color .25s ease; }

/* ============================================================
   5 · El banner de cada sección
   ============================================================ */

.banner {
  --bn-verde: #14c39a;
  --bn-verde-luz: #2fd4a8;
  --bn-tinta: #fcfcfc;
  --bn-gris: #9a9aa5;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: 32px;
  min-height: 250px;
  margin: 0 0 28px !important;
  padding: 34px 36px;
  overflow: hidden;
  border-radius: 22px;
  color: var(--bn-tinta);
  background: #0b0c0f;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 40px 80px -50px rgba(0, 0, 0, .9);
}
.banner--sin-visual { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.banner.banner--compacto { grid-template-columns: minmax(0, 1fr) 0; }

/* Fondo: halo verde, rejilla de líneas y un grano de luz que respira */
.banner__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 90% at 88% 30%, rgba(20, 195, 154, .22), transparent 65%),
    radial-gradient(40% 70% at 0% 100%, rgba(70, 110, 170, .12), transparent 70%),
    linear-gradient(120deg, #0d0f12, #08090b);
}
.banner__fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 90% at 80% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 90% at 80% 40%, #000, transparent 75%);
}
.banner__fondo::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: 6%;
  top: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 212, 168, .28), transparent 65%);
  filter: blur(20px);
  animation: bn-respira 7s ease-in-out infinite;
}
@keyframes bn-respira {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .8; }
  50% { transform: translate(-40px, 30px) scale(1.15); opacity: 1; }
}

.banner__texto { position: relative; min-width: 0; }
.banner__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 12px 5px 8px;
  border-radius: 100px;
  font: 500 12px/1 "Geist Mono", var(--se-fuente-mono);
  letter-spacing: .04em;
  color: var(--bn-verde-luz);
  background: rgba(20, 195, 154, .08);
  box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .22);
}
.banner__rotulo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bn-verde);
  animation: bn-latido 2.2s ease-out infinite;
}
@keyframes bn-latido {
  0% { box-shadow: 0 0 0 0 rgba(20, 195, 154, .7); }
  80%, 100% { box-shadow: 0 0 0 8px rgba(20, 195, 154, 0); }
}

.banner .pagina__titulo {
  gap: 14px;
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--bn-tinta);
  text-wrap: balance;
}
.banner .pagina__titulo svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  color: var(--bn-verde-luz);
  background: linear-gradient(180deg, rgba(47, 212, 168, .18), rgba(20, 195, 154, .04));
  box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .3), 0 0 24px -6px rgba(20, 195, 154, .6);
}
.banner .pagina__bajada {
  max-width: 58ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #b0b0bc;
}
.banner__puntos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.banner__puntos li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 12.5px;
  color: #d6d6de;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.banner__puntos svg { width: 13px; height: 13px; color: var(--bn-verde-luz); }

/* ---------- El ejemplo de la derecha ---------- */

.banner__visual {
  position: relative;
  height: 210px;
  perspective: 900px;
}
.banner__ejemplo {
  position: absolute;
  right: 0;
  bottom: -6px;
  z-index: 5;
  padding: 3px 9px;
  border-radius: 100px;
  font: 500 11px/1.4 "Geist Mono", var(--se-fuente-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8c8c97;
  background: rgba(9, 9, 11, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* Todas las piezas se mueven con el ratón, cada una a su profundidad */
.bn-pieza {
  position: absolute;
  transform: translate3d(calc(var(--px, 0) * var(--z, 10px)), calc(var(--py, 0) * var(--z, 10px)), 0) rotate(var(--giro, 0deg));
  transition: transform .6s var(--in-salida, ease);
}
.bn-flota { animation: bn-flotar 6s ease-in-out infinite; }
@keyframes bn-flotar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

.bn-foto {
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 50px -20px rgba(0, 0, 0, .9);
}
.bn-foto img { width: 100%; height: 100%; object-fit: cover; }

.bn-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 100px;
  font-size: 12px;
  white-space: nowrap;
  color: #eafff8;
  background: rgba(12, 14, 17, .86);
  box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .35), 0 16px 30px -12px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.bn-chip svg { width: 13px; height: 13px; color: var(--bn-verde-luz); }
.bn-chip b { font: 600 13px/1 "Geist Mono", var(--se-fuente-mono); color: #fff; }

/* Productos: tres tarjetas en abanico */
.bn-prod {
  width: 128px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #16181c, #0d0e11);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 26px 50px -22px rgba(0, 0, 0, .95);
}
.bn-prod img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: #fff; }
.bn-prod figcaption { display: grid; gap: 2px; padding: 8px 10px 10px; }
.bn-prod small { font-size: 11px; color: #8c8c97; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-prod b { font: 500 16px/1.1 "Geist Mono", var(--se-fuente-mono); color: #fff; }
.bn-prod em { font-style: normal; font-size: 11px; color: var(--bn-verde-luz); }

/* Tiendas: su página dentro de una ventana de navegador */
.bn-web {
  overflow: hidden;
  border-radius: 10px;
  background: #16181c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 26px 50px -20px rgba(0, 0, 0, .95);
}
.bn-web__barra { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; background: #1c1f24; }
.bn-web__barra i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.bn-web__barra span {
  flex: 1;
  min-width: 0;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 9px/1.5 "Geist Mono", var(--se-fuente-mono);
  color: #b0b0bc;
  background: rgba(255, 255, 255, .06);
}
.bn-web img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #fff; }

/* Anuncios: vertical 4:5 */
.bn-anuncio { width: 132px; aspect-ratio: 4 / 5; }

/* Móvil con vídeo */
.bn-movil {
  width: 128px;
  height: 222px;
  padding: 6px;
  border-radius: 24px;
  background: #050506;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -24px rgba(0, 0, 0, .95);
}
.bn-movil__pantalla { position: relative; height: 100%; overflow: hidden; border-radius: 19px; }
.bn-movil__pantalla img { width: 100%; height: 100%; object-fit: cover; animation: bn-toma 9s ease-in-out infinite alternate; }
.bn-movil__pantalla video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn-movil__producto {
  position: absolute;
  left: 7px;
  top: 8px;
  padding: 2px 7px;
  border-radius: 100px;
  font: 600 8.5px/1.4 "Geist Mono", var(--se-fuente-mono);
  color: #fff;
  background: rgba(9, 9, 11, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@keyframes bn-toma { from { transform: scale(1.02); } to { transform: scale(1.22) translate(-4%, 3%); } }
.bn-movil__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(9, 9, 11, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.bn-movil__play::before { content: ""; margin-left: 3px; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.bn-movil__barra { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.bn-movil__barra::after { content: ""; position: absolute; inset: 0; background: var(--bn-verde); transform-origin: left; animation: bn-progreso 6s linear infinite; }
@keyframes bn-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Conversación */
.bn-burbuja {
  max-width: 250px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9);
}
.bn-burbuja--tu { border-bottom-right-radius: 5px; color: var(--in-hielo, #eafff8); background: linear-gradient(180deg, rgba(47, 212, 168, .3), rgba(20, 195, 154, .14)); box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .4); }
.bn-burbuja--marco { display: flex; align-items: center; gap: 10px; border-bottom-left-radius: 5px; color: #d6d6de; background: #15171b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 40px -20px rgba(0, 0, 0, .9); }
.bn-burbuja--marco img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.bn-escribe { display: inline-flex; gap: 3px; }
.bn-escribe i { width: 5px; height: 5px; border-radius: 50%; background: #8c8c97; animation: bn-punto 1.2s ease-in-out infinite; }
.bn-escribe i:nth-child(2) { animation-delay: .15s; }
.bn-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes bn-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Saldo de créditos */
.bn-saldo {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  text-align: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .16), transparent 45%),
    radial-gradient(circle, rgba(20, 195, 154, .28), rgba(20, 195, 154, .04) 70%);
  box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .35), 0 0 60px -10px rgba(20, 195, 154, .55);
}
.bn-saldo::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed rgba(47, 212, 168, .3);
  animation: bn-gira 30s linear infinite;
}
@keyframes bn-gira { to { transform: rotate(360deg); } }
.bn-saldo--gema { width: 150px; height: 150px; color: #2fd4a8; }
.bn-saldo--gema svg { width: 54px; height: 54px; filter: drop-shadow(0 0 18px rgba(47, 212, 168, .8)); animation: bn-gema 5s ease-in-out infinite; }
@keyframes bn-gema { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(45deg) scale(1.08); } }
.bn-chip--gasto { max-width: 244px; }
.bn-chip--gasto span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bn-chip--gasto b { flex: none; min-width: 22px; padding: 2px 6px; border-radius: 100px; text-align: center; font-size: 12px; color: #03110c; background: #2fd4a8; }
.bn-saldo b { display: block; font: 500 38px/1 "Geist Mono", var(--se-fuente-mono); letter-spacing: -.04em; color: #fff; }
.bn-saldo small { display: block; margin-top: 6px; font-size: 12px; color: #b0b0bc; }

/* ---------- Banner compacto: mientras se trabaja dentro ---------- */

/* Lo que se pliega lleva transición en los dos sentidos */
.banner { transition: min-height .55s var(--in-salida, ease), padding .55s var(--in-salida, ease), gap .55s ease, border-radius .55s ease; }
.banner .pagina__titulo { transition: font-size .55s var(--in-salida, ease), margin .55s ease; }
.banner .pagina__titulo svg { transition: width .55s ease, height .55s ease, padding .55s ease; }
.banner .pagina__bajada { max-height: 90px; overflow: hidden; transition: max-height .5s ease, opacity .35s ease; }
.banner__puntos { max-height: 80px; overflow: hidden; transition: max-height .5s ease, margin .5s ease, opacity .35s ease; }
.banner__visual { transition: height .55s var(--in-salida, ease), opacity .35s ease, transform .55s ease; }
.banner__rotulo { transition: margin .55s ease; }

.banner--compacto {
  min-height: 0;
  gap: 0;
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 16px;
  margin-bottom: 18px !important;
}
.banner--compacto .banner__texto { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
.banner--compacto .banner__rotulo { order: 2; margin: 0; }
.banner--compacto .pagina__titulo { margin: 0; font-size: 22px; }
.banner--compacto .pagina__titulo svg { width: 34px; height: 34px; padding: 7px; }
.banner--compacto .pagina__bajada,
.banner--compacto .banner__puntos { order: 3; flex-basis: 100%; max-height: 0; margin: 0; opacity: 0; }
.banner--compacto .banner__visual { height: 0; opacity: 0; pointer-events: none; }
.banner--compacto .banner__fondo::after { width: 220px; height: 220px; top: -120%; }

/* ---------- Clonar tienda: de la tienda original a tu tienda en español ---------- */

/* Tres piezas en fila: este banner pide más ancho para el ejemplo */
.banner.banner--clonar { grid-template-columns: minmax(0, 1fr) minmax(0, 568px); }
.banner--clonar .banner__visual { --cl-ciclo: 12s; width: 568px; height: 226px; }
@media (max-width: 1300px) { .banner--clonar .banner__visual { transform: scale(.86); transform-origin: right center; } }

.bn-clon__origen, .bn-clon__destino { position: relative; }
.bn-clon__captura { position: relative; overflow: hidden; }
.bn-clon__captura img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* 1 · El láser que lee la tienda original */
.bn-clon__laser {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(47, 212, 168, .28) 80%, #6ee6c6 100%);
  box-shadow: 0 6px 18px -2px rgba(47, 212, 168, .8);
  animation: bn-clon-laser var(--cl-ciclo) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes bn-clon-laser {
  0% { transform: translateY(-30px); opacity: 0; }
  3% { opacity: 1; }
  22% { transform: translateY(100px); opacity: 1; }
  25%, 100% { transform: translateY(100px); opacity: 0; }
}
.bn-clon__sello {
  position: absolute;
  left: 50%;
  bottom: -11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 100px;
  font: 600 11px/1.3 "Geist Mono", var(--se-fuente-mono);
  white-space: nowrap;
  color: #eaf6d8;
  background: #1a2410;
  box-shadow: inset 0 0 0 1px rgba(149, 191, 71, .55), 0 10px 20px -8px rgba(0, 0, 0, .9);
  transform: translateX(-50%);
}
.bn-clon__sello svg { width: 11px; height: 11px; color: #95bf47; }
.bn-clon__destino .bn-clon__sello--es { left: 34%; z-index: 2; }
.bn-clon__sello--es { color: #eafff8; background: #0c2a22; box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .6), 0 10px 20px -8px rgba(0, 0, 0, .9); }
.bn-clon__sello--es svg { color: #2fd4a8; }

/* 2 · Los trazos que llevan de una pieza a la siguiente */
.bn-clon__flujo { width: 34px; height: 24px; overflow: visible; }
.bn-clon__flujo path { fill: none; stroke: rgba(47, 212, 168, .45); stroke-width: 1.5; stroke-dasharray: 3 3; }
.bn-clon__flujo .bn-clon__punta { stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; }
.bn-clon__flujo circle { fill: #9df3dc; filter: drop-shadow(0 0 4px #2fd4a8); opacity: 0; }
.bn-clon__flujo--1 circle { animation: bn-clon-viaje-1 var(--cl-ciclo) cubic-bezier(.45, 0, .55, 1) infinite; }
.bn-clon__flujo--2 circle { animation: bn-clon-viaje-2 var(--cl-ciclo) cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes bn-clon-viaje-1 { 0%, 23% { transform: translateX(0); opacity: 0; } 25% { opacity: 1; } 32% { transform: translateX(30px); opacity: 1; } 34%, 100% { transform: translateX(30px); opacity: 0; } }
@keyframes bn-clon-viaje-2 { 0%, 64% { transform: translateX(0); opacity: 0; } 66% { opacity: 1; } 73% { transform: translateX(30px); opacity: 1; } 75%, 100% { transform: translateX(30px); opacity: 0; } }

/* 3 · La vista previa en el SaaS: escritorio → móvil, lo revisado y «Publicar en mi Shopify» */
.bn-cl__vista {
  width: 170px;
  padding-bottom: 9px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #16181c, #0c0d10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -26px rgba(0, 0, 0, .95), 0 0 50px -18px rgba(149, 191, 71, .55);
}
.bn-cl__cabeza {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 8px;
  font-size: 11px;
  color: #eceef2;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.bn-cl__cabeza b { flex: 1; font-weight: 600; white-space: nowrap; }
.bn-cl__ojo { display: grid; width: 13px; height: 13px; color: #2fd4a8; }
.bn-cl__ojo svg { width: 13px; height: 13px; }
/* El selector de dispositivo: la marca pasa del ordenador al móvil */
.bn-cl__disp { position: relative; display: flex; gap: 2px; padding: 2px; border-radius: 100px; background: rgba(255, 255, 255, .07); }
.bn-cl__disp i { position: relative; z-index: 1; width: 16px; height: 12px; }
.bn-cl__disp i::before { content: ""; position: absolute; inset: 3px 4px; border: 1.2px solid rgba(255, 255, 255, .75); border-radius: 1.5px; }
.bn-cl__disp-movil::before { inset: 2px 5.5px !important; border-radius: 2px !important; }
.bn-cl__disp em {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 12px;
  border-radius: 100px;
  background: rgba(47, 212, 168, .35);
  animation: bn-cl-disp var(--cl-ciclo) cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes bn-cl-disp { 0%, 45% { transform: none; } 49%, 100% { transform: translateX(18px); } }

.bn-cl__pantalla {
  position: relative;
  height: 86px;
  margin: 7px 8px 0;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(100deg, #1d2025 30%, #262a30 50%, #1d2025 70%) 0 0 / 250% 100%;
  animation: bn-clon-cargando 1.4s linear infinite;
}
.bn-cl__pc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  animation: bn-cl-pc var(--cl-ciclo) ease infinite;
}
@keyframes bn-cl-pc { 0%, 33% { opacity: 0; transform: scale(1.06); } 37%, 45% { opacity: 1; transform: none; } 50%, 95% { opacity: .18; transform: scale(.96); } 99%, 100% { opacity: 0; } }
.bn-cl__tel {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 42px;
  height: 80px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 2.5px #08090b, 0 0 0 3.5px rgba(255, 255, 255, .18), 0 14px 24px -8px rgba(0, 0, 0, .9);
  opacity: 0;
  animation: bn-cl-tel var(--cl-ciclo) cubic-bezier(.34, 1.4, .64, 1) infinite;
}
.bn-cl__tel img { width: 100%; height: 100%; object-fit: cover; object-position: 30% top; }
@keyframes bn-cl-tel { 0%, 47% { opacity: 0; transform: translate(-50%, 24px) scale(.85); } 52%, 95% { opacity: 1; transform: translate(-50%, 0); } 99%, 100% { opacity: 0; transform: translate(-50%, 0); } }

/* Lo que la plataforma revisa, marcándose uno a uno */
.bn-cl__lista { display: grid; gap: 4px; margin: 8px 9px 0; padding: 0; list-style: none; }
.bn-cl__ok {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  color: rgba(236, 238, 242, .4);
  animation: bn-cl-ok-texto var(--cl-ciclo) ease infinite;
  animation-delay: calc(var(--k) * .6s);
}
.bn-cl__ok i {
  display: grid;
  place-items: center;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  animation: bn-cl-ok var(--cl-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite;
  animation-delay: calc(var(--k) * .6s);
}
.bn-cl__ok svg { width: 8px; height: 8px; }
@keyframes bn-cl-ok { 0%, 38% { transform: scale(.8); background: transparent; color: transparent; } 41%, 97% { transform: none; background: #14c39a; color: #03110c; box-shadow: none; } 99%, 100% { background: transparent; color: transparent; } }
@keyframes bn-cl-ok-texto { 0%, 38% { color: rgba(236, 238, 242, .4); } 41%, 97% { color: #eceef2; } 99%, 100% { color: rgba(236, 238, 242, .4); } }

/* El botón verde de Shopify: se pulsa y queda publicada */
.bn-cl__publicar { position: relative; display: grid; margin: 9px 9px 0; }
.bn-cl__publicar b {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 25px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}
.bn-cl__boton {
  color: #fff;
  background: linear-gradient(180deg, #2e9a5a, #1c7a43);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px -10px rgba(149, 191, 71, .9);
  animation: bn-cl-boton var(--cl-ciclo) ease infinite;
}
.bn-cl__boton .bn-cl__bolsa { width: 14px; height: 14px; }
.bn-cl__hecho {
  color: #d9f5b4;
  background: rgba(149, 191, 71, .16);
  box-shadow: inset 0 0 0 1px rgba(149, 191, 71, .6);
  opacity: 0;
  animation: bn-cl-hecho var(--cl-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.bn-cl__hecho svg { width: 11px; height: 11px; }
@keyframes bn-cl-boton { 0%, 55% { opacity: .35; transform: none; } 58% { opacity: 1; transform: scale(1.05); } 61% { opacity: 1; transform: scale(.94); } 63%, 100% { opacity: 0; } }
@keyframes bn-cl-hecho { 0%, 62% { opacity: 0; transform: scale(.85); } 65%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* 4b · Tu tienda también en el móvil, y el primer pedido */
.bn-cl__movil {
  position: relative;
  display: block;
  width: 50px;
  height: 100px;
  overflow: hidden;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 0 0 3px #08090b, 0 0 0 4px rgba(255, 255, 255, .2), 0 20px 34px -10px rgba(0, 0, 0, .95);
  opacity: 0;
  animation: bn-cl-movil var(--cl-ciclo) cubic-bezier(.34, 1.4, .64, 1) infinite;
}
.bn-cl__movil img { width: 100%; height: 100%; object-fit: cover; object-position: 30% top; }
.bn-cl__muesca { position: absolute; top: 3px; left: 50%; z-index: 1; width: 16px; height: 4px; border-radius: 4px; background: #08090b; transform: translateX(-50%); }
@keyframes bn-cl-movil { 0%, 80% { opacity: 0; transform: translateY(18px) scale(.9); } 85%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.bn-cl__pedido {
  gap: 8px !important;
  padding: 6px 12px 6px 7px !important;
  box-shadow: inset 0 0 0 1px rgba(149, 191, 71, .55), 0 16px 30px -12px rgba(0, 0, 0, .9), 0 0 26px -6px rgba(149, 191, 71, .6) !important;
  opacity: 0;
  animation: bn-cl-pedido var(--cl-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.bn-cl__pedido .bn-cl__bolsa { width: 20px; height: 20px; flex: none; }
.bn-cl__pedido span { display: grid; gap: 1px; }
.bn-cl__pedido span b { font: 650 11.5px/1.1 "Geist", var(--se-fuente); color: #fff; }
.bn-cl__pedido small { font-size: 9.5px; color: rgba(236, 238, 242, .7); white-space: nowrap; }
@keyframes bn-cl-pedido { 0%, 87% { opacity: 0; transform: translateY(12px) scale(.9); } 90%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* 4 · La tienda clonada: se monta pieza a pieza, en español y con tu marca */
.bn-clon__clon { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #fff; }
.bn-clon__clon-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
  padding: 0 7px;
  font-size: 6px;
  color: #111;
  background: #fff;
  opacity: 0;
  animation: bn-clon-monta-1 var(--cl-ciclo) ease infinite;
}
.bn-clon__clon-cabeza b { font: 800 8px/1 "Geist", var(--se-fuente); letter-spacing: .08em; }
.bn-clon__clon-cabeza i { display: grid; width: 9px; height: 9px; }
.bn-clon__clon-cabeza svg { width: 9px; height: 9px; }
.bn-clon__clon-hero { position: relative; height: calc(100% - 18px); overflow: hidden; opacity: 0; animation: bn-clon-monta-2 var(--cl-ciclo) ease infinite; }
.bn-clon__clon-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; transform: scale(1.15); animation: bn-clon-zoom var(--cl-ciclo) ease-out infinite; }
.bn-clon__clon-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(75deg, rgba(0, 0, 0, .72) 10%, transparent 65%); }
.bn-clon__clon-texto {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 3px;
  max-width: 60%;
  color: #fff;
  opacity: 0;
  animation: bn-clon-monta-3 var(--cl-ciclo) ease infinite;
}
.bn-clon__clon-texto b { font: 800 11px/1 "Geist", var(--se-fuente); letter-spacing: -.01em; }
.bn-clon__clon-texto small { font-size: 5.5px; line-height: 1.3; opacity: .85; }
.bn-clon__clon-texto span { margin-top: 2px; padding: 3px 7px; font-size: 6px; font-weight: 700; color: #111; background: #fff; }
@keyframes bn-clon-monta-1 { 0%, 74% { opacity: 0; transform: translateY(-6px); } 77%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes bn-clon-monta-2 { 0%, 76% { opacity: 0; } 80%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes bn-clon-monta-3 { 0%, 81% { opacity: 0; transform: translateY(8px); } 85%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes bn-clon-zoom { 0%, 76% { transform: scale(1.25); } 92%, 100% { transform: scale(1.12); } }
/* Mientras no está, el hueco de la tienda se ve como una página en blanco cargando */
.bn-clon__clon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #eef0f2 30%, #fafbfc 50%, #eef0f2 70%);
  background-size: 250% 100%;
  animation: bn-clon-cargando 1.4s linear infinite;
}
@keyframes bn-clon-cargando { from { background-position: 150% 0; } to { background-position: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .bn-clon__laser, .bn-clon__flujo circle, .bn-cl__boton, .bn-clon__clon::before, .bn-cl__pantalla { animation: none; }
  .bn-clon__laser, .bn-clon__flujo circle, .bn-cl__boton { display: none; }
  .bn-cl__pc { opacity: .18 !important; }
  .bn-cl__tel { opacity: 1 !important; transform: translate(-50%, 0) !important; }
  .bn-cl__disp em { transform: translateX(18px) !important; }
  .bn-cl__ok { color: #eceef2 !important; }
  .bn-cl__ok i { background: #14c39a !important; color: #03110c !important; box-shadow: none !important; }
  .bn-cl__hecho, .bn-clon__clon-cabeza, .bn-clon__clon-hero, .bn-clon__clon-texto, .bn-cl__movil, .bn-cl__pedido { opacity: 1 !important; transform: none !important; }
}

/* ---------- Inicio: el camino paso a paso ---------- */

.banner.banner--inicio { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
.banner--inicio .banner__visual { --pp-ciclo: 18s; width: 540px; height: 226px; }
@media (max-width: 1300px) { .banner--inicio .banner__visual { transform: scale(.86); transform-origin: right center; } }
@media (max-width: 1100px) {
  .banner.banner--inicio { grid-template-columns: minmax(0, 1fr); }
  .banner--inicio .banner__visual { transform: scale(.9); transform-origin: left top; height: 206px; }
}
@media (max-width: 760px) { .banner--inicio .banner__visual { transform: scale(.6); height: 138px; } }
/* Los estados de la animación se leen en el tiempo: el paralaje de ratón aquí sobra */
.banner--inicio .bn-pieza { transform: none !important; }

.bn-pp { position: relative; width: 540px; height: 226px; }

/* Los seis pasos y la vía que los une */
.bn-pp__pasos { position: relative; display: flex; justify-content: space-between; height: 48px; padding: 0 6px; }
.bn-pp__via { position: absolute; left: 34px; right: 34px; top: 13px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.bn-pp__via i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #14c39a, #9df3dc); box-shadow: 0 0 10px rgba(47, 212, 168, .8); transform: scaleX(0); transform-origin: left; animation: bn-pp-via var(--pp-ciclo) cubic-bezier(.45, 0, .55, 1) infinite; }
.bn-pp__paso { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; width: 56px; }
.bn-pp__paso b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 12px/1 "Geist Mono", var(--se-fuente-mono); background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.bn-pp__paso small { font-size: 11px; font-weight: 600; color: #6f7772; white-space: nowrap; }

/* La pantalla donde pasa cada paso */
.bn-pp__escenario {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  bottom: 0;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(90% 90% at 70% 0%, rgba(20, 195, 154, .12), transparent 60%), linear-gradient(180deg, #121417, #0a0b0d);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .05), 0 26px 50px -30px rgba(0, 0, 0, .95);
}
.bn-pp__escena { position: absolute; inset: 0; opacity: 0; }
.bn-pp__rotulo { position: absolute; left: 14px; top: 11px; margin: 0; font: 600 11px/1 "Geist Mono", var(--se-fuente-mono); letter-spacing: .06em; text-transform: uppercase; color: #2fd4a8; }
.bn-pp img { display: block; }

/* 1 · Producto */
.bn-pp__burbuja { position: absolute; left: 14px; top: 36px; max-width: 200px; margin: 0; padding: 9px 13px; border-radius: 14px 14px 14px 4px; font-size: 12px; line-height: 1.35; color: #eafff8; background: linear-gradient(180deg, rgba(47, 212, 168, .3), rgba(20, 195, 154, .12)); box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .4); animation: bn-pp-burbuja var(--pp-ciclo) ease infinite; }
.bn-pp__producto { position: absolute; right: 16px; top: 30px; display: flex; align-items: center; gap: 12px; width: 280px; padding: 10px 14px 10px 10px; border-radius: 16px; background: linear-gradient(180deg, #1a1d21, #0f1013); box-shadow: 0 0 0 1px rgba(47, 212, 168, .45), 0 0 34px -10px rgba(20, 195, 154, .7); animation: bn-pp-producto var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.bn-pp__foto { flex: none; width: 84px; height: 84px; overflow: hidden; border-radius: 12px; }
.bn-pp__foto img { width: 100%; height: 100%; object-fit: cover; }
.bn-pp__foto--blanca { background: #fff; }
.bn-pp__foto--blanca img { object-fit: contain; }
.bn-pp__producto > span:last-child { display: grid; gap: 3px; }
.bn-pp__producto small { font: 600 11px/1.2 "Geist Mono", var(--se-fuente-mono); letter-spacing: .05em; text-transform: uppercase; color: #2fd4a8; }
.bn-pp__producto b { font-size: 15px; font-weight: 600; color: #fff; }
.bn-pp__producto em { font-size: 12px; font-style: normal; color: #b0b0bc; }

/* 2 · Clona */
.bn-pp__web { position: absolute; overflow: hidden; border-radius: 10px; background: #16181c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -20px rgba(0, 0, 0, .95); }
.bn-pp__barra { display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; background: #1c1f24; }
.bn-pp__barra i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.bn-pp__barra span { flex: 1; margin-left: 5px; padding: 1px 7px; border-radius: 100px; overflow: hidden; font: 500 8.5px/1.5 "Geist Mono", var(--se-fuente-mono); color: #b0b0bc; background: rgba(255, 255, 255, .06); white-space: nowrap; text-overflow: ellipsis; }
.bn-pp__web--original { left: 24px; top: 32px; width: 180px; transform: rotate(-3deg); }
.bn-pp__web--clon { right: 24px; top: 34px; width: 184px; transform: rotate(3deg); box-shadow: 0 0 0 1px rgba(47, 212, 168, .5), 0 0 34px -10px rgba(20, 195, 154, .7); animation: bn-pp-clon var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.bn-pp__captura { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.bn-pp__clon { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.bn-pp__clon-cabeza { display: flex; align-items: center; justify-content: space-between; height: 15px; padding: 0 7px; font-size: 5.5px; color: #111; }
.bn-pp__clon-cabeza b { font: 800 7.5px/1 "Geist", var(--se-fuente); letter-spacing: .08em; }
.bn-pp__clon-hero { position: relative; height: calc(100% - 15px); }
.bn-pp__clon-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.bn-pp__clon-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(75deg, rgba(0, 0, 0, .7) 10%, transparent 62%); }
.bn-pp__clon-hero > div { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: grid; justify-items: start; gap: 4px; color: #fff; }
.bn-pp__clon-hero b { font: 800 12px/1 "Geist", var(--se-fuente); }
.bn-pp__clon-hero span { padding: 2px 6px; font-size: 6px; font-weight: 700; color: #111; background: #fff; }
.bn-pp__flecha { position: absolute; left: 50%; top: 76px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); box-shadow: 0 0 22px rgba(20, 195, 154, .9); animation: bn-pp-flecha var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.bn-pp__flecha svg { width: 16px; height: 16px; }

/* 3 · Anuncios */
.bn-pp__ad { position: absolute; top: 30px; width: 104px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 36px -16px rgba(0, 0, 0, .95); }
.bn-pp__ad img { width: 100%; height: 100%; object-fit: cover; }
.bn-pp__ad--1 { left: 70px; transform: rotate(-6deg); }
.bn-pp__ad--2 { left: 178px; top: 26px; animation: bn-pp-ad-2 var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.bn-pp__movil { position: absolute; left: 318px; top: 16px; width: 82px; height: 146px; padding: 4px; overflow: hidden; border-radius: 16px; background: #050506; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 0 30px -8px rgba(20, 195, 154, .7); animation: bn-pp-movil var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.bn-pp__movil img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.bn-pp__movil i { position: absolute; inset: 0; width: 26px; height: 26px; margin: auto; border-radius: 50%; background: rgba(9, 9, 11, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.bn-pp__movil i::before { content: ""; position: absolute; left: 10px; top: 7px; border-left: 8px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* 4 · Publica */
.bn-pp__web--publica { left: 96px; right: 96px; top: 30px; }
.bn-pp__web--publica .bn-pp__clon { aspect-ratio: 16 / 5.4; }
.bn-pp__publicar { position: absolute; right: 108px; top: 32px; z-index: 2; display: grid; font-size: 11px; }
.bn-pp__publicar > * { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 10px; border-radius: 100px; font-style: normal; font-weight: 700; white-space: nowrap; }
.bn-pp__publicar em { color: #fff; background: linear-gradient(115deg, #ff8a3d, #ff4f8b 55%, #6f7cff); animation: bn-pp-publicar-a var(--pp-ciclo) ease infinite; }
.bn-pp__publicar strong { color: #03110c; background: linear-gradient(115deg, #14c39a, #9df3dc); opacity: 0; animation: bn-pp-publicar-b var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.bn-pp__publicar svg { width: 10px; height: 10px; stroke-width: 3; }
.bn-pp__online { position: absolute; left: 50%; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; margin-left: -48px; padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; color: #eafff8; background: rgba(12, 14, 17, .94); box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .5); animation: bn-pp-online var(--pp-ciclo) ease infinite; }
.bn-pp__online i { width: 8px; height: 8px; border-radius: 50%; background: #2fd4a8; box-shadow: 0 0 8px #2fd4a8; }

/* 5 · Meta */
.bn-pp__campana { position: absolute; left: 50%; top: 32px; display: grid; gap: 7px; width: 300px; margin-left: -150px; padding: 11px 14px 12px; border-radius: 14px; background: linear-gradient(180deg, #16181c, #0c0d10); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 34px -12px rgba(74, 157, 255, .5); }
.bn-pp__campana-cabeza { display: flex; align-items: center; gap: 9px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 12px; color: #fff; }
.bn-pp__orbe { position: relative; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#13707f, #14c39a, #9df3dc, #4a9dff, #13707f); animation: bn-gira 3s linear infinite; }
.bn-pp__orbe::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0b0c0f; }
.bn-pp__linea { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #d6d6de; opacity: 0; }
.bn-pp__linea svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; color: #03110c; background: #2fd4a8; stroke-width: 3; }
.bn-pp__linea--1 { animation: bn-pp-linea-1 var(--pp-ciclo) ease infinite; }
.bn-pp__linea--2 { animation: bn-pp-linea-2 var(--pp-ciclo) ease infinite; }
.bn-pp__linea--3 { animation: bn-pp-linea-3 var(--pp-ciclo) ease infinite; }

/* 6 · Ventas */
@property --bn-pp-ventas { syntax: "<integer>"; inherits: false; initial-value: 0; }
.bn-pp__ventas { position: absolute; left: 40px; top: 34px; width: 200px; padding: 12px 14px; border-radius: 14px; background: radial-gradient(90% 70% at 100% 0%, rgba(230, 179, 74, .18), transparent 65%), linear-gradient(180deg, #16181c, #0c0d10); box-shadow: 0 0 0 1px rgba(230, 179, 74, .35), 0 0 34px -12px rgba(230, 179, 74, .5); }
.bn-pp__ventas small { display: block; font-size: 11px; color: #8c8c97; }
/* La marca de las cifras inventadas del paso 6: que se lea como ejemplo. */
.bn-pp__ejemplo { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 100px; font: 600 11px/1.5 "Geist Mono", var(--se-fuente-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #2b1d02; background: #e6b34a; }
.bn-pp__cifra { display: block; margin: 3px 0 8px; font: 600 28px/1 "Geist Mono", var(--se-fuente-mono); letter-spacing: -.03em; color: #fff; counter-reset: bn-pp-ventas var(--bn-pp-ventas); animation: bn-pp-cuenta var(--pp-ciclo) cubic-bezier(.3, 0, .2, 1) infinite; }
.bn-pp__cifra::before { content: counter(bn-pp-ventas) " €"; }
.bn-pp__barras { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.bn-pp__barras i { flex: 1; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #ffe0a0, #c8912c); transform-origin: bottom; animation: bn-pp-barra var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.bn-pp__barras i:nth-child(1) { height: 26%; } .bn-pp__barras i:nth-child(2) { height: 40%; } .bn-pp__barras i:nth-child(3) { height: 34%; } .bn-pp__barras i:nth-child(4) { height: 56%; }
.bn-pp__barras i:nth-child(5) { height: 50%; } .bn-pp__barras i:nth-child(6) { height: 72%; } .bn-pp__barras i:nth-child(7) { height: 66%; } .bn-pp__barras i:nth-child(8) { height: 100%; }
.bn-pp__aviso { position: absolute; right: 30px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 100px; font-size: 12px; white-space: nowrap; color: #eafff8; background: rgba(12, 14, 17, .94); box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .5), 0 0 26px -8px rgba(20, 195, 154, .8); opacity: 0; }
.bn-pp__aviso svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #03110c; background: #2fd4a8; stroke-width: 3; }
.bn-pp__aviso--1 { top: 46px; animation: bn-pp-aviso-1 var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.bn-pp__aviso--2 { top: 100px; right: 60px; animation: bn-pp-aviso-2 var(--pp-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }

.bn-pp__paso--1 b { animation: bn-pp-nodo-1 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--1 small { animation: bn-pp-texto-1 var(--pp-ciclo) ease infinite; }
.bn-pp__escena--1 { animation: bn-pp-escena-1 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--2 b { animation: bn-pp-nodo-2 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--2 small { animation: bn-pp-texto-2 var(--pp-ciclo) ease infinite; }
.bn-pp__escena--2 { animation: bn-pp-escena-2 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--3 b { animation: bn-pp-nodo-3 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--3 small { animation: bn-pp-texto-3 var(--pp-ciclo) ease infinite; }
.bn-pp__escena--3 { animation: bn-pp-escena-3 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--4 b { animation: bn-pp-nodo-4 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--4 small { animation: bn-pp-texto-4 var(--pp-ciclo) ease infinite; }
.bn-pp__escena--4 { animation: bn-pp-escena-4 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--5 b { animation: bn-pp-nodo-5 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--5 small { animation: bn-pp-texto-5 var(--pp-ciclo) ease infinite; }
.bn-pp__escena--5 { animation: bn-pp-escena-5 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--6 b { animation: bn-pp-nodo-6 var(--pp-ciclo) ease infinite; }
.bn-pp__paso--6 small { animation: bn-pp-texto-6 var(--pp-ciclo) ease infinite; }
.bn-pp__escena--6 { animation: bn-pp-escena-6 var(--pp-ciclo) ease infinite; }
@keyframes bn-pp-escena-1 { 0% { opacity: 1; transform: none; } 15.37% { opacity: 1; transform: none; } 16.67%, 99% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-escena-2 { 0%, 16.67% { opacity: 0; transform: translateY(10px); } 17.97%, 32.03% { opacity: 1; transform: none; } 33.33%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes bn-pp-escena-3 { 0%, 33.33% { opacity: 0; transform: translateY(10px); } 34.63%, 48.70% { opacity: 1; transform: none; } 50.00%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes bn-pp-escena-4 { 0%, 50.00% { opacity: 0; transform: translateY(10px); } 51.30%, 65.37% { opacity: 1; transform: none; } 66.67%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes bn-pp-escena-5 { 0%, 66.67% { opacity: 0; transform: translateY(10px); } 67.97%, 82.03% { opacity: 1; transform: none; } 83.33%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes bn-pp-escena-6 { 0%, 83.33% { opacity: 0; transform: translateY(10px); } 84.63%, 98.70% { opacity: 1; transform: none; } 100.00%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes bn-pp-nodo-1 { 0%, 15.87% { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); } 16.67%, 98% { background: #2fd4a8; color: #03110c; box-shadow: none; transform: scale(1); } 100% { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); } }
@keyframes bn-pp-texto-1 { 0%, 15.87% { color: #ffffff; } 16.67%, 98% { color: #9df3dc; } 100% { color: #ffffff; } }
@keyframes bn-pp-nodo-2 { 0%, 16.66% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } 17.47%, 32.53% { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); } 33.33%, 98% { background: #2fd4a8; color: #03110c; box-shadow: none; transform: scale(1); } 100% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } }
@keyframes bn-pp-texto-2 { 0%, 16.66% { color: #6f7772; } 17.47%, 32.53% { color: #ffffff; } 33.33%, 98% { color: #9df3dc; } 100% { color: #6f7772; } }
@keyframes bn-pp-nodo-3 { 0%, 33.32% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } 34.13%, 49.20% { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); } 50.00%, 98% { background: #2fd4a8; color: #03110c; box-shadow: none; transform: scale(1); } 100% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } }
@keyframes bn-pp-texto-3 { 0%, 33.32% { color: #6f7772; } 34.13%, 49.20% { color: #ffffff; } 50.00%, 98% { color: #9df3dc; } 100% { color: #6f7772; } }
@keyframes bn-pp-nodo-4 { 0%, 49.99% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } 50.80%, 65.87% { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); } 66.67%, 98% { background: #2fd4a8; color: #03110c; box-shadow: none; transform: scale(1); } 100% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } }
@keyframes bn-pp-texto-4 { 0%, 49.99% { color: #6f7772; } 50.80%, 65.87% { color: #ffffff; } 66.67%, 98% { color: #9df3dc; } 100% { color: #6f7772; } }
@keyframes bn-pp-nodo-5 { 0%, 66.66% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } 67.47%, 82.53% { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); } 83.33%, 98% { background: #2fd4a8; color: #03110c; box-shadow: none; transform: scale(1); } 100% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } }
@keyframes bn-pp-texto-5 { 0%, 66.66% { color: #6f7772; } 67.47%, 82.53% { color: #ffffff; } 83.33%, 98% { color: #9df3dc; } 100% { color: #6f7772; } }
@keyframes bn-pp-nodo-6 { 0%, 83.32% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } 84.13%, 98% { background: linear-gradient(135deg, #c8912c, #ffe0a0); color: #2b1d02; box-shadow: 0 0 0 5px rgba(230,179,74,.18), 0 0 22px rgba(230,179,74,.85); transform: scale(1.15); } 100% { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: scale(1); } }
@keyframes bn-pp-texto-6 { 0%, 83.32% { color: #6f7772; } 84.13%, 99.20% { color: #ffffff; } 100.00%, 98% { color: #9df3dc; } 100% { color: #6f7772; } }
@keyframes bn-pp-via { 0% { transform: scaleX(0); } 1.20%, 16.67% { transform: scaleX(0.000); } 17.87%, 33.33% { transform: scaleX(0.200); } 34.53%, 50.00% { transform: scaleX(0.400); } 51.20%, 66.67% { transform: scaleX(0.600); } 67.87%, 83.33% { transform: scaleX(0.800); } 84.53%, 100.00% { transform: scaleX(1.000); } 99% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes bn-pp-burbuja { 0% { opacity: 0; transform: translateY(8px); } 1.33%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-producto { 0%, 5.00% { opacity: 0; transform: translateX(20px) scale(.95); } 7.00%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-clon { 0%, 22.50% { opacity: 0; transform: translateX(-14px) scale(.94); } 25.00%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-flecha { 0%, 19.67% { opacity: 0; transform: scale(.6); } 21.67%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-ad-2 { 0%, 36.33% { opacity: 0; transform: translateY(16px); } 38.33%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-movil { 0%, 39.33% { opacity: 0; transform: translateY(16px); } 41.67%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-publicar-a { 0%, 57.00% { opacity: 1; transform: scale(1); } 57.67% { opacity: 1; transform: scale(.9); } 58.33%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes bn-pp-publicar-b { 0%, 58.00% { opacity: 0; transform: scale(.8); } 59.33%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-online { 0%, 59.67% { opacity: 0; transform: translateY(8px); } 61.00%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-linea-1 { 0%, 70.00% { opacity: 0; transform: translateX(-10px); } 71.33%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-linea-2 { 0%, 73.00% { opacity: 0; transform: translateX(-10px); } 74.33%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-linea-3 { 0%, 76.00% { opacity: 0; transform: translateX(-10px); } 77.33%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-cuenta { 0%, 85.00% { --bn-pp-ventas: 0; } 95.83%, 100% { --bn-pp-ventas: 1284; } }
@keyframes bn-pp-aviso-1 { 0%, 88.33% { opacity: 0; transform: translateY(12px) scale(.9); } 90.00%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-aviso-2 { 0%, 92.50% { opacity: 0; transform: translateY(12px) scale(.9); } 94.17%, 100% { opacity: 1; transform: none; } }
@keyframes bn-pp-barra { 0%, 86.67% { transform: scaleY(.2); } 96.67%, 100% { transform: scaleY(1); } }

/* Sin movimiento: se enseña el primer paso, quieto y completo */
@media (prefers-reduced-motion: reduce) {
  .bn-pp__escena--1, .bn-pp__escena--1 * { opacity: 1 !important; transform: none !important; }
  .bn-pp__paso--1 b { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; }
}

/* ---------- Trafiker IA: el agente montando la campaña (simulación) ---------- */

.banner--trafiker .banner__visual { --tk-ciclo: 12s; }
.tk-sim {
  width: 262px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #15171b, #0c0d10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -26px rgba(0, 0, 0, .95);
}
.tk-sim__cabeza {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  font-size: 11px;
  color: #d6d6de;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.tk-sim__meta { width: 16px; height: 16px; flex: none; fill: #4a9dff; }
.tk-sim__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-sim__pastilla { position: relative; display: grid; font-size: 11px; }
.tk-sim__pastilla b { grid-area: 1 / 1; padding: 2px 8px; border-radius: 100px; font-weight: 600; white-space: nowrap; text-align: center; }
.tk-sim__creando { color: #f2b25c; background: rgba(242, 178, 92, .14); animation: tk-sim-creando var(--tk-ciclo) linear infinite; }
.tk-sim__activa { color: #03110c; background: linear-gradient(115deg, #14c39a, #9df3dc); opacity: 0; animation: tk-sim-activa var(--tk-ciclo) linear infinite; }
@keyframes tk-sim-creando { 0%, 47% { opacity: 1; } 49%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tk-sim-activa { 0%, 47% { opacity: 0; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.08); } 53%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

.tk-sim__agente { display: flex; align-items: center; gap: 9px; padding: 10px 12px 6px; }
.tk-sim__agente b { display: block; font-size: 11.5px; color: #fff; }
.tk-sim__agente small { display: block; font-size: 11px; color: #8c8c97; }
/* El orbe del agente: gira mientras trabaja */
.tk-sim__orbe {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #13707f, #14c39a, #9df3dc, #4a9dff, #13707f);
  animation: bn-gira 3s linear infinite;
  box-shadow: 0 0 16px -2px rgba(20, 195, 154, .8);
}
.tk-sim__orbe::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a3136, #0b0c0f); }

.tk-sim__lista { display: grid; gap: 5px; margin: 0; padding: 4px 12px 10px; list-style: none; }
.tk-sim__linea {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #c8ccd2;
  opacity: 0;
  animation: tk-sim-linea-0 var(--tk-ciclo) cubic-bezier(.16, .84, .24, 1) infinite;
}
.tk-sim__estado { position: relative; flex: none; width: 14px; height: 14px; }
.tk-sim__estado i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.tk-sim__giro { border: 1.5px solid rgba(255, 255, 255, .15); border-top-color: #14c39a; animation: bn-gira .8s linear infinite, tk-sim-giro-0 var(--tk-ciclo) linear infinite; }
.tk-sim__ok { color: #03110c; background: linear-gradient(135deg, #14c39a, #9df3dc); opacity: 0; transform: scale(.4); animation: tk-sim-ok-0 var(--tk-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.tk-sim__ok svg { width: 9px; height: 9px; stroke-width: 3.2; }
/* Las cuatro líneas comparten ciclo: entran una tras otra y se van a la vez */
.tk-sim__linea:nth-child(1) { animation-name: tk-sim-linea-0; }
.tk-sim__linea:nth-child(1) .tk-sim__giro { animation-name: bn-gira, tk-sim-giro-0; }
.tk-sim__linea:nth-child(1) .tk-sim__ok { animation-name: tk-sim-ok-0; }
.tk-sim__linea:nth-child(2) { animation-name: tk-sim-linea-1; }
.tk-sim__linea:nth-child(2) .tk-sim__giro { animation-name: bn-gira, tk-sim-giro-1; }
.tk-sim__linea:nth-child(2) .tk-sim__ok { animation-name: tk-sim-ok-1; }
.tk-sim__linea:nth-child(3) { animation-name: tk-sim-linea-2; }
.tk-sim__linea:nth-child(3) .tk-sim__giro { animation-name: bn-gira, tk-sim-giro-2; }
.tk-sim__linea:nth-child(3) .tk-sim__ok { animation-name: tk-sim-ok-2; }
.tk-sim__linea:nth-child(4) { animation-name: tk-sim-linea-3; }
.tk-sim__linea:nth-child(4) .tk-sim__giro { animation-name: bn-gira, tk-sim-giro-3; }
.tk-sim__linea:nth-child(4) .tk-sim__ok { animation-name: tk-sim-ok-3; }
@keyframes tk-sim-linea-0 { 0%, 3% { opacity: 0; transform: translateX(-8px); } 6%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tk-sim-giro-0 { 0%, 11% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes tk-sim-ok-0 { 0%, 11% { opacity: 0; transform: scale(.4); } 14%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tk-sim-linea-1 { 0%, 14% { opacity: 0; transform: translateX(-8px); } 17%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tk-sim-giro-1 { 0%, 22% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes tk-sim-ok-1 { 0%, 22% { opacity: 0; transform: scale(.4); } 25%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tk-sim-linea-2 { 0%, 25% { opacity: 0; transform: translateX(-8px); } 28%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tk-sim-giro-2 { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes tk-sim-ok-2 { 0%, 33% { opacity: 0; transform: scale(.4); } 36%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tk-sim-linea-3 { 0%, 36% { opacity: 0; transform: translateX(-8px); } 39%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tk-sim-giro-3 { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes tk-sim-ok-3 { 0%, 44% { opacity: 0; transform: scale(.4); } 47%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

.tk-sim__progreso { height: 3px; background: rgba(255, 255, 255, .06); }
.tk-sim__progreso i { display: block; height: 100%; background: linear-gradient(90deg, #13707f, #14c39a, #9df3dc); box-shadow: 0 0 10px rgba(47, 212, 168, .8); transform-origin: left; animation: tk-sim-progreso var(--tk-ciclo) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes tk-sim-progreso { 0% { transform: scaleX(0); } 47%, 94% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(0); opacity: 0; } }

/* Las ventas: la cifra sube con una propiedad registrada y un contador */
@property --tk-ventas { syntax: "<integer>"; inherits: false; initial-value: 0; }
.tk-sim__ventas {
  position: relative;
  width: 168px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(20, 195, 154, .18), transparent 65%),
    linear-gradient(180deg, #15171b, #0c0d10);
  box-shadow: 0 0 0 1px rgba(47, 212, 168, .25), 0 30px 60px -26px rgba(0, 0, 0, .95);
  opacity: .35;
  animation: tk-sim-panel var(--tk-ciclo) ease infinite;
}
@keyframes tk-sim-panel { 0%, 46% { opacity: .35; } 52%, 94% { opacity: 1; } 100% { opacity: .35; } }
.tk-sim__ventas small { display: block; font-size: 11px; color: #8c8c97; }
.tk-sim__cifra {
  display: block;
  margin: 2px 0 4px;
  font: 600 24px/1.1 "Geist Mono", var(--se-fuente-mono);
  letter-spacing: -.03em;
  color: #fff;
  counter-reset: ventas var(--tk-ventas);
  animation: tk-sim-cuenta var(--tk-ciclo) cubic-bezier(.3, 0, .2, 1) infinite;
}
.tk-sim__cifra::before { content: counter(ventas) " €"; }
@keyframes tk-sim-cuenta { 0%, 50% { --tk-ventas: 0; } 90%, 96% { --tk-ventas: 1284; } 100% { --tk-ventas: 0; } }
.tk-sim__ventas svg { display: block; width: 100%; height: 44px; overflow: visible; }
.tk-sim__linea-grafica { fill: none; stroke: #2fd4a8; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; animation: tk-sim-traza var(--tk-ciclo) cubic-bezier(.4, 0, .2, 1) infinite; }
.tk-sim__area { opacity: 0; animation: tk-sim-area var(--tk-ciclo) ease infinite; }
@keyframes tk-sim-traza { 0%, 50% { stroke-dashoffset: 1; } 88%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes tk-sim-area { 0%, 60% { opacity: 0; } 88%, 96% { opacity: 1; } 100% { opacity: 0; } }
.tk-sim__roas {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 100px;
  font: 600 11px/1.4 "Geist Mono", var(--se-fuente-mono);
  color: #03110c;
  background: linear-gradient(115deg, #14c39a, #9df3dc);
  opacity: 0;
  animation: tk-sim-roas var(--tk-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes tk-sim-roas { 0%, 84% { opacity: 0; transform: scale(.6); } 88%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Avisos de venta que saltan */
.tk-sim__aviso {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 7px;
  border-radius: 100px;
  font-size: 11px;
  white-space: nowrap;
  color: #eafff8;
  background: rgba(12, 14, 17, .92);
  box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .45), 0 14px 30px -10px rgba(0, 0, 0, .95), 0 0 24px -8px rgba(20, 195, 154, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
}
.tk-sim__aviso svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; color: #03110c; background: #2fd4a8; stroke-width: 3; }
.tk-sim__aviso--1 { animation: tk-sim-aviso-1 var(--tk-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.tk-sim__aviso--2 { animation: tk-sim-aviso-2 var(--tk-ciclo) cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes tk-sim-aviso-1 { 0%, 58% { opacity: 0; transform: translateY(10px) scale(.9); } 61%, 76% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes tk-sim-aviso-2 { 0%, 72% { opacity: 0; transform: translateY(10px) scale(.9); } 75%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px); } }

/* Con movimiento reducido: la campaña ya montada y las ventas dentro */
@media (prefers-reduced-motion: reduce) {
  .tk-sim__linea, .tk-sim__ok, .tk-sim__ventas, .tk-sim__area, .tk-sim__roas, .tk-sim__activa { opacity: 1 !important; transform: none !important; }
  .tk-sim__giro, .tk-sim__creando, .tk-sim__aviso { display: none; }
  .tk-sim__progreso i { transform: none; }
  .tk-sim__linea-grafica { stroke-dashoffset: 0; }
  .tk-sim__cifra { --tk-ventas: 1284; }
}

/* ============================================================
   6 · Movimiento
   ============================================================ */

/* La vista entra escalonada cada vez que se cambia de sección */
.vista-entra > * { animation: in-sube .7s var(--in-salida, cubic-bezier(.16, .84, .24, 1)) both; }
.vista-entra > :nth-child(2) { animation-delay: .08s; }
.vista-entra > :nth-child(3) { animation-delay: .16s; }
.vista-entra > :nth-child(n+4) { animation-delay: .24s; }
@keyframes in-sube { from { opacity: 0; transform: translateY(18px); } }

/* Dentro del banner, el texto y las piezas llegan por separado */
.vista-entra .banner .pagina__titulo { animation: in-enfoca .9s var(--in-salida, ease) .1s both; }
.vista-entra .banner .pagina__bajada { animation: in-sube .8s var(--in-salida, ease) .2s both; }
.vista-entra .banner__puntos li { animation: in-sube .7s var(--in-salida, ease) both; animation-delay: calc(.3s + var(--n, 0) * .07s); }
.vista-entra .banner__visual .bn-entra { animation: in-pieza 1s var(--in-salida, ease) both; animation-delay: calc(.2s + var(--n, 0) * .12s); }
@keyframes in-enfoca { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } }
@keyframes in-pieza { from { opacity: 0; transform: translateY(40px) scale(.9); } }

/* Las tarjetas que llegan aparecen en cascada */
.in-aparece { animation: in-sube .6s var(--in-salida, ease) both; animation-delay: calc(var(--n, 0) * 55ms); }

/* ============================================================
   7 · Pantallas pequeñas y movimiento reducido
   ============================================================ */

@media (max-width: 1100px) {
  .banner { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); padding: 28px; }
  .banner__visual { transform: scale(.8); transform-origin: right center; }
}
/* Clonar: su ejemplo es ancho; debajo del texto en vez de al lado */
@media (max-width: 1100px) {
  .banner.banner--clonar { grid-template-columns: minmax(0, 1fr); }
  .banner--clonar .banner__visual { transform: scale(.9); transform-origin: left top; height: 204px; }
}
@media (max-width: 760px) {
  .banner--clonar .banner__visual { transform: scale(.56); height: 130px; }
}
@media (max-width: 760px) {
  .banner { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 20px; border-radius: 18px; }
  /* El ejemplo mantiene su lienzo de 440 px y se encoge: el banner recorta lo que sobre */
  .banner__visual { width: 440px; height: 150px; transform: scale(.7); transform-origin: left top; }
  /* En el móvil manda la herramienta: fuera las pastillas, el ejemplo más bajo */
  .banner__puntos { display: none; }
  .banner .pagina__bajada { font-size: 14px; }
}
@media (max-width: 480px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar__acciones { gap: 8px; }
  .banner .pagina__titulo svg { width: 38px; height: 38px; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .banner *, .banner *::before, .banner *::after,
  .banner__fondo::after, .vista-entra > *, .in-aparece { animation: none !important; }
  .bn-pieza { transition: none; }
}

/* Pure Water: el clon es una captura entera, que aparece cuando termina de "montarse" */
.bn-clon__clon-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; animation: bn-clon-monta-2 var(--cl-ciclo) ease infinite; }
.bn-clon__clon { aspect-ratio: 16 / 10; }
@media (prefers-reduced-motion: reduce) { .bn-clon__clon-img { opacity: 1 !important; } }
.bn-pp__web--publica .bn-pp__captura { aspect-ratio: 16 / 5.4; }

/* ============================================================
   El menú de la cuenta (arriba a la derecha)
   ============================================================ */

.usuario-caja { position: relative; }
.usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  border-radius: 100px;
  color: var(--se-tinta);
  transition: background .25s ease, box-shadow .25s ease;
}
.usuario:hover, .usuario[aria-expanded="true"] { background: var(--se-papel-hundido); }
[data-tema="oscuro"] .usuario:hover, [data-tema="oscuro"] .usuario[aria-expanded="true"] { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.usuario:focus-visible { outline: 2px solid #6ee6c6; outline-offset: 2px; }
.usuario__flecha { width: 15px; height: 15px; color: var(--se-tinta-3); transition: transform .3s cubic-bezier(.16, .84, .24, 1); }
.usuario[aria-expanded="true"] .usuario__flecha { transform: rotate(180deg); }

.usuario-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 270px;
  padding: 8px;
  border-radius: 16px;
  color: var(--se-lateral-tinta);
  background: var(--se-flotante-fondo);
  box-shadow: var(--se-flotante-sombra);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .2s ease, transform .3s cubic-bezier(.16, .84, .24, 1), visibility 0s .3s;
}
.usuario-menu.es-abierto { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s cubic-bezier(.16, .84, .24, 1), visibility 0s; }

.usuario-menu__cabeza { display: flex; align-items: center; gap: 11px; padding: 8px 8px 12px; }
.usuario-menu__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  font-weight: 700;
  color: #03110c;
  background: linear-gradient(145deg, #2fd4a8, #0e8f6e);
  box-shadow: 0 0 0 2px #0c0d10, 0 0 0 3px rgba(47, 212, 168, .45);
}
.usuario-menu__quien { display: grid; gap: 2px; min-width: 0; }
.usuario-menu__quien b { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.usuario-menu__quien small { overflow: hidden; font-size: 12px; color: var(--se-lateral-tinta-3); white-space: nowrap; text-overflow: ellipsis; }

.usuario-menu__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 4px 6px;
  padding: 9px 12px;
  border-radius: 11px;
  gap: 10px;
  font-size: 12px;
  color: var(--se-lateral-tinta-3);
  background: rgba(20, 195, 154, .08);
  box-shadow: inset 0 0 0 1px rgba(47, 212, 168, .2);
}
.usuario-menu__plan b { font-size: 12.5px; font-weight: 600; color: var(--se-verde-tinta); text-align: right; }

.usuario-menu__lista { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--se-lateral-linea); }
.usuario-menu .nav-item { color: var(--se-lateral-tinta-2); }
.usuario-menu .nav-item:hover, .usuario-menu .nav-item:focus-visible { outline: none; background: var(--se-lateral-hover); color: var(--se-lateral-tinta); }
html .usuario-menu .nav-item.es-activo:not(.nav-item--hijo) { background: rgba(20, 195, 154, .12); color: var(--se-lateral-tinta); box-shadow: none; text-shadow: none; }
html .usuario-menu .nav-item.es-activo:not(.nav-item--hijo) .nav-item__icono { color: #2fd4a8; }
.usuario-menu .nav-item.es-activo .nav-item__icono { color: #2fd4a8; }
.usuario-menu .nav-item.es-activo::before { display: none; }
.usuario-menu .nav-item--admin { margin-bottom: 0; color: #e6b34a; }
.usuario-menu .nav-item--admin::after { display: none; }
.usuario-menu .nav-item[data-ruta="salir"] { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .07); border-radius: 0 0 10px 10px; }
.usuario-menu .nav-item[data-ruta="salir"]:hover { color: #ff7b8f; background: rgba(255, 123, 143, .08); }

@media (prefers-reduced-motion: reduce) { .usuario-menu, .usuario__flecha { transition: none; } }

/* ---------- El banner del camino, quieto en el paso del cliente ---------- */
/* Tras la primera pasada: sin animaciones de ciclo y todo en su estado final. */
.bn-pp.es-fijo .bn-pp__escena,
.bn-pp.es-fijo .bn-pp__escena *,
.bn-pp.es-fijo .bn-pp__paso b,
.bn-pp.es-fijo .bn-pp__paso small,
.bn-pp.es-fijo .bn-pp__via i { animation: none !important; }
.bn-pp.es-fijo .bn-pp__orbe { animation: bn-gira 3s linear infinite !important; }
.bn-pp.es-fijo .bn-pp__escena { opacity: 0; transform: none; transition: opacity .7s ease; }
.bn-pp.es-fijo .bn-pp__paso b { transition: background .5s ease, color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.bn-pp.es-fijo .bn-pp__via i { transition: transform .9s cubic-bezier(.16, .84, .24, 1); }
.bn-pp.es-fijo :is(.bn-pp__burbuja, .bn-pp__producto, .bn-pp__flecha, .bn-pp__ad--2, .bn-pp__movil, .bn-pp__linea, .bn-pp__aviso) { opacity: 1; transform: none; }
.bn-pp.es-fijo .bn-pp__web--clon { opacity: 1; transform: rotate(3deg); }
/* Quieto en «Publica» es que aún no la ha publicado: el botón espera, sin «En línea» */
.bn-pp.es-fijo .bn-pp__publicar em { opacity: 1; transform: none; animation: bn-pp-espera 2s ease-in-out infinite !important; }
.bn-pp.es-fijo .bn-pp__publicar strong, .bn-pp.es-fijo .bn-pp__online { opacity: 0; }
@keyframes bn-pp-espera { 50% { box-shadow: 0 0 0 5px rgba(255, 79, 139, .25), 0 0 16px rgba(255, 79, 139, .6); } }
.bn-pp.es-fijo .bn-pp__cifra { --bn-pp-ventas: 1284; }
.bn-pp.es-fijo .bn-pp__barras i { transform: none; }
/* El paso actual sigue latiendo, para que se vea dónde estás */
.bn-pp.es-fijo .bn-pp__paso b { position: relative; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__escena--1 { opacity: 1; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__via i { transform: scaleX(0.000); }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--1 b { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--1 small { color: #ffffff; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--2 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--2 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--3 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--3 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--4 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--4 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--5 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--5 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--6 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="1"] .bn-pp__paso--6 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__escena--2 { opacity: 1; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__via i { transform: scaleX(0.200); }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--1 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--1 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--2 b { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--2 small { color: #ffffff; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--3 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--3 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--4 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--4 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--5 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--5 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--6 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="2"] .bn-pp__paso--6 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__escena--3 { opacity: 1; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__via i { transform: scaleX(0.400); }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--1 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--1 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--2 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--2 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--3 b { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--3 small { color: #ffffff; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--4 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--4 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--5 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--5 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--6 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="3"] .bn-pp__paso--6 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__escena--4 { opacity: 1; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__via i { transform: scaleX(0.600); }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--1 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--1 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--2 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--2 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--3 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--3 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--4 b { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--4 small { color: #ffffff; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--5 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--5 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--6 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="4"] .bn-pp__paso--6 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__escena--5 { opacity: 1; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__via i { transform: scaleX(0.800); }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--1 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--1 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--2 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--2 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--3 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--3 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--4 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--4 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--5 b { background: linear-gradient(135deg, #13707f, #14c39a 60%, #9df3dc); color: #fff; box-shadow: 0 0 0 5px rgba(20,195,154,.18), 0 0 22px rgba(20,195,154,.85); transform: scale(1.15); }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--5 small { color: #ffffff; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--6 b { background: #0b0d0f; color: #8c8c97; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); transform: none; }
.bn-pp.es-fijo[data-paso="5"] .bn-pp__paso--6 small { color: #6f7772; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__escena--6 { opacity: 1; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__via i { transform: scaleX(1.000); }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--1 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--1 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--2 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--2 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--3 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--3 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--4 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--4 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--5 b { background: #2fd4a8; color: #03110c; box-shadow: none; transform: none; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--5 small { color: #9df3dc; }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--6 b { background: linear-gradient(135deg, #c8912c, #ffe0a0); color: #2b1d02; box-shadow: 0 0 0 5px rgba(230,179,74,.18), 0 0 22px rgba(230,179,74,.85); transform: scale(1.15); }
.bn-pp.es-fijo[data-paso="6"] .bn-pp__paso--6 small { color: #ffffff; }