/* ==========================================================================
   Playbook (Boomit v2): el Innovation Playbook como seccion propia. Reemplaza,
   solo en la home v2, a la barra fija que el sitio muestra abajo.
   ========================================================================== */

.pb {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(32px, 4.5vw, 64px);
  border-radius: var(--r-card);
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--brand-violet) 12%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pb-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand-violet);
}
.pb .lede {
  margin-top: 16px;
}
.pb-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}
.pb-apoyo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.pb-apoyo img {
  display: block;
  height: auto;
}

/* Tapa real del estudio (la misma imagen de la landing del Playbook). Flota
   apenas y se endereza al pasar el mouse. */
.pb-tapa {
  display: grid;
  place-items: center;
}
.pb-tapa img {
  display: block;
  width: min(100%, 380px);
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(36, 40, 77, 0.22));
  transform: rotate(-3deg);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .pb:hover .pb-tapa img {
    transform: rotate(0deg) translate3d(0, -6px, 0) scale(1.02);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pb-tapa {
    animation: bv2-flota 7s ease-in-out infinite;
  }
}
@keyframes bv2-flota {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

@media (max-width: 860px) {
  .pb {
    grid-template-columns: minmax(0, 1fr);
  }
  .pb-tapa {
    order: -1;
  }
  .pb-tapa img {
    width: min(64%, 260px);
  }
}
@media (max-width: 640px) {
  .pb-acciones .btn {
    width: 100%;
    justify-content: space-between;
  }
}