/* Las piezas del panel de «Cómo funciona».
   Lienzo de 720×450 escalado con --u, igual que en el diseño.
   Cada elemento entra con su propio --retraso cuando la pieza se activa. */

/* La pieza se dibuja dentro de la escena con 24 px de aire alrededor,
   como el panel del componente. */
.como__escena {
  container-type: size;
  padding: 24px;
  box-sizing: border-box;
}

.como__pieza {
  position: absolute;
  inset: 24px;
}

.pz {
  --u: min(calc(100cqw / 720), calc(100cqh / 450));
  /* Los textos van en píxeles fijos, no escalados con el lienzo: es lo que
     hace el componente (tv(n) devuelve n px, y n*0,9 en móvil). */
  --t16: 16px;
  --t12: 12px;
  --t11: 11px;
  --t10: 10px;
  --t9: 9px;
  --t8: 8px;
  --superficie: #f3f4f9;
  --superficie-2: #e7eaf4;
  --borde: #cfd4e7;

  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fb);
}

/* Entrada escalonada: nada se mueve si el usuario no quiere movimiento. */
.pz [style*="--retraso"] {
  opacity: 0;
  transform: translateY(calc(8 * var(--u)));
}

.como__pieza[data-activa] .pz [style*="--retraso"] {
  animation: pzEntra 0.45s cubic-bezier(0.22, 0.61, 0.25, 1) var(--retraso) both;
}

/* Al cerrarse el bucle, la pieza se funde y vuelve a empezar. */
.pz--site,
.pz--propuesta {
  animation: pzFunde 0.4s ease;
}

@keyframes pzFunde {
  0%,
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pzEntra {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pz [style*="--retraso"] {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* Móvil: la maqueta se ve entera, como una miniatura fiel de la pantalla
   real. Los textos iban en píxeles fijos y, con el lienzo reducido a menos
   de la mitad, ocupaban el doble de lo que les toca: las líneas se partían,
   las pastillas se montaban unas sobre otras y la maqueta salía
   descuadrada. Aquí el texto se mide con el lienzo, igual que todo lo
   demás, así que lo que se ve es exactamente la composición del diseño a
   menor tamaño. */
@media (max-width: 767px) {
  .pz {
    --t16: calc(16 * var(--u));
    --t12: calc(12 * var(--u));
    --t11: calc(11 * var(--u));
    --t10: calc(10 * var(--u));
    --t9: calc(9 * var(--u));
    --t8: calc(8 * var(--u));
  }
}

/* ---- Ventana de navegador ---- */

/* ---- Tu web completa ---- */

.pz--site {
  --teal: #0f6c8c;
}

.pz__ventana {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(16 * var(--u));
  right: calc(132 * var(--u));
  bottom: calc(16 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pz__chrome {
  height: calc(36 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  padding: 0 calc(14 * var(--u));
  background: var(--superficie-2);
}

.pz__punto {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--borde);
  flex: none;
}

.pz__url {
  flex: 1;
  max-width: calc(300 * var(--u));
  margin: 0 auto;
  height: calc(24 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

/* La cabecera empieza blanca con un hueco por logotipo y a los 0,8 s se
   tiñe con la marca. */
.pz__marca {
  height: calc(46 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(16 * var(--u));
  background: #fff;
  border-bottom: 1px solid var(--borde);
}

.pz__marca-pila {
  display: grid;
  align-items: center;
}

.pz__marca-pila > * {
  grid-area: 1 / 1;
}

.pz__marca-logo {
  width: calc(110 * var(--u));
  height: calc(16 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--superficie-2);
}

.pz__marca-nombre {
  opacity: 0;
  justify-self: start;
  font: 600 var(--t12) var(--fd);
  letter-spacing: -0.01em;
  color: #fff;
}

.pz__marca-nav {
  width: calc(120 * var(--u));
  height: calc(10 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--superficie-2);
  margin-left: auto;
}

.como__pieza[data-activa] .pz__marca {
  animation: pzMarca 0.01s linear 0.8s forwards;
}

.como__pieza[data-activa] .pz__marca-logo {
  animation: pzSale 0.35s ease 0.8s forwards;
}

.como__pieza[data-activa] .pz__marca-nombre {
  animation: pzLlega 0.35s ease 0.8s forwards;
}

.como__pieza[data-activa] .pz__marca-nav {
  animation: pzNav 0.01s linear 0.8s forwards;
}

@keyframes pzMarca {
  to { background: var(--teal); border-bottom-color: var(--teal); }
}

@keyframes pzNav {
  to { background: rgba(255, 255, 255, 0.35); }
}

@keyframes pzSale {
  to { opacity: 0; }
}

@keyframes pzLlega {
  to { opacity: 1; }
}

.pz__portada {
  position: relative;
  height: calc(118 * var(--u));
  flex: none;
  margin: calc(12 * var(--u)) calc(14 * var(--u)) 0;
  border-radius: calc(8 * var(--u));
  overflow: hidden;
  background: var(--teal);
}

.pz__portada-velo {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 27, 0.38);
}

.pz__portada-texto {
  position: absolute;
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  bottom: calc(14 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.pz__portada-titulo {
  font: 600 var(--t16) / 1.12 var(--fd);
  letter-spacing: -0.01em;
  color: #fff;
}

.pz__boton {
  align-self: flex-start;
  height: calc(24 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--teal);
  color: #fff;
  font: 600 var(--t10) / calc(24 * var(--u)) var(--fb);
}

.pz__cuerpo {
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  flex: 1;
  min-height: 0;
}

.pz__epigrafe {
  font: 600 var(--t12) var(--fb);
  color: #03081b;
}

.pz__salidas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--u));
  flex: 1;
  min-height: 0;
}

.pz__salida {
  position: relative;
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--borde);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pz__salida-foto {
  height: calc(46 * var(--u));
  flex: none;
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pz__salida-foto svg,
.pz__movil-foto svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}

.pz__salida-cuerpo {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding: calc(8 * var(--u));
  flex: 1;
  min-height: 0;
}

.pz__salida-sitio {
  align-self: flex-start;
  font: 400 var(--t10) / 1 var(--fb);
  color: var(--teal);
  background: var(--superficie-2);
  border-radius: calc(4 * var(--u));
  padding: calc(3 * var(--u)) calc(6 * var(--u));
}

.pz__salida-titulo {
  font: 600 var(--t12) / 1.2 var(--fb);
  color: #03081b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pz__salida-dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pz__salida-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--u));
  margin-top: auto;
}

.pz__salida-precio {
  font: 400 var(--t10) var(--fb);
  color: #03081b;
}

.pz__salida-boton {
  height: calc(24 * var(--u));
  padding: 0 calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--teal);
  color: #fff;
  font: 600 var(--t10) / calc(24 * var(--u)) var(--fb);
  white-space: nowrap;
}

/* ---- El móvil, que entra por la derecha ---- */

.pz__movil {
  position: absolute;
  right: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  width: calc(188 * var(--u));
  height: calc(360 * var(--u));
  border-radius: calc(28 * var(--u));
  background: #fff;
  border: 3px solid #1a1d29;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(3, 8, 27, 0.16);
}

.pz__movil-muesca {
  position: absolute;
  top: calc(6 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(44 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 999px;
  background: #1a1d29;
  z-index: 2;
}

.pz__movil-pantalla {
  flex: 1;
  border-radius: inherit;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.pz__movil-cabecera {
  height: calc(32 * var(--u));
  flex: none;
  background: var(--teal);
  display: flex;
  align-items: center;
  padding: 0 calc(10 * var(--u));
  font: 500 var(--t11) var(--fd);
  color: #fff;
}

.pz__movil-portada {
  position: relative;
  height: calc(104 * var(--u));
  flex: none;
  background: var(--teal);
  display: block;
}

.pz__movil-velo {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 27, 0.15);
}

.pz__movil-titulo {
  position: absolute;
  left: calc(10 * var(--u));
  right: calc(10 * var(--u));
  bottom: calc(9 * var(--u));
  font: 600 var(--t12) / 1.15 var(--fd);
  color: #fff;
}

.pz__movil-cuerpo {
  padding: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  flex: 1;
}

.pz__movil-fila {
  display: flex;
  gap: calc(8 * var(--u));
  align-items: center;
}

.pz__movil-foto {
  width: calc(40 * var(--u));
  height: calc(34 * var(--u));
  flex: none;
  border-radius: calc(5 * var(--u));
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pz__movil-texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.pz__movil-sitio {
  font: 400 var(--t10) / 1.15 var(--fb);
  color: #03081b;
}

.pz__movil-precio {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pz__movil-boton {
  margin-top: auto;
  height: calc(24 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--teal);
  color: #fff;
  font: 600 var(--t10) / calc(24 * var(--u)) var(--fb);
  text-align: center;
}

/* ---- La pastilla de Roshi ---- */

.pz__chip {
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(4 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(32 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(5 * var(--u));
  border-radius: 999px;
  background: #03081b;
  color: #fff;
  font: 500 var(--t10) var(--fb);
  white-space: nowrap;
  z-index: 3;
  opacity: 0;
}

.como__pieza[data-activa] .pz__chip {
  animation: pzEntraChip 0.4s ease 0.8s both;
}

@keyframes pzEntraChip {
  to { opacity: 1; }
}

.pz__chip-aura {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 22%;
  flex: none;
  background: url("/assets/img/roshi-aura.3d8a0675.png") center / cover no-repeat, #1c2433;
}

/* El texto cambia cuando la web ya está montada. Los dos van apilados,
   así que la pastilla no cambia de ancho al cambiar el texto. */
.pz__chip-textos {
  display: grid;
  align-items: center;
}

.pz__chip-textos > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.pz__chip-texto--despues {
  opacity: 0;
}

.como__pieza[data-activa] .pz__chip-texto--antes {
  animation: pzSale 0.3s ease 4s forwards;
}

.como__pieza[data-activa] .pz__chip-texto--despues {
  animation: pzLlega 0.3s ease 4s forwards;
}

/* ---- Pieza: catálogo ----

   Bucle de 9 s, el mismo del componente. Los porcentajes salen de los
   segundos del diseño divididos entre 9:

     0,3 / 0,6 / 0,9 s   entran las tres líneas del catálogo
     1,3 s               entra la tarjeta de la plantilla
     1,6 → 1,8 s         aparece el cursor y va hasta el botón
     2,7 → 2,95 s        lo pulsa
     3,2 / 4,0 / 4,8 s   cada servicio vuela del catálogo a la ficha
     3,8 / 4,6 / 5,4 s   y se queda puesto
     6,0 s               sale el precio
     8,55 s              se funde para empezar de nuevo              */

.pzc {
  position: absolute;
  inset: 0;
  color: #03081b;
}

.como__pieza[data-activa] .pzc {
  animation: pzcCiclo 9s linear infinite;
}

@keyframes pzcCiclo {
  0%,
  94.9% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

/* La columna del catálogo */

.pzc__izquierda {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(16 * var(--u));
  width: calc(322 * var(--u));
  bottom: calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.pzc__rotulo {
  font: 600 var(--t12) var(--fb);
}

.pzc__fila {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u));
  background: #fff;
  border-radius: calc(10 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  opacity: 0;
}

.pzc__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
}

.pzc__nombre {
  font: 600 var(--t12) / 1.2 var(--fb);
}

.pzc__dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzc__icono {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  flex: none;
  border-radius: calc(8 * var(--u));
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzc__icono svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}

.pzc__plantilla {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: auto;
  padding: calc(14 * var(--u));
  background: #fff;
  border-radius: calc(10 * var(--u));
  border: 1px dashed var(--borde);
  opacity: 0;
}

.pzc__usar {
  flex: none;
  height: calc(24 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #03081b;
  color: #fff;
  font: 600 var(--t10) / calc(24 * var(--u)) var(--fb);
}

/* La ficha de la experiencia */

.pzc__ficha {
  position: absolute;
  left: calc(354 * var(--u));
  top: calc(16 * var(--u));
  right: calc(16 * var(--u));
  bottom: calc(16 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pzc__portada {
  height: calc(112 * var(--u));
  flex: none;
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #03081b;
}

.pzc__portada svg {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}

.pzc__cuerpo {
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  flex: 1;
  min-height: 0;
}

.pzc__antetitulo {
  font: 400 var(--t9) var(--fb);
  letter-spacing: 0.02em;
  color: #4b5262;
}

.pzc__experiencia {
  font: 600 var(--t12) / 1.15 var(--fd);
  letter-spacing: -0.01em;
}

.pzc__servicios {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
}

.pzc__servicio {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--superficie-2);
  opacity: 0;
}

.pzc__visto {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex: none;
  border-radius: 50%;
  background: #03081b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzc__visto svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

.pzc__servicio-nombre {
  flex: 1;
  min-width: 0;
  font: 500 var(--t11) var(--fb);
}

.pzc__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  margin-top: auto;
  border-top: 1px solid var(--borde);
  padding-top: calc(10 * var(--u));
  opacity: 0;
}

.pzc__total-etiqueta {
  font: 500 var(--t11) var(--fb);
  color: #4b5262;
}

.pzc__total-valor {
  font: 700 var(--t16) var(--fb);
}

/* Los servicios que vuelan de una columna a la otra */

.pzc__volador {
  position: absolute;
  left: calc(90 * var(--u));
  top: calc((52 + var(--orden) * 86) * var(--u));
  width: calc(240 * var(--u));
  height: calc(40 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(12 * var(--u));
  box-sizing: border-box;
  background: #fff;
  border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(3, 8, 27, 0.18);
  font: 600 var(--t12) var(--fb);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.pzc__cursor {
  position: absolute;
  left: calc(560 * var(--u));
  top: calc(420 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.pzc__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* El reloj */

.como__pieza[data-activa] .pzc__fila:nth-child(2) {
  animation: pzcFila1 9s linear infinite;
}

.como__pieza[data-activa] .pzc__fila:nth-child(3) {
  animation: pzcFila2 9s linear infinite;
}

.como__pieza[data-activa] .pzc__fila:nth-child(4) {
  animation: pzcFila3 9s linear infinite;
}

@keyframes pzcFila1 {
  0%,
  3.3% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  6.6%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzcFila2 {
  0%,
  6.6% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  10%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzcFila3 {
  0%,
  10% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  13.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzc__plantilla {
  animation: pzcPlantilla 9s linear infinite;
}

@keyframes pzcPlantilla {
  0%,
  14.4% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  17.7%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* El botón se hunde cuando el cursor lo pulsa, entre 2,7 y 2,95 s. */
.como__pieza[data-activa] .pzc__usar {
  animation: pzcPulsa 9s linear infinite;
}

@keyframes pzcPulsa {
  0%,
  29.9% {
    transform: none;
  }
  30%,
  32.7% {
    transform: scale(0.94);
  }
  32.8%,
  100% {
    transform: none;
  }
}

/* El cursor: aparece a 1,6 s, llega al botón a 1,8 s y se va a 3,4 s. */
.como__pieza[data-activa] .pzc__cursor {
  animation: pzcCursor 9s linear infinite;
}

@keyframes pzcCursor {
  0%,
  17.7% {
    opacity: 0;
    left: calc(560 * var(--u));
    top: calc(420 * var(--u));
    transform: none;
  }
  17.8%,
  20% {
    opacity: 1;
    left: calc(560 * var(--u));
    top: calc(420 * var(--u));
    transform: none;
  }
  27.8% {
    opacity: 1;
    left: calc(290 * var(--u));
    top: calc(394 * var(--u));
    transform: none;
  }
  30%,
  32.7% {
    opacity: 1;
    left: calc(290 * var(--u));
    top: calc(394 * var(--u));
    transform: scale(0.88);
  }
  32.8%,
  37.7% {
    opacity: 1;
    left: calc(290 * var(--u));
    top: calc(394 * var(--u));
    transform: none;
  }
  37.8% {
    opacity: 0;
    left: calc(320 * var(--u));
    top: calc(430 * var(--u));
    transform: none;
  }
  100% {
    opacity: 0;
    left: calc(320 * var(--u));
    top: calc(430 * var(--u));
    transform: none;
  }
}

/* Los voladores: cada uno sale 0,8 s después del anterior. */
.como__pieza[data-activa] .pzc__volador:nth-of-type(1) {
  animation: pzcVuela1 9s linear infinite;
}

.como__pieza[data-activa] .pzc__volador:nth-of-type(2) {
  animation: pzcVuela2 9s linear infinite;
}

.como__pieza[data-activa] .pzc__volador:nth-of-type(3) {
  animation: pzcVuela3 9s linear infinite;
}

@keyframes pzcVuela1 {
  0%,
  35.5% {
    opacity: 0;
    left: calc(90 * var(--u));
    top: calc(52 * var(--u));
  }
  35.6%,
  36.1% {
    opacity: 1;
    left: calc(90 * var(--u));
    top: calc(52 * var(--u));
  }
  42.7% {
    opacity: 1;
    left: calc(370 * var(--u));
    top: calc(210 * var(--u));
  }
  43.9%,
  100% {
    opacity: 0;
    left: calc(370 * var(--u));
    top: calc(210 * var(--u));
  }
}

@keyframes pzcVuela2 {
  0%,
  44.3% {
    opacity: 0;
    left: calc(90 * var(--u));
    top: calc(138 * var(--u));
  }
  44.4%,
  45% {
    opacity: 1;
    left: calc(90 * var(--u));
    top: calc(138 * var(--u));
  }
  51.6% {
    opacity: 1;
    left: calc(370 * var(--u));
    top: calc(255 * var(--u));
  }
  52.8%,
  100% {
    opacity: 0;
    left: calc(370 * var(--u));
    top: calc(255 * var(--u));
  }
}

@keyframes pzcVuela3 {
  0%,
  53.2% {
    opacity: 0;
    left: calc(90 * var(--u));
    top: calc(224 * var(--u));
  }
  53.3%,
  53.9% {
    opacity: 1;
    left: calc(90 * var(--u));
    top: calc(224 * var(--u));
  }
  60.5% {
    opacity: 1;
    left: calc(370 * var(--u));
    top: calc(300 * var(--u));
  }
  61.7%,
  100% {
    opacity: 0;
    left: calc(370 * var(--u));
    top: calc(300 * var(--u));
  }
}

/* Cada servicio se queda puesto en la ficha justo cuando acaba su vuelo. */
.como__pieza[data-activa] .pzc__servicio:nth-child(1) {
  animation: pzcPuesto1 9s linear infinite;
}

.como__pieza[data-activa] .pzc__servicio:nth-child(2) {
  animation: pzcPuesto2 9s linear infinite;
}

.como__pieza[data-activa] .pzc__servicio:nth-child(3) {
  animation: pzcPuesto3 9s linear infinite;
}

@keyframes pzcPuesto1 {
  0%,
  42.2% {
    opacity: 0;
    transform: scale(0.96);
  }
  45.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzcPuesto2 {
  0%,
  51.1% {
    opacity: 0;
    transform: scale(0.96);
  }
  54.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzcPuesto3 {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.96);
  }
  63.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzc__total {
  animation: pzcTotal 9s linear infinite;
}

@keyframes pzcTotal {
  0%,
  66.6% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  70%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzc__fila,
  .pzc__plantilla,
  .pzc__servicio,
  .pzc__total {
    opacity: 1;
  }

  .como__pieza[data-activa] .pzc,
  .como__pieza[data-activa] .pzc__fila,
  .como__pieza[data-activa] .pzc__plantilla,
  .como__pieza[data-activa] .pzc__usar,
  .como__pieza[data-activa] .pzc__cursor,
  .como__pieza[data-activa] .pzc__volador,
  .como__pieza[data-activa] .pzc__servicio,
  .como__pieza[data-activa] .pzc__total {
    animation: none;
  }

  .pzc__cursor,
  .pzc__volador {
    opacity: 0;
  }
}

/* ---- Pieza: propuesta ---- */

/* ---- Propuesta en minutos ---- */

.pz--propuesta {
  --azul: #1d4e89;
}

.pz__movil--chat {
  left: calc(16 * var(--u));
  top: calc(8 * var(--u));
  right: auto;
  bottom: auto;
  width: calc(262 * var(--u));
  height: calc(434 * var(--u));
  border-radius: calc(30 * var(--u));
}

.pz__movil-pantalla--chat {
  background: var(--superficie-2);
}

.pz__chat-cabecera {
  height: calc(58 * var(--u));
  flex: none;
  background: #fff;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) 0;
}

.pz__chat-avatar {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: 50%;
  background: var(--superficie-2);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5262;
}

.pz__chat-avatar svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}

.pz__chat-quien {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pz__chat-nombre {
  font: 500 var(--t11) var(--fb);
  color: #03081b;
}

.pz__chat-estado {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pz__chat-hilo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(7 * var(--u));
  padding: calc(10 * var(--u));
  /* Si la conversación no cabe, se recorta por arriba en vez de montarse
     sobre la cabecera del chat. */
  overflow: hidden;
}

.pz__burbuja {
  align-self: flex-start;
  max-width: 88%;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: 2px calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: #fff;
  box-shadow: 0 1px 1px rgba(3, 8, 27, 0.08);
  font: 500 var(--t11) / 1.35 var(--fb);
  color: #03081b;
}

.pz__burbuja--mia {
  align-self: flex-end;
  border-radius: calc(12 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: #d9f6d0;
}

.pz__hora {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pz__tarjeta-enlace {
  border-radius: calc(7 * var(--u));
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.pz__tarjeta-foto {
  height: calc(56 * var(--u));
  background: var(--superficie-2) url("/assets/img/seg-promotores-1600.5aa4987d.jpg") center / cover no-repeat;
}

.pz__tarjeta-texto {
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}

.pz__tarjeta-titulo {
  font: 500 var(--t11) / 1.2 var(--fb);
  color: #03081b;
}

.pz__tarjeta-url {
  font: 400 var(--t10) / 1.25 var(--fb);
  color: #4b5262;
  word-break: break-all;
}

/* Los tres puntos de "está escribiendo" */
.pz__escribiendo {
  opacity: 0;
  align-self: flex-start;
  flex: none;
  display: flex;
  gap: calc(5 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: 2px calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: #fff;
}

.pz__escribiendo > span {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--borde);
  animation: pzPunto 1s infinite;
}

.como__pieza[data-activa] .pz__escribiendo {
  animation: pzEntra 0.3s ease 7.3s both, pzSale 0.2s ease 8s forwards;
}

.pz__escribiendo > span:nth-child(2) { animation-delay: 0.15s; }
.pz__escribiendo > span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pzPunto {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* La ficha de "preparando" y la portada ocupan el mismo sitio: la primera
   se va cuando entra la segunda. */
.pz__preparando,
.pz__portada-card {
  position: absolute;
  left: calc(294 * var(--u));
  right: calc(16 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  box-sizing: border-box;
}

.pz__preparando {
  top: calc(40 * var(--u));
  padding: calc(24 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

/* A los 5 s se retira para dejar sitio a la propuesta terminada. */
.como__pieza[data-activa] .pz__preparando {
  animation: pzEntra 0.45s cubic-bezier(0.22, 0.61, 0.25, 1) var(--retraso) both,
    pzRetira 0.45s cubic-bezier(0.22, 0.61, 0.25, 1) 5s forwards;
}

@keyframes pzRetira {
  to { opacity: 0; transform: scale(0.97); }
}

.pz__preparando-quien {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}

.pz__preparando-cara {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  flex: none;
  border-radius: 50%;
  background: #fff url("/assets/img/busto-propuestas.313fa9c3.jpg") 50% 42% / cover no-repeat;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--borde);
}

.pz__preparando-aura {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 22%;
  flex: none;
  background: url("/assets/img/roshi-aura.3d8a0675.png") center / cover no-repeat, #1c2433;
  margin-left: calc(-16 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
}

.pz__preparando-texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}

.pz__preparando-nombre {
  font: 600 var(--t12) var(--fb);
  color: #03081b;
}

.pz__preparando-estado {
  font: 500 var(--t11) var(--fb);
  color: #4b5262;
}

.pz__preparando-lista {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  border-top: 1px solid var(--borde);
  padding-top: calc(16 * var(--u));
}

.pz__preparando-fila {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}

.pz__preparando-icono {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: none;
  border-radius: calc(10 * var(--u));
  background: var(--superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #03081b;
}

.pz__preparando-icono svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.pz__preparando-nombre-item {
  font: 500 var(--t12) var(--fb);
  color: #03081b;
}

.pz__preparando-visto {
  margin-left: auto;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex: none;
  color: #1d8a4e;
}

.pz__preparando-visto svg {
  width: 100%;
  height: 100%;
}

.pz__portada-card {
  top: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pz__portada-card-marca {
  height: calc(42 * var(--u));
  flex: none;
  background: var(--azul);
  display: flex;
  align-items: center;
  padding: 0 calc(16 * var(--u));
  font: 600 var(--t12) var(--fd);
  color: #fff;
}

.pz__portada-card-foto {
  flex: 1;
  min-height: calc(120 * var(--u));
  background: var(--superficie-2) url("/assets/img/seg-promotores-1600.5aa4987d.jpg") center / cover no-repeat;
}

.pz__portada-card-cuerpo {
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  flex: none;
}

.pz__portada-card-titulo {
  font: 600 var(--t12) / 1.15 var(--fd);
  letter-spacing: -0.01em;
  color: #03081b;
}

.pz__portada-card-fecha {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pz__portada-card-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  margin-top: calc(4 * var(--u));
}

.pz__portada-card-precio {
  font: 400 var(--t10) var(--fb);
  color: #03081b;
}

.pz__portada-card-boton {
  height: calc(24 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--azul);
  color: #fff;
  font: 600 var(--t10) / calc(24 * var(--u)) var(--fb);
}

/* ---- Pieza: cotizador ----

   Bucle de 10 s, el del componente:

     0,3 / 0,8 / 1,3 / 1,8 s   entran las cuatro líneas del desglose
     2,3 / 2,5 / 2,7 s         servicios fijos y columna de personas
     2,6 → 2,8 s               el cursor sube al botón de más
     3,1 / 4,9 s               lo pulsa; las personas van a 20 y a 30
     3,8 / 5,6 s               sube el beneficio
     4,4 / 6,2 s               se marca el coste fijo, que no cambia
     7,2 s                     sale el punto de equilibrio
     9,55 s                    se funde para empezar de nuevo              */

.pzq {
  position: absolute;
  inset: 0;
  color: #03081b;
}

.como__pieza[data-activa] .pzq {
  animation: pzqCiclo 10s linear infinite;
}

@keyframes pzqCiclo {
  0%,
  95.4% {
    opacity: 1;
  }
  95.5%,
  100% {
    opacity: 0;
  }
}

.pzq__tarjeta {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  padding: calc(18 * var(--u)) calc(26 * var(--u));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-rows: auto 1fr;
  column-gap: calc(28 * var(--u));
  row-gap: calc(14 * var(--u));
}

/* El desglose */

.pzq__desglose {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-width: 0;
}

.pzq__encabezado {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.pzq__rotulo {
  font: 400 var(--t9) var(--fb);
  letter-spacing: 0.02em;
  color: #4b5262;
}

.pzq__rotulo--fijos {
  margin-top: calc(4 * var(--u));
  opacity: 0;
}

.pzq__paquete {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.pzq__paquete-icono {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzq__paquete-icono svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.pzq__paquete-nombre {
  font: 600 var(--t12) / 1.2 var(--fd);
  letter-spacing: -0.01em;
}

.pzq__lineas {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--borde);
}

.pzq__linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(10 * var(--u)) 0;
  border-bottom: 1px solid var(--borde);
  opacity: 0;
}

.pzq__linea-etiqueta {
  font: 500 var(--t11) var(--fb);
  color: #4b5262;
}

.pzq__linea-valor {
  font: 400 var(--t10) var(--fb);
}

/* El precio y el margen van en negrita, como en el componente. */
.pzq__linea:nth-child(3) .pzq__linea-valor,
.pzq__linea:nth-child(4) .pzq__linea-valor {
  font-weight: 600;
}

.pzq__fijo {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--superficie-2);
  opacity: 0;
}

.pzq__fijo-nombre {
  font: 500 var(--t11) var(--fb);
}

.pzq__fijo-marca {
  font: 400 var(--t10) var(--fb);
  border: 1px solid var(--borde);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
}

.pzq__fijo-hueco {
  flex: 1;
}

.pzq__fijo-valor {
  font: 600 var(--t10) var(--fb);
  padding: 2px calc(6 * var(--u));
  border-radius: calc(4 * var(--u));
  background: transparent;
}

/* La columna de personas */

.pzq__personas {
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(18 * var(--u));
  min-width: 0;
  opacity: 0;
}

.pzq__mandos {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.pzq__contador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}

.pzq__botones {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.pzq__menos,
.pzq__mas {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(8 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--t12) var(--fb);
}

.pzq__menos {
  border: 1px solid var(--borde);
  color: #4b5262;
}

.pzq__mas {
  border: 1px solid #03081b;
  background: #fff;
}

.pzq__cuenta {
  min-width: calc(40 * var(--u));
  text-align: center;
  font: 700 var(--t16) var(--fb);
}

.pzq__beneficio {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  border-top: 1px solid var(--borde);
  padding-top: calc(12 * var(--u));
}

.pzq__beneficio-valor {
  font: 700 var(--t16) / 1.05 var(--fd);
  letter-spacing: -0.02em;
}

.pzq__equilibrio {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  border-top: 1px solid var(--borde);
  padding-top: calc(12 * var(--u));
  opacity: 0;
}

.pzq__equilibrio-texto {
  font: 500 var(--t11) var(--fb);
}

.pzq__barra {
  position: relative;
  height: calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--superficie-2);
  overflow: hidden;
}

.pzq__barra-verde {
  position: absolute;
  left: 24.1%;
  right: 0;
  top: 0;
  bottom: 0;
  background: #2f9e6e;
}

.pzq__escala {
  position: relative;
  height: calc(18 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzq__escala-min {
  position: absolute;
  left: 0;
}

.pzq__escala-punto {
  position: absolute;
  left: 24.1%;
  transform: translateX(-50%);
  color: #03081b;
  font-weight: 600;
}

.pzq__escala-max {
  position: absolute;
  right: 0;
}

.pzq__cursor {
  position: absolute;
  left: calc(640 * var(--u));
  top: calc(420 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.pzq__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* El reloj */

.como__pieza[data-activa] .pzq__linea:nth-child(1) {
  animation: pzqLinea1 10s linear infinite;
}
.como__pieza[data-activa] .pzq__linea:nth-child(2) {
  animation: pzqLinea2 10s linear infinite;
}
.como__pieza[data-activa] .pzq__linea:nth-child(3) {
  animation: pzqLinea3 10s linear infinite;
}
.como__pieza[data-activa] .pzq__linea:nth-child(4) {
  animation: pzqLinea4 10s linear infinite;
}

@keyframes pzqLinea1 {
  0%,
  3% {
    opacity: 0;
    transform: translateX(-10px);
  }
  6%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzqLinea2 {
  0%,
  8% {
    opacity: 0;
    transform: translateX(-10px);
  }
  11%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzqLinea3 {
  0%,
  13% {
    opacity: 0;
    transform: translateX(-10px);
  }
  16%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzqLinea4 {
  0%,
  18% {
    opacity: 0;
    transform: translateX(-10px);
  }
  21%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzq__rotulo--fijos {
  animation: pzqEntra23 10s linear infinite;
}

@keyframes pzqEntra23 {
  0%,
  23% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  26%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzq__fijo {
  animation: pzqEntra25 10s linear infinite;
}

@keyframes pzqEntra25 {
  0%,
  25% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  28%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzq__personas {
  animation: pzqEntra27 10s linear infinite;
}

@keyframes pzqEntra27 {
  0%,
  27% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  30%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzq__equilibrio {
  animation: pzqEntra72 10s linear infinite;
}

@keyframes pzqEntra72 {
  0%,
  72% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  75%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* El coste fijo se marca justo después de cada clic: es el que no sube. */
.como__pieza[data-activa] .pzq__fijo-valor {
  animation: pzqMarca 10s linear infinite;
}

@keyframes pzqMarca {
  0%,
  43.9% {
    background: transparent;
  }
  44%,
  48.9% {
    background: rgba(3, 8, 27, 0.1);
  }
  49%,
  61.9% {
    background: transparent;
  }
  62%,
  66.9% {
    background: rgba(3, 8, 27, 0.1);
  }
  67%,
  100% {
    background: transparent;
  }
}

/* El botón de más se hunde en los dos clics. */
.como__pieza[data-activa] .pzq__mas {
  animation: pzqPulsa 10s linear infinite;
}

@keyframes pzqPulsa {
  0%,
  30.9% {
    background: #fff;
  }
  31%,
  32.9% {
    background: rgba(3, 8, 27, 0.1);
  }
  33%,
  48.9% {
    background: #fff;
  }
  49%,
  50.9% {
    background: rgba(3, 8, 27, 0.1);
  }
  51%,
  100% {
    background: #fff;
  }
}

.como__pieza[data-activa] .pzq__cursor {
  animation: pzqCursor 10s linear infinite;
}

@keyframes pzqCursor {
  0%,
  25.9% {
    opacity: 0;
    left: calc(640 * var(--u));
    top: calc(420 * var(--u));
    transform: none;
  }
  26%,
  28% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(420 * var(--u));
    transform: none;
  }
  30.9% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(76 * var(--u));
    transform: none;
  }
  31%,
  32.9% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(76 * var(--u));
    transform: scale(0.88);
  }
  33%,
  48.9% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(76 * var(--u));
    transform: none;
  }
  49%,
  50.9% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(76 * var(--u));
    transform: scale(0.88);
  }
  51%,
  61.9% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(76 * var(--u));
    transform: none;
  }
  62% {
    opacity: 0;
    left: calc(660 * var(--u));
    top: calc(300 * var(--u));
    transform: none;
  }
  100% {
    opacity: 0;
    left: calc(660 * var(--u));
    top: calc(300 * var(--u));
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzq__linea,
  .pzq__rotulo--fijos,
  .pzq__fijo,
  .pzq__personas,
  .pzq__equilibrio {
    opacity: 1;
  }

  .como__pieza[data-activa] .pzq,
  .como__pieza[data-activa] .pzq__linea,
  .como__pieza[data-activa] .pzq__rotulo--fijos,
  .como__pieza[data-activa] .pzq__fijo,
  .como__pieza[data-activa] .pzq__fijo-valor,
  .como__pieza[data-activa] .pzq__personas,
  .como__pieza[data-activa] .pzq__equilibrio,
  .como__pieza[data-activa] .pzq__mas,
  .como__pieza[data-activa] .pzq__cursor {
    animation: none;
  }

  .pzq__cursor {
    opacity: 0;
  }
}

/* ---- Pieza: marketing y campañas ----

   Bucle de 9,5 s. Cada canal se enciende 1,1 s después del anterior y su
   pieza entra 0,15 s más tarde; el estado tarda otros 0,55 s:

     0,1 s                  entra la ficha de la campaña
     1,2 / 2,3 / 3,4 / 4,5  se encienden Email, Redes, WhatsApp y Web
     1,35 / 2,45 / …        entra cada pieza publicada
     1,9 / 3,0 / 4,1 / 5,2  aparece su estado
     6,0 s                  sale el resumen
     9,05 s                 se funde para empezar de nuevo              */

.pzc2 {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  color: #03081b;
}

.como__pieza[data-activa] .pzc2 {
  animation: pzc2Ciclo 9.5s linear infinite;
}

@keyframes pzc2Ciclo {
  0%,
  95.2% {
    opacity: 1;
  }
  95.3%,
  100% {
    opacity: 0;
  }
}

/* La ficha de la campaña */

.pzc2__cabecera {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  opacity: 0;
}

.pzc2__foto {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--superficie) url("/assets/img/exp-festival.71127629.jpg") 50% 30% / cover no-repeat;
}

.pzc2__texto {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  min-width: 0;
  flex: 1;
}

.pzc2__linea {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzc2__titulo {
  font: 600 var(--t12) / 1.2 var(--fd);
  letter-spacing: -0.01em;
}

.pzc2__canales {
  display: flex;
  gap: calc(6 * var(--u));
  flex: none;
}

.pzc2__canal {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  height: calc(24 * var(--u));
  padding: 0 calc(7 * var(--u));
  border-radius: calc(6 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
  background: var(--superficie-2);
}

.pzc2__canal svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  flex: none;
}

/* Las cuatro piezas publicadas */

.pzc2__rejilla {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(10 * var(--u));
}

.pzc2__pieza {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border-radius: calc(10 * var(--u));
  border: 1px solid var(--borde);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.pzc2__pieza-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-bottom: 1px solid var(--borde);
}

.pzc2__pieza-cabecera--social {
  gap: calc(6 * var(--u));
  border-bottom: none;
}

.pzc2__marca {
  font: 600 var(--t11) var(--fd);
  color: #0f6c8c;
}

.pzc2__barras {
  flex: 1;
  display: flex;
  gap: calc(6 * var(--u));
}

.pzc2__barras span {
  width: calc(22 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 3px;
  background: var(--superficie-2);
}

.pzc2__avatar {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: #0f6c8c;
  flex: none;
}

.pzc2__cuenta {
  font: 600 var(--t10) var(--fb);
  flex: 1;
}

.pzc2__estado {
  flex: none;
  font: 400 var(--t10) var(--fb);
  color: #2f9e6e;
  background: #e8f6ef;
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  opacity: 0;
}

.pzc2__imagen {
  flex: 1;
  min-height: 0;
  background: var(--superficie) url("/assets/img/exp-festival.71127629.jpg") 50% 40% / cover no-repeat;
}

.pzc2__imagen--social {
  position: relative;
  background-position: 40% 55%;
}

.pzc2__imagen--web {
  position: relative;
  background-position: 50% 60%;
}

.pzc2__rotulo {
  position: absolute;
  left: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  font: 600 var(--t11) var(--fb);
  color: #fff;
  background: rgba(3, 8, 27, 0.55);
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(4 * var(--u));
}

.pzc2__pieza-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
}

.pzc2__pieza-pie--social {
  justify-content: flex-start;
  gap: calc(10 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
}

.pzc2__pieza-pie--social svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  flex: none;
}

.pzc2__metricas {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzc2__oferta {
  font: 500 var(--t11) / 1.2 var(--fb);
}

.pzc2__boton {
  flex: none;
  height: calc(22 * var(--u));
  padding: 0 calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #0f6c8c;
  color: #fff;
  font: 600 var(--t10) var(--fb);
  display: flex;
  align-items: center;
}

/* El de WhatsApp va sobre su propio fondo */

.pzc2__pieza--chat {
  background: #e9e4dc;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  justify-content: flex-start;
}

.pzc2__chat-cabecera {
  display: flex;
  justify-content: flex-end;
  padding: calc(4 * var(--u)) 0 calc(6 * var(--u));
}

.pzc2__burbuja {
  align-self: flex-start;
  max-width: 92%;
  background: #fff;
  border-radius: calc(8 * var(--u));
  padding: calc(6 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
}

.pzc2__enlace {
  display: flex;
  gap: calc(6 * var(--u));
  background: var(--superficie);
  border-radius: calc(6 * var(--u));
  overflow: hidden;
}

.pzc2__enlace-foto {
  width: calc(46 * var(--u));
  flex: none;
  background: var(--superficie-2) url("/assets/img/exp-festival.71127629.jpg") 55% 35% / cover no-repeat;
}

.pzc2__enlace-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u)) 0;
  min-width: 0;
}

.pzc2__enlace-titulo {
  font: 600 var(--t10) / 1.2 var(--fb);
}

.pzc2__enlace-dominio {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzc2__mensaje {
  font: 400 var(--t10) / 1.35 var(--fb);
}

.pzc2__hora {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 3px;
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzc2__hora svg {
  width: calc(13 * var(--u));
  height: calc(9 * var(--u));
  flex: none;
}

/* El velo de la web */

.pzc2__velo {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 27, 0.42);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(6 * var(--u));
  padding: calc(10 * var(--u));
}

.pzc2__velo-titulo {
  font: 600 var(--t12) / 1.15 var(--fd);
  color: #fff;
}

.pzc2__velo-boton {
  align-self: flex-start;
  height: calc(22 * var(--u));
  padding: 0 calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #fff;
  color: #0f6c8c;
  font: 600 var(--t10) var(--fb);
  display: flex;
  align-items: center;
}

/* El resumen */

.pzc2__resumen {
  position: absolute;
  left: 50%;
  bottom: calc(20 * var(--u));
  margin-left: calc(-230 * var(--u));
  width: calc(460 * var(--u));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  background: #fff;
  border-radius: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  z-index: 4;
  opacity: 0;
}

.pzc2__visto {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  flex: none;
  border-radius: 50%;
  background: #e8f6ef;
  color: #2f9e6e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzc2__visto svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.pzc2__resumen-texto {
  font: 500 var(--t11) / 1.3 var(--fb);
}

/* El reloj */

.como__pieza[data-activa] .pzc2__cabecera {
  animation: pzc2Ficha 9.5s linear infinite;
}

@keyframes pzc2Ficha {
  0%,
  1% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  4.2%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Los canales se encienden a 1,2 · 2,3 · 3,4 y 4,5 s. */
.como__pieza[data-activa] .pzc2__canal:nth-child(1) {
  animation: pzc2Canal1 9.5s linear infinite;
}
.como__pieza[data-activa] .pzc2__canal:nth-child(2) {
  animation: pzc2Canal2 9.5s linear infinite;
}
.como__pieza[data-activa] .pzc2__canal:nth-child(3) {
  animation: pzc2Canal3 9.5s linear infinite;
}
.como__pieza[data-activa] .pzc2__canal:nth-child(4) {
  animation: pzc2Canal4 9.5s linear infinite;
}

@keyframes pzc2Canal1 {
  0%,
  12.6% {
    background: var(--superficie-2);
    color: #4b5262;
  }
  15.7%,
  100% {
    background: #03081b;
    color: #fff;
  }
}

@keyframes pzc2Canal2 {
  0%,
  24.2% {
    background: var(--superficie-2);
    color: #4b5262;
  }
  27.3%,
  100% {
    background: #03081b;
    color: #fff;
  }
}

@keyframes pzc2Canal3 {
  0%,
  35.8% {
    background: var(--superficie-2);
    color: #4b5262;
  }
  38.9%,
  100% {
    background: #03081b;
    color: #fff;
  }
}

@keyframes pzc2Canal4 {
  0%,
  47.4% {
    background: var(--superficie-2);
    color: #4b5262;
  }
  50.5%,
  100% {
    background: #03081b;
    color: #fff;
  }
}

/* Cada pieza entra 0,15 s después de encenderse su canal. */
.como__pieza[data-activa] .pzc2__pieza:nth-child(1) {
  animation: pzc2Pieza1 9.5s linear infinite;
}
.como__pieza[data-activa] .pzc2__pieza:nth-child(2) {
  animation: pzc2Pieza2 9.5s linear infinite;
}
.como__pieza[data-activa] .pzc2__pieza:nth-child(3) {
  animation: pzc2Pieza3 9.5s linear infinite;
}
.como__pieza[data-activa] .pzc2__pieza:nth-child(4) {
  animation: pzc2Pieza4 9.5s linear infinite;
}

@keyframes pzc2Pieza1 {
  0%,
  14.2% {
    opacity: 0;
    transform: translateY(10px);
  }
  17.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzc2Pieza2 {
  0%,
  25.8% {
    opacity: 0;
    transform: translateY(10px);
  }
  28.9%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzc2Pieza3 {
  0%,
  37.4% {
    opacity: 0;
    transform: translateY(10px);
  }
  40.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzc2Pieza4 {
  0%,
  48.9% {
    opacity: 0;
    transform: translateY(10px);
  }
  52%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Y su estado otros 0,55 s más tarde. */
.como__pieza[data-activa] .pzc2__estado {
  animation: pzc2Estado1 9.5s linear infinite;
}

.como__pieza[data-activa] .pzc2__pieza:nth-child(2) .pzc2__estado {
  animation-name: pzc2Estado2;
}

.como__pieza[data-activa] .pzc2__pieza:nth-child(3) .pzc2__estado {
  animation-name: pzc2Estado3;
}

.como__pieza[data-activa] .pzc2__pieza:nth-child(4) .pzc2__estado {
  animation-name: pzc2Estado4;
}

@keyframes pzc2Estado1 {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.9);
  }
  23.1%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzc2Estado2 {
  0%,
  31.6% {
    opacity: 0;
    transform: scale(0.9);
  }
  34.7%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzc2Estado3 {
  0%,
  43.2% {
    opacity: 0;
    transform: scale(0.9);
  }
  46.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzc2Estado4 {
  0%,
  54.7% {
    opacity: 0;
    transform: scale(0.9);
  }
  57.8%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzc2__resumen {
  animation: pzc2Resumen 9.5s linear infinite;
}

@keyframes pzc2Resumen {
  0%,
  63.2% {
    opacity: 0;
    transform: translateY(14px);
  }
  66.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzc2__cabecera,
  .pzc2__pieza,
  .pzc2__estado,
  .pzc2__resumen {
    opacity: 1;
  }

  .pzc2__canal {
    background: #03081b;
    color: #fff;
  }

  .como__pieza[data-activa] .pzc2,
  .como__pieza[data-activa] .pzc2__cabecera,
  .como__pieza[data-activa] .pzc2__canal,
  .como__pieza[data-activa] .pzc2__pieza,
  .como__pieza[data-activa] .pzc2__estado,
  .como__pieza[data-activa] .pzc2__resumen {
    animation: none;
  }
}

/* ---- Pieza: pagos fraccionados ----

   Bucle de 9,5 s:

     0,1 s                entra la ficha del grupo
     0,3 s                la barra sube al 71 %
     0,6 / 1,1 / 1,6 s    entran los tres plazos
     2,0 s                entra la lista de familias
     2,2 → 2,8 s          una familia cada 0,2 s
     3,6 s                la familia Soler paga: cambia a «Pagado»
     4,0 s                la barra llega al 72 %
     4,6 → 5,1 s          el total sube de 24.050 € a 24.350 €
     6,0 s                sale el aviso de Cobros
     9,05 s               se funde para empezar de nuevo              */

.pzp {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  grid-template-rows: 1fr;
  gap: calc(14 * var(--u));
  color: #03081b;
}

.como__pieza[data-activa] .pzp {
  animation: pzpCiclo 9.5s linear infinite;
}

@keyframes pzpCiclo {
  0%,
  95.2% {
    opacity: 1;
  }
  95.3%,
  100% {
    opacity: 0;
  }
}

/* La ficha del grupo */

.pzp__grupo {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-width: 0;
  min-height: 0;
  background: #fff;
  border-radius: calc(12 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  box-sizing: border-box;
  opacity: 0;
}

.pzp__viaje {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.pzp__viaje-icono {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzp__viaje-icono svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.pzp__viaje-texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.pzp__viaje-nombre {
  font: 600 var(--t12) / 1.2 var(--fd);
  letter-spacing: -0.01em;
}

.pzp__viaje-dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzp__cobros {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  border-top: 1px solid var(--borde);
  padding-top: calc(12 * var(--u));
}

.pzp__cobros-etiqueta {
  font: 500 var(--t11) var(--fb);
  color: #4b5262;
}

.pzp__cobros-cifra {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--u));
}

.pzp__total {
  font: 700 var(--t16) / 1 var(--fd);
  letter-spacing: -0.02em;
}

.pzp__cobros-de {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzp__barra {
  height: calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--superficie-2);
  overflow: hidden;
}

.pzp__barra-verde {
  display: block;
  height: 100%;
  width: 0;
  background: #2f9e6e;
  border-radius: inherit;
}

/* Los plazos, con su línea de tiempo */

.pzp__plazos {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-around;
}

.pzp__plazos::before {
  content: "";
  position: absolute;
  left: calc(13 * var(--u));
  top: calc(16 * var(--u));
  bottom: calc(16 * var(--u));
  width: 1px;
  background: var(--borde);
}

.pzp__plazo {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) 0;
  opacity: 0;
}

.pzp__plazo-icono {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzp__plazo-icono svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.pzp__plazo-fecha {
  flex: 1;
  font: 400 var(--t10) var(--fb);
}

.pzp__plazo-valor {
  font: 600 var(--t10) var(--fb);
}

/* Las marcas de estado */

.pzp__marca {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  flex: none;
  font: 400 var(--t10) var(--fb);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  color: #03081b;
  background: var(--superficie-2);
}

.pzp__marca svg {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  flex: none;
}

.pzp__marca--ok {
  color: #2f9e6e;
  background: #e8f6ef;
}

.pzp__marca--espera {
  color: #b45309;
  background: #fdf2e3;
}

/* La columna de familias */

.pzp__derecha {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-width: 0;
  min-height: 0;
}

.pzp__familias {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  justify-content: space-between;
  background: #fff;
  border-radius: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  box-sizing: border-box;
  opacity: 0;
}

.pzp__familias-titulo {
  font: 600 var(--t12) var(--fd);
  letter-spacing: -0.01em;
  padding-bottom: calc(4 * var(--u));
}

.pzp__iniciales {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  border-radius: 50%;
  background: var(--superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--t9) var(--fb);
}

.pzp__familia-nombre {
  flex: 1;
  min-width: 0;
  font: 500 var(--t11) var(--fb);
}

.pzp__marca--llega {
  position: absolute;
  right: 0;
  opacity: 0;
}

/* El aviso de Cobros */

.pzp__aviso {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  background: #fff;
  border-radius: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  opacity: 0;
}

.pzp__cara {
  position: relative;
  flex: none;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.pzp__cara img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--superficie-2);
}

.pzp__cara-marca {
  position: absolute;
  right: calc(-4 * var(--u));
  bottom: calc(-4 * var(--u));
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--borde);
}

.pzp__cara-marca svg {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

.pzp__aviso-texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.pzp__aviso-linea {
  font: 500 var(--t11) / 1.3 var(--fb);
}

.pzp__aviso-quien {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

/* El reloj */

.como__pieza[data-activa] .pzp__grupo {
  animation: pzpEntra01 9.5s linear infinite;
}

@keyframes pzpEntra01 {
  0%,
  1% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  4.2%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzp__barra-verde {
  animation: pzpBarra 9.5s linear infinite;
}

@keyframes pzpBarra {
  0%,
  3.1% {
    width: 0;
  }
  8.4%,
  42% {
    width: 71%;
  }
  47.3%,
  100% {
    width: 72%;
  }
}

.como__pieza[data-activa] .pzp__plazo:nth-child(1) {
  animation: pzpPlazo1 9.5s linear infinite;
}
.como__pieza[data-activa] .pzp__plazo:nth-child(2) {
  animation: pzpPlazo2 9.5s linear infinite;
}
.como__pieza[data-activa] .pzp__plazo:nth-child(3) {
  animation: pzpPlazo3 9.5s linear infinite;
}

@keyframes pzpPlazo1 {
  0%,
  6.3% {
    opacity: 0;
    transform: translateX(-10px);
  }
  9.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzpPlazo2 {
  0%,
  11.6% {
    opacity: 0;
    transform: translateX(-10px);
  }
  14.7%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzpPlazo3 {
  0%,
  16.8% {
    opacity: 0;
    transform: translateX(-10px);
  }
  19.9%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzp__familias {
  animation: pzpEntra20 9.5s linear infinite;
}

@keyframes pzpEntra20 {
  0%,
  21.1% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  24.2%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzpFamilia1 {
  0%,
  23.2% {
    opacity: 0;
    transform: translateY(6px);
  }
  26.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzpFamilia2 {
  0%,
  25.3% {
    opacity: 0;
    transform: translateY(6px);
  }
  28.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzpFamilia4 {
  0%,
  29.5% {
    opacity: 0;
    transform: translateY(6px);
  }
  32.6%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzpPaga {
  0%,
  27.4% {
    opacity: 0;
    transform: translateY(6px);
    background: transparent;
  }
  30.5%,
  37.8% {
    opacity: 1;
    transform: none;
    background: transparent;
  }
  37.9%,
  46.2% {
    opacity: 1;
    transform: none;
    background: rgba(47, 158, 110, 0.06);
  }
  46.3%,
  100% {
    opacity: 1;
    transform: none;
    background: transparent;
  }
}

.como__pieza[data-activa] .pzp__marca--espera {
  animation: pzpEspera 9.5s linear infinite;
}

.como__pieza[data-activa] .pzp__marca--llega {
  animation: pzpLlega 9.5s linear infinite;
}

@keyframes pzpEspera {
  0%,
  37.8% {
    opacity: 1;
  }
  37.9%,
  100% {
    opacity: 0;
  }
}

@keyframes pzpLlega {
  0%,
  37.8% {
    opacity: 0;
  }
  37.9%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzp__aviso {
  animation: pzpAviso 9.5s linear infinite;
}

@keyframes pzpAviso {
  0%,
  63.2% {
    opacity: 0;
    transform: translateY(12px);
  }
  66.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzp__grupo,
  .pzp__plazo,
  .pzp__familias,
  .pzp__familia,
  .pzp__marca--llega,
  .pzp__aviso {
    opacity: 1;
  }

  .pzp__marca--espera {
    opacity: 0;
  }

  .pzp__barra-verde {
    width: 72%;
  }

  .como__pieza[data-activa] .pzp,
  .como__pieza[data-activa] .pzp__grupo,
  .como__pieza[data-activa] .pzp__barra-verde,
  .como__pieza[data-activa] .pzp__plazo,
  .como__pieza[data-activa] .pzp__familias,
  .como__pieza[data-activa] .pzp__familia,
  .como__pieza[data-activa] .pzp__familia--paga,
  .como__pieza[data-activa] .pzp__marca--espera,
  .como__pieza[data-activa] .pzp__marca--llega,
  .como__pieza[data-activa] .pzp__aviso {
    animation: none;
  }
}

/* ---- Pieza: venta B2B ----

   Bucle de 12,6 s:

     0,1 s             entra la ventana de compartir
     0,8 → 2,0 s       se escribe viajes@cdnorte.es
     2,3 s             se pulsa «Preparar propuesta»
     2,6 s             se abre el desglose, línea a línea hasta 3,5 s
     3,8 s             sale el total
     4,2 s             entra el bloque privado y a 4,5 s se despliega
     5,7 s             se vuelve a cerrar
     6,3 s             se pulsa «Enviar propuesta»
     6,6 / 7,8 / 8,8   enviada · abierta · aceptada
     9,0 s             entra el móvil del club
     10,3 s            el club pulsa pagar
     10,6 s            pago recibido
     11,1 s            el estado pasa a «Aceptada · 30% cobrado»
     12,15 s           se funde para empezar de nuevo              */

.pzb {
  position: absolute;
  inset: 0;
  color: #03081b;
}

.como__pieza[data-activa] .pzb {
  animation: pzbCiclo 12.6s linear infinite;
}

@keyframes pzbCiclo {
  0%,
  96.4% {
    opacity: 1;
  }
  96.5%,
  100% {
    opacity: 0;
  }
}

/* La ventana de compartir */

.pzb__modal {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  width: calc(440 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  padding: calc(16 * var(--u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  overflow: hidden;
  opacity: 0;
}

.pzb__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pzb__titulo {
  font: 600 var(--t12) var(--fd);
  letter-spacing: -0.01em;
}

.pzb__cerrar {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

.pzb__viaje {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  border: 1px solid var(--borde);
  border-radius: calc(8 * var(--u));
  padding: calc(8 * var(--u));
}

.pzb__viaje-foto {
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--superficie-2) url("/assets/img/seg-promotores-1600.5aa4987d.jpg") 50% 40% / cover no-repeat;
}

.pzb__viaje-texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.pzb__viaje-nombre {
  font: 500 var(--t11) / 1.2 var(--fb);
}

.pzb__viaje-dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

/* El campo del correo, que se escribe solo */

.pzb__envio {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
}

.pzb__envio-etiqueta {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzb__envio-fila {
  display: flex;
  gap: calc(8 * var(--u));
}

.pzb__campo {
  flex: 1;
  min-width: 0;
  height: calc(30 * var(--u));
  border: 1px solid var(--borde);
  border-radius: calc(6 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(10 * var(--u));
  font: 400 var(--t10) var(--fb);
  box-sizing: border-box;
}

.pzb__correo {
  clip-path: inset(0 100% 0 0);
  white-space: nowrap;
}

.pzb__cursor-texto {
  width: 1px;
  height: calc(12 * var(--u));
  background: #03081b;
  margin-left: 1px;
  opacity: 0;
}

.pzb__preparar {
  flex: none;
  height: calc(30 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  display: flex;
  align-items: center;
  font: 600 var(--t10) var(--fb);
  background: #fff;
  border: 1px solid #03081b;
  box-sizing: border-box;
}

/* El desglose, que se despliega */

.pzb__desglose {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: calc(8 * var(--u));
  padding: 0 calc(12 * var(--u));
  max-height: 0;
  overflow: hidden;
}

.pzb__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(5 * var(--u)) 0;
  border-bottom: 1px solid var(--borde);
  opacity: 0;
}

.pzb__fila-etiqueta {
  font: 500 var(--t11) var(--fb);
  color: #4b5262;
}

.pzb__fila-valor {
  font: 600 var(--t10) var(--fb);
  text-align: right;
}

.pzb__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: calc(8 * var(--u)) 0 calc(4 * var(--u));
  opacity: 0;
}

.pzb__total-etiqueta {
  font: 600 var(--t11) var(--fb);
}

.pzb__total-valor {
  font: 700 var(--t16) / 1 var(--fd);
  letter-spacing: -0.02em;
}

/* El desglose propio, que no viaja con la propuesta */

.pzb__privado {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--borde);
  border-radius: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  opacity: 0;
}

.pzb__privado-cabecera {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.pzb__privado-cabecera svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  flex: none;
}

.pzb__privado-texto {
  flex: 1;
  font: 500 var(--t11) var(--fb);
}

.pzb__flecha {
  font: 400 var(--t12) var(--fb);
  color: #4b5262;
}

.pzb__privado-cuerpo {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.pzb__privado-linea {
  display: flex;
  justify-content: space-between;
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzb__borroso {
  filter: blur(4px);
  color: #03081b;
}

/* Con quién está compartida y en qué va */

.pzb__compartido {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  border-top: 1px solid var(--borde);
  padding-top: calc(10 * var(--u));
  opacity: 0;
}

.pzb__club {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.pzb__iniciales {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  border-radius: 50%;
  background: var(--superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--t9) var(--fb);
}

.pzb__club-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzb__club-nombre {
  font: 500 var(--t11) var(--fb);
}

.pzb__club-correo {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

/* Los cuatro estados van apilados en el mismo hueco. */
.pzb__club {
  position: relative;
}

.pzb__estado {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  flex: none;
  font: 400 var(--t10) var(--fb);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  background: var(--superficie-2);
  opacity: 0;
}

.pzb__estado svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  flex: none;
}

.pzb__estado--ok {
  color: #2f9e6e;
  background: #e8f6ef;
}

.pzb__estado--ok svg {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
}

.pzb__hueco {
  flex: 1;
}

.pzb__enviar-fila {
  display: flex;
  justify-content: flex-end;
}

.pzb__enviar {
  flex: none;
  height: calc(30 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  display: flex;
  align-items: center;
  font: 600 var(--t10) var(--fb);
  color: #fff;
  background: #03081b;
  box-sizing: border-box;
}

/* El móvil del club */

.pzb__movil {
  position: absolute;
  right: calc(28 * var(--u));
  bottom: calc(20 * var(--u));
  width: calc(210 * var(--u));
  height: calc(430 * var(--u));
  border-radius: calc(28 * var(--u));
  background: #fff;
  border: 3px solid #1a1d29;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  box-shadow: 0 12px 28px rgba(3, 8, 27, 0.16);
  z-index: 3;
  transform: translateX(140%);
  opacity: 0;
}

.pzb__muesca {
  position: absolute;
  top: calc(7 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(44 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 999px;
  background: #1a1d29;
  z-index: 2;
}

.pzb__pantalla {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pzb__portada {
  height: calc(118 * var(--u));
  flex: none;
  background: var(--superficie-2) url("/assets/img/seg-promotores-1600.5aa4987d.jpg") 50% 40% / cover no-repeat;
}

.pzb__movil-texto {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) 0;
}

.pzb__movil-para {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzb__movil-nombre {
  font: 600 var(--t12) / 1.2 var(--fd);
  letter-spacing: -0.01em;
}

.pzb__movil-dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzb__movil-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--borde);
  padding-top: calc(8 * var(--u));
  margin-top: calc(4 * var(--u));
}

.pzb__movil-total-etiqueta {
  font: 500 var(--t11) var(--fb);
}

.pzb__movil-total-valor {
  font: 700 var(--t16) var(--fd);
}

.pzb__movil-pie {
  padding: 0 calc(12 * var(--u)) calc(16 * var(--u));
}

.pzb__pagar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(34 * var(--u));
  border-radius: calc(8 * var(--u));
  font: 600 var(--t10) var(--fb);
  color: #fff;
  background: #03081b;
  text-align: center;
}

.pzb__pagar-antes,
.pzb__pagar-luego {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
}

.pzb__pagar-luego {
  opacity: 0;
}

.pzb__pagar-luego svg {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
}

.pzb__cursor {
  position: absolute;
  left: calc(300 * var(--u));
  top: calc(300 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.pzb__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* El reloj */

.como__pieza[data-activa] .pzb__modal {
  animation: pzbEntra01 12.6s linear infinite;
}

@keyframes pzbEntra01 {
  0%,
  0.8% {
    opacity: 0;
    transform: translateY(6px);
  }
  3.2%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* El correo se escribe entre 0,8 y 2,0 s, letra a letra. */
.como__pieza[data-activa] .pzb__correo {
  animation: pzbEscribe 12.6s steps(17) infinite;
}

@keyframes pzbEscribe {
  0%,
  6.3% {
    clip-path: inset(0 100% 0 0);
  }
  15.9%,
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.como__pieza[data-activa] .pzb__campo {
  animation: pzbCampo 12.6s linear infinite;
}

@keyframes pzbCampo {
  0%,
  6.3% {
    border-color: var(--borde);
  }
  6.4%,
  16.6% {
    border-color: #03081b;
  }
  16.7%,
  100% {
    border-color: var(--borde);
  }
}

.como__pieza[data-activa] .pzb__cursor-texto {
  animation: pzbCaret 12.6s steps(1) infinite;
}

@keyframes pzbCaret {
  0%,
  6.3% {
    opacity: 0;
  }
  6.4%,
  7.2% {
    opacity: 1;
  }
  7.3%,
  8.1% {
    opacity: 0;
  }
  8.2%,
  9% {
    opacity: 1;
  }
  9.1%,
  9.9% {
    opacity: 0;
  }
  10%,
  10.8% {
    opacity: 1;
  }
  10.9%,
  11.7% {
    opacity: 0;
  }
  11.8%,
  12.6% {
    opacity: 1;
  }
  12.7%,
  13.5% {
    opacity: 0;
  }
  13.6%,
  14.4% {
    opacity: 1;
  }
  14.5%,
  15.3% {
    opacity: 0;
  }
  15.4%,
  16.6% {
    opacity: 1;
  }
  16.7%,
  100% {
    opacity: 0;
  }
}

/* Se pulsa «Preparar propuesta» a los 2,3 s. */
.como__pieza[data-activa] .pzb__preparar {
  animation: pzbPreparar 12.6s linear infinite;
}

@keyframes pzbPreparar {
  0%,
  18.2% {
    background: #fff;
  }
  18.3%,
  19.8% {
    background: rgba(3, 8, 27, 0.1);
  }
  19.9%,
  100% {
    background: #fff;
  }
}

/* Y se abre el desglose. */
.como__pieza[data-activa] .pzb__desglose {
  animation: pzbAbre 12.6s linear infinite;
}

@keyframes pzbAbre {
  0%,
  20.6% {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  23.8%,
  100% {
    max-height: calc(170 * var(--u));
    padding-top: calc(6 * var(--u));
    padding-bottom: calc(6 * var(--u));
  }
}

.como__pieza[data-activa] .pzb__fila:nth-child(1) {
  animation: pzbFila1 12.6s linear infinite;
}
.como__pieza[data-activa] .pzb__fila:nth-child(2) {
  animation: pzbFila2 12.6s linear infinite;
}
.como__pieza[data-activa] .pzb__fila:nth-child(3) {
  animation: pzbFila3 12.6s linear infinite;
}
.como__pieza[data-activa] .pzb__fila:nth-child(4) {
  animation: pzbFila4 12.6s linear infinite;
}

@keyframes pzbFila1 {
  0%,
  20.6% {
    opacity: 0;
    transform: translateX(-8px);
  }
  23%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzbFila2 {
  0%,
  23% {
    opacity: 0;
    transform: translateX(-8px);
  }
  25.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzbFila3 {
  0%,
  25.4% {
    opacity: 0;
    transform: translateX(-8px);
  }
  27.8%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzbFila4 {
  0%,
  27.8% {
    opacity: 0;
    transform: translateX(-8px);
  }
  30.2%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzb__total {
  animation: pzbEntra38 12.6s linear infinite;
}

@keyframes pzbEntra38 {
  0%,
  30.2% {
    opacity: 0;
    transform: translateY(6px);
  }
  32.6%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzb__privado {
  animation: pzbEntra42 12.6s linear infinite;
}

@keyframes pzbEntra42 {
  0%,
  33.3% {
    opacity: 0;
    transform: translateY(6px);
    gap: 0;
  }
  35.7% {
    opacity: 1;
    transform: none;
    gap: 0;
  }
  38.1%,
  45.2% {
    opacity: 1;
    transform: none;
    gap: calc(6 * var(--u));
  }
  47.6%,
  100% {
    opacity: 1;
    transform: none;
    gap: 0;
  }
}

/* El desglose propio se abre entre 4,5 y 5,7 s. */
.como__pieza[data-activa] .pzb__privado-cuerpo {
  animation: pzbPrivado 12.6s linear infinite;
}

@keyframes pzbPrivado {
  0%,
  35.7% {
    max-height: 0;
    opacity: 0;
  }
  38.5%,
  45.2% {
    max-height: calc(40 * var(--u));
    opacity: 1;
  }
  48%,
  100% {
    max-height: 0;
    opacity: 0;
  }
}

.como__pieza[data-activa] .pzb__flecha {
  animation: pzbFlecha 12.6s linear infinite;
}

@keyframes pzbFlecha {
  0%,
  35.7% {
    transform: none;
  }
  38.1%,
  45.2% {
    transform: rotate(90deg);
  }
  47.6%,
  100% {
    transform: none;
  }
}

/* Se pulsa «Enviar propuesta» a los 6,3 s. */
.como__pieza[data-activa] .pzb__enviar {
  animation: pzbEnviar 12.6s linear infinite;
}

@keyframes pzbEnviar {
  0%,
  49.9% {
    background: #03081b;
  }
  50%,
  51.5% {
    background: #1c2337;
  }
  51.6%,
  100% {
    background: #03081b;
  }
}

.como__pieza[data-activa] .pzb__compartido {
  animation: pzbEntra66 12.6s linear infinite;
}

@keyframes pzbEntra66 {
  0%,
  52.4% {
    opacity: 0;
    transform: translateY(6px);
  }
  54.8%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Enviada · abierta · aceptada · cobrada */
.como__pieza[data-activa] .pzb__estado[data-paso="1"] {
  animation: pzbPaso1 12.6s linear infinite;
}
.como__pieza[data-activa] .pzb__estado[data-paso="2"] {
  animation: pzbPaso2 12.6s linear infinite;
}
.como__pieza[data-activa] .pzb__estado[data-paso="3"] {
  animation: pzbPaso3 12.6s linear infinite;
}
.como__pieza[data-activa] .pzb__estado[data-paso="4"] {
  animation: pzbPaso4 12.6s linear infinite;
}

@keyframes pzbPaso1 {
  0%,
  52.3% {
    opacity: 0;
  }
  52.4%,
  61.8% {
    opacity: 1;
  }
  61.9%,
  100% {
    opacity: 0;
  }
}

@keyframes pzbPaso2 {
  0%,
  61.8% {
    opacity: 0;
  }
  61.9%,
  69.7% {
    opacity: 1;
  }
  69.8%,
  100% {
    opacity: 0;
  }
}

@keyframes pzbPaso3 {
  0%,
  69.7% {
    opacity: 0;
  }
  69.8%,
  88% {
    opacity: 1;
  }
  88.1%,
  100% {
    opacity: 0;
  }
}

@keyframes pzbPaso4 {
  0%,
  88% {
    opacity: 0;
  }
  88.1%,
  100% {
    opacity: 1;
  }
}

/* El móvil entra a los 9 s. */
.como__pieza[data-activa] .pzb__movil {
  animation: pzbMovil 12.6s linear infinite;
}

@keyframes pzbMovil {
  0%,
  71.4% {
    transform: translateX(140%);
    opacity: 0;
  }
  74.6%,
  100% {
    transform: none;
    opacity: 1;
  }
}

/* El club paga a los 10,3 s y el botón se pone verde a los 10,6. */
.como__pieza[data-activa] .pzb__pagar {
  animation: pzbPagar 12.6s linear infinite;
}

@keyframes pzbPagar {
  0%,
  81.7% {
    background: #03081b;
  }
  81.8%,
  83.3% {
    background: #1c2337;
  }
  83.4%,
  84.1% {
    background: #03081b;
  }
  84.2%,
  100% {
    background: #2f9e6e;
  }
}

.como__pieza[data-activa] .pzb__pagar-antes {
  animation: pzbPagarAntes 12.6s linear infinite;
}

.como__pieza[data-activa] .pzb__pagar-luego {
  animation: pzbPagarLuego 12.6s linear infinite;
}

@keyframes pzbPagarAntes {
  0%,
  84.1% {
    opacity: 1;
  }
  84.2%,
  100% {
    opacity: 0;
  }
}

@keyframes pzbPagarLuego {
  0%,
  84.1% {
    opacity: 0;
  }
  84.2%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzb__cursor {
  animation: pzbCursor 12.6s linear infinite;
}

@keyframes pzbCursor {
  0% {
    opacity: 0;
    left: calc(300 * var(--u));
    top: calc(300 * var(--u));
    transform: none;
  }
  4.7% {
    opacity: 1;
    left: calc(200 * var(--u));
    top: calc(118 * var(--u));
    transform: none;
  }
  16.6% {
    opacity: 1;
    left: calc(378 * var(--u));
    top: calc(118 * var(--u));
    transform: none;
  }
  18.3%,
  19.8% {
    opacity: 1;
    left: calc(378 * var(--u));
    top: calc(118 * var(--u));
    transform: scale(0.88);
  }
  19.9%,
  46.8% {
    opacity: 1;
    left: calc(378 * var(--u));
    top: calc(440 * var(--u));
    transform: none;
  }
  50%,
  51.5% {
    opacity: 1;
    left: calc(378 * var(--u));
    top: calc(440 * var(--u));
    transform: scale(0.88);
  }
  51.6%,
  74.6% {
    opacity: 1;
    left: calc(600 * var(--u));
    top: calc(440 * var(--u));
    transform: none;
  }
  81.8%,
  83.3% {
    opacity: 1;
    left: calc(600 * var(--u));
    top: calc(440 * var(--u));
    transform: scale(0.88);
  }
  83.4%,
  88.8% {
    opacity: 1;
    left: calc(600 * var(--u));
    top: calc(440 * var(--u));
    transform: none;
  }
  88.9%,
  100% {
    opacity: 0;
    left: calc(640 * var(--u));
    top: calc(470 * var(--u));
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzb__modal,
  .pzb__fila,
  .pzb__total,
  .pzb__privado,
  .pzb__compartido {
    opacity: 1;
  }

  .pzb__correo {
    clip-path: none;
  }

  .pzb__desglose {
    max-height: none;
    padding: calc(6 * var(--u)) calc(12 * var(--u));
  }

  .pzb__estado[data-paso="4"] {
    opacity: 1;
  }

  .pzb__movil {
    transform: none;
    opacity: 1;
  }

  .pzb__pagar {
    background: #2f9e6e;
  }

  .pzb__pagar-antes {
    opacity: 0;
  }

  .pzb__pagar-luego {
    opacity: 1;
  }

  .como__pieza[data-activa] .pzb,
  .como__pieza[data-activa] .pzb__modal,
  .como__pieza[data-activa] .pzb__correo,
  .como__pieza[data-activa] .pzb__campo,
  .como__pieza[data-activa] .pzb__cursor-texto,
  .como__pieza[data-activa] .pzb__preparar,
  .como__pieza[data-activa] .pzb__desglose,
  .como__pieza[data-activa] .pzb__fila,
  .como__pieza[data-activa] .pzb__total,
  .como__pieza[data-activa] .pzb__privado,
  .como__pieza[data-activa] .pzb__privado-cuerpo,
  .como__pieza[data-activa] .pzb__flecha,
  .como__pieza[data-activa] .pzb__enviar,
  .como__pieza[data-activa] .pzb__compartido,
  .como__pieza[data-activa] .pzb__estado,
  .como__pieza[data-activa] .pzb__movil,
  .como__pieza[data-activa] .pzb__pagar,
  .como__pieza[data-activa] .pzb__pagar-antes,
  .como__pieza[data-activa] .pzb__pagar-luego,
  .como__pieza[data-activa] .pzb__cursor {
    animation: none;
  }

  .pzb__cursor {
    opacity: 0;
  }
}

/* ---- Pieza: conversaciones ----

   Bucle de 11 s:

     0,1 s          entra el panel
     0,6 s          llega la conversación de Laura
     1,6 s          se abre: se selecciona y sale su mensaje
     2,6 → 3,6 s    se marca «Traslado aeropuerto · incluido» de su reserva
     3,7 s          se pulsa el botón de IA
     4,0 → 6,4 s    se redacta la respuesta
     6,7 s          se pulsa Enviar
     7,0 s          sale el mensaje
     7,6 s          la conversación pasa a «Respondida»
     8,2 s          entra la siguiente, de Javier
     10,55 s        se funde para empezar de nuevo              */

.pzv {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  background: #fff;
  border: 1px solid var(--superficie-2);
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 28fr) minmax(0, 44fr) minmax(0, 28fr);
  grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box;
  color: #03081b;
  opacity: 0;
}

.como__pieza[data-activa] .pzv {
  animation: pzvCiclo 11s linear infinite;
}

@keyframes pzvCiclo {
  0%,
  0.9% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  3.6%,
  95.8% {
    opacity: 1;
    transform: none;
  }
  95.9%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* La lista de conversaciones */

.pzv__lista {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--superficie-2);
  overflow: hidden;
}

.pzv__lista-cabecera {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));
}

.pzv__lista-titulo {
  font: 600 var(--t12) var(--fd);
  letter-spacing: -0.01em;
}

.pzv__abiertos {
  align-self: flex-start;
  font: 400 var(--t10) var(--fb);
  background: var(--superficie);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
}

/* El número de abiertos baja a 3 mientras no entra la siguiente. */
.pzv__abiertos-cuatro {
  position: relative;
  display: inline-block;
}

.pzv__abiertos-tres {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.pzv__iniciales {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  border-radius: 50%;
  background: var(--superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--t9) var(--fb);
}

.pzv__fila-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzv__fila-arriba {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}

.pzv__fila-nombre {
  flex: 1;
  min-width: 0;
  font: 500 var(--t11) var(--fb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pzv__fila-hora {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzv__fila-viaje {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pzv__fila-abajo {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  color: #4b5262;
}

.pzv__fila-abajo > svg {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  flex: none;
}

.pzv__fila-mensaje {
  position: relative;
  flex: 1;
  min-width: 0;
  font: 400 var(--t10) var(--fb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pzv__fila-luego {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
}

.pzv__punto {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  flex: none;
  background: #00c2ff;
  opacity: 0;
}

/* La conversación abierta */

.pzv__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--superficie);
}

.pzv__chat-cabecera {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: #fff;
  border-bottom: 1px solid var(--superficie-2);
}

.pzv__iniciales--chat {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

.pzv__iniciales--grande {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  font-size: var(--t11);
}

.pzv__chat-nombre {
  flex: 1;
  font: 600 var(--t12) var(--fd);
}

.pzv__canal {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzv__canal svg {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  flex: none;
}

.pzv__hilo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u));
}

.pzv__burbuja {
  max-width: 86%;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  background: #fff;
  border-radius: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  box-shadow: 0 1px 1px rgba(3, 8, 27, 0.06);
  opacity: 0;
}

.pzv__burbuja--entra {
  align-self: flex-start;
}

.pzv__burbuja--sale {
  align-self: flex-end;
  background: #dff3fb;
}

.pzv__burbuja-texto {
  font: 400 var(--t11) / 1.4 var(--fb);
}

.pzv__burbuja-hora {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 3px;
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzv__burbuja-hora svg {
  width: calc(13 * var(--u));
  height: calc(9 * var(--u));
  flex: none;
}

/* El redactor */

.pzv__redactar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: #fff;
  border-top: 1px solid var(--superficie-2);
}

.pzv__borrador {
  position: relative;
  min-height: calc(32 * var(--u));
  font: 400 var(--t11) / 1.4 var(--fb);
}

.pzv__borrador-texto {
  clip-path: inset(0 100% 0 0);
}

.pzv__cursor-texto {
  display: inline-block;
  width: 1px;
  height: calc(12 * var(--u));
  background: #03081b;
  margin-left: 1px;
  vertical-align: middle;
  opacity: 0;
}

.pzv__marcador {
  position: absolute;
  left: 0;
  top: 0;
  color: #8d93a3;
}

.pzv__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pzv__ia,
.pzv__enviar {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  height: calc(26 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(6 * var(--u));
  font: 600 var(--t10) var(--fb);
  box-sizing: border-box;
}

.pzv__ia {
  border: 1px solid #00c2ff;
  background: #fff;
}

.pzv__ia-marca {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 22%;
  background: url("/assets/img/roshi-aura.3d8a0675.png") center / cover no-repeat, var(--superficie-2);
  flex: none;
}

.pzv__enviar {
  color: #fff;
  background: #03081b;
}

.pzv__cursor {
  position: absolute;
  left: 70%;
  top: 100%;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.pzv__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* La ficha del viajero */

.pzv__ficha {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--superficie-2);
  box-sizing: border-box;
}

.pzv__ficha-cabecera {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-width: 0;
}

.pzv__ficha-texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.pzv__ficha-nombre {
  font: 600 var(--t12) var(--fd);
}

.pzv__ficha-dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzv__ficha-dato--correo {
  overflow-wrap: anywhere;
}

.pzv__reserva {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  border-top: 1px solid var(--superficie-2);
  padding-top: calc(10 * var(--u));
}

.pzv__reserva-nombre {
  font: 500 var(--t11) / 1.3 var(--fb);
}

.pzv__reserva-pago {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--u));
}

.pzv__reserva-precio {
  font: 600 var(--t10) var(--fb);
}

.pzv__reserva-marca {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #2f9e6e;
  background: #e8f6ef;
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
}

.pzv__reserva-marca svg {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  flex: none;
}

.pzv__traslado {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font: 500 var(--t10) var(--fb);
  border-radius: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  background: var(--superficie);
}

.pzv__traslado svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  flex: none;
}

@keyframes pzvLaura {
  0%,
  5.4% {
    opacity: 0;
    transform: translateY(-10px);
    background: #fff;
  }
  8.2%,
  14.5% {
    opacity: 1;
    transform: none;
    background: #fff;
  }
  17.3%,
  100% {
    opacity: 1;
    transform: none;
    background: var(--superficie);
  }
}

/* El aviso de sin leer se apaga cuando se responde, a los 7,6 s. */
.como__pieza[data-activa] .pzv__fila--laura .pzv__punto {
  animation: pzvPunto 11s linear infinite;
}

@keyframes pzvPunto {
  0%,
  5.4% {
    opacity: 0;
  }
  8.2%,
  69% {
    opacity: 1;
  }
  69.1%,
  100% {
    opacity: 0;
  }
}

.como__pieza[data-activa] .pzv__fila--nueva .pzv__punto {
  animation: pzvPuntoNueva 11s linear infinite;
}

@keyframes pzvPuntoNueva {
  0%,
  74.5% {
    opacity: 0;
  }
  77.3%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzv__fila-antes {
  animation: pzvAntes 11s linear infinite;
}

.como__pieza[data-activa] .pzv__fila-luego {
  animation: pzvLuego 11s linear infinite;
}

@keyframes pzvAntes {
  0%,
  69% {
    opacity: 1;
  }
  69.1%,
  100% {
    opacity: 0;
  }
}

@keyframes pzvLuego {
  0%,
  69% {
    opacity: 0;
  }
  69.1%,
  100% {
    opacity: 1;
  }
}

@keyframes pzvNueva {
  0%,
  74.5% {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
  }
  77.3%,
  100% {
    opacity: 1;
    transform: none;
    max-height: calc(70 * var(--u));
    padding-top: calc(8 * var(--u));
    padding-bottom: calc(8 * var(--u));
    border-top-color: var(--superficie-2);
  }
}

@keyframes pzvUltima {
  0%,
  74.5% {
    opacity: 1;
    max-height: calc(70 * var(--u));
    padding-top: calc(8 * var(--u));
    padding-bottom: calc(8 * var(--u));
  }
  77.3%,
  100% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Mientras tanto el contador baja a 3. */
.como__pieza[data-activa] .pzv__abiertos-cuatro {
  animation: pzvCuatro 11s steps(1) infinite;
}

.como__pieza[data-activa] .pzv__abiertos-tres {
  animation: pzvTres 11s steps(1) infinite;
}

@keyframes pzvCuatro {
  0%,
  69% {
    opacity: 1;
  }
  69.1%,
  74.5% {
    opacity: 0;
  }
  74.6%,
  100% {
    opacity: 1;
  }
}

@keyframes pzvTres {
  0%,
  69% {
    opacity: 0;
  }
  69.1%,
  74.5% {
    opacity: 1;
  }
  74.6%,
  100% {
    opacity: 0;
  }
}

.como__pieza[data-activa] .pzv__burbuja--entra {
  animation: pzvEntra16 11s linear infinite;
}

@keyframes pzvEntra16 {
  0%,
  14.5% {
    opacity: 0;
    transform: translateY(8px);
  }
  17.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* El traslado de la reserva se marca entre 2,6 y 3,6 s: es el dato que
   contesta la pregunta. */
.como__pieza[data-activa] .pzv__traslado {
  animation: pzvTraslado 11s linear infinite;
}

@keyframes pzvTraslado {
  0%,
  23.6% {
    background: var(--superficie);
    box-shadow: none;
  }
  26.4%,
  30% {
    background: rgba(0, 194, 255, 0.14);
    box-shadow: inset 0 0 0 1px #00c2ff;
  }
  32.7%,
  100% {
    background: var(--superficie);
    box-shadow: none;
  }
}

.como__pieza[data-activa] .pzv__ia {
  animation: pzvIa 11s linear infinite;
}

@keyframes pzvIa {
  0%,
  33.6% {
    background: #fff;
  }
  33.7%,
  35.9% {
    background: rgba(0, 194, 255, 0.14);
  }
  36%,
  100% {
    background: #fff;
  }
}

/* La respuesta se escribe entre 4,0 y 6,4 s. */
.como__pieza[data-activa] .pzv__borrador-texto {
  animation: pzvEscribe 11s steps(88) infinite;
}

@keyframes pzvEscribe {
  0%,
  36.3% {
    clip-path: inset(0 100% 0 0);
  }
  58.2%,
  63.5% {
    clip-path: inset(0 0 0 0);
  }
  63.6%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

.como__pieza[data-activa] .pzv__marcador {
  animation: pzvMarcador 11s steps(1) infinite;
}

@keyframes pzvMarcador {
  0%,
  36.3% {
    opacity: 1;
  }
  36.4%,
  63.5% {
    opacity: 0;
  }
  63.6%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzv__cursor-texto {
  animation: pzvCaret 11s steps(1) infinite;
}

@keyframes pzvCaret {
  0%,
  36.3% {
    opacity: 0;
  }
  36.4%,
  40.9% {
    opacity: 1;
  }
  41%,
  45.5% {
    opacity: 0;
  }
  45.6%,
  50% {
    opacity: 1;
  }
  50.1%,
  54.5% {
    opacity: 0;
  }
  54.6%,
  59.1% {
    opacity: 1;
  }
  59.2%,
  61.8% {
    opacity: 0;
  }
  61.9%,
  100% {
    opacity: 0;
  }
}

.como__pieza[data-activa] .pzv__enviar {
  animation: pzvEnviar 11s linear infinite;
}

@keyframes pzvEnviar {
  0%,
  60.9% {
    background: #03081b;
  }
  61%,
  63.1% {
    background: #1c2337;
  }
  63.2%,
  100% {
    background: #03081b;
  }
}

.como__pieza[data-activa] .pzv__burbuja--sale {
  animation: pzvSale 11s linear infinite;
}

@keyframes pzvSale {
  0%,
  63.5% {
    opacity: 0;
    transform: translateY(8px);
  }
  66.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* El cursor va al botón de IA y después al de enviar. */
.como__pieza[data-activa] .pzv__cursor {
  animation: pzvCursor 11s linear infinite;
}

@keyframes pzvCursor {
  0%,
  30.8% {
    opacity: 0;
    left: 70%;
    top: 100%;
  }
  30.9% {
    opacity: 1;
    left: 70%;
    top: 100%;
  }
  36.4%,
  58.1% {
    opacity: 1;
    left: 8%;
    top: 62%;
  }
  63.6%,
  66.3% {
    opacity: 1;
    left: 88%;
    top: 62%;
  }
  66.4%,
  100% {
    opacity: 0;
    left: 88%;
    top: 62%;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzv,
  .pzv__fila--laura,
  .pzv__burbuja,
  .pzv__fila-luego {
    opacity: 1;
  }

  .pzv__fila-antes,
  .pzv__marcador,
  .pzv__borrador-texto {
    opacity: 0;
  }

  .pzv__fila--nueva .pzv__punto {
    opacity: 1;
  }

  .como__pieza[data-activa] .pzv,
  .como__pieza[data-activa] .pzv__fila--laura,
  .como__pieza[data-activa] .pzv__fila--nueva,
  .como__pieza[data-activa] .pzv__fila--ultima,
  .como__pieza[data-activa] .pzv__punto,
  .como__pieza[data-activa] .pzv__fila-antes,
  .como__pieza[data-activa] .pzv__fila-luego,
  .como__pieza[data-activa] .pzv__abiertos-cuatro,
  .como__pieza[data-activa] .pzv__abiertos-tres,
  .como__pieza[data-activa] .pzv__burbuja--entra,
  .como__pieza[data-activa] .pzv__burbuja--sale,
  .como__pieza[data-activa] .pzv__traslado,
  .como__pieza[data-activa] .pzv__ia,
  .como__pieza[data-activa] .pzv__borrador-texto,
  .como__pieza[data-activa] .pzv__marcador,
  .como__pieza[data-activa] .pzv__cursor-texto,
  .como__pieza[data-activa] .pzv__enviar,
  .como__pieza[data-activa] .pzv__cursor {
    animation: none;
  }

  .pzv__cursor {
    opacity: 0;
  }
}

/* ---- Pieza: rooming y plazas ----

   Bucle de 10,5 s. Los nombres, los contadores y la lista los escribe
   piezas.js; aquí van la caja, el cursor y el arrastre:

     0,1 s          entra la tarjeta
     0,8 s          aparece el cursor sobre la lista
     1,4 → 2,4 s    arrastra a Clara Vidal hasta la habitación 2
     2,5 → 6,7 s    el resto se va repartiendo solo
     3,2 s          entra el panel del Operador
     3,9 s          se pulsa «Repartir el resto»
     7,0 → 7,7 s    se marca «Descargar listado»
     10,05 s        se funde para empezar de nuevo              */

.pzr {
  position: absolute;
  inset: 0;
  color: #03081b;
}

.como__pieza[data-activa] .pzr {
  animation: pzrCiclo 10.5s linear infinite;
}

@keyframes pzrCiclo {
  0%,
  95.7% {
    opacity: 1;
  }
  95.8%,
  100% {
    opacity: 0;
  }
}

.pzr__tarjeta {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  border: 1px solid var(--superficie-2);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.pzr__cabecera {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-bottom: 1px solid var(--superficie-2);
}

.pzr__viaje {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzr__viaje-nombre {
  font: 600 var(--t12) var(--fd);
}

.pzr__viaje-dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzr__descargar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  height: calc(26 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(6 * var(--u));
  font: 600 var(--t10) var(--fb);
  border: 1px solid #03081b;
  background: #fff;
}

.pzr__descargar svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}

.pzr__cuerpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}

/* Las habitaciones */

.pzr__habitaciones {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  min-width: 0;
  min-height: 0;
}

.pzr__habitacion {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(6 * var(--u));
  background: #fff;
  border: 1px solid var(--superficie-2);
  border-radius: calc(10 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
}

.pzr__habitacion-cabecera {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.pzr__habitacion-icono {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzr__habitacion-icono svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.pzr__habitacion-nombre {
  flex: 1;
  font: 500 var(--t11) var(--fb);
}

.pzr__regla {
  font: 400 var(--t9) var(--fb);
  color: #8d93a3;
  transition: color 0.3s ease;
}

.pzr__regla[data-ok] {
  color: #2f9e6e;
}

.pzr__cuenta,
.pzr__donde {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font: 400 var(--t10) var(--fb);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  color: #4b5262;
  background: var(--superficie);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.pzr__habitacion[data-llena] .pzr__cuenta,
.pzr__donde[data-ok] {
  color: #2f9e6e;
  background: #e8f6ef;
}

.pzr__plazas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(6 * var(--u));
}

.pzr__plaza {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  min-width: 0;
  height: calc(28 * var(--u));
  padding: 0 calc(6 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--superficie-2);
  box-sizing: border-box;
  transition: background 0.3s ease;
}

.pzr__plaza[data-libre] {
  background: var(--superficie);
  box-shadow: none;
  border: 1px dashed #d6dae8;
}

/* Los avatares: cinco tonos, como en el componente. */

.pzr__avatar {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--t8) var(--fb);
  background: #e2ecfb;
  color: #2c5aa0;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.25, 1),
    opacity 0.3s ease;
}

.pzr__avatar[style*="--tono: 1"] {
  background: #fde7e0;
  color: #b4532f;
}
.pzr__avatar[style*="--tono: 2"] {
  background: #e2f3ef;
  color: #1f7a63;
}
.pzr__avatar[style*="--tono: 3"] {
  background: #f1e6fb;
  color: #6b3fa0;
}
.pzr__avatar[style*="--tono: 4"] {
  background: #fff1d6;
  color: #9a6700;
}

.pzr__plaza[data-libre] .pzr__avatar {
  transform: scale(0.4);
  opacity: 0;
}

.pzr__plaza-nombre {
  min-width: 0;
  font: 400 var(--t9) var(--fb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pzr__plaza[data-libre] .pzr__plaza-nombre {
  color: #8d93a3;
}

/* La columna de la derecha */

.pzr__derecha {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  min-width: 0;
  min-height: 0;
}

.pzr__contadores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8 * var(--u));
}

.pzr__contador {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  background: #fff;
  border: 1px solid var(--superficie-2);
  border-radius: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
}

.pzr__contador-icono {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f6ef;
  color: #2f9e6e;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.pzr__contador[data-pendiente] .pzr__contador-icono {
  background: #fdf2e3;
  color: #b45309;
}

.pzr__contador-icono svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.pzr__contador-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pzr__contador-etiqueta {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzr__contador-valor {
  font: 600 var(--t12) var(--fd);
}

.pzr__lista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  background: var(--superficie);
  border-radius: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  overflow: hidden;
}

.pzr__lista-titulo {
  font: 500 var(--t10) var(--fb);
  color: #4b5262;
  padding-bottom: calc(2 * var(--u));
}

.pzr__fila {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(5 * var(--u)) calc(4 * var(--u));
  border-top: 1px solid var(--superficie-2);
  border-radius: calc(4 * var(--u));
}

.pzr__fila-nombre {
  flex: 1;
  min-width: 0;
  font: 500 var(--t11) var(--fb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pzr__fila-edad {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzr__resto {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
  padding: calc(2 * var(--u)) calc(4 * var(--u));
}

.pzr__operador {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  background: #fff;
  border: 1px solid var(--superficie-2);
  border-radius: calc(10 * var(--u));
  padding: calc(7 * var(--u)) calc(9 * var(--u));
  opacity: 0;
}

.pzr__operador img {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--superficie-2);
  flex: none;
  display: block;
}

.pzr__operador-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzr__operador-nombre {
  font: 500 var(--t11) var(--fb);
}

.pzr__operador-dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzr__repartir {
  flex: none;
  height: calc(26 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(6 * var(--u));
  display: flex;
  align-items: center;
  font: 600 var(--t10) var(--fb);
  color: #fff;
  background: #03081b;
}

/* El nombre que se arrastra y el cursor */

.pzr__arrastre {
  position: absolute;
  left: calc(520 * var(--u));
  top: calc(200 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font: 500 var(--t11) var(--fb);
  background: #fff;
  border-radius: calc(8 * var(--u));
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
}

.pzr__cursor {
  position: absolute;
  left: calc(600 * var(--u));
  top: calc(400 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.pzr__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* El reloj */

.como__pieza[data-activa] .pzr__tarjeta {
  animation: pzrEntra01 10.5s linear infinite;
}

@keyframes pzrEntra01 {
  0%,
  1% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  3.8%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzr__operador {
  animation: pzrEntra32 10.5s linear infinite;
}

@keyframes pzrEntra32 {
  0%,
  30.5% {
    opacity: 0;
    transform: translateY(10px);
  }
  33.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Se pulsa «Repartir el resto» a los 3,9 s. */
.como__pieza[data-activa] .pzr__repartir {
  animation: pzrRepartir 10.5s linear infinite;
}

@keyframes pzrRepartir {
  0%,
  37.1% {
    background: #03081b;
  }
  37.2%,
  39% {
    background: #1c2337;
  }
  39.1%,
  100% {
    background: #03081b;
  }
}

/* Y se marca «Descargar listado» entre 7,0 y 7,7 s. */
.como__pieza[data-activa] .pzr__descargar {
  animation: pzrDescargar 10.5s linear infinite;
}

@keyframes pzrDescargar {
  0%,
  66.6% {
    background: #fff;
  }
  66.7%,
  73.2% {
    background: rgba(0, 194, 255, 0.16);
  }
  73.3%,
  100% {
    background: #fff;
  }
}

/* Clara Vidal se arrastra de la lista a la habitación 2 entre 1,4 y 2,4 s. */
.como__pieza[data-activa] .pzr__arrastre {
  animation: pzrArrastre 10.5s linear infinite;
}

@keyframes pzrArrastre {
  0%,
  13.2% {
    opacity: 0;
    left: calc(520 * var(--u));
    top: calc(200 * var(--u));
  }
  13.3% {
    opacity: 1;
    left: calc(520 * var(--u));
    top: calc(200 * var(--u));
  }
  22.8% {
    opacity: 1;
    left: calc(190 * var(--u));
    top: calc(230 * var(--u));
  }
  23.9%,
  100% {
    opacity: 0;
    left: calc(190 * var(--u));
    top: calc(230 * var(--u));
  }
}

.como__pieza[data-activa] .pzr__cursor {
  animation: pzrCursor 10.5s linear infinite;
}

@keyframes pzrCursor {
  0%,
  7.5% {
    opacity: 0;
    left: calc(600 * var(--u));
    top: calc(400 * var(--u));
    transform: none;
  }
  7.6% {
    opacity: 1;
    left: calc(560 * var(--u));
    top: calc(214 * var(--u));
    transform: none;
  }
  13.2% {
    opacity: 1;
    left: calc(560 * var(--u));
    top: calc(214 * var(--u));
    transform: none;
  }
  13.3%,
  22.8% {
    opacity: 1;
    left: calc(230 * var(--u));
    top: calc(244 * var(--u));
    transform: scale(0.88);
  }
  23.9%,
  37.1% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(405 * var(--u));
    transform: none;
  }
  37.2%,
  39% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(405 * var(--u));
    transform: scale(0.88);
  }
  39.1%,
  43.8% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(405 * var(--u));
    transform: none;
  }
  43.9%,
  100% {
    opacity: 0;
    left: calc(660 * var(--u));
    top: calc(430 * var(--u));
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzr__tarjeta,
  .pzr__operador {
    opacity: 1;
  }

  .pzr__arrastre,
  .pzr__cursor {
    opacity: 0;
  }

  .como__pieza[data-activa] .pzr,
  .como__pieza[data-activa] .pzr__tarjeta,
  .como__pieza[data-activa] .pzr__operador,
  .como__pieza[data-activa] .pzr__repartir,
  .como__pieza[data-activa] .pzr__descargar,
  .como__pieza[data-activa] .pzr__arrastre,
  .como__pieza[data-activa] .pzr__cursor {
    animation: none;
  }
}

/* ---- Pieza: inventario de cupos ----

   Bucle de 9,5 s:

     0,3 / 0,5 / 0,7 s   entran los tres indicadores
     1,0 / 1,2 s         entran los dos hoteles
     2,2 s               se vende una habitación más en el Playa Larga
     2,9 s               y sube el total de cupos vendidos
     3,8 s               el Analítico avisa y marca ese hotel
     4,4 → 5,2 s         el cursor va al botón y lo pulsa
     5,5 s               cuatro habitaciones liberadas: garantía cubierta
     6,2 s               el indicador de garantía se pone a 0 €
     9,05 s              se funde para empezar de nuevo              */

.pzi {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  color: #03081b;
}

.como__pieza[data-activa] .pzi {
  animation: pziCiclo 9.5s linear infinite;
}

@keyframes pziCiclo {
  0%,
  95.2% {
    opacity: 1;
  }
  95.3%,
  100% {
    opacity: 0;
  }
}

/* Los dos estados de cada dato van en el mismo hueco. */

.pzi__antes,
.pzi__luego {
  display: inline-block;
}

.pzi__luego {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
}

.pzi__kpi-valor,
.pzi__kpi-pie,
.pzi__ocupacion-valor,
.pzi__release-texto,
.pzi__liberar {
  position: relative;
}

/* Los indicadores */

.pzi__kpis {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--u));
}

.pzi__kpi {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  background: #fff;
  border: 1px solid var(--superficie-2);
  border-radius: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  min-width: 0;
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  opacity: 0;
}

.pzi__kpi-icono {
  position: relative;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  flex: none;
  border-radius: calc(8 * var(--u));
  background: var(--superficie);
  color: #03081b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzi__kpi-icono svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

.pzi__kpi--garantia .pzi__kpi-icono {
  background: #fdf2e3;
  color: #b45309;
}

.pzi__ok-icono {
  position: absolute;
  opacity: 0;
}

.pzi__kpi-texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.pzi__kpi-etiqueta {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzi__kpi-valor {
  font: 600 var(--t16) / 1.1 var(--fd);
}

.pzi__kpi-valor--garantia {
  color: #b45309;
}

.pzi__kpi-pie {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

/* Los dos hoteles */

.pzi__hoteles {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 * var(--u));
}

.pzi__hotel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  background: #fff;
  border: 1px solid var(--superficie-2);
  border-radius: calc(12 * var(--u));
  padding: calc(14 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  min-width: 0;
  opacity: 0;
}

.pzi__hotel-cabecera {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.pzi__hotel-icono {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: none;
  border-radius: calc(8 * var(--u));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzi__hotel-icono--azul {
  background: #0f6c8c;
}

.pzi__hotel-icono--tierra {
  background: #c27a3a;
}

.pzi__hotel-icono svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.pzi__hotel-texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.pzi__hotel-nombre {
  font: 600 var(--t12) var(--fd);
}

.pzi__hotel-fechas {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzi__hotel-fechas svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  flex: none;
}

.pzi__ocupacion {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
}

.pzi__ocupacion-cifra {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pzi__ocupacion-valor {
  font: 600 var(--t16) / 1 var(--fd);
}

.pzi__ocupacion-etiqueta {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzi__barra {
  height: calc(10 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--superficie-2);
  overflow: hidden;
}

.pzi__barra-fondo {
  display: block;
  height: 100%;
  width: var(--ancho, 0);
  background: #03081b;
  border-radius: inherit;
}

.pzi__barra-fondo--ok {
  background: #2f9e6e;
}

.pzi__barra-fondo--sube {
  width: 60%;
}

.pzi__estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u));
  position: relative;
}

.pzi__marca {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font: 400 var(--t10) var(--fb);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  color: #4b5262;
  background: var(--superficie);
}

.pzi__marca--ok {
  color: #2f9e6e;
  background: #e8f6ef;
}

.pzi__marca--espera {
  color: #b45309;
  background: #fdf2e3;
}

.pzi__marca--luego {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.pzi__release {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzi__release svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  flex: none;
}

/* El aviso del Analítico */

.pzi__alerta {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  background: #fff;
  border: 1px solid #f2d7ad;
  border-radius: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  opacity: 0;
}

.pzi__alerta img {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--superficie-2);
  flex: none;
  display: block;
}

.pzi__alerta-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}

.pzi__alerta-quien {
  font: 600 var(--t10) var(--fb);
  color: #b45309;
}

.pzi__alerta-linea {
  font: 400 var(--t11) / 1.35 var(--fb);
}

.pzi__liberar {
  flex: none;
  height: calc(28 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  display: flex;
  align-items: center;
  font: 600 var(--t10) var(--fb);
  color: #fff;
  background: #03081b;
}

.pzi__cursor {
  position: absolute;
  left: calc(616 * var(--u));
  top: calc(460 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.pzi__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* El reloj */

.como__pieza[data-activa] .pzi__kpi:nth-child(1) {
  animation: pziKpi1 9.5s linear infinite;
}
.como__pieza[data-activa] .pzi__kpi:nth-child(2) {
  animation: pziKpi2 9.5s linear infinite;
}
.como__pieza[data-activa] .pzi__kpi:nth-child(3) {
  animation: pziKpi3 9.5s linear infinite;
}

@keyframes pziKpi1 {
  0%,
  3.2% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  6.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pziKpi2 {
  0%,
  5.3% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  8.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pziKpi3 {
  0%,
  7.4% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  10.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzi__hotel:nth-child(1) {
  animation: pziHotel1 9.5s linear infinite;
}

@keyframes pziHotel1 {
  0%,
  10.5% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  13.7%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* El segundo hotel entra y, de 3,8 a 5,5 s, lleva el cerco del aviso. */
.como__pieza[data-activa] .pzi__hotel--aviso {
  animation: pziHotel2 9.5s linear infinite;
}

@keyframes pziHotel2 {
  0%,
  12.6% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
    border-color: var(--superficie-2);
  }
  15.8%,
  39.9% {
    opacity: 1;
    transform: none;
    border-color: var(--superficie-2);
  }
  40%,
  57.8% {
    opacity: 1;
    transform: none;
    border-color: #f2d7ad;
  }
  57.9%,
  100% {
    opacity: 1;
    transform: none;
    border-color: var(--superficie-2);
  }
}

/* A los 2,2 s se vende una habitación más. */
.como__pieza[data-activa] .pzi__barra-fondo--sube {
  animation: pziBarra 9.5s linear infinite;
}

@keyframes pziBarra {
  0%,
  23.1% {
    width: 60%;
  }
  28.4%,
  100% {
    width: 65%;
  }
}

.como__pieza[data-activa] .pzi__ocupacion-valor .pzi__antes {
  animation: pziApaga22 9.5s linear infinite;
}
.como__pieza[data-activa] .pzi__ocupacion-valor .pzi__luego {
  animation: pziEnciende22 9.5s linear infinite;
}

@keyframes pziApaga22 {
  0%,
  23.1% {
    opacity: 1;
  }
  23.2%,
  100% {
    opacity: 0;
  }
}

@keyframes pziEnciende22 {
  0%,
  23.1% {
    opacity: 0;
  }
  23.2%,
  100% {
    opacity: 1;
  }
}

/* Y a los 2,9 s sube el total de cupos vendidos. */
.como__pieza[data-activa] .pzi__kpi:nth-child(1) .pzi__antes {
  animation: pziApaga29 9.5s linear infinite;
}
.como__pieza[data-activa] .pzi__kpi:nth-child(1) .pzi__luego {
  animation: pziEnciende29 9.5s linear infinite;
}

@keyframes pziApaga29 {
  0%,
  30.4% {
    opacity: 1;
  }
  30.5%,
  100% {
    opacity: 0;
  }
}

@keyframes pziEnciende29 {
  0%,
  30.4% {
    opacity: 0;
  }
  30.5%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzi__alerta {
  animation: pziAlerta 9.5s linear infinite;
}

@keyframes pziAlerta {
  0%,
  39.9% {
    opacity: 0;
    transform: translateY(10px);
    border-color: #f2d7ad;
  }
  43.2%,
  57.8% {
    opacity: 1;
    transform: none;
    border-color: #f2d7ad;
  }
  57.9%,
  100% {
    opacity: 1;
    transform: none;
    border-color: var(--superficie-2);
  }
}

/* A los 5,2 s se pulsa «Liberar» y a los 5,5 queda cubierta. */
.como__pieza[data-activa] .pzi__liberar {
  animation: pziLiberar 9.5s linear infinite;
}

@keyframes pziLiberar {
  0%,
  54.6% {
    color: #fff;
    background: #03081b;
  }
  54.7%,
  56.7% {
    color: #fff;
    background: #1c2337;
  }
  56.8%,
  57.8% {
    color: #fff;
    background: #03081b;
  }
  57.9%,
  100% {
    color: #2f9e6e;
    background: #e8f6ef;
  }
}

.como__pieza[data-activa] .pzi__liberar .pzi__antes,
.como__pieza[data-activa] .pzi__marca--espera,
.como__pieza[data-activa] .pzi__release .pzi__antes {
  animation: pziApaga55 9.5s linear infinite;
}

.como__pieza[data-activa] .pzi__liberar .pzi__luego,
.como__pieza[data-activa] .pzi__marca--luego,
.como__pieza[data-activa] .pzi__release .pzi__luego {
  animation: pziEnciende55 9.5s linear infinite;
}

@keyframes pziApaga55 {
  0%,
  57.8% {
    opacity: 1;
  }
  57.9%,
  100% {
    opacity: 0;
  }
}

@keyframes pziEnciende55 {
  0%,
  57.8% {
    opacity: 0;
  }
  57.9%,
  100% {
    opacity: 1;
  }
}

/* Y a los 6,2 s la garantía se pone a cero. */
.como__pieza[data-activa] .pzi__kpi--garantia .pzi__antes,
.como__pieza[data-activa] .pzi__aviso-icono {
  animation: pziApaga62 9.5s linear infinite;
}

.como__pieza[data-activa] .pzi__kpi--garantia .pzi__luego,
.como__pieza[data-activa] .pzi__ok-icono {
  animation: pziEnciende62 9.5s linear infinite;
}

.como__pieza[data-activa] .pzi__kpi--garantia .pzi__kpi-icono {
  animation: pziIconoOk 9.5s linear infinite;
}

.como__pieza[data-activa] .pzi__kpi-valor--garantia {
  animation: pziValorOk 9.5s linear infinite;
}

@keyframes pziApaga62 {
  0%,
  65.2% {
    opacity: 1;
  }
  65.3%,
  100% {
    opacity: 0;
  }
}

@keyframes pziEnciende62 {
  0%,
  65.2% {
    opacity: 0;
  }
  65.3%,
  100% {
    opacity: 1;
  }
}

@keyframes pziIconoOk {
  0%,
  65.2% {
    background: #fdf2e3;
    color: #b45309;
  }
  65.3%,
  100% {
    background: #e8f6ef;
    color: #2f9e6e;
  }
}

@keyframes pziValorOk {
  0%,
  65.2% {
    color: #b45309;
  }
  65.3%,
  100% {
    color: #03081b;
  }
}

.como__pieza[data-activa] .pzi__cursor {
  animation: pziCursor 9.5s linear infinite;
}

@keyframes pziCursor {
  0%,
  46.2% {
    opacity: 0;
    left: calc(616 * var(--u));
    top: calc(460 * var(--u));
    transform: none;
  }
  46.3%,
  54.6% {
    opacity: 1;
    left: calc(616 * var(--u));
    top: calc(400 * var(--u));
    transform: none;
  }
  54.7%,
  56.7% {
    opacity: 1;
    left: calc(616 * var(--u));
    top: calc(400 * var(--u));
    transform: scale(0.88);
  }
  56.8%,
  63.1% {
    opacity: 1;
    left: calc(616 * var(--u));
    top: calc(400 * var(--u));
    transform: none;
  }
  63.2%,
  100% {
    opacity: 0;
    left: calc(636 * var(--u));
    top: calc(430 * var(--u));
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzi__kpi,
  .pzi__hotel,
  .pzi__alerta,
  .pzi__luego,
  .pzi__marca--luego,
  .pzi__ok-icono {
    opacity: 1;
  }

  .pzi__antes,
  .pzi__marca--espera,
  .pzi__aviso-icono {
    opacity: 0;
  }

  .pzi__barra-fondo--sube {
    width: 65%;
  }

  .pzi__kpi--garantia .pzi__kpi-icono {
    background: #e8f6ef;
    color: #2f9e6e;
  }

  .pzi__kpi-valor--garantia {
    color: #03081b;
  }

  .pzi__alerta,
  .pzi__hotel--aviso {
    border-color: var(--superficie-2);
  }

  .pzi__liberar {
    color: #2f9e6e;
    background: #e8f6ef;
  }

  .pzi__cursor {
    opacity: 0;
  }

  .como__pieza[data-activa] .pzi,
  .como__pieza[data-activa] .pzi__kpi,
  .como__pieza[data-activa] .pzi__hotel,
  .como__pieza[data-activa] .pzi__hotel--aviso,
  .como__pieza[data-activa] .pzi__barra-fondo--sube,
  .como__pieza[data-activa] .pzi__antes,
  .como__pieza[data-activa] .pzi__luego,
  .como__pieza[data-activa] .pzi__marca--espera,
  .como__pieza[data-activa] .pzi__marca--luego,
  .como__pieza[data-activa] .pzi__aviso-icono,
  .como__pieza[data-activa] .pzi__ok-icono,
  .como__pieza[data-activa] .pzi__kpi-icono,
  .como__pieza[data-activa] .pzi__kpi-valor--garantia,
  .como__pieza[data-activa] .pzi__alerta,
  .como__pieza[data-activa] .pzi__liberar,
  .como__pieza[data-activa] .pzi__cursor {
    animation: none;
  }
}

/* ---- Pieza: datos y check-in de viajeros ----

   Bucle de 9 s:

     0,1 / 0,4 s    entran el móvil y la lista del día
     0,8 → 2,4 s    el escáner recorre el QR
     2,6 s          acceso validado
     3,2 s          Marta entra en la lista
     3,6 s          el contador pasa de 1.204 a 1.205
     4,2 s          entra la tarjeta de informes
     4,9 → 5,6 s    el cursor va al botón y lo pulsa
     5,9 s          el informe queda descargado
     8,55 s         se funde para empezar de nuevo              */

.pzk {
  position: absolute;
  inset: 0;
  color: #03081b;
}

.como__pieza[data-activa] .pzk {
  animation: pzkCiclo 9s linear infinite;
}

@keyframes pzkCiclo {
  0%,
  94.9% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

/* El móvil de la viajera */

.pzk__movil {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(14 * var(--u));
  bottom: calc(14 * var(--u));
  width: calc(220 * var(--u));
  border-radius: calc(28 * var(--u));
  background: #fff;
  border: 3px solid #1a1d29;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  box-shadow: 0 12px 28px rgba(3, 8, 27, 0.16);
  opacity: 0;
}

.pzk__muesca {
  position: absolute;
  top: calc(7 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(44 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 999px;
  background: #1a1d29;
  z-index: 2;
}

.pzk__pantalla {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.pzk__portada {
  height: calc(92 * var(--u));
  flex: none;
  position: relative;
  background: var(--superficie-2) url("/assets/img/exp-atletismo.b00d2902.jpg") 50% 40% / cover no-repeat;
}

.pzk__velo {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 27, 0.35);
}

.pzk__evento {
  position: absolute;
  left: calc(12 * var(--u));
  bottom: calc(10 * var(--u));
  font: 600 var(--t12) var(--fd);
  color: #fff;
}

.pzk__viajera {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) 0;
}

.pzk__avatar {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: #e2ecfb;
  color: #2c5aa0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--t9) var(--fb);
  flex: none;
}

.pzk__avatar--lista {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  font-size: var(--t8);
}

.pzk__avatar--lista[style*="--tono: 1"] {
  background: #fde7e0;
  color: #b4532f;
}
.pzk__avatar--lista[style*="--tono: 2"] {
  background: #e2f3ef;
  color: #1f7a63;
}
.pzk__avatar--lista[style*="--tono: 3"] {
  background: #f1e6fb;
  color: #6b3fa0;
}

.pzk__viajera-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pzk__viajera-nombre {
  font: 500 var(--t11) var(--fb);
}

.pzk__viajera-dato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzk__qr-hueco {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--u));
}

.pzk__qr {
  position: relative;
  width: calc(138 * var(--u));
  height: calc(138 * var(--u));
  background: #fff;
  border-radius: calc(8 * var(--u));
  box-shadow: 0 0 0 1px var(--superficie-2);
  padding: calc(8 * var(--u));
  box-sizing: border-box;
  overflow: hidden;
}

.pzk__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pzk__escaner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(3 * var(--u));
  background: #00c2ff;
  box-shadow: 0 0 calc(10 * var(--u)) #00c2ff;
  opacity: 0;
}

.pzk__validado {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
}

.pzk__validado-marca {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  background: #2f9e6e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzk__validado-marca svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

.pzk__acceso {
  margin: 0 calc(12 * var(--u)) calc(14 * var(--u));
  text-align: center;
  font: 600 var(--t10) var(--fb);
  color: #8d93a3;
  background: var(--superficie);
  border-radius: calc(8 * var(--u));
  padding: calc(8 * var(--u));
}

/* La lista del día y los informes */

.pzk__derecha {
  position: absolute;
  left: calc(290 * var(--u));
  right: calc(24 * var(--u));
  top: calc(14 * var(--u));
  bottom: calc(14 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
}

.pzk__lista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  overflow: hidden;
  opacity: 0;
}

.pzk__lista-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pzk__lista-titulo {
  font: 600 var(--t12) var(--fd);
}

.pzk__dentro {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzk__dentro-valor {
  position: relative;
  display: inline-block;
  font: 600 var(--t12) var(--fd);
  color: #2f9e6e;
}

.pzk__antes,
.pzk__luego {
  display: inline-block;
}

.pzk__luego {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
}

.pzk__barra {
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--superficie-2);
  overflow: hidden;
}

.pzk__barra-verde {
  display: block;
  height: 100%;
  width: 86%;
  background: #2f9e6e;
  border-radius: inherit;
}

.pzk__fila-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzk__fila-nombre {
  font: 500 var(--t11) var(--fb);
}

.pzk__fila-dorsal {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzk__fila-hora {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzk__dentro-marca {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #2f9e6e;
  background: #e8f6ef;
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
}

.pzk__informes {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  opacity: 0;
}

.pzk__informes-titulo {
  font: 600 var(--t12) var(--fd);
}

.pzk__informe {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border-top: 1px solid var(--superficie-2);
}

.pzk__informe-icono {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzk__informe-icono svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.pzk__informe-nombre {
  flex: 1;
  font: 500 var(--t11) var(--fb);
}

.pzk__informe-formato {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzk__boton {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: calc(24 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
  font: 600 var(--t10) var(--fb);
  border: 1px solid var(--superficie-2);
  background: #fff;
  box-sizing: border-box;
}

.pzk__cursor {
  position: absolute;
  left: calc(640 * var(--u));
  top: calc(470 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.pzk__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* El reloj */

.como__pieza[data-activa] .pzk__movil {
  animation: pzkEntra01 9s linear infinite;
}

@keyframes pzkEntra01 {
  0%,
  1.1% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  4.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzk__lista {
  animation: pzkEntra04 9s linear infinite;
}

@keyframes pzkEntra04 {
  0%,
  4.4% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  7.8%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* El escáner recorre el QR entre 0,8 y 2,4 s. */
.como__pieza[data-activa] .pzk__escaner {
  animation: pzkEscaner 9s linear infinite;
}

@keyframes pzkEscaner {
  0%,
  8.8% {
    opacity: 0;
    top: 0;
  }
  8.9% {
    opacity: 1;
    top: 0;
  }
  26.5% {
    opacity: 1;
    top: 100%;
  }
  26.6%,
  100% {
    opacity: 0;
    top: 100%;
  }
}

.como__pieza[data-activa] .pzk__validado {
  animation: pzkValidado 9s linear infinite;
}

@keyframes pzkValidado {
  0%,
  28.8% {
    opacity: 0;
    transform: scale(0.9);
  }
  32.2%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.como__pieza[data-activa] .pzk__acceso {
  animation: pzkAcceso 9s linear infinite;
}

@keyframes pzkAcceso {
  0%,
  28.8% {
    color: #8d93a3;
    background: var(--superficie);
  }
  32.2%,
  100% {
    color: #2f9e6e;
    background: #e8f6ef;
  }
}

@keyframes pzkNueva {
  0%,
  35.5% {
    opacity: 0;
    transform: translateY(-10px);
  }
  38.9%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Y el contador sube a los 3,6 s. */
.como__pieza[data-activa] .pzk__dentro-valor .pzk__antes {
  animation: pzkApaga36 9s linear infinite;
}

.como__pieza[data-activa] .pzk__dentro-valor .pzk__luego {
  animation: pzkEnciende36 9s linear infinite;
}

@keyframes pzkApaga36 {
  0%,
  39.9% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0;
  }
}

@keyframes pzkEnciende36 {
  0%,
  39.9% {
    opacity: 0;
  }
  40%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzk__informes {
  animation: pzkEntra42 9s linear infinite;
}

@keyframes pzkEntra42 {
  0%,
  46.6% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  50%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Se pulsa «Descargar» a los 5,6 s y queda descargado a los 5,9. */
.como__pieza[data-activa] .pzk__boton--descarga {
  animation: pzkDescarga 9s linear infinite;
}

@keyframes pzkDescarga {
  0%,
  62.1% {
    color: #03081b;
    background: #fff;
    border-color: var(--superficie-2);
  }
  62.2%,
  65.5% {
    color: #03081b;
    background: rgba(3, 8, 27, 0.08);
    border-color: var(--superficie-2);
  }
  65.6%,
  100% {
    color: #2f9e6e;
    background: #e8f6ef;
    border-color: transparent;
  }
}

.como__pieza[data-activa] .pzk__boton--descarga .pzk__antes {
  animation: pzkApaga59 9s linear infinite;
}

.como__pieza[data-activa] .pzk__boton--descarga .pzk__luego {
  animation: pzkEnciende59 9s linear infinite;
}

@keyframes pzkApaga59 {
  0%,
  65.5% {
    opacity: 1;
  }
  65.6%,
  100% {
    opacity: 0;
  }
}

@keyframes pzkEnciende59 {
  0%,
  65.5% {
    opacity: 0;
  }
  65.6%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzk__cursor {
  animation: pzkCursor 9s linear infinite;
}

@keyframes pzkCursor {
  0%,
  54.3% {
    opacity: 0;
    left: calc(640 * var(--u));
    top: calc(470 * var(--u));
    transform: none;
  }
  54.4%,
  62.1% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(380 * var(--u));
    transform: none;
  }
  62.2%,
  64.4% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(380 * var(--u));
    transform: scale(0.88);
  }
  64.5%,
  73.2% {
    opacity: 1;
    left: calc(640 * var(--u));
    top: calc(380 * var(--u));
    transform: none;
  }
  73.3%,
  100% {
    opacity: 0;
    left: calc(660 * var(--u));
    top: calc(440 * var(--u));
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzk__movil,
  .pzk__lista,
  .pzk__informes,
  .pzk__fila--nueva,
  .pzk__validado,
  .pzk__luego {
    opacity: 1;
  }

  .pzk__validado {
    transform: scale(1);
  }

  .pzk__antes,
  .pzk__escaner {
    opacity: 0;
  }

  .pzk__acceso {
    color: #2f9e6e;
    background: #e8f6ef;
  }

  .pzk__boton--descarga {
    color: #2f9e6e;
    background: #e8f6ef;
    border-color: transparent;
  }

  .pzk__cursor {
    opacity: 0;
  }

  .como__pieza[data-activa] .pzk,
  .como__pieza[data-activa] .pzk__movil,
  .como__pieza[data-activa] .pzk__lista,
  .como__pieza[data-activa] .pzk__escaner,
  .como__pieza[data-activa] .pzk__validado,
  .como__pieza[data-activa] .pzk__acceso,
  .como__pieza[data-activa] .pzk__fila--nueva,
  .como__pieza[data-activa] .pzk__antes,
  .como__pieza[data-activa] .pzk__luego,
  .como__pieza[data-activa] .pzk__informes,
  .como__pieza[data-activa] .pzk__boton--descarga,
  .como__pieza[data-activa] .pzk__cursor {
    animation: none;
  }
}

/* ---- Pieza: cierre del viaje ----

   Bucle de 9 s:

     0,1 s                entra la ficha del viaje
     1,0 / 1,6 / 2,2 s    se liquida cada proveedor
     2,8 / 3,4 / 4,0 s    cuentan ingresos, costes y margen
     4,8 s                viaje cerrado: confeti
     6,0 s                entra el apunte del Analítico
     8,55 s               se funde para empezar de nuevo              */

.pzz {
  position: absolute;
  inset: 0;
  color: #03081b;
}

.como__pieza[data-activa] .pzz {
  animation: pzzCiclo 9s linear infinite;
}

@keyframes pzzCiclo {
  0%,
  94.9% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

/* La ficha del viaje */

.pzz__viaje {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  width: calc(380 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.pzz__portada {
  height: calc(118 * var(--u));
  flex: none;
  position: relative;
  background: var(--superficie-2) url("/assets/img/exp-safari.4448b60a.jpg") 50% 45% / cover no-repeat;
}

.pzz__velo {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 27, 0.3);
}

.pzz__portada-texto {
  position: absolute;
  left: calc(14 * var(--u));
  bottom: calc(12 * var(--u));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pzz__portada-titulo {
  font: 600 var(--t12) var(--fd);
  color: #fff;
}

.pzz__portada-dato {
  font: 400 var(--t10) var(--fb);
  color: rgba(255, 255, 255, 0.85);
}

.pzz__cerrado {
  position: absolute;
  right: calc(12 * var(--u));
  top: calc(12 * var(--u));
  display: inline-flex;
  align-items: center;
  font: 600 var(--t10) var(--fb);
  color: #fff;
  background: #2f9e6e;
  border-radius: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  opacity: 0;
  transform: scale(0.8);
}

.pzz__proveedores {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: calc(6 * var(--u)) calc(14 * var(--u));
}

.pzz__proveedores-titulo {
  font: 500 var(--t10) var(--fb);
  color: #4b5262;
}

.pzz__proveedor {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(7 * var(--u)) 0;
  border-top: 1px solid var(--superficie-2);
}

.pzz__proveedor-icono {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  flex: none;
  border-radius: calc(7 * var(--u));
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzz__proveedor-icono svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

.pzz__proveedor-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzz__proveedor-nombre {
  font: 500 var(--t11) var(--fb);
}

.pzz__proveedor-valor {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzz__marca {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font: 400 var(--t10) var(--fb);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  color: #b45309;
  background: #fdf2e3;
}

.pzz__marca--ok {
  position: absolute;
  right: 0;
  color: #2f9e6e;
  background: #e8f6ef;
  opacity: 0;
}

/* Las cifras del viaje */

.pzz__cifras {
  position: absolute;
  left: calc(420 * var(--u));
  right: calc(24 * var(--u));
  top: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.pzz__cifra {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(4 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  box-sizing: border-box;
  opacity: 0;
}

.pzz__cifra-etiqueta {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzz__cifra-valor {
  font: 700 var(--t16) / 1.1 var(--fd);
  letter-spacing: -0.01em;
}

.pzz__cifra--margen .pzz__cifra-valor {
  color: #2f9e6e;
}

.pzz__analitico {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  opacity: 0;
}

.pzz__analitico img {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--superficie-2);
  flex: none;
  display: block;
}

.pzz__analitico-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pzz__analitico-nombre {
  font: 600 var(--t10) var(--fb);
}

.pzz__analitico-linea {
  font: 400 var(--t11) / 1.35 var(--fb);
}

/* El confeti */

.pzz__confeti {
  position: absolute;
  left: calc(470 * var(--u));
  top: calc(130 * var(--u));
  width: 0;
  height: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
}

.pzz__papel {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--ancho) * var(--u));
  height: calc(var(--alto) * var(--u));
  border-radius: 1px;
  background: var(--color);
  opacity: 0;
}

/* El confeti solo se mueve en su ventana de 1,5 s dentro del bucle. */
@keyframes pzzPapel {
  0%,
  53.3% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  53.4% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  70%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) rotate(var(--giro));
  }
}

/* El reloj */

.como__pieza[data-activa] .pzz__viaje {
  animation: pzzEntra01 9s linear infinite;
}

@keyframes pzzEntra01 {
  0%,
  1.1% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  4.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Cada proveedor se liquida a los 1,0 · 1,6 y 2,2 s. */
.como__pieza[data-activa] .pzz__proveedor:nth-of-type(1) .pzz__marca--espera {
  animation: pzzApaga10 9s linear infinite;
}
.como__pieza[data-activa] .pzz__proveedor:nth-of-type(1) .pzz__marca--ok {
  animation: pzzEnciende10 9s linear infinite;
}
.como__pieza[data-activa] .pzz__proveedor:nth-of-type(2) .pzz__marca--espera {
  animation: pzzApaga16 9s linear infinite;
}
.como__pieza[data-activa] .pzz__proveedor:nth-of-type(2) .pzz__marca--ok {
  animation: pzzEnciende16 9s linear infinite;
}
.como__pieza[data-activa] .pzz__proveedor:nth-of-type(3) .pzz__marca--espera {
  animation: pzzApaga22 9s linear infinite;
}
.como__pieza[data-activa] .pzz__proveedor:nth-of-type(3) .pzz__marca--ok {
  animation: pzzEnciende22 9s linear infinite;
}

@keyframes pzzApaga10 {
  0%,
  11% {
    opacity: 1;
  }
  11.1%,
  100% {
    opacity: 0;
  }
}
@keyframes pzzEnciende10 {
  0%,
  11% {
    opacity: 0;
  }
  11.1%,
  100% {
    opacity: 1;
  }
}
@keyframes pzzApaga16 {
  0%,
  17.7% {
    opacity: 1;
  }
  17.8%,
  100% {
    opacity: 0;
  }
}
@keyframes pzzEnciende16 {
  0%,
  17.7% {
    opacity: 0;
  }
  17.8%,
  100% {
    opacity: 1;
  }
}
@keyframes pzzApaga22 {
  0%,
  24.4% {
    opacity: 1;
  }
  24.5%,
  100% {
    opacity: 0;
  }
}
@keyframes pzzEnciende22 {
  0%,
  24.4% {
    opacity: 0;
  }
  24.5%,
  100% {
    opacity: 1;
  }
}

@keyframes pzzCifra1 {
  0%,
  28.9% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  32.2%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzzCifra2 {
  0%,
  35.6% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  38.9%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzzCifra3 {
  0%,
  42.2% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  45.6%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* A los 4,8 s el viaje queda cerrado. */
.como__pieza[data-activa] .pzz__cerrado {
  animation: pzzCerrado 9s linear infinite;
}

@keyframes pzzCerrado {
  0%,
  53.3% {
    opacity: 0;
    transform: scale(0.8);
  }
  56.7%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.como__pieza[data-activa] .pzz__confeti {
  animation: pzzConfeti 9s steps(1) infinite;
}

@keyframes pzzConfeti {
  0%,
  53.3% {
    opacity: 0;
  }
  53.4%,
  70% {
    opacity: 1;
  }
  70.1%,
  100% {
    opacity: 0;
  }
}

.como__pieza[data-activa] .pzz__papel {
  animation: pzzPapel 9s linear infinite;
  animation-delay: calc(var(--retraso) * -1);
}

.como__pieza[data-activa] .pzz__analitico {
  animation: pzzEntra60 9s linear infinite;
}

@keyframes pzzEntra60 {
  0%,
  66.6% {
    opacity: 0;
    transform: translateY(10px);
  }
  70%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzz__viaje,
  .pzz__cifra,
  .pzz__analitico,
  .pzz__marca--ok {
    opacity: 1;
  }

  .pzz__marca--espera {
    opacity: 0;
  }

  .pzz__cerrado {
    opacity: 1;
    transform: scale(1);
  }

  .pzz__confeti {
    display: none;
  }

  .como__pieza[data-activa] .pzz,
  .como__pieza[data-activa] .pzz__viaje,
  .como__pieza[data-activa] .pzz__marca--espera,
  .como__pieza[data-activa] .pzz__marca--ok,
  .como__pieza[data-activa] .pzz__cifra,
  .como__pieza[data-activa] .pzz__cerrado,
  .como__pieza[data-activa] .pzz__confeti,
  .como__pieza[data-activa] .pzz__papel,
  .como__pieza[data-activa] .pzz__analitico {
    animation: none;
  }
}

/* ---- Pieza: estadísticas ----

   Bucle de 8 s:

     0,1 s                    entra la tarjeta
     0,4 / 0,9 / 1,4 / 1,9    cuenta cada indicador (0,45 s cada uno)
     2,4 → 3,9 s              se dibuja la curva de ventas
     4,1 s                    se marca el pico del 14 de octubre
     4,6 / 4,9 / 5,2 s        crecen las barras del top
     7,55 s                   se funde para empezar de nuevo              */

.pzs {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  border: 1px solid var(--superficie-2);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #03081b;
  opacity: 0;
}

.como__pieza[data-activa] .pzs {
  animation: pzsCiclo 8s linear infinite;
}

@keyframes pzsCiclo {
  0%,
  1.3% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  5%,
  94.3% {
    opacity: 1;
    transform: none;
  }
  94.4%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Los cuatro indicadores */

.pzs__indicadores {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--superficie-2);
}

.pzs__indicador {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  min-width: 0;
}

.pzs__indicador + .pzs__indicador {
  border-left: 1px solid var(--superficie-2);
}

.pzs__indicador-etiqueta {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzs__indicador-etiqueta svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  flex: none;
}

.pzs__indicador-cifra {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--u));
}

.pzs__indicador-valor {
  font: 600 var(--t16) / 1.1 var(--fd);
}

.pzs__delta {
  font: 600 var(--t10) var(--fb);
  color: #2f9e6e;
  opacity: 0;
}

/* La curva de ventas */

.pzs__cuerpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
}

.pzs__grafica {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-right: 1px solid var(--superficie-2);
  min-width: 0;
}

.pzs__grafica-titulo {
  font: 600 var(--t12) var(--fd);
}

.pzs__grafica-rango {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzs__lienzo {
  position: relative;
  flex: 1;
  min-height: 0;
}

.pzs__trazo {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  overflow: hidden;
}

.pzs__trazo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pzs__pico {
  position: absolute;
  left: calc(var(--x) - 4px);
  top: calc(var(--y) - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00c2ff;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 4px #00c2ff;
  opacity: 0;
}

.pzs__globo {
  position: absolute;
  left: calc(var(--x) - calc(36 * var(--u)));
  top: calc(var(--y) - calc(46 * var(--u)));
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #03081b;
  border-radius: calc(6 * var(--u));
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
}

.pzs__globo-fecha {
  font: 400 var(--t9) var(--fb);
  color: rgba(255, 255, 255, 0.75);
}

.pzs__globo-valor {
  font: 600 var(--t11) var(--fb);
  color: #fff;
}

.pzs__escala {
  display: flex;
  justify-content: space-between;
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

/* El top de experiencias */

.pzs__top {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  min-width: 0;
}

.pzs__top-titulo {
  font: 600 var(--t12) var(--fd);
  padding-bottom: calc(4 * var(--u));
}

.pzs__experiencia {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  border-top: 1px solid var(--superficie-2);
  padding: calc(6 * var(--u)) 0;
  min-height: 0;
}

.pzs__experiencia-foto {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--superficie-2) var(--foto) center / cover no-repeat;
}

.pzs__experiencia-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}

.pzs__experiencia-arriba {
  display: flex;
  justify-content: space-between;
  gap: calc(6 * var(--u));
}

.pzs__experiencia-nombre {
  font: 500 var(--t11) var(--fb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pzs__experiencia-valor {
  font: 600 var(--t10) var(--fb);
}

.pzs__experiencia-barra {
  display: block;
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--superficie-2);
  overflow: hidden;
}

.pzs__experiencia-fondo {
  display: block;
  height: 100%;
  width: 0;
  background: #03081b;
  border-radius: inherit;
}

/* El reloj */

.como__pieza[data-activa] .pzs__indicador:nth-child(1) .pzs__delta {
  animation: pzsDelta1 8s linear infinite;
}

.como__pieza[data-activa] .pzs__indicador:nth-child(2) .pzs__delta {
  animation: pzsDelta2 8s linear infinite;
}

@keyframes pzsDelta1 {
  0%,
  10.6% {
    opacity: 0;
  }
  14.4%,
  100% {
    opacity: 1;
  }
}

@keyframes pzsDelta2 {
  0%,
  16.9% {
    opacity: 0;
  }
  20.6%,
  100% {
    opacity: 1;
  }
}

/* La curva se dibuja entre 2,4 y 3,9 s. */
.como__pieza[data-activa] .pzs__trazo {
  animation: pzsTrazo 8s linear infinite;
}

@keyframes pzsTrazo {
  0%,
  30% {
    width: 0;
  }
  48.8%,
  100% {
    width: 100%;
  }
}

.como__pieza[data-activa] .pzs__pico {
  animation: pzsPico 8s linear infinite;
}

@keyframes pzsPico {
  0%,
  51.2% {
    opacity: 0;
  }
  55%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzs__globo {
  animation: pzsGlobo 8s linear infinite;
}

@keyframes pzsGlobo {
  0%,
  51.2% {
    opacity: 0;
    transform: translateY(4px);
  }
  55%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Y las barras del top crecen a 4,6 · 4,9 y 5,2 s. */
.como__pieza[data-activa] .pzs__experiencia:nth-of-type(1) .pzs__experiencia-fondo {
  animation: pzsBarra1 8s linear infinite;
}
.como__pieza[data-activa] .pzs__experiencia:nth-of-type(2) .pzs__experiencia-fondo {
  animation: pzsBarra2 8s linear infinite;
}
.como__pieza[data-activa] .pzs__experiencia:nth-of-type(3) .pzs__experiencia-fondo {
  animation: pzsBarra3 8s linear infinite;
}

@keyframes pzsBarra1 {
  0%,
  57.5% {
    width: 0;
  }
  65%,
  100% {
    width: var(--ancho);
  }
}

@keyframes pzsBarra2 {
  0%,
  61.3% {
    width: 0;
  }
  68.8%,
  100% {
    width: var(--ancho);
  }
}

@keyframes pzsBarra3 {
  0%,
  65% {
    width: 0;
  }
  72.5%,
  100% {
    width: var(--ancho);
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzs,
  .pzs__delta,
  .pzs__pico,
  .pzs__globo {
    opacity: 1;
  }

  .pzs__globo {
    transform: none;
  }

  .pzs__trazo {
    width: 100%;
  }

  .pzs__experiencia-fondo {
    width: var(--ancho);
  }

  .como__pieza[data-activa] .pzs,
  .como__pieza[data-activa] .pzs__delta,
  .como__pieza[data-activa] .pzs__trazo,
  .como__pieza[data-activa] .pzs__pico,
  .como__pieza[data-activa] .pzs__globo,
  .como__pieza[data-activa] .pzs__experiencia-fondo {
    animation: none;
  }
}

/* ---- Pieza: facturación ----

   Bucle de 9 s:

     0,1 / 0,5 s              entran la factura y la columna de ERP
     0,6 / 1,0 / 1,4 / 1,8    entra cada línea
     2,3 s                    cuenta el total
     3,2 s                    la factura queda emitida
     3,6 s                    aparece la línea hacia el ERP
     3,8 → 5,0 s              el dato viaja
     5,0 s                    GIAV queda sincronizada
     8,55 s                   se funde para empezar de nuevo              */

.pzf {
  position: absolute;
  inset: 0;
  color: #03081b;
}

.como__pieza[data-activa] .pzf {
  animation: pzfCiclo 9s linear infinite;
}

@keyframes pzfCiclo {
  0%,
  94.9% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

/* La factura */

.pzf__factura {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  width: calc(290 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  padding: calc(16 * var(--u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  opacity: 0;
}

.pzf__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(10 * var(--u));
}

.pzf__emisor {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzf__marca {
  font: 600 var(--t12) var(--fd);
  color: #0f6c8c;
}

.pzf__numero {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzf__emitida {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font: 400 var(--t10) var(--fb);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  color: #2f9e6e;
  background: #e8f6ef;
  opacity: 0;
}

.pzf__cliente {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--superficie);
  border-radius: calc(6 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
}

.pzf__cliente-etiqueta {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzf__cliente-nombre {
  font: 500 var(--t11) var(--fb);
}

.pzf__lineas {
  display: flex;
  flex-direction: column;
}

.pzf__linea {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border-top: 1px solid var(--superficie-2);
  opacity: 0;
}

.pzf__linea-icono {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--superficie);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzf__linea-icono svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

.pzf__linea-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzf__linea-nombre {
  font: 500 var(--t11) var(--fb);
}

.pzf__linea-detalle {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzf__linea-valor {
  font: 600 var(--t11) var(--fb);
}

.pzf__totales {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  opacity: 0;
}

.pzf__total-fila {
  display: flex;
  justify-content: space-between;
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzf__total-final {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--superficie-2);
  padding-top: calc(6 * var(--u));
}

.pzf__total-etiqueta {
  font: 600 var(--t11) var(--fb);
}

.pzf__total-valor {
  font: 700 var(--t16) var(--fd);
}

/* La línea por la que viaja el dato */

.pzf__hilo {
  position: absolute;
  left: calc(330 * var(--u));
  width: calc(140 * var(--u));
  top: calc(120 * var(--u));
  height: 1px;
  background: repeating-linear-gradient(90deg, #cfd4e7 0 4px, transparent 4px 8px);
  opacity: 0;
}

.pzf__punto {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00c2ff;
  box-shadow: 0 0 8px #00c2ff;
  opacity: 0;
}

.pzf__punto--dos {
  width: 5px;
  height: 5px;
  box-shadow: none;
}

/* La columna del ERP */

.pzf__erps {
  position: absolute;
  left: calc(470 * var(--u));
  right: calc(24 * var(--u));
  top: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  opacity: 0;
}

.pzf__erps-titulo {
  font: 500 var(--t10) var(--fb);
  color: #4b5262;
}

.pzf__erp-logo {
  width: calc(70 * var(--u));
  height: calc(22 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
}

.pzf__erp-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pzf__erp-nombre {
  font: 600 var(--t10) / 1.1 var(--fb);
}

.pzf__erp-hueco {
  flex: 1;
}

.pzf__marca-estado {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font: 400 var(--t10) var(--fb);
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  color: #4b5262;
  background: var(--superficie);
}

.pzf__marca-estado svg {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  flex: none;
}

.pzf__marca-estado--ok {
  position: absolute;
  right: calc(12 * var(--u));
  color: #2f9e6e;
  background: #e8f6ef;
  opacity: 0;
}

/* El reloj */

.como__pieza[data-activa] .pzf__factura {
  animation: pzfEntra01 9s linear infinite;
}

@keyframes pzfEntra01 {
  0%,
  1.1% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  4.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzf__erps {
  animation: pzfEntra05 9s linear infinite;
}

@keyframes pzfEntra05 {
  0%,
  5.6% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  8.9%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzf__linea:nth-child(1) {
  animation: pzfLinea1 9s linear infinite;
}
.como__pieza[data-activa] .pzf__linea:nth-child(2) {
  animation: pzfLinea2 9s linear infinite;
}
.como__pieza[data-activa] .pzf__linea:nth-child(3) {
  animation: pzfLinea3 9s linear infinite;
}
.como__pieza[data-activa] .pzf__linea:nth-child(4) {
  animation: pzfLinea4 9s linear infinite;
}

@keyframes pzfLinea1 {
  0%,
  6.6% {
    opacity: 0;
    transform: translateX(-8px);
  }
  10%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzfLinea2 {
  0%,
  11.1% {
    opacity: 0;
    transform: translateX(-8px);
  }
  14.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzfLinea3 {
  0%,
  15.5% {
    opacity: 0;
    transform: translateX(-8px);
  }
  18.9%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzfLinea4 {
  0%,
  20% {
    opacity: 0;
    transform: translateX(-8px);
  }
  23.3%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzf__totales {
  animation: pzfEntra23 9s linear infinite;
}

@keyframes pzfEntra23 {
  0%,
  25.5% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  28.9%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* La factura se emite a los 3,2 s. */
.como__pieza[data-activa] .pzf__emitida {
  animation: pzfEmitida 9s linear infinite;
}

@keyframes pzfEmitida {
  0%,
  35.5% {
    opacity: 0;
  }
  38.9%,
  100% {
    opacity: 1;
  }
}

/* La línea aparece a los 3,6 s y el dato viaja de 3,8 a 5,0 s. */
.como__pieza[data-activa] .pzf__hilo {
  animation: pzfHilo 9s linear infinite;
}

@keyframes pzfHilo {
  0%,
  39.9% {
    opacity: 0;
  }
  40%,
  100% {
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzf__punto--uno {
  animation: pzfPunto1 9s linear infinite;
}

.como__pieza[data-activa] .pzf__punto--dos {
  animation: pzfPunto2 9s linear infinite;
}

@keyframes pzfPunto1 {
  0%,
  42.1% {
    opacity: 0;
    left: 0;
  }
  42.2% {
    opacity: 1;
    left: 0;
  }
  55.5% {
    opacity: 1;
    left: 100%;
  }
  55.6%,
  100% {
    opacity: 0;
    left: 100%;
  }
}

@keyframes pzfPunto2 {
  0%,
  45.4% {
    opacity: 0;
    left: 0;
  }
  45.5% {
    opacity: 0.7;
    left: 0;
  }
  55.5% {
    opacity: 0.7;
    left: 75%;
  }
  55.6%,
  100% {
    opacity: 0;
    left: 75%;
  }
}

@keyframes pzfSync {
  0%,
  55.5% {
    box-shadow:
      0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
      0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  }
  55.6%,
  100% {
    box-shadow:
      0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
      0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06),
      0 0 0 1px #bfe6d3;
  }
}

.como__pieza[data-activa] .pzf__marca-estado--antes {
  animation: pzfApaga50 9s linear infinite;
}

.como__pieza[data-activa] .pzf__marca-estado--ok {
  animation: pzfEnciende50 9s linear infinite;
}

@keyframes pzfApaga50 {
  0%,
  55.5% {
    opacity: 1;
  }
  55.6%,
  100% {
    opacity: 0;
  }
}

@keyframes pzfEnciende50 {
  0%,
  55.5% {
    opacity: 0;
  }
  55.6%,
  100% {
    opacity: 1;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzf__factura,
  .pzf__erps,
  .pzf__linea,
  .pzf__totales,
  .pzf__emitida,
  .pzf__hilo,
  .pzf__marca-estado--ok {
    opacity: 1;
  }

  .pzf__marca-estado--antes,
  .pzf__punto {
    opacity: 0;
  }

  .como__pieza[data-activa] .pzf,
  .como__pieza[data-activa] .pzf__factura,
  .como__pieza[data-activa] .pzf__erps,
  .como__pieza[data-activa] .pzf__linea,
  .como__pieza[data-activa] .pzf__totales,
  .como__pieza[data-activa] .pzf__emitida,
  .como__pieza[data-activa] .pzf__hilo,
  .como__pieza[data-activa] .pzf__punto,
  .como__pieza[data-activa] .pzf__erp--conectado,
  .como__pieza[data-activa] .pzf__marca-estado--antes,
  .como__pieza[data-activa] .pzf__marca-estado--ok {
    animation: none;
  }
}

/* ---- Pieza: CRM de clientes y viajeros ----

   Bucle de 9 s:

     0,1 s                entra la ficha
     0,6 s                entran los datos
     1,4 → 3,65 s         sale la actividad, de la más antigua a la última
     4,6 / 4,9 / 5,2 s    entran las tres reservas
     8,55 s               se funde para empezar de nuevo              */

.pzm {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  border: 1px solid var(--superficie-2);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #03081b;
  opacity: 0;
}

.como__pieza[data-activa] .pzm {
  animation: pzmCiclo 9s linear infinite;
}

@keyframes pzmCiclo {
  0%,
  1.1% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  4.4%,
  94.9% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* La cabecera */

.pzm__cabecera {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-bottom: 1px solid var(--superficie-2);
}

.pzm__avatar {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: none;
  border-radius: 50%;
  background: #e2f3ef;
  color: #1f7a63;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--t12) var(--fb);
}

.pzm__quien {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
}

.pzm__nombre {
  font: 600 var(--t12) var(--fd);
}

.pzm__comunidad {
  font: 400 var(--t10) var(--fb);
  color: #4b5262;
}

.pzm__indicador {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: calc(14 * var(--u));
  border-left: 1px solid var(--superficie-2);
}

.pzm__indicador-etiqueta {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

.pzm__indicador-valor {
  font: 600 var(--t12) var(--fd);
}

/* Las tres columnas */

.pzm__cuerpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 38fr) minmax(0, 32fr);
}

.pzm__columna-titulo {
  font: 600 var(--t11) var(--fd);
}

.pzm__datos {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  min-width: 0;
  opacity: 0;
}

.pzm__dato {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font: 400 var(--t10) var(--fb);
  min-width: 0;
}

.pzm__dato svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  flex: none;
}

.pzm__dato-valor {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pzm__activa {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font: 400 var(--t10) var(--fb);
  color: #2f9e6e;
  background: #e8f6ef;
  border-radius: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
}

.pzm__activa-punto {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: #2f9e6e;
}

/* La actividad */

.pzm__actividad {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-left: 1px solid var(--superficie-2);
  border-right: 1px solid var(--superficie-2);
  min-height: 0;
  overflow: hidden;
}

.pzm__hilo {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(4 * var(--u));
}

.pzm__hilo::before {
  content: "";
  position: absolute;
  left: calc(11 * var(--u));
  top: 0;
  bottom: calc(10 * var(--u));
  width: 1px;
  background: var(--superficie-2);
}

.pzm__apunte {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(3 * var(--u)) 0;
  opacity: 0;
}

.pzm__apunte-icono {
  position: relative;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzm__apunte-icono svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}

.pzm__apunte-texto {
  flex: 1;
  min-width: 0;
  font: 400 var(--t10) / 1.3 var(--fb);
}

.pzm__apunte-hora {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

/* Las reservas */

.pzm__reservas {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  min-height: 0;
}

.pzm__reserva {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  background: #fff;
  border: 1px solid var(--superficie-2);
  border-radius: calc(8 * var(--u));
  padding: calc(7 * var(--u));
  opacity: 0;
}

.pzm__reserva-icono {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  flex: none;
  border-radius: calc(6 * var(--u));
  background: var(--fondo);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pzm__reserva-icono svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}

.pzm__reserva-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pzm__reserva-nombre {
  font: 500 var(--t11) var(--fb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pzm__reserva-fecha {
  font: 400 var(--t9) var(--fb);
  color: #4b5262;
}

/* El reloj */

.como__pieza[data-activa] .pzm__datos {
  animation: pzmEntra06 9s linear infinite;
}

@keyframes pzmEntra06 {
  0%,
  6.6% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  10%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Cada apunte sale 0,45 s después del anterior, del más antiguo al último. */
.como__pieza[data-activa] .pzm__apunte {
  animation: pzmApunte 9s linear infinite;
  animation-delay: calc(var(--orden) * 0.45s);
}

@keyframes pzmApunte {
  0%,
  15.5% {
    opacity: 0;
    transform: translateY(8px);
  }
  18.9%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.como__pieza[data-activa] .pzm__reserva:nth-of-type(1) {
  animation: pzmReserva1 9s linear infinite;
}
.como__pieza[data-activa] .pzm__reserva:nth-of-type(2) {
  animation: pzmReserva2 9s linear infinite;
}
.como__pieza[data-activa] .pzm__reserva:nth-of-type(3) {
  animation: pzmReserva3 9s linear infinite;
}

@keyframes pzmReserva1 {
  0%,
  51.1% {
    opacity: 0;
    transform: translateX(8px);
  }
  54.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzmReserva2 {
  0%,
  54.4% {
    opacity: 0;
    transform: translateX(8px);
  }
  57.8%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pzmReserva3 {
  0%,
  57.8% {
    opacity: 0;
    transform: translateX(8px);
  }
  61.1%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzm,
  .pzm__datos,
  .pzm__apunte,
  .pzm__reserva {
    opacity: 1;
  }

  .como__pieza[data-activa] .pzm,
  .como__pieza[data-activa] .pzm__datos,
  .como__pieza[data-activa] .pzm__apunte,
  .como__pieza[data-activa] .pzm__reserva {
    animation: none;
  }
}

/* ---- Pieza: integraciones ----

   Bucle de 8,8 s. Cada herramienta se conecta 0,33 s después de la
   anterior, empezando a los 1,6 s; la curva se dibuja, la chispa la
   recorre y queda el visto. A los 6,55 s sale el recuento.

   Con quince nodos los tiempos salen de --orden, así que no hace falta
   una regla por nodo: el retraso es orden × 0,33 s.                  */

.pzn {
  position: absolute;
  inset: 0;
  color: #03081b;
}

.como__pieza[data-activa] .pzn {
  animation: pznCiclo 8.8s linear infinite;
}

@keyframes pznCiclo {
  0%,
  94.9% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

/* Las curvas */

.pzn__curvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pzn__curvas path {
  stroke: #dfe3ee;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* El núcleo */

.pzn__nucleo {
  position: absolute;
  left: calc(290 * var(--u));
  top: calc(196 * var(--u));
  width: calc(140 * var(--u));
  height: calc(52 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06),
    0 0 0 calc(6 * var(--u)) rgba(0, 194, 255, 0.1),
    0 0 calc(30 * var(--u)) rgba(0, 194, 255, 0.35);
  z-index: 3;
  opacity: 0;
  transform: scale(0.9);
}

.pzn__nucleo img {
  display: block;
  height: calc(20 * var(--u));
  width: auto;
}

/* Los rótulos de cada grupo */

.pzn__grupo {
  position: absolute;
  left: calc(var(--izq) * var(--u));
  top: calc(var(--arr) * var(--u));
  transform: translate(-50%, -50%);
  font: 600 var(--t8) var(--fb);
  letter-spacing: 0.02em;
  color: #8d93a3;
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
}

/* Las herramientas */

.pzn__nodo {
  position: absolute;
  left: calc(var(--izq) * var(--u));
  top: calc(var(--arr) * var(--u));
  width: calc(80 * var(--u));
  height: calc(36 * var(--u));
  box-sizing: border-box;
  background: #fff;
  border-radius: calc(8 * var(--u));
  box-shadow:
    0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(3, 8, 27, 0.08),
    0 0 0 1px #edf0f6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  z-index: 3;
  opacity: 0;
  transform: scale(0.85);
}

.pzn__nodo img {
  height: calc(var(--alto) * var(--u));
  width: auto;
  max-width: calc(62 * var(--u));
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.45;
}

.pzn__visto {
  position: absolute;
  right: calc(-4 * var(--u));
  top: calc(-4 * var(--u));
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border-radius: 50%;
  background: #2f9e6e;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
  opacity: 0;
  transform: scale(0.4);
}

.pzn__visto svg {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
}

/* El recuento */

.pzn__recuento {
  position: absolute;
  left: 50%;
  bottom: calc(6 * var(--u));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  background: #fff;
  border-radius: 999px;
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(3, 8, 27, 0.1),
    0 1px calc(2 * var(--u)) rgba(3, 8, 27, 0.06);
  padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  font: 600 var(--t11) var(--fb);
  white-space: nowrap;
  z-index: 4;
  opacity: 0;
}

.pzn__recuento-marca {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: #2f9e6e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.pzn__recuento-marca svg {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

/* El reloj. Todo sale de --orden: el nodo i se conecta a 1,6 + i × 0,33 s,
   que sobre 8,8 s son 18,2% + i × 3,75%. */

.como__pieza[data-activa] .pzn__nucleo {
  animation: pznNucleo 8.8s linear infinite;
}

@keyframes pznNucleo {
  0%,
  2.3% {
    opacity: 0;
    transform: scale(0.9);
  }
  5.7%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.como__pieza[data-activa] .pzn__grupo {
  animation: pznGrupo 8.8s linear infinite;
}

@keyframes pznGrupo {
  0%,
  6.8% {
    opacity: 0;
  }
  11.4%,
  100% {
    opacity: 1;
  }
}

/* Las tarjetas entran escalonadas desde los 0,5 s, cada 0,04 s. */
.como__pieza[data-activa] .pzn__nodo {
  animation: pznNodo 8.8s linear infinite;
  animation-delay: calc(var(--orden) * -0.04s);
}

@keyframes pznNodo {
  0%,
  5.7% {
    opacity: 0;
    transform: scale(0.85);
  }
  9.1%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* La curva se dibuja y se queda azul. */
.como__pieza[data-activa] .pzn__curvas path {
  animation: pznCurva 8.8s linear infinite;
  animation-delay: calc(var(--orden) * 0.33s);
}

@keyframes pznCurva {
  0%,
  18.1% {
    stroke-dashoffset: 1;
    stroke: #dfe3ee;
  }
  21.5% {
    stroke-dashoffset: 0;
    stroke: #dfe3ee;
  }
  21.6%,
  100% {
    stroke-dashoffset: 0;
    stroke: #9fdff3;
  }
}

/* Y el logotipo se enciende con su visto. */
.como__pieza[data-activa] .pzn__nodo img {
  animation: pznLogo 8.8s linear infinite;
  animation-delay: calc(var(--orden) * 0.33s);
}

@keyframes pznLogo {
  0%,
  21.5% {
    filter: grayscale(1);
    opacity: 0.45;
  }
  21.6%,
  100% {
    filter: grayscale(0);
    opacity: 1;
  }
}

.como__pieza[data-activa] .pzn__visto {
  animation: pznVisto 8.8s linear infinite;
  animation-delay: calc(var(--orden) * 0.33s);
}

@keyframes pznVisto {
  0%,
  21.5% {
    opacity: 0;
    transform: scale(0.4);
  }
  24.4%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.como__pieza[data-activa] .pzn__recuento {
  animation: pznRecuento 8.8s linear infinite;
}

@keyframes pznRecuento {
  0%,
  74.4% {
    opacity: 0;
  }
  78.4%,
  100% {
    opacity: 1;
  }
}

/* Sin movimiento: la pieza se queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .pzn__nucleo,
  .pzn__grupo,
  .pzn__nodo,
  .pzn__visto,
  .pzn__recuento {
    opacity: 1;
    transform: none;
  }

  .pzn__nucleo,
  .pzn__nodo {
    transform: scale(1);
  }

  .pzn__recuento {
    transform: translateX(-50%);
  }

  .pzn__curvas path {
    stroke-dashoffset: 0;
    stroke: #9fdff3;
  }

  .pzn__nodo img {
    filter: none;
    opacity: 1;
  }

  .como__pieza[data-activa] .pzn,
  .como__pieza[data-activa] .pzn__nucleo,
  .como__pieza[data-activa] .pzn__grupo,
  .como__pieza[data-activa] .pzn__nodo,
  .como__pieza[data-activa] .pzn__nodo img,
  .como__pieza[data-activa] .pzn__curvas path,
  .como__pieza[data-activa] .pzn__visto,
  .como__pieza[data-activa] .pzn__recuento {
    animation: none;
  }
}

/* ---- Piezas de Vende, Opera y Transversal ---- */

.pz--camp,
.pz--pay,
.pz--b2b,
.pz--conv,
.pz--room,
.pz--inv,
.pz--chk,
.pz--close,
.pz--stat,
.pz--bill,
.pz--crm {
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(22 * var(--u));
  box-sizing: border-box;
}

/* Integraciones */

.pz--integ {
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(18 * var(--u));
  box-sizing: border-box;
}

/* El doble visto del mensaje enviado. */
.pz__visto {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  color: #34b7f1;
}

/* Los fondos modernos. El atajo `background` de arriba deja puesto el color,
   el encuadre y el recorte; aquí solo se cambia la imagen por la versión en
   AVIF o WebP. Va dentro de @supports porque image-set() es reciente: donde
   no se entienda, se queda la de arriba, que ya viene al tamaño correcto. */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .pzs__experiencia-foto {
    background-image: var(--foto-set, var(--foto, none));
  }
}

/* ---- Versión de móvil de la maqueta de «Tu web completa» ---- */

/* En móvil la maqueta llevaba la ventana de escritorio y el móvil encima,
   los dos encogidos hasta no leerse. Se queda la ventana, que es la que
   cuenta la historia, a todo el ancho de la pieza; el móvil sobra porque
   ya lo estás viendo en uno (CLAUDE.md · Diseño: si no cabe, versión de
   móvil simplificada, no encoger hasta que sea ilegible). */
@media (max-width: 767px) {
  .pz--site .pz__movil {
    display: none;
  }

  .pz--site .pz__ventana {
    width: 100%;
    max-width: none;
  }
}