/* Bloqio Builder landing — scoped to .site--builder only. No global overrides. */

.site--builder .text-center {
  text-align: center;
}

.site--builder {
  --font-display: "Hiragino Kaku Gothic Std", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  --bb-container: var(--container-max, 72rem);
  --bb-accent-blue: #426fff;
  --bb-accent-blue-deep: #423dff;
  --bb-edge: linear-gradient(
    125deg,
    color-mix(in srgb, var(--bb-accent-blue) 35%, transparent),
    color-mix(in srgb, #f5911e 40%, transparent),
    color-mix(in srgb, #14ff00 22%, transparent),
    color-mix(in srgb, var(--bb-accent-blue-deep) 28%, transparent)
  );
  --bb-surface: color-mix(in srgb, #fff 94%, #f4f4f2);
  --bb-icon-stroke: 1.25;
}

.site--builder .site-header__auth {
  display: none;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

@media (min-width: 64rem) {
  .site--builder .site-header__auth {
    display: inline-flex;
  }

  .site--builder .site-header__cta {
    display: none;
  }
}

.site--builder .site-header__nav .site-header__builder-mobile-auth {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site--builder .site-header__builder-mobile-auth .button {
  width: 100%;
  justify-content: center;
}

@media (min-width: 64rem) {
  .site--builder .site-header__nav .site-header__builder-mobile-auth {
    display: none;
  }
}

.site--builder .builder-page {
  background: var(--bb-surface);
}

.site--builder .builder-page section[id] {
  scroll-margin-top: calc(var(--site-header-stack-height, var(--header-height)) + var(--space-3));
}

/* —— Botones principales: planos (sin gradiente, sombra ni lift) —— */
.site--builder :is(
  .button--builder-nav-login,
  .button--builder-nav-signup,
  .button--builder-cta-primary,
  .button--builder-cta-secondary
) {
  box-shadow: none;
  transform: none;
  filter: none;
  transition:
    background-color var(--holo-motion-duration-fast, 0.2s) ease,
    border-color var(--holo-motion-duration-fast, 0.2s) ease,
    color var(--holo-motion-duration-fast, 0.2s) ease;
}

.site--builder :is(
  .button--builder-nav-login,
  .button--builder-nav-signup,
  .button--builder-cta-primary,
  .button--builder-cta-secondary
):is(:hover, :active, :focus-visible) {
  transform: none;
  box-shadow: none;
  filter: none;
}

.site--builder .button--builder-nav-login {
  font-weight: 600;
  color: var(--color-text);
  border: 1.5px solid color-mix(in srgb, var(--bb-accent-blue) 42%, var(--color-border));
  background: #fff;
}

.site--builder .button--builder-nav-login:hover,
.site--builder .button--builder-nav-login:active {
  background: color-mix(in srgb, var(--bb-accent-blue) 6%, #fff);
  border-color: color-mix(in srgb, var(--bb-accent-blue) 55%, var(--color-border));
  color: var(--color-text);
}

.site--builder .button--builder-nav-signup {
  font-weight: 600;
  color: #fff;
  border: 1px solid var(--color-cta);
  background: var(--color-cta);
}

.site--builder .button--builder-nav-signup:hover,
.site--builder .button--builder-nav-signup:active {
  color: #fff;
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

.site--builder .button--builder-cta-primary {
  font-weight: 600;
  padding-inline: 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--color-cta);
  background: var(--color-cta);
  color: #fff;
}

.site--builder .button--builder-cta-primary:hover,
.site--builder .button--builder-cta-primary:active {
  color: #fff;
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

.site--builder .button--builder-cta-secondary {
  font-weight: 600;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--color-border) 70%, var(--bb-accent-blue) 18%);
  background: #fff;
  color: var(--color-text);
}

.site--builder .button--builder-cta-secondary:hover,
.site--builder .button--builder-cta-secondary:active {
  background: color-mix(in srgb, var(--bb-accent-blue) 5%, #fff);
  border-color: color-mix(in srgb, var(--bb-accent-blue) 35%, var(--color-border));
  color: var(--color-text);
}

/* CTA sobre panel naranja (flagship / shine) */
.site--builder .shine-card--cta .button--builder-cta-primary {
  border-color: #fff;
  background: #fff;
  color: var(--color-cta);
}

.site--builder .shine-card--cta .button--builder-cta-primary:hover,
.site--builder .shine-card--cta .button--builder-cta-primary:active {
  background: color-mix(in srgb, #fff 92%, var(--color-cta) 8%);
  border-color: #fff;
  color: var(--color-cta-hover);
}

.site--builder .shine-card--cta .button--builder-cta-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.site--builder .shine-card--cta .button--builder-cta-secondary:hover,
.site--builder .shine-card--cta .button--builder-cta-secondary:active {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .site--builder :is(
    .button--builder-nav-login,
    .button--builder-nav-signup,
    .button--builder-cta-primary,
    .button--builder-cta-secondary
  ) {
    transition: none;
  }
}

/* —— Hero + mock (premium) —— */
.site--builder .builder-hero {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.site--builder .builder-hero--premium {
  padding-block: clamp(3.5rem, 10vw, 5.5rem);
}

.site--builder .builder-hero__shell {
  position: relative;
  max-width: calc(var(--container-max) + 1.5rem);
  margin-inline: auto;
}

.site--builder .builder-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.site--builder .builder-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 78%, var(--color-text-muted));
  background: color-mix(in srgb, #fff 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, var(--bb-accent-blue) 8%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.site--builder .builder-hero__badge--iris {
  border-color: color-mix(in srgb, var(--bb-accent-blue) 22%, var(--color-border));
  color: color-mix(in srgb, var(--bb-accent-blue-deep) 55%, var(--color-text));
}

.site--builder .builder-hero__eyebrow {
  margin-bottom: var(--space-3);
}

.site--builder .builder-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--color-identity);
  font-size: clamp(2.1rem, 4.2vw + 0.6rem, 3.35rem);
  line-height: 1.05;
  max-width: 22ch;
}

@media (min-width: 64rem) {
  .site--builder .builder-hero__title {
    max-width: none;
  }
}

.site--builder .builder-hero__lede {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.1vw + 0.85rem, 1.22rem);
  line-height: 1.55;
  max-width: 36rem;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
}

.site--builder .builder-hero__actions {
  margin-top: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site--builder .builder-hero__shine {
  margin: 0;
}

.site--builder .builder-hero__shine .shine-card__surface--holo-panel {
  padding: clamp(0.65rem, 1.5vw, 1rem);
}

.site--builder .builder-hero__visual {
  position: relative;
}

@media (min-width: 64rem) {
  .site--builder .builder-hero__visual {
    transform: translateY(0.35rem);
  }
}

.site--builder .builder-mock--hero {
  border-radius: 1rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.site--builder .builder-mock--hero .builder-mock__inner {
  min-height: 15rem;
  border-radius: 0.875rem;
}

@media (min-width: 40rem) {
  .site--builder .builder-mock--hero .builder-mock__inner {
    min-height: 18rem;
  }
}

.site--builder .builder-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-10);
  align-items: center;
  min-width: 0;
}

.site--builder .builder-hero__grid > * {
  min-width: 0;
}

@media (min-width: 64rem) {
  .site--builder .builder-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-12);
  }
}

.site--builder .builder-hero__micro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.site--builder .builder-hero__micro span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site--builder .builder-hero__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #14ff00;
  box-shadow: 0 0 0 3px color-mix(in srgb, #14ff00 22%, transparent);
}

.site--builder .builder-mock {
  position: relative;
  border-radius: 1.25rem;
  padding: 1px;
  background: var(--bb-edge);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 64px rgba(68, 68, 68, 0.08),
    0 4px 16px rgba(66, 111, 255, 0.06);
}

.site--builder .builder-mock__inner {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0;
  min-height: 14rem;
  border-radius: calc(1.25rem - 1px);
  background: color-mix(in srgb, #fff 88%, var(--bloqio-glass-bg, #f8f8f8));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  overflow: hidden;
}

@media (min-width: 40rem) {
  .site--builder .builder-mock__inner {
    grid-template-columns: 6.75rem minmax(0, 1fr);
    min-height: 17rem;
  }
}

.site--builder .builder-mock__rail {
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: color-mix(in srgb, #fff 55%, transparent);
}

.site--builder .builder-mock__rail-title {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

.site--builder .builder-mock__chip {
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bb-accent-blue) 22%, #e8e8e8),
    color-mix(in srgb, #f5911e 28%, #eee)
  );
  opacity: 0.85;
}

.site--builder .builder-mock__chip:nth-child(3) {
  width: 72%;
}

.site--builder .builder-mock__chip:nth-child(4) {
  width: 88%;
}

.site--builder .builder-mock__chip:nth-child(5) {
  width: 56%;
}

.site--builder .builder-mock__canvas {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site--builder .builder-mock__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site--builder .builder-mock__dots {
  display: flex;
  gap: 0.35rem;
}

.site--builder .builder-mock__dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 14%, #ddd);
}

.site--builder .builder-mock__dots span:first-child {
  background: #ff5f57;
}

.site--builder .builder-mock__dots span:nth-child(2) {
  background: #febc2e;
}

.site--builder .builder-mock__dots span:nth-child(3) {
  background: #28c840;
}

.site--builder .builder-mock__url {
  flex: 1;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, #fff 70%, var(--color-border));
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.site--builder .builder-mock__stage {
  flex: 1;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 96%, #f0f0f0) 0%, #fff 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--bb-accent-blue) 6%, transparent), transparent 42%),
    #fff;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 7.5rem;
}

.site--builder .builder-mock__hero-block {
  height: 2.25rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #444 0%, color-mix(in srgb, #444 70%, #666) 100%);
  opacity: 0.92;
}

.site--builder .builder-mock__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.site--builder .builder-mock__card {
  height: 2.75rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, #fff 82%, var(--bb-accent-blue) 4%);
  border: 1px solid color-mix(in srgb, var(--color-border) 55%, var(--bb-accent-blue) 8%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

/* —— Galería (mismo contrato que /galeria: carrusel + cards) —— */
.site--builder .builder-gallery .gallery-showcase__header {
  text-align: center;
  margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem);
}

.site--builder .builder-gallery .gallery-showcase__header .eyebrow {
  margin-bottom: var(--space-3);
}

.site--builder .builder-gallery .gallery-showcase__header h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--color-identity);
  font-family: var(--font-subheader);
  font-weight: 800;
}

.site--builder .builder-gallery .gallery-showcase__header p {
  max-inline-size: 42rem;
  margin: 0.9rem auto 0;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.site--builder .builder-gallery-strip + .builder-gallery-strip {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}

.site--builder .builder-gallery-strip .gallery-showcase__header {
  margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
}

.site--builder .builder-gallery-strip .gallery-showcase__header h2 {
  font-family: var(--font-subheader);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.08;
}

.site--builder .builder-gallery-strip .gallery-showcase__header p {
  font-family: var(--font-body);
}

.site--builder .builder-gallery-intro {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.site--builder .builder-gallery-intro h2 {
  font-family: var(--font-subheader);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--color-identity);
  font-weight: 800;
}

.site--builder .builder-gallery-intro p {
  font-family: var(--font-body);
  max-inline-size: 42rem;
  margin: 0.9rem auto 0;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Cita editorial sin shine-ring (evita artefactos de fondo) */
.site--builder .builder-statement-card {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg, 1rem);
  background: color-mix(in srgb, #fff 96%, #f6f6f4);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 40px rgba(68, 68, 68, 0.06);
}

.site--builder .builder-statement-card__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: var(--tracking-display);
  color: var(--color-identity);
  text-align: center;
  text-wrap: balance;
}

.site--builder .builder-gallery__mono {
  font-size: 0.9em;
  font-family: var(--font-mono);
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 85%, var(--bb-accent-blue));
}

.site--builder .builder-footer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site--builder .builder-gallery .gallery-stack {
  display: block;
}

.site--builder .builder-gallery.gallery-showcase {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  overflow: clip;
}

.site--builder .builder-gallery-strip.builder-gallery.gallery-showcase {
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

.site--builder .builder-gallery .gallery-carousel {
  position: relative;
}

.site--builder .builder-gallery .gallery-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(76vw, 56.25rem);
  gap: clamp(1rem, 2vw, 1.35rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--space-4), calc((100% - var(--container-max)) / 2));
  padding-inline: max(var(--space-4), calc((100% - var(--container-max)) / 2));
  padding-block: 0.6rem 1.8rem;
  scrollbar-width: none;
  outline: none;
}

.site--builder .builder-gallery .gallery-carousel__track:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bhf-lumenedge-primary, #426fff) 45%, transparent);
  border-radius: 0.5rem;
}

.site--builder .builder-gallery .gallery-carousel__track::-webkit-scrollbar {
  display: none;
}

.site--builder .builder-gallery .gallery-carousel__button {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bhf-lumenedge-primary, #426fff) 22%, rgba(20, 20, 20, 0.08));
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.62)),
    rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  box-shadow:
    0 14px 34px rgba(30, 35, 50, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  cursor: pointer;
  transition:
    transform var(--holo-motion-duration-micro, 0.18s) ease,
    box-shadow var(--holo-motion-duration-fast, 0.2s) ease;
}

.site--builder .builder-gallery .gallery-carousel__button:hover {
  box-shadow:
    0 20px 48px rgba(30, 35, 50, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.site--builder .builder-gallery .gallery-carousel__button--prev {
  left: max(1rem, calc((100% - var(--container-max)) / 2 + 1rem));
  transform: translateY(-50%);
}

.site--builder .builder-gallery .gallery-carousel__button--prev:hover {
  transform: translateY(-50%) scale(1.035);
}

.site--builder .builder-gallery .gallery-carousel__button--next {
  right: max(1rem, calc((100% - var(--container-max)) / 2 + 1rem));
  transform: translateY(-50%);
}

.site--builder .builder-gallery .gallery-carousel__button--next:hover {
  transform: translateY(-50%) scale(1.035);
}

.site--builder .builder-gallery .gallery-carousel__progress {
  width: min(10.625rem, 44vw);
  height: 1.9rem;
  margin: -0.75rem auto 0;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.78);
  border: 1px solid rgba(20, 20, 20, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(30, 35, 50, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.65rem;
  box-sizing: border-box;
}

.site--builder .builder-gallery .gallery-carousel__progress-track {
  position: relative;
  width: 100%;
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  overflow: hidden;
}

.site--builder .builder-gallery .gallery-carousel__progress-thumb {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 42%, transparent);
  transition: margin-left 0.12s ease-out, width 0.12s ease-out;
}

.site--builder .builder-gallery .gallery-card {
  scroll-snap-align: center;
  min-height: clamp(26.875rem, 48vw, 37.5rem);
  border-radius: clamp(1.65rem, 3vw, 2.5rem);
  padding: clamp(0.85rem, 1.5vw, 1.15rem);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--bb-accent-blue) 10%, transparent), transparent 34%),
    radial-gradient(circle at 90% 86%, color-mix(in srgb, #f5911e 11%, transparent), transparent 38%),
    rgba(255, 255, 255, 0.78);
  border: 1px solid color-mix(in srgb, var(--bhf-lumenedge-primary, #426fff) 32%, rgba(255, 255, 255, 0.9));
  box-shadow:
    0 30px 90px rgba(25, 30, 45, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: grid;
  grid-template-rows: minmax(17.5rem, 1fr) auto;
  gap: 0.85rem;
  overflow: hidden;
  margin: 0;
  transition:
    transform var(--holo-motion-duration-fast, 0.22s) ease,
    border-color var(--holo-motion-duration-fast, 0.22s) ease,
    box-shadow var(--holo-motion-duration-fast, 0.22s) ease;
}

.site--builder .builder-gallery .gallery-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bhf-lumenedge-primary, #426fff) 52%, rgba(255, 255, 255, 0.85));
  box-shadow:
    0 40px 110px rgba(25, 30, 45, 0.105),
    0 0 0 1px color-mix(in srgb, var(--bhf-lumenedge-soft) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.site--builder .builder-gallery .gallery-card__media {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.site--builder .builder-gallery .gallery-card__media,
.site--builder .builder-gallery .gallery-card .media-frame {
  min-height: 0;
  border-radius: clamp(1.15rem, 2vw, 1.75rem);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(20, 20, 20, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 42px rgba(30, 35, 50, 0.055);
}

.site--builder .builder-gallery .gallery-card__media .media-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.site--builder .builder-gallery-placeholder {
  width: 100%;
  min-height: clamp(17.5rem, 34vw, 27.5rem);
  max-height: clamp(20rem, 38vw, 30rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  box-sizing: border-box;
  text-align: center;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bb-accent-blue) 8%, #f6f7fb) 0%, #fff 48%, color-mix(in srgb, #f5911e 7%, #fff) 100%);
  border: 1px dashed color-mix(in srgb, var(--color-border) 65%, var(--bb-accent-blue) 12%);
}

.site--builder .builder-gallery-placeholder__title {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 600;
  color: var(--color-text);
}

.site--builder .builder-gallery-placeholder__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.site--builder .builder-gallery .gallery-card__body {
  padding: clamp(0.75rem, 1.4vw, 1rem) clamp(0.25rem, 0.8vw, 0.5rem) 0.3rem;
  text-align: left;
}

.site--builder .builder-gallery .gallery-card__name {
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
  color: var(--color-identity);
}

.site--builder .builder-gallery .gallery-card__sub {
  margin: 0.35rem 0 0;
  color: var(--color-text-muted);
  font-size: clamp(0.9rem, 0.95vw, 1rem);
  line-height: 1.45;
}

@media (max-width: 56.25rem) {
  .site--builder .builder-gallery .gallery-card {
    min-height: clamp(25rem, 68vw, 33.75rem);
  }
}

@media (max-width: 43.75rem) {
  .site--builder .builder-gallery .gallery-carousel__track {
    grid-auto-columns: min(88vw, 24.375rem);
    padding-inline: var(--space-4);
    scroll-padding-inline: var(--space-4);
    padding-block-end: 1.4rem;
  }

  .site--builder .builder-gallery .gallery-card {
    min-height: auto;
    grid-template-rows: auto auto;
    padding: 0.85rem;
  }

  .site--builder .builder-gallery-placeholder {
    min-height: 13.75rem;
    max-height: 20rem;
  }

  .site--builder .builder-gallery .gallery-carousel__button {
    display: none;
  }
}

/* —— Audience cards —— */
.site--builder .builder-audience {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site--builder .builder-audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site--builder .builder-audience {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site--builder .builder-audience__card {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg, 1rem);
  background: color-mix(in srgb, #fff 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
  transition:
    transform var(--holo-motion-duration-micro, 0.18s) var(--holo-motion-ease, ease-out),
    box-shadow var(--holo-motion-duration-micro, 0.18s) var(--holo-motion-ease, ease-out);
}

.site--builder .builder-audience__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--bb-edge);
  opacity: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity var(--holo-motion-duration-fast, 0.22s) var(--holo-motion-ease, ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-audience__card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 1) inset,
      0 12px 36px rgba(68, 68, 68, 0.07);
  }

  .site--builder .builder-audience__card:hover::before {
    opacity: 0.55;
  }
}

.site--builder .builder-audience__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.site--builder .builder-audience__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* —— Problem / solution —— */
.site--builder .builder-split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 56rem) {
  .site--builder .builder-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

.site--builder .builder-split__panel {
  border-radius: var(--radius-lg, 1rem);
  padding: var(--space-6);
  background: color-mix(in srgb, #fff 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}

.site--builder .builder-split__panel--after {
  border-color: color-mix(in srgb, var(--bb-accent-blue) 18%, var(--color-border));
  box-shadow: 0 20px 48px color-mix(in srgb, var(--bb-accent-blue) 8%, transparent);
}

.site--builder .builder-split__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.site--builder .builder-split__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site--builder .builder-split__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}

.site--builder .builder-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: 0.45;
}

.site--builder .builder-split__panel--after .builder-split__list li::before {
  background: linear-gradient(135deg, var(--bb-accent-blue), #f5911e);
  opacity: 1;
}

/* —— Steps —— */
.site--builder .builder-steps {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 64rem) {
  .site--builder .builder-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.site--builder .builder-step {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg, 1rem);
  background: color-mix(in srgb, #fff 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  min-height: 100%;
}

.site--builder .builder-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--bb-accent-blue), var(--bb-accent-blue-deep));
  margin-bottom: var(--space-3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.site--builder .builder-step__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.site--builder .builder-step__text {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

@media (max-width: 47.99rem) {
  .site--builder .builder-steps {
    grid-template-columns: 1fr;
  }

  .site--builder .builder-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
  }

  .site--builder .builder-step__num {
    margin-bottom: 0;
    grid-row: 1 / span 2;
  }

  .site--builder .builder-step__title {
    grid-column: 2;
    align-self: end;
  }

  .site--builder .builder-step__text {
    grid-column: 2;
    align-self: start;
  }
}

/* —— Module chips —— */
.site--builder .builder-modules {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
  .site--builder .builder-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site--builder .builder-modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .site--builder .builder-modules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site--builder .builder-module {
  padding: var(--space-4);
  border-radius: 0.875rem;
  background: color-mix(in srgb, #fff 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  transition:
    border-color var(--holo-motion-duration-fast, 0.2s) ease,
    box-shadow var(--holo-motion-duration-fast, 0.2s) ease;
}

@media (hover: hover) {
  .site--builder .builder-module:hover {
    border-color: color-mix(in srgb, var(--bb-accent-blue) 25%, var(--color-border));
    box-shadow: 0 10px 28px rgba(68, 68, 68, 0.06);
  }
}

.site--builder .builder-module__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.site--builder .builder-module__desc {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* —— Holoform pillars —— */
.site--builder .builder-pillars {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .site--builder .builder-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .site--builder .builder-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site--builder .builder-pillar {
  padding: var(--space-5);
  border-radius: var(--radius-lg, 1rem);
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 96%, var(--bb-accent-blue) 3%) 0%, #fff 55%);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
}

.site--builder .builder-pillar h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.site--builder .builder-pillar p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* —— Statement band —— */
.site--builder .builder-statement {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.site--builder .builder-statement p {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl));
  line-height: 1.45;
  color: var(--color-text);
  margin: 0;
}

/* —— Mini editor demo —— */
.site--builder .builder-demo {
  border-radius: 1.125rem;
  padding: 1px;
  background: var(--bb-edge);
  box-shadow: 0 28px 72px rgba(68, 68, 68, 0.1);
}

.site--builder .builder-demo__shell {
  border-radius: calc(1.125rem - 1px);
  background: color-mix(in srgb, #fff 86%, #f6f6f4);
  border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  overflow: hidden;
}

.site--builder .builder-demo__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, #fff 75%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}

.site--builder .builder-demo__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.site--builder .builder-demo__status-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #14ff00;
}

.site--builder .builder-demo__toggle {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-border) 35%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  gap: 0.15rem;
}

.site--builder .builder-demo__toggle button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  transition:
    background var(--holo-motion-duration-fast, 0.2s) ease,
    color var(--holo-motion-duration-fast, 0.2s) ease;
}

.site--builder .builder-demo__toggle button[aria-pressed="true"] {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(68, 68, 68, 0.08);
}

.site--builder .builder-demo__toggle button:focus-visible {
  outline: 2px solid var(--bb-accent-blue);
  outline-offset: 2px;
}

.site--builder .builder-demo__export {
  font-size: var(--text-xs);
}

.site--builder .builder-demo__export:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.site--builder .builder-demo__body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 16rem;
}

@media (min-width: 52rem) {
  .site--builder .builder-demo__body {
    grid-template-columns: 11rem minmax(0, 1fr) 10.5rem;
    min-height: 18rem;
  }
}

.site--builder .builder-demo__sidebar,
.site--builder .builder-demo__inspector {
  padding: var(--space-3);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  background: color-mix(in srgb, #fff 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

@media (min-width: 52rem) {
  .site--builder .builder-demo__sidebar {
    border-bottom: 0;
    border-right: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  }

  .site--builder .builder-demo__inspector {
    border-bottom: 0;
    border-left: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  }
}

.site--builder .builder-demo__sidebar-title,
.site--builder .builder-demo__inspector-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2);
  font-size: 0.625rem;
  color: var(--color-text);
}

.site--builder .builder-demo__nav-item {
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
  background: transparent;
  color: var(--color-text-muted);
}

.site--builder .builder-demo__nav-item--active {
  background: color-mix(in srgb, var(--bb-accent-blue) 10%, #fff);
  color: var(--color-text);
  font-weight: 600;
}

.site--builder .builder-demo__preview-wrap {
  padding: var(--space-4);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--bb-accent-blue) 6%, transparent), transparent),
    #fafafa;
}

.site--builder .builder-demo__preview {
  width: 100%;
  max-width: 100%;
  border-radius: 0.625rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  box-shadow: 0 16px 40px rgba(68, 68, 68, 0.08);
  padding: var(--space-3);
  transition:
    max-width 0.35s var(--holo-motion-ease, ease),
    transform 0.35s var(--holo-motion-ease, ease);
}

.site--builder .builder-demo__preview[data-view="mobile"] {
  max-width: 17.5rem;
}

.site--builder .builder-demo__preview-bar {
  height: 0.35rem;
  width: 38%;
  border-radius: 999px;
  background: #eaeaea;
  margin: 0 auto var(--space-3);
}

.site--builder .builder-demo__preview-hero {
  height: 3.25rem;
  border-radius: 0.5rem;
  background: linear-gradient(110deg, #3a3a3a, #555);
  margin-bottom: var(--space-2);
}

.site--builder .builder-demo__preview-rows {
  display: grid;
  gap: 0.5rem;
}

.site--builder .builder-demo__preview-rows span {
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background: #ececec;
}

.site--builder .builder-demo__preview-rows span:nth-child(2) {
  width: 82%;
}

.site--builder .builder-demo__preview-rows span:nth-child(3) {
  width: 64%;
}

.site--builder .builder-demo__field {
  margin-bottom: var(--space-3);
}

.site--builder .builder-demo__field label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}

.site--builder .builder-demo__field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 0.375rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.6875rem;
  background: #fff;
}

.site--builder .builder-demo__swatch {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.site--builder .builder-demo__swatch span {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.site--builder .builder-demo__swatch span:nth-child(1) {
  background: #444;
}

.site--builder .builder-demo__swatch span:nth-child(2) {
  background: #f5911e;
}

.site--builder .builder-demo__swatch span:nth-child(3) {
  background: var(--bb-accent-blue);
}

/* —— Beta / FAQ —— */
.site--builder .builder-beta {
  text-align: center;
}

.site--builder .builder-beta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.site--builder .builder-faq {
  max-width: 40rem;
  margin-inline: auto;
}

.site--builder .builder-faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  padding-block: var(--space-4);
}

.site--builder .builder-faq details:first-of-type {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
}

.site--builder .builder-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  list-style: none;
  position: relative;
  padding-right: 1.75rem;
}

.site--builder .builder-faq summary::-webkit-details-marker {
  display: none;
}

.site--builder .builder-faq summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.site--builder .builder-faq details[open] summary::after {
  transform: rotate(-135deg);
  top: 0.55rem;
}

.site--builder .builder-faq details p {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.site--builder .builder-footer-cta {
  text-align: center;
  padding-block: var(--space-16);
}

.site--builder .builder-footer-cta .hero__title {
  max-width: 36rem;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-audience__card,
  .site--builder .builder-demo__preview {
    transition: none;
  }

  .site--builder .builder-audience__card:hover {
    transform: none;
  }

  .site--builder .builder-faq summary::after {
    transition: none;
  }

  .site--builder .builder-gallery .gallery-card,
  .site--builder .builder-gallery .gallery-carousel__button,
  .site--builder .builder-gallery .gallery-carousel__progress-thumb {
    transition: none;
  }

  .site--builder .builder-gallery .gallery-card:hover {
    transform: none;
  }

  .site--builder .builder-gallery .gallery-carousel__button--prev:hover,
  .site--builder .builder-gallery .gallery-carousel__button--next:hover {
    transform: translateY(-50%);
  }
}

/* =============================================================================
   Bloqio Builder — SaaS product landing (2026)
   ============================================================================= */

/* —— Product header —— */
.site--builder .site-header--builder-product .site-header__cta {
  display: none;
}

/* Menú móvil Builder — auth buttons (panel base: nav-system.css) */
@media (max-width: 63.99rem) {
  .site--builder .site-header__builder-mobile-auth .bb-icon--nav-auth {
    color: inherit;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .site--builder .site-header__builder-mobile-auth .bb-icon--nav-auth svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .site--builder .button--builder-nav-login .bb-icon--nav-auth {
    color: color-mix(in srgb, var(--color-identity) 94%, #000);
  }

  .site--builder .site-header--panel-nav .site-header__nav .button--builder-nav-login {
    color: color-mix(in srgb, var(--color-identity) 94%, #000);
    border-color: color-mix(in srgb, var(--color-identity) 22%, var(--color-border));
    background: #fff;
  }

  .site--builder .button--builder-nav-signup .bb-icon--nav-auth {
    color: #fff;
  }
}

.site--builder .builder-product-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

@media (max-width: 63.99rem) {
  .site--builder .builder-product-nav a {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 64rem) {
  .site--builder .builder-product-nav {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }

  .site--builder .builder-product-nav a {
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition:
      color var(--holo-motion-duration-fast) ease,
      background var(--holo-motion-duration-fast) ease;
  }

  .site--builder .builder-product-nav a:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--bb-accent-blue) 6%, #fff);
  }
}

/* —— Section headers —— */
.site--builder .builder-section-header {
  max-width: 40rem;
  margin-bottom: var(--space-10);
}

.site--builder .builder-section-header--center {
  text-align: center;
  margin-inline: auto;
}

.site--builder .builder-section-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--color-identity);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

.site--builder .builder-section-header__lede {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 82%, var(--color-text-muted));
}

.site--builder .builder-section--soft {
  background: color-mix(in srgb, #fff 96%, #f0f0ee);
}

.site--builder #bloqio-cloud.builder-section--cloud {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(
      168deg,
      color-mix(in srgb, #d8e4ff 48%, #fff) 0%,
      color-mix(in srgb, #e4ebff 72%, var(--bb-accent-blue) 16%) 46%,
      color-mix(in srgb, #edf1fb 82%, var(--bb-accent-blue-deep) 12%) 100%
    ),
    radial-gradient(ellipse 92% 58% at 18% -6%, color-mix(in srgb, var(--bb-accent-blue) 18%, transparent), transparent 64%),
    radial-gradient(ellipse 68% 52% at 92% 102%, color-mix(in srgb, var(--bb-accent-blue-deep) 16%, transparent), transparent 56%),
    radial-gradient(ellipse 50% 42% at 50% 108%, color-mix(in srgb, var(--bb-accent-blue-deep) 12%, #b8c8ff 8%), transparent 68%);
}

.site--builder #bloqio-cloud.builder-section--cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #fff 28%, transparent) 0%,
    transparent 34%,
    transparent 68%,
    color-mix(in srgb, #fff 14%, transparent) 100%
  );
  opacity: 0.42;
}

.site--builder #bloqio-cloud.builder-section--cloud > .container {
  position: relative;
  z-index: 1;
}

.site--builder #bloqio-cloud .builder-cloud {
  display: flex;
  justify-content: center;
}

.site--builder #bloqio-cloud .builder-cloud__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.site--builder #bloqio-cloud .builder-cloud__eyebrow {
  justify-content: center;
}

.site--builder #bloqio-cloud .builder-section-header__title,
.site--builder #bloqio-cloud .builder-section-header__lede {
  text-align: center;
}

.site--builder #bloqio-cloud .builder-section-header__lede {
  max-width: 34rem;
  margin-inline: auto;
}

.site--builder #bloqio-cloud .builder-cloud-steps {
  align-items: center;
  width: 100%;
}

.site--builder #bloqio-cloud .builder-cloud-step {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* —— SaaS hero —— */
.site--builder .builder-hero--saas {
  padding-block: clamp(3rem, 9vw, 5rem);
}

.site--builder .builder-hero--saas .builder-hero__title {
  max-width: none;
}

.site--builder .builder-hero__grid--saas {
  gap: var(--space-12);
}

@media (min-width: 64rem) {
  .site--builder .builder-hero__grid--saas {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    align-items: center;
  }
}

.site--builder .builder-hero__microcopy {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 34rem;
}

.site--builder .builder-hero__visual--devices {
  position: relative;
  min-height: clamp(18rem, 42vw, 26rem);
}

.site--builder .builder-hero__device--desktop {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
}

.site--builder .builder-hero__device--phone {
  position: absolute;
  right: clamp(0rem, 4vw, 2rem);
  bottom: clamp(-1rem, -2vw, 0.5rem);
  width: clamp(7.5rem, 28vw, 11rem);
  z-index: 2;
  filter: drop-shadow(0 20px 48px rgba(30, 35, 50, 0.14));
}

@media (min-width: 64rem) {
  .site--builder .builder-hero__device--phone {
    right: -0.5rem;
    bottom: 1.5rem;
    width: 11.5rem;
  }
}

/* —— Device mockups (bb-mockup) —— */
.site--builder .bb-mockup {
  margin: 0;
}

.site--builder .bb-mockup__screen {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  line-height: 0;
}

.site--builder .bb-mockup__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* iPhone */
.site--builder .bb-mockup--iphone .bb-mockup__frame {
  position: relative;
  padding: 0.45rem;
  border-radius: 2.25rem;
  background: linear-gradient(145deg, #2a2a2e 0%, #121214 55%, #1e1e22 100%);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.site--builder .bb-mockup--iphone .bb-mockup__screen {
  border-radius: 1.85rem;
  aspect-ratio: 1206 / 2622;
}

.site--builder .bb-mockup__island {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  max-width: 4.5rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #0a0a0a;
  z-index: 2;
  box-shadow: none;
}

.site--builder .bb-mockup--iphone-sm {
  max-width: 9rem;
}

.site--builder .bb-mockup--iphone-float {
  max-width: 10.5rem;
}

/* Browser */
.site--builder .bb-mockup--browser {
  border-radius: 0.875rem;
  overflow: hidden;
  background: color-mix(in srgb, #fff 92%, #f4f4f2);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 20px 56px rgba(30, 35, 50, 0.1),
    0 4px 14px rgba(66, 111, 255, 0.05);
}

.site--builder .bb-mockup__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, #f5f5f7 88%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}

.site--builder .bb-mockup__dots {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.site--builder .bb-mockup__dots span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.site--builder .bb-mockup__dots span:nth-child(1) {
  background: #ff5f57;
}

.site--builder .bb-mockup__dots span:nth-child(2) {
  background: #febc2e;
}

.site--builder .bb-mockup__dots span:nth-child(3) {
  background: #28c840;
}

.site--builder .bb-mockup__url {
  flex: 1;
  font-size: 0.625rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text-muted);
  padding: 0.28rem 0.5rem;
  border-radius: 0.35rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site--builder .bb-mockup--browser .bb-mockup__screen {
  aspect-ratio: 16 / 10;
}

.site--builder .bb-mockup--browser-lg {
  width: 100%;
}

/* MacBook */
.site--builder .bb-mockup--macbook {
  width: 100%;
}

.site--builder .bb-mockup--macbook .bb-mockup__mac-lid {
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 0.55rem 0.55rem 0;
  background: linear-gradient(180deg, #3d3d42 0%, #252528 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 28px 64px rgba(25, 28, 38, 0.16);
}

.site--builder .bb-mockup--macbook .bb-mockup__toolbar {
  border-radius: 0.5rem 0.5rem 0 0;
  background: color-mix(in srgb, #ececee 90%, #fff);
}

.site--builder .bb-mockup--macbook .bb-mockup__screen {
  border-radius: 0 0 0.35rem 0.35rem;
  aspect-ratio: 16 / 10;
}

.site--builder .bb-mockup__mac-base {
  height: 0.65rem;
  margin: 0 auto;
  width: 92%;
  max-width: 28rem;
  border-radius: 0 0 0.5rem 0.5rem;
  background: linear-gradient(180deg, #c8c8cc 0%, #98989c 100%);
  box-shadow: 0 6px 18px rgba(30, 35, 50, 0.12);
  position: relative;
}

.site--builder .bb-mockup__mac-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 0.2rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background: color-mix(in srgb, #888 80%, #666);
}

/* —— Benefits —— */
.site--builder .builder-benefits {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
  .site--builder .builder-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site--builder .builder-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site--builder .builder-benefit {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  box-shadow: none;
  transition: border-color var(--holo-motion-duration-micro) var(--holo-motion-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-benefit:hover {
    border-color: color-mix(in srgb, var(--bb-accent-blue) 22%, var(--color-border));
  }
}

.site--builder .builder-benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  margin-bottom: var(--space-3);
  color: var(--bb-accent-blue);
  background: color-mix(in srgb, var(--bb-accent-blue) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 18%, var(--color-border));
}

.site--builder .builder-benefit__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.site--builder .builder-benefit__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.site--builder .builder-benefit__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* —— Steps (4) —— */
.site--builder .builder-steps--four {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .site--builder .builder-steps--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .site--builder .builder-steps--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site--builder .builder-steps--four .builder-step__num {
  content: none;
  font-size: var(--text-sm);
}

/* —— Checklist —— */
.site--builder .builder-checklist {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site--builder .builder-checklist li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text);
}

.site--builder .builder-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bb-accent-blue), #14ff00);
  opacity: 0.85;
}

.site--builder .builder-cloud__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.site--builder .bb-icon--cloud-eyebrow svg {
  width: 0.95rem;
  height: 0.95rem;
}

.site--builder .builder-cloud-steps {
  gap: var(--space-4);
}

.site--builder .builder-cloud-step {
  display: block;
  padding-left: 0;
}

.site--builder .builder-cloud-steps li::before {
  content: none;
}

.site--builder .builder-cloud-step__hotspot {
  --bb-cloud-hotspot-size: 2.125rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: var(--bb-cloud-hotspot-size);
  min-width: var(--bb-cloud-hotspot-size);
  max-width: 100%;
  height: var(--bb-cloud-hotspot-size);
  min-height: var(--bb-cloud-hotspot-size);
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  background: color-mix(in srgb, #fff 38%, transparent);
  border: 1px solid color-mix(in srgb, #fff 72%, var(--bb-accent-blue) 18%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    0 4px 18px color-mix(in srgb, var(--bb-accent-blue) 10%, transparent);
  backdrop-filter: blur(22px) saturate(1.65);
  -webkit-backdrop-filter: blur(22px) saturate(1.65);
  transition:
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    min-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    gap 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

.site--builder .builder-cloud-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  margin-inline: calc((var(--bb-cloud-hotspot-size) - 1.65rem) / 2);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--bb-accent-blue), var(--bb-accent-blue-deep));
}

.site--builder .builder-cloud-step__icon.bb-icon {
  color: #fff;
}

.site--builder .builder-cloud-step__icon.bb-icon svg {
  stroke: #fff;
  color: #fff;
}

.site--builder .builder-cloud-step__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.site--builder .builder-cloud-step__text-wrap {
  display: grid;
  grid-template-columns: 0fr;
  min-width: 0;
  transition: grid-template-columns 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.site--builder .builder-cloud-step__text {
  overflow: hidden;
  min-width: 0;
  padding-right: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.site--builder .builder-cloud-step.is-inview .builder-cloud-step__hotspot {
  width: fit-content;
  min-width: var(--bb-cloud-hotspot-size);
  padding: 0;
  gap: 0.4rem;
  background: color-mix(in srgb, #fff 52%, transparent);
  border-color: color-mix(in srgb, #fff 65%, var(--bb-accent-blue) 22%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    0 0 12px -2px color-mix(in srgb, var(--bb-accent-blue) 28%, transparent),
    0 5px 18px -6px color-mix(in srgb, var(--bb-accent-blue) 16%, transparent);
}

.site--builder .builder-cloud-step.is-inview .builder-cloud-step__icon {
  margin-inline: 0.15rem 0;
}

.site--builder .builder-cloud-step.is-inview .builder-cloud-step__text-wrap {
  grid-template-columns: 1fr;
}

.site--builder .builder-cloud-step.is-inview .builder-cloud-step__text {
  opacity: 1;
  padding-right: 0.65rem;
}

.site--builder .builder-checklist--stagger .builder-cloud-step {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.992);
}

.site--builder .builder-checklist--stagger .builder-cloud-step.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.72s var(--holo-motion-ease-enter, var(--holo-motion-ease)),
    transform 0.72s var(--holo-motion-ease-enter, var(--holo-motion-ease));
  transition-delay: var(--builder-step-stagger, 0s);
}

.site--builder.builder-reduced-motion .builder-checklist--stagger .builder-cloud-step {
  opacity: 1;
  transform: none;
  transition: none;
}

.site--builder.builder-reduced-motion .builder-checklist--stagger .builder-cloud-step .builder-cloud-step__hotspot {
  width: fit-content;
  min-width: var(--bb-cloud-hotspot-size, 2.125rem);
  padding: 0;
  gap: 0.4rem;
}

.site--builder.builder-reduced-motion .builder-checklist--stagger .builder-cloud-step__icon {
  margin-inline: 0.15rem 0;
}

.site--builder.builder-reduced-motion .builder-checklist--stagger .builder-cloud-step__text-wrap {
  grid-template-columns: 1fr;
  transition: none;
}

.site--builder.builder-reduced-motion .builder-checklist--stagger .builder-cloud-step__text {
  opacity: 1;
  padding-right: 0.65rem;
  transition: none;
}

/* —— Mobile + Web row —— */
.site--builder .builder-devices-row {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 64rem) {
  .site--builder .builder-devices-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-12);
  }
}

.site--builder .builder-devices-row__visual {
  position: relative;
  min-height: clamp(16rem, 38vw, 22rem);
}

.site--builder .builder-devices-row__visual .bb-mockup--browser-lg {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.site--builder .builder-devices-row__visual .bb-mockup--iphone-float {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  z-index: 2;
}

/* —— Bloqio Cloud —— */
.site--builder .builder-cloud {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 64rem) {
  .site--builder .builder-cloud {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-12);
  }
}

.site--builder .builder-cloud__visual {
  position: relative;
  min-height: clamp(14rem, 32vw, 20rem);
}

.site--builder .builder-cloud__visual .bb-mockup--macbook {
  max-width: 34rem;
  margin-inline: auto;
}

.site--builder .builder-cloud__visual .bb-mockup--iphone-sm {
  position: absolute;
  right: clamp(0rem, 6vw, 1rem);
  bottom: 0;
  z-index: 2;
}

/* —— Pricing —— */
.site--builder .builder-pricing {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site--builder .builder-pricing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .site--builder .builder-pricing {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site--builder .builder-pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.site--builder .builder-pricing__card--featured {
  border-color: color-mix(in srgb, var(--bb-accent-blue) 28%, var(--color-border));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 20px 48px color-mix(in srgb, var(--bb-accent-blue) 10%, transparent);
}

.site--builder .builder-pricing__card--soon {
  opacity: 0.92;
}

.site--builder .builder-pricing__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  color: color-mix(in srgb, var(--bb-accent-blue-deep) 86%, var(--color-identity));
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, #fff 90%, var(--bb-accent-blue) 7%) 0%,
      color-mix(in srgb, #fff 66%, var(--bb-accent-blue) 16%) 100%
    );
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 32%, var(--color-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 4px color-mix(in srgb, var(--bb-accent-blue) 7%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site--builder .builder-pricing__tier {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site--builder .builder-pricing__name {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.site--builder .builder-pricing__price {
  margin: 0 0 var(--space-2);
}

.site--builder .builder-pricing__amount {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 800;
  color: var(--color-identity);
}

.site--builder .builder-pricing__note {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.site--builder .builder-pricing__features {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site--builder .builder-pricing__features li {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text);
  padding-left: 1.1rem;
  position: relative;
}

.site--builder .builder-pricing__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bb-accent-blue);
}

.site--builder .button--block {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.site--builder .builder-pricing__card--soon .button[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.65;
}

/* —— Use cases —— */
.site--builder .builder-usecases {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site--builder .builder-usecases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site--builder .builder-usecases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site--builder .builder-usecase {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

.site--builder .builder-usecase__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.site--builder .builder-usecase__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* —— Product showcase grid —— */
.site--builder .builder-showcase {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .site--builder .builder-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site--builder .builder-showcase .bb-mockup--iphone {
  max-width: 14rem;
  margin-inline: auto;
}

/* —— Aspirational statement —— */
.site--builder .builder-statement-card--aspirational .builder-statement-card__sub {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* —— Footer CTA block —— */
.site--builder .builder-footer-cta__inner {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
}

.site--builder .builder-footer-cta__logo {
  display: block;
  margin: 0 auto var(--space-5);
  height: 1.75rem;
  width: auto;
  opacity: 0.95;
}

.site--builder .builder-footer-cta .hero__title {
  max-width: 32rem;
  margin-inline: auto;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.site--builder .builder-footer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.site--builder .site-footer--builder .site-footer__desc {
  max-width: 22rem;
}

.site--builder .site-footer--builder .site-footer__grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-10);
}

.site--builder .site-footer--builder .site-footer__grid > div:first-child {
  grid-column: 1 / -1;
}

@media (min-width: 40rem) {
  .site--builder .site-footer--builder .site-footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-12);
  }

  .site--builder .site-footer--builder .site-footer__grid > div:first-child {
    grid-column: auto;
  }
}

.site--builder .site-footer--builder .site-footer__legal {
  max-width: 42rem;
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.site--builder .site-footer--builder .site-footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site--builder .site-footer--builder .bloqio-secure-pay--footer {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  max-width: 42rem;
}

.site--builder .site-footer--builder .bloqio-secure-pay--footer .bloqio-secure-pay__logo {
  height: 1.5rem;
}

.site--builder .site-footer--builder .bloqio-secure-pay--footer .bloqio-secure-pay__logo--mp {
  height: 1.65rem;
  max-width: 8rem;
}

.site--builder .site-footer--builder .bloqio-secure-pay--footer .bloqio-secure-pay__logo--stripe {
  max-width: 6.5rem;
  aspect-ratio: 360 / 150;
}

.site--builder .site-footer--builder .bloqio-secure-pay--footer .bloqio-secure-pay__note {
  font-size: var(--text-xs);
}

.site--builder .builder-legal {
  padding-block: var(--space-12) var(--space-16);
}

.site--builder .builder-legal__header {
  margin-bottom: var(--space-10);
  max-width: 42rem;
}

.site--builder .builder-legal__title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.site--builder .builder-legal__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.site--builder .builder-legal__meta p + p {
  margin-top: var(--space-1);
}

.site--builder .builder-legal__intro {
  margin-bottom: var(--space-10);
  max-width: 42rem;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.site--builder .builder-legal__body {
  max-width: 42rem;
}

.site--builder .builder-legal__section + .builder-legal__section {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.site--builder .builder-legal__section h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

.site--builder .builder-legal__section p,
.site--builder .builder-legal__section li {
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.site--builder .builder-legal__section p + p,
.site--builder .builder-legal__section ul + p,
.site--builder .builder-legal__section p + ul,
.site--builder .builder-legal__section ol + p {
  margin-top: var(--space-4);
}

.site--builder .builder-legal__section ul,
.site--builder .builder-legal__section ol {
  padding-left: 1.25rem;
}

.site--builder .builder-legal__section li + li {
  margin-top: var(--space-2);
}

.site--builder .builder-legal__section a {
  color: var(--color-identity);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-benefit:hover {
    transform: none;
  }
}

/* =============================================================================
   Bloqio Builder — Premium mockups, media & galleries (refine)
   ============================================================================= */

/* —— Hero chips & stage —— */
.site--builder .builder-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.site--builder .builder-hero__chips li {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-text) 75%, var(--color-text-muted));
  background: color-mix(in srgb, #fff 88%, var(--bb-accent-blue) 4%);
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, var(--bb-accent-blue) 12%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.site--builder .builder-hero__stage {
  position: relative;
  min-height: clamp(20rem, 48vw, 30rem);
  padding: var(--space-4) 0;
}

.site--builder .builder-hero__glow {
  position: absolute;
  inset: 8% 5% 12%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 55% at 42% 38%, color-mix(in srgb, var(--bb-accent-blue) 14%, transparent), transparent 68%),
    radial-gradient(ellipse 50% 45% at 78% 72%, color-mix(in srgb, #f5911e 10%, transparent), transparent 70%);
  filter: blur(28px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.site--builder .builder-hero__stage .builder-hero__device--desktop {
  max-width: 38rem;
  transform: perspective(1200px) rotateY(-4deg) rotateX(1deg);
  transform-origin: center left;
}

.site--builder .builder-hero__stage .builder-hero__device--phone {
  width: clamp(8.5rem, 30vw, 12.5rem);
  right: clamp(-0.25rem, 2vw, 1.5rem);
  bottom: clamp(0.5rem, 4vw, 2.5rem);
  transform: perspective(900px) rotateY(-8deg);
}

@media (min-width: 64rem) {
  .site--builder .builder-hero__stage .builder-hero__device--phone {
    right: -1.25rem;
    bottom: 2.75rem;
    width: 12.75rem;
  }
}

/* —— Media (video + poster fallback) —— */
.site--builder .bb-mockup__screen .bb-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.site--builder .bb-mockup__screen .bb-media--poster {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.site--builder .bb-mockup__screen .bb-media--video {
  position: relative;
  z-index: 1;
}

.site--builder .bb-mockup__screen:has(.bb-media--video:not([aria-hidden="true"])) .bb-media--poster {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .bb-mockup__screen .bb-media--video {
    display: none;
  }

  .site--builder .bb-mockup__screen .bb-media--poster {
    opacity: 1;
    position: relative;
    z-index: 1;
  }
}

/* —— Premium mockup upgrade —— */
.site--builder .bb-mockup--premium.bb-mockup--iphone .bb-mockup__frame {
  padding: 0.5rem;
  border-radius: 2.65rem;
  background:
    linear-gradient(155deg, #48484f 0%, #1c1c1f 38%, #0f0f11 72%, #2a2a30 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 2px 1px rgba(255, 255, 255, 0.06) inset,
    0 32px 72px rgba(18, 20, 28, 0.28),
    0 12px 28px rgba(18, 20, 28, 0.14);
}

.site--builder .bb-mockup--premium.bb-mockup--iphone .bb-mockup__screen {
  border-radius: 2.1rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.site--builder .bb-mockup--premium .bb-mockup__island {
  width: 32%;
  height: 0.5rem;
  top: 0.72rem;
  background: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.site--builder .bb-mockup__shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.14) 0%,
    transparent 38%,
    transparent 62%,
    rgba(255, 255, 255, 0.05) 100%
  );
  z-index: 3;
}

.site--builder .bb-mockup--premium.bb-mockup--browser,
.site--builder .bb-mockup--premium.bb-mockup--macbook .bb-mockup__mac-lid {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 28px 80px rgba(22, 26, 38, 0.12),
    0 8px 24px rgba(66, 111, 255, 0.06),
    0 0 0 1px color-mix(in srgb, var(--color-border) 55%, transparent);
}

.site--builder .bb-mockup--premium.bb-mockup--macbook .bb-mockup__mac-lid {
  background: linear-gradient(180deg, #4a4a50 0%, #232326 42%, #1a1a1d 100%);
}

.site--builder .bb-mockup__mac-notch {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14%;
  height: 0.18rem;
  border-radius: 0 0 0.2rem 0.2rem;
  background: linear-gradient(180deg, #aaa 0%, #777 100%);
}

.site--builder .bb-mockup--browser-xl .bb-mockup__screen {
  aspect-ratio: 16 / 9.5;
}

/* Compact mockups (gallery cards) */
.site--builder .bb-mockup--compact.bb-mockup--browser {
  border-radius: 0.65rem;
  box-shadow: 0 12px 32px rgba(30, 35, 50, 0.08);
}

.site--builder .bb-mockup--compact.bb-mockup--browser .bb-mockup__screen {
  aspect-ratio: 16 / 10;
}

.site--builder .bb-mockup--compact.bb-mockup--iphone .bb-mockup__frame {
  padding: 0.35rem;
  border-radius: 1.65rem;
  max-width: 11rem;
  margin-inline: auto;
}

.site--builder .bb-mockup--compact.bb-mockup--iphone .bb-mockup__screen {
  border-radius: 1.35rem;
}

.site--builder .bb-mockup--compact .bb-mockup__island {
  width: 30%;
  height: 0.35rem;
  top: 0.5rem;
}

/* —— Producto en acción —— */
.site--builder .builder-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site--builder .builder-action__spotlight {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: calc(var(--radius-lg) + 0.25rem);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--bb-accent-blue) 8%, transparent), transparent 55%),
    color-mix(in srgb, #fff 97%, #f4f4f2);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--bb-accent-blue) 10%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 24px 64px rgba(30, 35, 50, 0.07);
}

@media (min-width: 56rem) {
  .site--builder .builder-action__spotlight {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: var(--space-10);
  }
}

.site--builder .builder-action__title {
  margin: var(--space-2) 0 var(--space-3);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--color-identity);
  line-height: 1.15;
}

.site--builder .builder-action__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.site--builder .builder-action__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site--builder .builder-action__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site--builder .builder-action__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
  transition:
    transform var(--holo-motion-duration-micro) var(--holo-motion-ease),
    box-shadow var(--holo-motion-duration-micro) var(--holo-motion-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-action__card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 1) inset,
      0 16px 40px rgba(30, 35, 50, 0.09);
  }
}

.site--builder .builder-action__card-body {
  padding: 0 var(--space-1) var(--space-1);
}

.site--builder .builder-action__card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.site--builder .builder-action__card-body p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* —— Explora gallery —— */
.site--builder .builder-gallery-scroll {
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site--builder .builder-gallery-scroll::-webkit-scrollbar {
  display: none;
}

.site--builder .builder-gallery-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: min(88vw, 18.5rem);
  grid-auto-flow: column;
  grid-auto-columns: min(88vw, 18.5rem);
  padding-block: var(--space-2) var(--space-4);
}

@media (min-width: 48rem) {
  .site--builder .builder-gallery-scroll {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .site--builder .builder-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
  }
}

@media (min-width: 72rem) {
  .site--builder .builder-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 90rem) {
  .site--builder .builder-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site--builder .builder-gallery-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 14px 36px rgba(30, 35, 50, 0.05);
  transition:
    transform var(--holo-motion-duration-micro) var(--holo-motion-ease),
    border-color var(--holo-motion-duration-fast) ease,
    box-shadow var(--holo-motion-duration-fast) ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-gallery-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--bb-accent-blue) 22%, var(--color-border));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 1) inset,
      0 22px 48px rgba(30, 35, 50, 0.09);
  }
}

.site--builder .builder-gallery-card__tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--bb-accent-blue-deep) 65%, var(--color-text));
  background: color-mix(in srgb, var(--bb-accent-blue) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 18%, var(--color-border));
}

.site--builder .builder-gallery-card__media {
  margin: 0;
  min-height: 10.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site--builder .builder-gallery-card__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
}

.site--builder .builder-gallery-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* —— Pricing SaaS polish —— */
.site--builder .builder-pricing--saas .builder-pricing__card {
  border-radius: calc(var(--radius-lg) + 0.125rem);
  transition:
    transform var(--holo-motion-duration-micro) var(--holo-motion-ease),
    box-shadow var(--holo-motion-duration-micro) var(--holo-motion-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-pricing--saas .builder-pricing__card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 1) inset,
      0 18px 44px rgba(30, 35, 50, 0.08);
  }

  .site--builder .builder-pricing--saas .builder-pricing__card--featured:hover {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 1) inset,
      0 24px 52px color-mix(in srgb, var(--bb-accent-blue) 14%, transparent);
  }
}

.site--builder .builder-pricing--saas .builder-pricing__card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bb-accent-blue) 35%, transparent),
    color-mix(in srgb, #f5911e 28%, transparent),
    color-mix(in srgb, var(--bb-accent-blue) 22%, transparent)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* —— Mobile overflow guards —— */
@media (max-width: 47.99rem) {
  .site--builder .builder-hero__stage .builder-hero__device--desktop {
    transform: none;
    max-width: 100%;
  }

  .site--builder .builder-hero__stage .builder-hero__device--phone {
    transform: none;
    right: 0;
    width: clamp(7.5rem, 34vw, 10rem);
  }

  .site--builder .builder-devices-row__visual .bb-mockup--iphone-float {
    position: relative;
    right: auto;
    bottom: auto;
    margin: calc(-1 * var(--space-8)) auto 0;
    max-width: 9.5rem;
  }

  .site--builder .builder-cloud__visual .bb-mockup--iphone-sm {
    position: relative;
    right: auto;
    margin: var(--space-4) auto 0;
  }

  .site--builder .builder-action__spotlight .bb-mockup--browser-xl {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-hero__stage .builder-hero__device--desktop,
  .site--builder .builder-hero__stage .builder-hero__device--phone {
    transform: none;
  }

  .site--builder .builder-action__card:hover,
  .site--builder .builder-gallery-card:hover,
  .site--builder .builder-pricing--saas .builder-pricing__card:hover {
    transform: none;
  }
}

/* =============================================================================
   Bloqio Builder — Polish v3 (bb-device, bento, flagship)
   ============================================================================= */

.site--builder .builder-section--alt {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--bb-accent-blue) 5%, transparent), transparent 70%),
    var(--bb-surface);
}

/* Beneficios — fondo metálico suave */
.site--builder #beneficios.builder-section--alt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(
      168deg,
      color-mix(in srgb, #e6e9ef 38%, #fff) 0%,
      color-mix(in srgb, #f4f5f8 90%, var(--bb-accent-blue) 3%) 42%,
      color-mix(in srgb, #eceef2 70%, #d2d7e0 10%) 100%
    ),
    radial-gradient(ellipse 95% 60% at 50% -12%, color-mix(in srgb, var(--bb-accent-blue) 8%, #fff), transparent 65%),
    radial-gradient(ellipse 65% 50% at 100% 100%, color-mix(in srgb, #f5911e 5%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 45% at 0% 90%, color-mix(in srgb, var(--bb-accent-blue-deep) 6%, transparent), transparent 52%),
    var(--bb-surface);
}

.site--builder #beneficios.builder-section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    112deg,
    transparent 8%,
    color-mix(in srgb, #fff 72%, transparent) 44%,
    color-mix(in srgb, #b8bec8 14%, transparent) 52%,
    transparent 62%
  );
  opacity: 0.38;
}

.site--builder #beneficios.builder-section--alt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #fff 40%, transparent) 0%,
    transparent 28%,
    transparent 72%,
    color-mix(in srgb, #d8dce4 8%, transparent) 100%
  );
  opacity: 0.55;
}

.site--builder #beneficios.builder-section--alt > .container {
  position: relative;
  z-index: 1;
}

/* —— Icons (thin stroke — complementa Hiragino Kaku Gothic W8) —— */
.site--builder .bb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--color-identity) 72%, var(--bb-accent-blue));
}

.site--builder .builder-cloud-steps .builder-cloud-step__icon.bb-icon {
  color: #fff;
}

.site--builder .bb-icon svg,
.site--builder .builder-hero__chip .bb-icon svg,
.site--builder .builder-flagship__chips .bb-icon svg {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke-width: var(--bb-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.site--builder .builder-cloud-steps .builder-cloud-step__icon.bb-icon svg {
  stroke: #fff;
  color: #fff;
}

.site--builder .bb-icon--tile {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, #fff 96%, var(--bb-accent-blue) 3%);
  border: 1px solid color-mix(in srgb, var(--color-identity) 10%, var(--color-border));
  box-shadow: none;
  color: color-mix(in srgb, var(--color-identity) 80%, var(--bb-accent-blue));
}

.site--builder .bb-icon--tile svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.2;
}

.site--builder .bb-icon--nav-auth svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.2;
}

/* —— bb-device frames —— */
.site--builder .bb-device {
  position: relative;
  margin: 0;
}

.site--builder .bb-device--browser {
  border-radius: 1.5rem;
  background: #fafafa;
  border: 1px solid color-mix(in srgb, var(--color-identity) 8%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 40px 100px rgba(22, 26, 38, 0.14),
    0 12px 32px rgba(22, 26, 38, 0.06);
  overflow: hidden;
}

.site--builder .bb-device__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: color-mix(in srgb, #f5f5f7 92%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--color-identity) 6%, transparent);
}

.site--builder .bb-device__dots {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.site--builder .bb-device__dots i {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  font-style: normal;
  background: color-mix(in srgb, var(--color-text) 12%, #ddd);
}

.site--builder .bb-device__dots i:nth-child(1) {
  background: #ff5f57;
}

.site--builder .bb-device__dots i:nth-child(2) {
  background: #febc2e;
}

.site--builder .bb-device__dots i:nth-child(3) {
  background: #28c840;
}

.site--builder .bb-device__title {
  flex: 1;
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site--builder .bb-device-screen {
  position: relative;
  overflow: hidden;
  background: #111;
  line-height: 0;
  aspect-ratio: 16 / 10;
}

.site--builder .bb-device--browser.bb-device--hero .bb-device-screen {
  aspect-ratio: 16 / 9.8;
}

.site--builder .bb-device--inset .bb-device-screen {
  aspect-ratio: 16 / 10;
  border-radius: 0 0 1.35rem 1.35rem;
}

.site--builder .bb-device--inset.bb-device--browser {
  border-radius: 1rem;
}

.site--builder .bb-device-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.site--builder .bb-device-screen .bb-media--poster {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.site--builder .bb-device-screen .bb-media--video {
  position: relative;
  z-index: 1;
}

.site--builder .bb-device-screen:has(.bb-media--video:not([aria-hidden="true"])) .bb-media--poster {
  opacity: 0;
  pointer-events: none;
}

.site--builder .builder-reduced-motion .bb-device-screen .bb-media--video,
.site--builder.builder-reduced-motion .bb-device-screen .bb-media--video {
  display: none;
}

.site--builder .builder-reduced-motion .bb-device-screen .bb-media--poster,
.site--builder.builder-reduced-motion .bb-device-screen .bb-media--poster {
  opacity: 1;
  position: relative;
  z-index: 1;
}

.site--builder .bb-device-shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%, transparent 68%, rgba(255, 255, 255, 0.04) 100%);
  z-index: 2;
}

/* Phone */
.site--builder .bb-device--phone {
  width: 100%;
  max-width: 11.25rem;
  padding: 0.65rem;
  border-radius: 2.65rem;
  background: linear-gradient(160deg, #3a3a40 0%, #141416 45%, #1e1e22 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 28px 64px rgba(18, 20, 28, 0.28),
    0 8px 20px rgba(18, 20, 28, 0.12);
}

.site--builder .bb-device--phone .bb-device-screen {
  border-radius: 2rem;
  aspect-ratio: 390 / 844;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.site--builder .bb-device--phone .bb-device-media {
  object-fit: cover;
  object-position: top center;
}

.site--builder .bb-device--phone .bb-device__island {
  position: absolute;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  max-width: 4.25rem;
  height: 0.52rem;
  border-radius: 999px;
  background: #000;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.site--builder .bb-device--floating {
  position: absolute;
  z-index: 4;
}

.site--builder .bb-device--mini.bb-device--browser {
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(22, 26, 38, 0.1);
}

.site--builder .bb-device--mini .bb-device-screen {
  aspect-ratio: 16 / 10;
}

.site--builder .bb-device--mini.bb-device--phone {
  max-width: 5.5rem;
  padding: 0.35rem;
  border-radius: 1.35rem;
}

.site--builder .bb-device--mini.bb-device--phone .bb-device-screen {
  border-radius: 1.05rem;
}

.site--builder .bb-device--motion-main .bb-device-screen {
  aspect-ratio: 16 / 9;
}

/* —— Product stage (hero) —— */
.site--builder .bb-product-stage {
  position: relative;
  min-height: clamp(22rem, 52vw, 34rem);
  width: 100%;
}

.site--builder .bb-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.site--builder .bb-orb--blue {
  width: 55%;
  height: 45%;
  top: 5%;
  left: 10%;
  background: color-mix(in srgb, var(--bb-accent-blue) 22%, transparent);
  animation: bb-orb-drift 22s var(--holo-motion-ease-drift, ease-in-out) infinite alternate;
}

.site--builder .bb-orb--warm {
  width: 40%;
  height: 38%;
  bottom: 8%;
  right: 5%;
  background: color-mix(in srgb, #f5911e 16%, transparent);
  animation: bb-orb-drift 28s var(--holo-motion-ease-drift, ease-in-out) infinite alternate-reverse;
}

@keyframes bb-orb-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(2.5%, -2%) scale(1.04);
  }
}

.site--builder .bb-product-stage__browser {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding-top: var(--space-4);
}

.site--builder .bb-product-stage__phone {
  position: absolute;
  right: clamp(0rem, 3vw, 0.5rem);
  bottom: clamp(0.5rem, 6vw, 2.5rem);
  width: clamp(8.75rem, 28vw, 11.5rem);
  z-index: 3;
}

.site--builder .builder-hero--flagship .builder-hero__grid {
  align-items: center;
  gap: var(--space-12);
}

@media (min-width: 64rem) {
  .site--builder .builder-hero--flagship .builder-hero__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.28fr);
    gap: var(--space-10);
  }
}

.site--builder .builder-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 90%, var(--bb-accent-blue) 5%);
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, var(--bb-accent-blue) 14%);
  transition:
    transform var(--holo-motion-duration-micro) ease,
    box-shadow var(--holo-motion-duration-micro) ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-hero__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--bb-accent-blue) 10%, transparent);
  }
}

.site--builder .builder-hero__float-chip {
  position: absolute;
  left: 8%;
  bottom: 18%;
  z-index: 4;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 20%, transparent);
  box-shadow: 0 8px 24px rgba(22, 26, 38, 0.1);
  backdrop-filter: blur(8px);
}

/* —— Motion section —— */
.site--builder .builder-motion {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 56rem) {
  .site--builder .builder-motion {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    align-items: start;
    gap: var(--space-10);
  }
}

.site--builder .builder-motion__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site--builder .builder-motion__step {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  transition:
    transform var(--holo-motion-duration-micro) ease,
    box-shadow var(--holo-motion-duration-micro) ease;
}

.site--builder .builder-motion__step h3 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.site--builder .builder-motion__step p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-motion__step:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 12px 32px rgba(30, 35, 50, 0.07);
  }
}

/* —— Bento gallery —— */
.site--builder .builder-bento-scroll {
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.site--builder .builder-bento-scroll::-webkit-scrollbar {
  display: none;
}

.site--builder .builder-bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(6, min(82vw, 20rem));
  grid-auto-rows: minmax(18rem, auto);
  padding-block: var(--space-2) var(--space-4);
}

@media (min-width: 56rem) {
  .site--builder .builder-bento-scroll {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .site--builder .builder-bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(16rem, auto);
    gap: var(--space-5);
  }
}

.site--builder .builder-bento__card {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: calc(var(--radius-lg) + 0.15rem);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--bb-accent-blue) 6%, transparent), transparent 55%),
    color-mix(in srgb, #fff 97%, #f6f6f4);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset;
  transition:
    transform var(--holo-motion-duration-micro) ease,
    box-shadow var(--holo-motion-duration-fast) ease,
    border-color var(--holo-motion-duration-fast) ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-bento__card:hover {
    transform: translateY(-2.5px);
    border-color: color-mix(in srgb, var(--bb-accent-blue) 22%, var(--color-border));
    box-shadow: 0 18px 44px rgba(30, 35, 50, 0.085);
  }
}

.site--builder .builder-bento__card--editor {
  grid-column: span 6;
}

.site--builder .builder-bento__card--mobile {
  grid-column: span 6;
}

.site--builder .builder-bento__card--cloud,
.site--builder .builder-bento__card--publish {
  grid-column: span 6;
}

.site--builder .builder-bento__card--templates,
.site--builder .builder-bento__card--export {
  grid-column: span 6;
}

@media (min-width: 56rem) {
  .site--builder .builder-bento__card--editor {
    grid-column: span 4;
    grid-row: span 2;
  }

  .site--builder .builder-bento__card--mobile {
    grid-column: span 2;
    grid-row: span 2;
  }

  .site--builder .builder-bento__card--cloud {
    grid-column: span 3;
  }

  .site--builder .builder-bento__card--publish {
    grid-column: span 3;
  }

  .site--builder .builder-bento__card--templates {
    grid-column: span 4;
  }

  .site--builder .builder-bento__card--export {
    grid-column: span 2;
  }
}

.site--builder .builder-bento__title {
  margin: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--color-identity);
  line-height: 1.15;
}

.site--builder .builder-bento__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  flex: 1;
}

.site--builder .builder-bento__visual {
  margin: 0;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 9rem;
}

.site--builder .builder-bento__visual--phone .bb-device--phone {
  max-width: 8.5rem;
}

.site--builder .builder-bento__visual .bb-device--browser {
  width: 100%;
}

/* —— Benefits premium —— */
.site--builder .builder-benefits--premium .builder-benefit {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 98%, var(--bb-accent-blue) 2%) 0%, #fff 100%);
}

.site--builder .builder-benefits--premium .builder-benefit__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: var(--space-3);
}

.site--builder .builder-benefit__icon.bb-icon--benefit-phone svg {
  width: 1.375rem;
  height: 1.375rem;
}

.site--builder .builder-benefit__icon.bb-icon--benefit-wa {
  color: #25d366;
}

.site--builder .builder-benefit__icon.bb-icon--benefit-wa svg {
  width: 1.25rem;
  height: 1.25rem;
}

.site--builder .builder-benefit__icon.bb-icon--benefit-palette svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* —— Flow timeline —— */
.site--builder .builder-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  position: relative;
}

@media (min-width: 64rem) {
  .site--builder .builder-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.site--builder .builder-flow__step {
  position: relative;
  z-index: 1;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  text-align: center;
  box-shadow: none;
  transition: border-color var(--holo-motion-duration-micro) ease;
}

.site--builder .builder-flow__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: color-mix(in srgb, var(--bb-accent-blue-deep) 88%, var(--color-identity));
  background: color-mix(in srgb, #fff 72%, var(--bb-accent-blue) 12%);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 28%, var(--color-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 8px color-mix(in srgb, var(--bb-accent-blue) 12%, transparent);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-flow__step:hover {
    border-color: color-mix(in srgb, var(--bb-accent-blue) 20%, var(--color-border));
  }
}

.site--builder .builder-flow__hotspot {
  --bb-flow-hotspot-size: 2.75rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--bb-flow-hotspot-size);
  min-width: var(--bb-flow-hotspot-size);
  height: var(--bb-flow-hotspot-size);
  min-height: var(--bb-flow-hotspot-size);
  margin: 0 auto var(--space-3);
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  background: color-mix(in srgb, #fff 38%, transparent);
  border: 1px solid color-mix(in srgb, #fff 72%, var(--bb-accent-blue) 18%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    0 4px 18px color-mix(in srgb, var(--bb-accent-blue) 10%, transparent);
  backdrop-filter: blur(22px) saturate(1.65);
  -webkit-backdrop-filter: blur(22px) saturate(1.65);
  transition:
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    min-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    gap 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

.site--builder .builder-flow__step.is-inview .builder-flow__hotspot {
  width: max-content;
  min-width: var(--bb-flow-hotspot-size);
  max-width: calc(100% - 1rem);
  padding: 0 0.7rem;
  gap: 0.45rem;
  background: color-mix(in srgb, #fff 52%, transparent);
  border-color: color-mix(in srgb, #fff 65%, var(--bb-accent-blue) 22%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    0 0 14px -2px color-mix(in srgb, var(--bb-accent-blue) 32%, transparent),
    0 6px 22px -6px color-mix(in srgb, var(--bb-accent-blue) 18%, transparent);
}

.site--builder .builder-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--bb-accent-blue), var(--bb-accent-blue-deep));
}

.site--builder .builder-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-identity) 80%, var(--bb-accent-blue));
  transition:
    max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(-0.25rem, 0, 0);
}

.site--builder .builder-flow__step.is-inview .builder-flow__icon {
  max-width: 1.5rem;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.site--builder .builder-flow__icon svg {
  width: 100%;
  height: 100%;
}

.site--builder .builder-flow__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.site--builder .builder-flow__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* —— Pricing v2 —— */
.site--builder .builder-pricing--v2 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site--builder .builder-pricing--v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .site--builder .builder-pricing--v2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site--builder .builder-pricing--v2 .builder-pricing__card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) + 0.125rem);
  background: color-mix(in srgb, #fff 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  transition:
    transform var(--holo-motion-duration-micro) ease,
    box-shadow var(--holo-motion-duration-micro) ease;
}

.site--builder .builder-pricing--v2 .builder-pricing__card--create {
  border-color: color-mix(in srgb, var(--bb-accent-blue) 28%, var(--color-border));
  box-shadow: none;
}

.site--builder .builder-pricing--v2 .builder-pricing__card--soon {
  opacity: 0.88;
  background: color-mix(in srgb, #fff 92%, #f4f4f2);
}

.site--builder .builder-pricing__icon {
  margin-bottom: var(--space-4);
}

.site--builder .builder-pricing--v2 .builder-pricing__tier {
  margin: 0 0 var(--space-2);
}

.site--builder .builder-pricing--v2 .builder-pricing__price {
  margin: 0 0 var(--space-4);
}

.site--builder .builder-pricing__period {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--color-text-muted);
}

.site--builder .builder-pricing__amount--muted {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--color-text-muted);
}

.site--builder .builder-pricing--v2 .builder-pricing__features {
  margin-top: auto;
  margin-bottom: 0;
}

.site--builder .builder-pricing--v2 .builder-pricing__card--create .builder-pricing__features {
  margin-bottom: var(--space-6);
}

.site--builder .builder-pricing__url-pill {
  display: inline-block;
  margin-inline: 0.15rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--bb-accent-blue-deep) 78%, var(--color-text));
  background: color-mix(in srgb, var(--bb-accent-blue) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 24%, var(--color-border));
  vertical-align: middle;
  white-space: nowrap;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-pricing--v2 .builder-pricing__card:hover {
    border-color: color-mix(in srgb, var(--bb-accent-blue) 20%, var(--color-border));
  }
}

/* —— Pricing promo (SUMMER SALE) — Apple-like, sin glow —— */
.site--builder .builder-pricing--v2 .builder-pricing__card--promo {
  --bb-promo-red: #d70015;
  overflow: visible;
  border-color: color-mix(in srgb, var(--color-border) 88%, var(--bb-promo-red) 12%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.site--builder .builder-pricing__promo-ribbon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  pointer-events: none;
}

.site--builder .builder-pricing__promo-ribbon-text {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  background: var(--bb-promo-red);
  border: none;
  box-shadow: none;
}

.site--builder .builder-pricing__price--promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.site--builder .builder-pricing__amount--was {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
  opacity: 1;
}

.site--builder .builder-pricing__price-now .builder-pricing__amount {
  color: var(--color-identity);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-pricing--v2 .builder-pricing__card--promo.is-revealed .builder-pricing__promo-ribbon-text {
    animation: bb-promo-label-in 0.5s var(--holo-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
  }
}

@keyframes bb-promo-label-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-pricing__promo-ribbon-text {
    animation: none;
  }
}

/* —— Demo cards —— */
.site--builder .builder-demos {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site--builder .builder-demos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .site--builder .builder-demos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site--builder .builder-demo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  transition:
    transform var(--holo-motion-duration-micro) ease,
    box-shadow var(--holo-motion-duration-micro) ease;
}

.site--builder .builder-demo-card__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.site--builder .builder-demo-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.site--builder .builder-demo-card__preview {
  min-height: 7.5rem;
  border-radius: 0.75rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bb-accent-blue) 8%, #f0f2f8) 0%, #fff 55%, color-mix(in srgb, #f5911e 6%, #fff) 100%);
  border: 1px dashed color-mix(in srgb, var(--color-border) 75%, var(--bb-accent-blue) 12%);
  overflow: hidden;
  position: relative;
}

.site--builder .builder-demo-card__preview-inner {
  position: absolute;
  inset: 12% 10% 18%;
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-identity) 8%, #e8e8ec) 0%, transparent 35%),
    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(68, 68, 68, 0.04) 12px, rgba(68, 68, 68, 0.04) 13px);
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  box-shadow: 0 8px 20px rgba(30, 35, 50, 0.06);
}

.site--builder .builder-demo-card__preview-inner::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: 0.4rem;
  width: 28%;
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-identity) 12%, #ddd);
}

.site--builder .builder-demo-card__badge {
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-text) 70%, var(--color-text-muted));
  background: color-mix(in srgb, var(--color-border) 30%, #fff);
}

.site--builder .builder-demo-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: color-mix(in srgb, var(--bb-accent-blue) 55%, var(--color-text-muted));
  cursor: not-allowed;
  opacity: 0.55;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-demo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(30, 35, 50, 0.08);
  }
}

/* —— Flagship CTA —— */
.site--builder .builder-flagship {
  padding-block: var(--space-16);
}

.site--builder .builder-flagship__panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: calc(var(--radius-lg) + 0.5rem);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, #f5911e 14%, transparent), transparent 58%),
    radial-gradient(ellipse 80% 60% at 20% 80%, color-mix(in srgb, var(--bb-accent-blue) 12%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, #fff 88%, var(--bb-accent-blue) 6%) 0%, #fff 42%, color-mix(in srgb, #fff 92%, #f5911e 5%) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 18%, var(--color-border));
  box-shadow: none;
}

.site--builder .bb-orb--cta {
  width: 50%;
  height: 40%;
  top: -10%;
  left: 20%;
  background: color-mix(in srgb, var(--bb-accent-blue) 20%, transparent);
}

.site--builder .bb-orb--cta-warm {
  width: 45%;
  height: 35%;
  bottom: -5%;
  right: 10%;
  background: color-mix(in srgb, #f5911e 18%, transparent);
}

.site--builder .builder-flagship__logo {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto var(--space-5);
  height: 1.85rem;
  width: auto;
}

.site--builder .builder-flagship__title {
  position: relative;
  z-index: 1;
  margin: 0 auto var(--space-4);
  max-width: 28rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--color-identity);
}

.site--builder .builder-flagship__lede {
  position: relative;
  z-index: 1;
  margin: 0 auto var(--space-6);
  max-width: 32rem;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.site--builder .builder-flagship__chips {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0 auto var(--space-6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 36rem;
}

.site--builder .builder-flagship__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  backdrop-filter: blur(6px);
}

.site--builder .builder-flagship__actions {
  position: relative;
  z-index: 1;
  justify-content: center;
}

/* —— Reveal —— */
.site--builder [data-reveal].is-reveal-pending {
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.992);
  filter: blur(2px);
}

.site--builder [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--holo-motion-duration) var(--holo-motion-ease-enter, var(--holo-motion-ease)),
    transform var(--holo-motion-duration) var(--holo-motion-ease-enter, var(--holo-motion-ease)),
    filter var(--holo-motion-duration) var(--holo-motion-ease-enter, var(--holo-motion-ease));
  transition-delay: var(--builder-reveal-delay, 0s);
}

.site--builder.builder-reduced-motion [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* —— Devices row / cloud overrides —— */
.site--builder .builder-devices-row__visual,
.site--builder .builder-cloud__visual {
  position: relative;
  min-height: clamp(16rem, 36vw, 22rem);
}

.site--builder .builder-devices-row__visual .bb-device--browser,
.site--builder .builder-cloud__visual .bb-device--browser {
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
}

.site--builder .builder-devices-row__visual .bb-device--floating,
.site--builder .builder-cloud__visual .bb-device--floating {
  right: 0;
  bottom: 0;
  width: clamp(7.5rem, 26vw, 10rem);
}

@media (max-width: 47.99rem) {
  .site--builder .bb-product-stage__phone {
    position: relative;
    right: auto;
    bottom: auto;
    margin: calc(-1 * var(--space-6)) auto 0;
    width: 9rem;
  }

  .site--builder .bb-product-stage {
    min-height: auto;
    padding-bottom: var(--space-4);
  }

  .site--builder .builder-devices-row__visual .bb-device--floating,
  .site--builder .builder-cloud__visual .bb-device--floating {
    position: relative;
    margin: var(--space-4) auto 0;
  }

  .site--builder .builder-motion {
    grid-template-columns: 1fr;
  }

  .site--builder .builder-flow::before {
    display: none;
  }

  .site--builder .builder-flow__step {
    text-align: left;
  }

  .site--builder .builder-flow__hotspot,
  .site--builder .builder-flow__icon {
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-flow__hotspot,
  .site--builder .builder-flow__icon {
    transition: none;
  }

  .site--builder .builder-flow__step.is-inview .builder-flow__hotspot,
  .site--builder .builder-flow__step .builder-flow__hotspot {
    width: max-content;
    min-width: var(--bb-flow-hotspot-size);
    padding: 0 0.7rem;
    gap: 0.45rem;
  }

  .site--builder .builder-flow__step.is-inview .builder-flow__icon,
  .site--builder .builder-flow__step .builder-flow__icon {
    max-width: 1.5rem;
    opacity: 1;
    transform: none;
  }

  .site--builder .bb-orb--blue,
  .site--builder .bb-orb--warm,
  .site--builder .bb-orb--cta,
  .site--builder .bb-orb--cta-warm {
    animation: none;
  }

  .site--builder [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .site--builder .builder-bento__card:hover,
  .site--builder .builder-motion__step:hover,
  .site--builder .builder-flow__step:hover,
  .site--builder .builder-pricing--v2 .builder-pricing__card:hover,
  .site--builder .builder-demo-card:hover,
  .site--builder .builder-hero__chip:hover {
    transform: none;
  }
}

/* =============================================================================
   Bloqio Builder v4 — bb-frame, horizontal galleries, hero visual rebuild
   ============================================================================= */

.site--builder .builder-section--canvas {
  background: #f6f7fb;
}

.site--builder .builder-section-header__title {
  font-size: clamp(1.75rem, 3.4vw, 2.65rem);
  letter-spacing: -0.02em;
}

.site--builder .builder-section-header__lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  max-width: 38rem;
}

.site--builder .builder-section-header--center .builder-section-header__lede {
  margin-inline: auto;
}

/* —— Abstract product frames —— */
.site--builder .bb-frame {
  position: relative;
  display: block;
  width: 100%;
}

.site--builder .bb-frame--browser {
  border-radius: 1.75rem;
  background: #fafbfc;
  border: 1px solid color-mix(in srgb, var(--color-identity) 7%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 48px 120px rgba(20, 24, 36, 0.14),
    0 16px 40px rgba(20, 24, 36, 0.06);
  overflow: hidden;
}

.site--builder .bb-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: color-mix(in srgb, #f3f4f6 94%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--color-identity) 5%, transparent);
}

.site--builder .bb-frame-dots {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.site--builder .bb-frame-dots i {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  font-style: normal;
}

.site--builder .bb-frame-dots i:nth-child(1) { background: #ff5f57; }
.site--builder .bb-frame-dots i:nth-child(2) { background: #febc2e; }
.site--builder .bb-frame-dots i:nth-child(3) { background: #28c840; }

.site--builder .bb-frame-url {
  flex: 1;
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site--builder .bb-frame-screen {
  position: relative;
  overflow: hidden;
  background: #0e0e10;
  aspect-ratio: 16 / 10;
  line-height: 0;
}

.site--builder .bb-frame--hero .bb-frame-screen {
  aspect-ratio: 16 / 9.5;
}

.site--builder .bb-frame--card .bb-frame-screen {
  aspect-ratio: 16 / 10;
  min-height: 14rem;
}

.site--builder img.bb-frame-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.site--builder .bb-frame-shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.14) 0%, transparent 45%, transparent 70%, rgba(255, 255, 255, 0.05) 100%);
  z-index: 2;
}

/* Phone glass frame */
.site--builder .bb-frame--phone {
  width: 100%;
  max-width: 12.5rem;
  padding: 0.7rem;
  border-radius: 2.75rem;
  background: linear-gradient(155deg, #45454d 0%, #1a1a1e 42%, #252528 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.site--builder .bb-phone-island {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  max-width: 4rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #000;
  z-index: 3;
}

.site--builder .bb-phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 2.1rem;
  aspect-ratio: 390 / 844;
  background: #000;
  box-shadow: none;
}

.site--builder .bb-frame--phone .bb-frame-media {
  object-fit: cover;
  object-position: top center;
}

.site--builder .bb-frame--float {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.site--builder .bb-frame--mini.bb-frame--browser {
  border-radius: 0.65rem;
  box-shadow: 0 8px 20px rgba(22, 26, 38, 0.1);
}

.site--builder .bb-frame--mini.bb-frame--browser .bb-frame-screen {
  aspect-ratio: 16 / 10;
  min-height: 4.5rem;
}

.site--builder .bb-frame--mini.bb-frame--phone {
  max-width: 4.5rem;
  padding: 0.35rem;
  border-radius: 1.25rem;
  margin-inline: auto;
}

.site--builder .bb-frame--mini.bb-frame--phone .bb-phone-screen {
  border-radius: 0.95rem;
}

.site--builder .bb-frame--mini .bb-phone-island {
  display: none;
}

/* —— Hero v4 —— */
.site--builder .builder-hero--v4 .builder-hero__shell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.site--builder .builder-hero__visual-stage {
  position: relative;
  min-height: clamp(20rem, 48vw, 32rem);
  width: 100%;
}

.site--builder .bb-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.site--builder .bb-halo--blue {
  width: 58%;
  height: 48%;
  top: 0;
  left: 5%;
  background: color-mix(in srgb, var(--bb-accent-blue) 24%, transparent);
  animation: bb-halo-drift 26s var(--holo-motion-ease-drift, ease-in-out) infinite alternate;
}

.site--builder .bb-halo--warm {
  width: 42%;
  height: 40%;
  bottom: 5%;
  right: 0;
  background: color-mix(in srgb, #f5911e 18%, transparent);
  animation: bb-halo-drift 32s var(--holo-motion-ease-drift, ease-in-out) infinite alternate-reverse;
}

@keyframes bb-halo-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3%, -2.5%) scale(1.03); }
}

.site--builder .builder-hero__frame-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}

.site--builder .builder-hero__frame-float {
  position: absolute;
  right: clamp(0rem, 2vw, 1rem);
  bottom: clamp(0.5rem, 5vw, 2rem);
  width: clamp(9rem, 26vw, 12.5rem);
  z-index: 3;
}

.site--builder .builder-hero__float-tag {
  position: absolute;
  left: 6%;
  bottom: 20%;
  z-index: 4;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 22%, transparent);
  box-shadow: 0 8px 24px rgba(22, 26, 38, 0.1);
  backdrop-filter: blur(8px);
}

/* —— Horizontal galleries —— */
.site--builder .bb-gallery-outer {
  position: relative;
}

.site--builder .bb-gallery-outer::before,
.site--builder .bb-gallery-outer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 2rem;
  width: min(4rem, 8vw);
  z-index: 2;
  pointer-events: none;
}

.site--builder .bb-gallery-outer::before {
  left: 0;
  background: linear-gradient(90deg, var(--bb-surface, #fff) 0%, transparent 100%);
}

.site--builder .bb-gallery-section--mobile .bb-gallery-outer::before {
  background: linear-gradient(90deg, #f6f7fb 0%, transparent 100%);
}

.site--builder .bb-gallery-outer::after {
  right: 0;
  background: linear-gradient(270deg, var(--bb-surface, #fff) 0%, transparent 100%);
}

.site--builder .bb-gallery-section--mobile .bb-gallery-outer::after {
  background: linear-gradient(270deg, #f6f7fb 0%, transparent 100%);
}

.site--builder .bb-horizontal-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86vw, 42rem);
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(1.5rem, calc((100vw - var(--bb-container)) / 2));
  padding: 0.75rem max(1.5rem, calc((100vw - var(--bb-container)) / 2)) 2rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site--builder .bb-horizontal-gallery::-webkit-scrollbar {
  display: none;
}

@media (min-width: 48rem) {
  .site--builder .bb-horizontal-gallery {
    grid-auto-columns: min(78vw, 44rem);
    gap: 1.75rem;
  }
}

.site--builder .bb-horizontal-gallery--phone {
  grid-auto-columns: min(78vw, 18rem);
}

@media (min-width: 48rem) {
  .site--builder .bb-horizontal-gallery--phone {
    grid-auto-columns: min(22rem, 20rem);
  }
}

.site--builder .bb-horizontal-gallery--motion {
  grid-auto-columns: min(88vw, 40rem);
}

.site--builder .bb-gallery-card {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) + 0.25rem);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--bb-accent-blue) 7%, transparent), transparent 50%),
    #fff;
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 20px 50px rgba(22, 26, 38, 0.07);
  transition:
    transform var(--holo-motion-duration-micro) ease,
    box-shadow var(--holo-motion-duration-fast) ease;
}

.site--builder .bb-gallery-section--mobile .bb-gallery-card {
  background:
    radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, #f5911e 8%, transparent), transparent 55%),
    #fff;
}

.site--builder .bb-gallery-card__tag {
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--bb-accent-blue) 75%, var(--color-identity));
  background: color-mix(in srgb, var(--bb-accent-blue) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 18%, transparent);
}

.site--builder .bb-gallery-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--color-identity);
  line-height: 1.15;
}

.site--builder .bb-gallery-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}

.site--builder .bb-gallery-card__visual {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.site--builder .bb-gallery-card--phone .bb-gallery-card__visual {
  padding-top: var(--space-2);
}

.site--builder .bb-gallery-card--phone .bb-frame--card {
  max-width: 11rem;
  margin-inline: auto;
}

.site--builder .bb-gallery-card--demo .bb-frame--card .bb-frame-screen {
  min-height: 16rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .bb-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 60px rgba(22, 26, 38, 0.12);
  }
}

/* Cloud visual with new frames */
.site--builder .builder-cloud__visual {
  position: relative;
  min-height: clamp(16rem, 34vw, 22rem);
}

.site--builder .builder-cloud__visual .bb-frame--browser {
  max-width: 38rem;
  margin-inline: auto;
}

.site--builder .builder-cloud__visual .bb-frame--float {
  width: clamp(7.5rem, 24vw, 10.5rem);
}

.site--builder .builder-demo-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: var(--space-3);
  border-radius: 0.75rem;
  background: #f6f7fb;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  overflow: hidden;
}

.site--builder .builder-demo-card__preview .bb-frame--mini {
  width: 100%;
  max-width: 10rem;
}

.site--builder.builder-reduced-motion .bb-demo-gif,
.site--builder .builder-reduced-motion .bb-demo-gif {
  opacity: 0.35;
  filter: grayscale(0.2);
}

@media (max-width: 47.99rem) {
  .site--builder .builder-hero__frame-float {
    position: relative;
    right: auto;
    bottom: auto;
    margin: calc(-1 * var(--space-4)) auto 0;
    width: 9.5rem;
  }

  .site--builder .builder-hero__visual-stage {
    min-height: auto;
    padding-bottom: var(--space-4);
  }

  .site--builder .builder-hero__float-tag {
    display: none;
  }

  .site--builder .builder-cloud__visual .bb-holo-shot--float {
    position: relative;
    margin: var(--space-4) auto 0;
  }

  .site--builder .bb-horizontal-gallery {
    grid-auto-columns: min(92vw, 24rem);
  }

  .site--builder .bb-horizontal-gallery--phone {
    grid-auto-columns: min(78vw, 16.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .bb-halo--blue,
  .site--builder .bb-halo--warm {
    animation: none;
  }

  .site--builder .bb-gallery-card:hover {
    transform: none;
  }
}

/* =============================================================================
   Bloqio Builder v5 — holo metal shots, raw assets, iPhone demos only
   ============================================================================= */

.site--builder .bb-holo-metal {
  position: relative;
  isolation: isolate;
}

.site--builder .bb-holo-shot__ring {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--bb-edge);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.85;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .site--builder .bb-holo-metal:hover .bb-holo-shot__ring,
  .site--builder .bb-gallery-card.bb-holo-metal:hover .bb-holo-shot__ring {
    opacity: 1;
  }
}

/* Raw screenshot — no browser chrome */
.site--builder .bb-holo-shot {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
  background:
    linear-gradient(168deg, color-mix(in srgb, #fff 94%, var(--bb-accent-blue) 4%) 0%, #fff 100%);
  box-shadow: none;
}

.site--builder .bb-holo-shot__media {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  object-fit: contain;
  object-position: center top;
}

.site--builder .bb-holo-shot--desktop {
  border-radius: 1.15rem;
}

.site--builder .bb-holo-shot--desktop .bb-holo-shot__media {
  max-height: min(52vh, 28rem);
  margin-inline: auto;
}

.site--builder .bb-holo-shot--mobile {
  max-width: 13.5rem;
  margin-inline: auto;
  border-radius: 1.75rem;
}

.site--builder .bb-holo-shot--hero.bb-holo-shot--desktop {
  border-radius: 1.35rem;
}

.site--builder .bb-holo-shot--hero-float {
  max-width: 11.5rem;
}

.site--builder .bb-holo-shot--float {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  max-width: 10.5rem;
}

.site--builder .bb-holo-shot--mini {
  max-width: 9.5rem;
  margin-inline: auto;
  border-radius: 0.85rem;
}

.site--builder .bb-holo-shot--mini .bb-holo-shot__media {
  max-height: 6rem;
}

/* Gallery cards — metal holo panel */
.site--builder .bb-gallery-card.bb-holo-metal {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 96%, var(--bb-accent-blue) 3%) 0%, #fff 55%, color-mix(in srgb, #fff 92%, #f5911e 4%) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 14%, var(--color-border));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 22px 52px rgba(22, 26, 38, 0.08),
    0 0 0 0.5px color-mix(in srgb, var(--bb-accent-blue) 8%, transparent);
}

.site--builder .bb-gallery-card__visual .bb-holo-shot {
  box-shadow: none;
}

.site--builder .bb-gallery-card--phone .bb-holo-shot--mobile {
  max-width: 11rem;
}

/* iPhone frame — solo para GIFs demo */
.site--builder .bb-frame--demo.bb-holo-metal,
.site--builder .bb-frame--demo {
  max-width: 12.5rem;
  margin-inline: auto;
  padding: 0.65rem;
  border-radius: 2.65rem;
  background:
    linear-gradient(155deg,
      color-mix(in srgb, #5a5a62 90%, var(--bb-accent-blue) 8%) 0%,
      #1a1a1e 40%,
      #252528 100%);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  box-shadow: none;
}

.site--builder .bb-frame--demo .bb-holo-shot__ring {
  inset: -2px;
  border-radius: 2.75rem;
  opacity: 0.95;
}

.site--builder .bb-phone-screen--demo {
  border-radius: 2rem;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  background: #000;
}

.site--builder .bb-phone-screen--demo .bb-demo-gif,
.site--builder .bb-phone-screen--demo .bb-frame-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.site--builder .bb-horizontal-gallery--motion .bb-gallery-card__visual {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
}

/* Benefits, pricing, flagship — holo metal */
.site--builder .builder-benefit.bb-holo-metal {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 97%, var(--bb-accent-blue) 2%) 0%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 12%, var(--color-border));
}

.site--builder .builder-benefit.bb-holo-metal .bb-holo-shot__ring {
  inset: 0;
  border-radius: var(--radius-lg);
  opacity: 0.55;
}

.site--builder .builder-pricing__card--create.bb-holo-metal {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 92%, var(--bb-accent-blue) 6%) 0%, #fff 48%, color-mix(in srgb, #fff 94%, #f5911e 4%) 100%);
}

.site--builder .builder-flagship__panel.bb-holo-metal {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, #f5911e 14%, transparent), transparent 58%),
    radial-gradient(ellipse 80% 60% at 20% 80%, color-mix(in srgb, var(--bb-accent-blue) 14%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, #fff 88%, var(--bb-accent-blue) 6%) 0%, #fff 42%, color-mix(in srgb, #fff 92%, #f5911e 5%) 100%);
}

.site--builder .builder-flagship__panel.bb-holo-metal > .bb-holo-shot__ring {
  inset: 0;
  border-radius: inherit;
  opacity: 0.9;
}

.site--builder .builder-hero__chip {
  background:
    linear-gradient(168deg, color-mix(in srgb, #fff 92%, var(--bb-accent-blue) 6%) 0%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 18%, var(--color-border));
  box-shadow: none;
}

.site--builder .builder-flow__step {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 96%, var(--bb-accent-blue) 3%) 0%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 10%, var(--color-border));
}

.site--builder .builder-cloud__visual .bb-holo-shot--desktop {
  max-width: 40rem;
  margin-inline: auto;
}

.site--builder .builder-demo-card__preview .bb-holo-shot {
  box-shadow: none;
  background: transparent;
}

.site--builder .builder-demo-card.bb-holo-metal,
.site--builder .builder-demo-card {
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 10%, var(--color-border));
  background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, #f6f7fb 80%, #fff) 100%);
}

@media (max-width: 47.99rem) {
  .site--builder .bb-holo-shot--float {
    position: relative;
    margin: var(--space-4) auto 0;
  }
}

/* =============================================================================
   Bloqio Builder v6 — Apple-style showcases (MacBook Neo / iPhone Air)
   ============================================================================= */

.site--builder .builder-showcase-section {
  padding-block: var(--space-12) var(--space-16);
  overflow-x: clip;
}

.site--builder .builder-showcase-section--mobile {
  background: transparent;
}

.site--builder .bb-showcase {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
  padding-bottom: clamp(3rem, 5vw, 4rem);
  box-sizing: border-box;
}

.site--builder .bb-showcase__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site--builder .bb-showcase__viewport::-webkit-scrollbar {
  display: none;
}

.site--builder .bb-showcase__track {
  display: flex;
  gap: 0;
}

.site--builder .bb-showcase__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding-inline: 0;
  margin: 0;
  box-sizing: border-box;
}

.site--builder .bb-showcase__caption {
  max-width: 36rem;
  padding-inline: var(--space-4);
}

.site--builder .bb-showcase__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site--builder .bb-showcase__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-identity);
}

.site--builder .bb-showcase__text {
  margin: 0;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.site--builder .bb-showcase__media {
  width: 100%;
  max-width: none;
  line-height: 0;
  background: transparent;
}

.site--builder .bb-showcase__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 44rem);
  object-fit: contain;
  object-position: center bottom;
  margin-inline: auto;
}

/* Explora editor — solo header + carrusel visual */
.site--builder #explora-editor.builder-showcase-section {
  padding-block: var(--space-10) var(--space-12);
}

.site--builder #explora-editor .builder-section-header {
  margin-bottom: var(--space-6);
}

.site--builder #explora-editor .bb-showcase--media-only {
  padding-top: 0;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.site--builder #explora-editor .bb-showcase--media-only .bb-showcase__slide {
  gap: 0;
}

.site--builder #explora-editor .bb-showcase--media-only .bb-showcase__media img {
  max-height: min(72vh, 38rem);
  object-position: center center;
}

/* Showcases — iPhone mockup (mobile + demos GIF) */
.site--builder .bb-showcase--mobile.bb-showcase--iphone .bb-showcase__slide,
.site--builder .bb-showcase--motion.bb-showcase--iphone .bb-showcase__slide,
.site--builder .bb-showcase--casos.bb-showcase--iphone .bb-showcase__slide {
  gap: var(--space-5);
}

.site--builder .bb-showcase--mobile.bb-showcase--iphone .bb-showcase__media,
.site--builder .bb-showcase--motion.bb-showcase--iphone .bb-showcase__media,
.site--builder .bb-showcase--casos.bb-showcase--iphone .bb-showcase__media {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

.site--builder .bb-showcase--mobile .bb-frame--showcase-phone,
.site--builder .bb-showcase--motion .bb-frame--showcase-phone,
.site--builder .bb-showcase--casos .bb-frame--showcase-phone {
  --bb-showcase-phone-radius: 1.95rem;
  --bb-showcase-phone-bezel: 2px;
  margin-inline: auto;
  padding: var(--bb-showcase-phone-bezel);
  border-radius: var(--bb-showcase-phone-radius);
  background:
    linear-gradient(155deg,
      color-mix(in srgb, #5a5a62 92%, var(--bb-accent-blue) 6%) 0%,
      #1c1c1f 50%,
      #262628 100%);
  border: 0.5px solid color-mix(in srgb, #fff 22%, #3a3a40);
  box-shadow:
    0 18px 36px color-mix(in srgb, var(--color-identity) 8%, transparent),
    0 4px 12px color-mix(in srgb, var(--bb-accent-blue) 5%, transparent);
  box-sizing: border-box;
}

.site--builder .bb-showcase--mobile .bb-frame--showcase-phone {
  width: min(13.25rem, 76vw);
  max-width: 13.25rem;
}

.site--builder .bb-showcase--motion .bb-frame--showcase-phone {
  width: min(13.25rem, 76vw);
  max-width: 13.25rem;
}

.site--builder .bb-showcase--mobile .bb-phone-screen--showcase {
  position: relative;
  width: 100%;
  border-radius: calc(var(--bb-showcase-phone-radius) - var(--bb-showcase-phone-bezel));
  aspect-ratio: 500 / 924;
  max-height: min(78vh, 36.5rem);
  overflow: hidden;
  background: #0c0c0e;
  isolation: isolate;
}

.site--builder .bb-showcase--motion .bb-phone-screen--showcase {
  position: relative;
  width: 100%;
  border-radius: calc(var(--bb-showcase-phone-radius) - var(--bb-showcase-phone-bezel));
  aspect-ratio: 480 / 1044;
  max-height: min(78vh, 36.5rem);
  overflow: hidden;
  background: #0c0c0e;
  isolation: isolate;
}

.site--builder .bb-showcase--mobile .bb-phone-screen--showcase .bb-frame-media {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: calc(var(--bb-showcase-phone-radius) - var(--bb-showcase-phone-bezel) - 1px);
  object-fit: contain;
  object-position: center center;
}

.site--builder .bb-showcase--motion .bb-phone-screen--showcase .bb-frame-media,
.site--builder .bb-showcase--motion .bb-phone-screen--showcase .bb-demo-gif {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: calc(var(--bb-showcase-phone-radius) - var(--bb-showcase-phone-bezel) - 1px);
  object-fit: contain;
  object-position: center center;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.site--builder .bb-showcase--motion .bb-demo-gif[data-motion-paused] {
  visibility: hidden;
}

.site--builder .bb-showcase--mobile .bb-showcase__title {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

@media (max-width: 47.99rem) {
  .site--builder .bb-showcase--mobile .bb-frame--showcase-phone {
    --bb-showcase-phone-radius: 1.85rem;
    --bb-showcase-phone-bezel: 1.5px;
    width: min(12.75rem, 74vw);
    max-width: 12.75rem;
  }

  .site--builder .bb-showcase--mobile .bb-phone-screen--showcase {
    max-height: min(70vh, 32rem);
  }

  .site--builder .bb-showcase--motion .bb-frame--showcase-phone {
    --bb-showcase-phone-radius: 1.85rem;
    --bb-showcase-phone-bezel: 1.5px;
    width: min(12.75rem, 74vw);
    max-width: 12.75rem;
  }

  .site--builder .bb-showcase--motion .bb-phone-screen--showcase {
    max-height: min(70vh, 32rem);
  }

  .site--builder .bb-showcase--mobile.bb-showcase--iphone .bb-showcase__slide,
  .site--builder .bb-showcase--motion.bb-showcase--iphone .bb-showcase__slide {
    gap: var(--space-4);
  }
}

/* Pager — estilo Apple */
.site--builder .bb-showcase__nav {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  max-width: min(28rem, calc(100vw - 2rem));
}

.site--builder .bb-showcase__pager {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.site--builder .bb-showcase__dot {
  width: 0.4rem;
  height: 0.4rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 22%, #ccc);
  cursor: pointer;
  transition:
    width var(--holo-motion-duration-fast) var(--holo-motion-ease),
    background var(--holo-motion-duration-fast) var(--holo-motion-ease),
    transform var(--holo-motion-duration-micro) var(--holo-motion-ease);
}

.site--builder .bb-showcase__dot.is-active {
  width: 1.35rem;
  background: color-mix(in srgb, var(--color-text) 75%, #888);
}

.site--builder .bb-showcase__dot:focus-visible {
  outline: 2px solid var(--bb-accent-blue);
  outline-offset: 2px;
}

/* Showcases con focus card (mobile + demos GIF) */
.site--builder .bb-showcase--mobile.bb-showcase--iphone[data-bb-showcase-focus],
.site--builder .bb-showcase--casos.bb-showcase--iphone[data-bb-showcase-focus],
.site--builder .bb-showcase--motion[data-bb-showcase-focus],
.site--builder .bb-showcase--casos[data-bb-showcase-focus] {
  --bb-showcase-focus-size: 3.5rem;
  --bb-focus-ease: var(--holo-motion-ease-enter, cubic-bezier(0.16, 1, 0.3, 1));
  --bb-focus-ease-soft: var(--holo-motion-ease-drift, cubic-bezier(0.45, 0.05, 0.55, 0.95));
  --bb-focus-duration: 0.36s;
  --bb-focus-duration-fast: 0.24s;
  --bb-focus-content-duration: 0.4s;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

.site--builder .bb-showcase--mobile[data-bb-showcase-focus] .bb-showcase__caption--sr,
.site--builder .bb-showcase--motion[data-bb-showcase-focus] .bb-showcase__caption--sr,
.site--builder .bb-showcase--casos[data-bb-showcase-focus] .bb-showcase__caption--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site--builder .bb-showcase--mobile[data-bb-showcase-focus] .bb-showcase__slide,
.site--builder .bb-showcase--motion[data-bb-showcase-focus] .bb-showcase__slide,
.site--builder .bb-showcase--casos[data-bb-showcase-focus] .bb-showcase__slide {
  gap: var(--space-4);
}

.site--builder .bb-showcase--mobile[data-bb-showcase-focus] .bb-showcase__nav,
.site--builder .bb-showcase--motion[data-bb-showcase-focus] .bb-showcase__nav {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin-top: var(--space-5);
  order: 2;
  width: 100%;
  max-width: min(26rem, calc(100vw - 2rem));
}

.site--builder .bb-showcase--mobile[data-bb-showcase-focus] .bb-showcase__viewport,
.site--builder .bb-showcase--motion[data-bb-showcase-focus] .bb-showcase__viewport,
.site--builder .bb-showcase--casos[data-bb-showcase-focus] .bb-showcase__viewport {
  order: 1;
  width: 100%;
}

.site--builder .bb-showcase__focus {
  display: flex;
  justify-content: center;
  width: 100%;
}

.site--builder .bb-showcase__focus-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--bb-showcase-focus-size);
  min-width: var(--bb-showcase-focus-size);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 72%, var(--bb-accent-blue) 18%);
  border-radius: 999px;
  background: color-mix(in srgb, #fff 42%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    0 4px 18px color-mix(in srgb, var(--bb-accent-blue) 10%, transparent);
  backdrop-filter: blur(22px) saturate(1.65);
  -webkit-backdrop-filter: blur(22px) saturate(1.65);
  transition:
    width var(--bb-focus-duration) var(--bb-focus-ease),
    min-width var(--bb-focus-duration) var(--bb-focus-ease),
    border-radius var(--bb-focus-duration) var(--bb-focus-ease),
    box-shadow var(--bb-focus-duration) var(--bb-focus-ease-soft),
    border-color var(--bb-focus-duration) var(--bb-focus-ease-soft),
    background var(--bb-focus-duration) var(--bb-focus-ease-soft);
}

.site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-card {
  width: min(100%, 15.375rem);
  min-width: min(100%, 15.375rem);
  border-radius: 1.25rem;
  background: color-mix(in srgb, #fff 52%, transparent);
  border-color: color-mix(in srgb, #fff 65%, var(--bb-accent-blue) 22%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 12px -4px color-mix(in srgb, var(--bb-accent-blue) 18%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--bb-accent-blue) 32%, transparent),
    0 6px 22px -6px color-mix(in srgb, var(--bb-accent-blue) 18%, transparent);
}

.site--builder .bb-showcase--mobile[data-bb-showcase-focus] .bb-showcase__focus,
.site--builder .bb-showcase--motion[data-bb-showcase-focus] .bb-showcase__focus {
  min-height: 8.125rem;
  flex-shrink: 0;
  align-items: center;
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus] .bb-showcase__focus {
  min-height: 9.375rem;
  flex-shrink: 0;
  align-items: center;
}

.site--builder #mobile-primero.builder-showcase-section,
.site--builder #demos-movimiento.builder-showcase-section {
  padding-block: var(--space-12) clamp(var(--space-16), 8vw, var(--space-20));
}

.site--builder #mobile-primero .bb-showcase,
.site--builder #demos-movimiento .bb-showcase {
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

.site--builder .bb-showcase__focus-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: var(--bb-showcase-focus-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex-shrink: 0;
  transition:
    padding var(--bb-focus-duration) var(--bb-focus-ease),
    gap var(--bb-focus-duration) var(--bb-focus-ease-soft),
    min-height var(--bb-focus-duration) var(--bb-focus-ease);
}

.site--builder .bb-showcase__focus-btn:focus-visible {
  outline: 2px solid var(--bb-accent-blue);
  outline-offset: 2px;
}

.site--builder .bb-showcase__focus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.site--builder .bb-showcase__focus-icon svg {
  width: 100%;
  height: 100%;
  transition: transform var(--bb-focus-duration) var(--bb-focus-ease);
}

.site--builder .bb-showcase__focus-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  clip-path: inset(0 100% 0 0);
  transform: translate3d(-0.35rem, 0, 0);
  filter: blur(5px);
  transition:
    max-width var(--bb-focus-duration) var(--bb-focus-ease),
    clip-path var(--bb-focus-duration) var(--bb-focus-ease),
    opacity calc(var(--bb-focus-duration) * 0.8) var(--bb-focus-ease),
    transform var(--bb-focus-duration) var(--bb-focus-ease),
    filter var(--bb-focus-duration) var(--bb-focus-ease-soft);
}

.site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-btn {
  min-height: var(--bb-showcase-focus-size);
  padding: 0 1rem;
  justify-content: flex-start;
  gap: 0.5rem;
}

.site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-label {
  max-width: 12.5rem;
  opacity: 1;
  white-space: normal;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.site--builder .bb-showcase__focus-label .bb-icon--wa {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #25d366;
}

.site--builder .bb-showcase__focus-label .bb-icon--wa svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site--builder .bb-showcase__title--rich {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-icon svg {
  transform: rotate(45deg);
}

.site--builder .bb-showcase__focus-panel {
  display: grid;
  grid-template-rows: 0fr;
  text-align: left;
  border-top: 1px solid transparent;
  transition:
    grid-template-rows var(--bb-focus-duration) var(--bb-focus-ease),
    border-color var(--bb-focus-duration) var(--bb-focus-ease-soft);
}

.site--builder .bb-showcase__focus-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-panel {
  grid-template-rows: 1fr;
  border-top-color: color-mix(in srgb, var(--color-border) 45%, transparent);
}

.site--builder .bb-showcase__focus-panel .bb-showcase__text {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-panel .bb-showcase__text {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition:
    opacity var(--bb-focus-content-duration) var(--bb-focus-ease),
    transform var(--bb-focus-content-duration) var(--bb-focus-ease),
    filter var(--bb-focus-content-duration) var(--bb-focus-ease-soft);
}

@keyframes bb-showcase-focus-label-in {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-0.25rem, 0, 0);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes bb-showcase-focus-text-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.45rem, 0);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

.site--builder .bb-showcase__focus.is-expanded.is-reveal-content .bb-showcase__focus-label {
  transition: none;
  animation: bb-showcase-focus-label-in var(--bb-focus-content-duration) var(--bb-focus-ease) both;
  animation-delay: 0.05s;
}

.site--builder .bb-showcase__focus.is-expanded.is-reveal-content .bb-showcase__focus-panel .bb-showcase__text {
  animation: bb-showcase-focus-text-in var(--bb-focus-content-duration) var(--bb-focus-ease) both;
  animation-delay: 0.12s;
  transition: none;
}

.site--builder .bb-showcase__focus.is-content-out .bb-showcase__focus-label,
.site--builder .bb-showcase__focus.is-content-out .bb-showcase__focus-panel .bb-showcase__text {
  opacity: 0 !important;
  transform: translate3d(0, -0.4rem, 0) !important;
  filter: blur(7px) !important;
  animation: none !important;
  transition:
    opacity calc(var(--bb-focus-duration-fast) * 0.85) var(--bb-focus-ease-soft),
    transform calc(var(--bb-focus-duration-fast) * 0.85) var(--bb-focus-ease-soft),
    filter calc(var(--bb-focus-duration-fast) * 0.85) var(--bb-focus-ease-soft) !important;
  transition-delay: 0s !important;
}

.site--builder .bb-showcase__focus.is-content-out .bb-showcase__focus-label {
  clip-path: inset(0 100% 0 0) !important;
}

.site--builder .bb-showcase__focus:not(.is-expanded) .bb-showcase__focus-panel {
  pointer-events: none;
}

.site--builder .bb-showcase__focus.is-scrolling .bb-showcase__focus-card,
.site--builder .bb-showcase__focus.is-scrolling .bb-showcase__focus-btn,
.site--builder .bb-showcase__focus.is-scrolling .bb-showcase__focus-label,
.site--builder .bb-showcase__focus.is-scrolling .bb-showcase__focus-panel,
.site--builder .bb-showcase__focus.is-scrolling .bb-showcase__focus-panel .bb-showcase__text,
.site--builder .bb-showcase__focus.is-scrolling .bb-showcase__focus-icon svg {
  transition-duration: var(--bb-focus-duration-fast);
  transition-delay: 0s;
  transition-timing-function: var(--bb-focus-ease-soft);
}

.site--builder .bb-showcase__focus.is-expanded:not(.is-scrolling):not(.is-reveal-content) .bb-showcase__focus-label {
  transition-delay: 0.06s;
}

.site--builder .bb-showcase__focus.is-expanded:not(.is-scrolling):not(.is-reveal-content) .bb-showcase__focus-panel {
  transition-delay: 0.1s;
}

.site--builder .bb-showcase__focus.is-expanded:not(.is-scrolling):not(.is-reveal-content) .bb-showcase__focus-panel .bb-showcase__text {
  transition-delay: 0.16s;
}

.site--builder .bb-showcase__focus.is-expanded:not(.is-scrolling) .bb-showcase__focus-icon svg {
  transition-delay: 0.04s;
}

.site--builder .bb-showcase__focus:not(.is-expanded):not(.is-scrolling) .bb-showcase__focus-panel .bb-showcase__text {
  transition-delay: 0s;
}

.site--builder .bb-showcase__focus:not(.is-expanded):not(.is-scrolling) .bb-showcase__focus-label {
  transition-delay: 0.04s;
}

.site--builder .bb-showcase__focus:not(.is-expanded):not(.is-scrolling) .bb-showcase__focus-panel {
  transition-delay: 0s;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .bb-showcase__focus-card:hover {
    background: color-mix(in srgb, #fff 48%, transparent);
    border-color: color-mix(in srgb, #fff 78%, var(--bb-accent-blue) 24%);
  }

  .site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-card:hover {
    border-color: color-mix(in srgb, var(--bb-accent-blue) 52%, var(--color-border));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .bb-showcase--mobile[data-bb-showcase-focus],
  .site--builder .bb-showcase--motion[data-bb-showcase-focus],
  .site--builder .bb-showcase--casos[data-bb-showcase-focus] {
    --bb-focus-duration: 0.01ms;
    --bb-focus-duration-fast: 0.01ms;
  }

  .site--builder .bb-showcase__focus-card,
  .site--builder .bb-showcase__focus-btn,
  .site--builder .bb-showcase__focus-label,
  .site--builder .bb-showcase__focus-panel,
  .site--builder .bb-showcase__focus-panel .bb-showcase__text,
  .site--builder .bb-showcase__focus-icon svg,
  .site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-label,
  .site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-panel,
  .site--builder .bb-showcase__focus.is-expanded .bb-showcase__focus-panel .bb-showcase__text,
  .site--builder .bb-showcase__focus.is-expanded.is-reveal-content .bb-showcase__focus-label,
  .site--builder .bb-showcase__focus.is-expanded.is-reveal-content .bb-showcase__focus-panel .bb-showcase__text {
    transition: none;
    transition-delay: 0s;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* Hero product shot */
.site--builder .builder-hero__product-shot {
  position: relative;
  width: 100%;
  max-width: min(56rem, 96vw);
  margin-inline: auto;
  background: transparent;
}

.site--builder .builder-hero__product-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.site--builder .builder-hero__product-img--desktop {
  max-height: min(56vh, 32rem);
  margin-inline: auto;
}

.site--builder .builder-hero__product-img--mobile {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(7.5rem, 24vw, 10.5rem);
  max-height: none;
}

/* Bloqio Cloud — una sola captura, sin mockup encima */
.site--builder .builder-cloud__product-shot {
  background: transparent;
}

.site--builder .builder-cloud__product-shot img {
  display: block;
  width: 100%;
  max-width: min(48rem, 100%);
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

.site--builder .builder-reduced-motion .bb-demo-gif,
.site--builder.builder-reduced-motion .bb-demo-gif {
  opacity: 0.4;
}

@media (max-width: 47.99rem) {
  .site--builder .builder-hero__product-img--mobile {
    position: relative;
    right: auto;
    bottom: auto;
    margin: var(--space-4) auto 0;
    width: 8.5rem;
  }

  .site--builder .bb-showcase:not(.bb-showcase--casos) .bb-showcase__media img {
    max-height: min(64vh, 32rem);
  }

  .site--builder .bb-showcase {
    padding-inline: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .bb-showcase__viewport {
    scroll-behavior: auto;
  }
}

/* =============================================================================
   Bloqio Builder v7 — flat depth + Hiragino display headers
   ============================================================================= */

.site--builder :is(h1, h2, .builder-pricing__amount) {
  font-family: var(--font-display);
  font-weight: 800;
}

.site--builder .builder-pricing__amount {
  letter-spacing: -0.02em;
}

.site--builder :is(
  .builder-flow__step,
  .builder-faq details,
  .builder-usecase,
  .bb-frame--browser,
  .bb-mockup--browser,
  .bb-mockup--premium .bb-mockup__frame,
  .builder-hero__badge
) {
  box-shadow: none;
}

.site--builder .bb-showcase__media img,
.site--builder .builder-hero__product-img,
.site--builder .builder-cloud__product-shot img,
.site--builder .bb-gallery-card__media {
  filter: none;
}

.site--builder .bb-frame-shine,
.site--builder .bb-mockup__shine {
  display: none;
}

.site--builder .bb-showcase--motion .bb-frame--showcase-phone {
  box-shadow:
    0 18px 36px color-mix(in srgb, var(--color-identity) 8%, transparent),
    0 4px 12px color-mix(in srgb, var(--bb-accent-blue) 5%, transparent);
}

/* =============================================================================
   Bloqio Builder v8 — hero mockups (tablet + iPhone) + iridescent marquee
   ============================================================================= */

.site--builder .builder-hero__wa-logo {
  display: inline-block;
  vertical-align: -0.2em;
  margin-inline: 0.1em 0;
  color: #25d366;
}

/* Icon size — hero chips + marquee rail (shared) */
.site--builder {
  --bb-hero-chip-icon: 1rem;
}

/* Hero v4 — compact copy + mockups higher */
.site--builder .builder-hero--v4 {
  --bb-hero-chip-hotspot-collapsed: 2.75rem;
  --bb-hero-chip-hotspot-expanded: 2.75rem;
  --bb-hero-metal-edge: linear-gradient(
    128deg,
    color-mix(in srgb, #fff 72%, var(--bb-accent-blue)) 0%,
    color-mix(in srgb, #f5911e 42%, #fff) 28%,
    color-mix(in srgb, var(--bb-accent-blue-deep) 38%, #e8e8e8) 52%,
    color-mix(in srgb, #14ff00 18%, #fff) 72%,
    color-mix(in srgb, #fff 68%, var(--bb-accent-blue)) 100%
  );
  --bb-hero-headline-gradient: linear-gradient(
    102deg,
    color-mix(in srgb, var(--color-identity) 78%, #426fff) 0%,
    color-mix(in srgb, var(--color-identity) 72%, #e8e8e8) 10%,
    color-mix(in srgb, #426fff 34%, var(--color-identity)) 20%,
    color-mix(in srgb, var(--color-identity) 76%, #f5911e) 30%,
    color-mix(in srgb, var(--color-identity) 80%, #fff) 40%,
    color-mix(in srgb, #426fff 28%, var(--color-identity)) 50%,
    color-mix(in srgb, var(--color-identity) 78%, #f5911e) 60%,
    color-mix(in srgb, #14ff00 7%, var(--color-identity)) 70%,
    color-mix(in srgb, #426fff 26%, var(--color-identity)) 80%,
    color-mix(in srgb, var(--color-identity) 84%, #f5f5f5) 90%,
    color-mix(in srgb, var(--color-identity) 78%, #426fff) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(var(--space-12), 7.5vw, var(--space-20)) clamp(var(--space-12), 8vw, var(--space-18));
  margin-bottom: var(--space-8);
  min-height: clamp(26rem, 54vh, 36rem);
}

.site--builder .builder-hero--v4 .builder-hero__motes {
  opacity: 1;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.site--builder .builder-hero__metal {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity, filter;
  opacity: 0.42;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  --bb-block-face: linear-gradient(
    145deg,
    color-mix(in srgb, #fff 82%, var(--bb-accent-blue)) 0%,
    color-mix(in srgb, #f5911e 32%, #fff) 38%,
    color-mix(in srgb, var(--bb-accent-blue) 46%, #e8e8e8) 72%,
    color-mix(in srgb, #14ff00 14%, #fff) 100%
  );
  --bb-block-side: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bb-accent-blue-deep) 28%, #fff),
    color-mix(in srgb, var(--bb-accent-blue) 18%, transparent)
  );
}

.site--builder .builder-hero__metal--brick {
  width: clamp(1.85rem, 4.2vw, 2.75rem);
  height: clamp(0.72rem, 1.6vw, 1rem);
  border-radius: 0.28rem 0.28rem 0.18rem 0.18rem;
  background: var(--bb-block-face);
  border: 1px solid color-mix(in srgb, #fff 55%, var(--bb-accent-blue) 28%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -2px 0 color-mix(in srgb, var(--bb-accent-blue-deep) 16%, transparent),
    0 0 14px color-mix(in srgb, var(--bb-accent-blue) 16%, transparent),
    0 5px 14px color-mix(in srgb, var(--bb-accent-blue) 10%, transparent);
}

.site--builder .builder-hero__metal--brick-v {
  width: clamp(0.72rem, 1.6vw, 1rem);
  height: clamp(1.45rem, 3.2vw, 2.1rem);
}

.site--builder .builder-hero__metal--lego {
  width: clamp(1.05rem, 2.4vw, 1.55rem);
  height: clamp(1.05rem, 2.4vw, 1.55rem);
  border-radius: 0.24rem;
  background: var(--bb-block-face);
  border: 1px solid color-mix(in srgb, #fff 62%, var(--bb-accent-blue) 22%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -3px 0 color-mix(in srgb, var(--bb-accent-blue-deep) 14%, transparent),
    0 0 16px color-mix(in srgb, var(--bb-accent-blue) 14%, transparent),
    0 6px 16px color-mix(in srgb, var(--bb-accent-blue) 9%, transparent);
  isolation: isolate;
}

.site--builder .builder-hero__metal--lego::before {
  content: "";
  position: absolute;
  top: 14%;
  left: 50%;
  width: 42%;
  height: 28%;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.15) 45%, transparent 72%),
    conic-gradient(
      from 200deg,
      color-mix(in srgb, var(--bb-accent-blue) 36%, #fff),
      color-mix(in srgb, #f5911e 26%, #fff),
      color-mix(in srgb, var(--bb-accent-blue-deep) 28%, #e8e8e8),
      color-mix(in srgb, var(--bb-accent-blue) 36%, #fff)
    );
  border: 1px solid color-mix(in srgb, #fff 58%, var(--bb-accent-blue) 18%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 3px color-mix(in srgb, var(--bb-accent-blue) 18%, transparent);
}

.site--builder .builder-hero__metal--lego-sm {
  width: clamp(0.82rem, 1.8vw, 1.15rem);
  height: clamp(0.82rem, 1.8vw, 1.15rem);
}

.site--builder .builder-hero__metal--plate {
  width: clamp(1.55rem, 3.4vw, 2.25rem);
  height: clamp(0.52rem, 1.1vw, 0.72rem);
  border-radius: 0.22rem;
  background: var(--bb-block-face);
  border: 1px solid color-mix(in srgb, #fff 50%, var(--bb-accent-blue) 24%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 color-mix(in srgb, var(--bb-accent-blue) 12%, transparent),
    0 0 12px color-mix(in srgb, var(--bb-accent-blue) 12%, transparent);
  isolation: isolate;
}

.site--builder .builder-hero__metal--plate::before,
.site--builder .builder-hero__metal--plate::after {
  content: "";
  position: absolute;
  top: 18%;
  width: 22%;
  height: 46%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.92) 0%, transparent 68%),
    conic-gradient(
      from 180deg,
      color-mix(in srgb, var(--bb-accent-blue) 32%, #fff),
      color-mix(in srgb, #f5911e 24%, #fff),
      color-mix(in srgb, var(--bb-accent-blue) 32%, #fff)
    );
  border: 1px solid color-mix(in srgb, #fff 55%, var(--bb-accent-blue) 16%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.site--builder .builder-hero__metal--plate::before {
  left: 22%;
}

.site--builder .builder-hero__metal--plate::after {
  right: 22%;
}

.site--builder .builder-hero__metal--plate-sm {
  width: clamp(1.1rem, 2.4vw, 1.55rem);
  height: clamp(0.42rem, 0.9vw, 0.58rem);
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(1) {
  top: 8%;
  left: 4%;
  transform: rotate(-24deg);
  animation:
    bb-hero-metal-drift-a 38s var(--holo-motion-ease-drift) infinite,
    bb-hero-metal-shimmer 13s var(--holo-motion-ease-drift) infinite;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(2) {
  top: 18%;
  right: 6%;
  transform: rotate(18deg);
  animation:
    bb-hero-metal-drift-b 41s var(--holo-motion-ease-drift) infinite -6s,
    bb-hero-metal-shimmer 13s var(--holo-motion-ease-drift) infinite -2s;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(3) {
  top: 34%;
  left: 9%;
  animation:
    bb-hero-metal-drift-c 38s var(--holo-motion-ease-drift) infinite -12s,
    bb-hero-metal-shimmer 11s var(--holo-motion-ease-drift) infinite -1s,
    bb-hero-block-tilt 14s var(--holo-motion-ease-drift) infinite;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(4) {
  top: 12%;
  left: 42%;
  animation:
    bb-hero-metal-drift-d 45s var(--holo-motion-ease-drift) infinite -4s,
    bb-hero-metal-shimmer 12s var(--holo-motion-ease-drift) infinite -3s,
    bb-hero-block-tilt 16s var(--holo-motion-ease-drift) infinite reverse;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(5) {
  top: 62%;
  left: 3%;
  transform: rotate(12deg);
  animation:
    bb-hero-metal-drift-e 36s var(--holo-motion-ease-drift) infinite -9s,
    bb-hero-metal-shimmer 10s var(--holo-motion-ease-drift) infinite -5s;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(6) {
  top: 72%;
  right: 8%;
  transform: rotate(-32deg);
  opacity: 0.36;
  animation:
    bb-hero-metal-drift-b 32s var(--holo-motion-ease-drift) infinite -14s,
    bb-hero-metal-shimmer 12s var(--holo-motion-ease-drift) infinite -1s;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(7) {
  top: 48%;
  right: 4%;
  animation:
    bb-hero-metal-drift-a 40s var(--holo-motion-ease-drift) infinite -18s,
    bb-hero-metal-shimmer 13s var(--holo-motion-ease-drift) infinite -2s,
    bb-hero-block-tilt 18s var(--holo-motion-ease-drift) infinite;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(8) {
  bottom: 14%;
  left: 28%;
  animation:
    bb-hero-metal-drift-c 43s var(--holo-motion-ease-drift) infinite -7s,
    bb-hero-metal-shimmer 10s var(--holo-motion-ease-drift) infinite -4s,
    bb-hero-block-tilt 15s var(--holo-motion-ease-drift) infinite reverse;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(9) {
  top: 28%;
  right: 22%;
  transform: rotate(-8deg);
  animation:
    bb-hero-metal-drift-d 37s var(--holo-motion-ease-drift) infinite -11s,
    bb-hero-metal-shimmer 9s var(--holo-motion-ease-drift) infinite -3s;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(10) {
  top: 52%;
  left: 18%;
  transform: rotate(28deg);
  opacity: 0.34;
  animation:
    bb-hero-metal-drift-e 39s var(--holo-motion-ease-drift) infinite -16s,
    bb-hero-metal-shimmer 14s var(--holo-motion-ease-drift) infinite -6s;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(11) {
  bottom: 22%;
  right: 18%;
  animation:
    bb-hero-metal-drift-b 35s var(--holo-motion-ease-drift) infinite -20s,
    bb-hero-metal-shimmer 11s var(--holo-motion-ease-drift) infinite,
    bb-hero-block-tilt 17s var(--holo-motion-ease-drift) infinite;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(12) {
  top: 6%;
  right: 28%;
  animation:
    bb-hero-metal-drift-c 42s var(--holo-motion-ease-drift) infinite -8s,
    bb-hero-metal-shimmer 12s var(--holo-motion-ease-drift) infinite -5s,
    bb-hero-block-tilt 20s var(--holo-motion-ease-drift) infinite reverse;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(13) {
  bottom: 8%;
  left: 52%;
  transform: rotate(-14deg);
  animation:
    bb-hero-metal-drift-a 33s var(--holo-motion-ease-drift) infinite -13s,
    bb-hero-metal-shimmer 10s var(--holo-motion-ease-drift) infinite -4s;
}

.site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(14) {
  top: 84%;
  left: 12%;
  transform: rotate(36deg);
  opacity: 0.3;
  animation:
    bb-hero-metal-drift-d 31s var(--holo-motion-ease-drift) infinite -17s,
    bb-hero-metal-shimmer 12s var(--holo-motion-ease-drift) infinite -7s;
}

@keyframes bb-hero-metal-drift-a {
  0%, 100% { translate: 0 0; }
  25% { translate: 0.85rem -0.55rem; }
  50% { translate: -0.45rem 0.7rem; }
  75% { translate: 0.65rem 0.3rem; }
}

@keyframes bb-hero-metal-drift-b {
  0%, 100% { translate: 0 0; }
  33% { translate: -0.75rem 0.5rem; }
  66% { translate: 0.55rem -0.65rem; }
}

@keyframes bb-hero-metal-drift-c {
  0%, 100% { translate: 0 0; }
  20% { translate: 0.35rem 0.6rem; }
  55% { translate: -0.65rem -0.22rem; }
  80% { translate: 0.22rem -0.5rem; }
}

@keyframes bb-hero-metal-drift-d {
  0%, 100% { translate: 0 0; }
  40% { translate: -0.5rem -0.7rem; }
  70% { translate: 0.75rem 0.35rem; }
}

@keyframes bb-hero-metal-drift-e {
  0%, 100% { translate: 0 0; }
  30% { translate: 0.65rem 0.42rem; }
  60% { translate: -0.3rem -0.6rem; }
}

@keyframes bb-hero-metal-shimmer {
  0%, 100% {
    opacity: 0.36;
    filter: brightness(1) saturate(1);
  }
  50% {
    opacity: 0.46;
    filter: brightness(1.06) saturate(1.04);
  }
}

@keyframes bb-hero-block-tilt {
  0%, 100% { rotate: -4deg; }
  50% { rotate: 4deg; }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal {
    animation: none;
  }
}

.site--builder .builder-hero--v4 > .container.goverless-surface__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  width: 100%;
}

/* Hero v4 — layout tipo Apple Welcome (eyebrow → headline → video → CTAs) */
.site--builder .builder-hero--v4 .builder-hero__welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  position: relative;
}

.site--builder .builder-hero--v4 .builder-hero__lockup {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 46rem;
  padding-inline: var(--space-4);
  margin-bottom: 0;
  pointer-events: none;
}

.site--builder .builder-hero--v4 .builder-hero__lockup .builder-hero__eyebrow-mark,
.site--builder .builder-hero--v4 .builder-hero__lockup .builder-hero__headline-lockup {
  pointer-events: auto;
}

.site--builder .builder-hero--v4 .builder-hero__eyebrow-mark {
  display: inline;
  margin: 0;
  font-family: var(--font-subheader);
  font-size: clamp(0.625rem, 1.05vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1.2;
  color: color-mix(in srgb, var(--color-text-muted) 90%, var(--bb-accent-blue) 10%);
}

.site--builder .builder-hero--v4 .builder-hero__headline-lockup {
  width: 100%;
  overflow: visible;
  padding-bottom: 0.2em;
  filter:
    drop-shadow(0 2px 16px rgba(255, 255, 255, 0.92))
    drop-shadow(0 6px 28px rgba(255, 255, 255, 0.55));
}

.site--builder .builder-hero--v4 .builder-hero__title {
  margin: 0 auto;
  max-width: none;
  text-align: center;
  font-size: clamp(2rem, 6.8vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  overflow: visible;
  padding-bottom: 0.06em;
}

.site--builder .builder-hero--v4 .builder-hero__headline {
  display: inline-block;
  line-height: 1.14;
  padding: 0 0.02em 0.14em;
  overflow: visible;
}

.site--builder .builder-hero--v4 .builder-hero__headline.text-gradient {
  color: var(--color-identity);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .site--builder .builder-hero--v4 .builder-hero__headline.text-gradient {
    background-image: var(--bb-hero-headline-gradient);
    background-size: 280% 100%;
    background-position: 12% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: builder-hero-headline-shine var(--holo-motion-shine-text) linear infinite;
  }
}

@keyframes builder-hero-headline-shine {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

.site--builder .builder-hero--v4 .builder-hero__video-stage {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: min(100%, 44rem);
  margin-top: clamp(-2rem, -6vw, -0.85rem);
  min-height: clamp(14rem, 44vw, 24rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(0.5rem, 2vw, 1rem);
  overflow: visible;
  pointer-events: none;
}

.site--builder .builder-hero--v4 .builder-hero__video-stage .builder-hero__mockups {
  transform: translateY(clamp(0.35rem, 1.8vw, 0.85rem));
}

.site--builder .builder-hero--v4 .builder-hero__video-stage .builder-hero__mockups,
.site--builder .builder-hero--v4 .builder-hero__video-stage .builder-hero__chip-btn {
  pointer-events: auto;
}

.site--builder .builder-hero--v4 .builder-hero__cta-block {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 26rem;
  margin-top: clamp(var(--space-4), 3.5vw, var(--space-7));
  padding-inline: var(--space-4);
}

.site--builder .builder-hero--v4 .builder-hero__cta-block .builder-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: 0;
  width: auto;
  max-width: 100%;
}

.site--builder .builder-hero--v4 .builder-hero__cta-block .builder-hero__actions .button {
  width: fit-content;
  max-width: 100%;
}

.site--builder .builder-hero--v4 .builder-hero__cta-block .button--builder-cta-primary,
.site--builder .builder-hero--v4 .builder-hero__cta-block .button--builder-cta-secondary {
  box-sizing: border-box;
  min-height: 2.25rem;
  padding-block: 0.45rem;
  line-height: 1;
  align-items: center;
}

.site--builder .builder-hero--v4 .builder-hero__cta-block .button--builder-cta-primary {
  font-size: clamp(0.8125rem, 2vw, 0.9375rem);
  font-weight: 700;
  padding-inline: 0.95rem;
  letter-spacing: 0.01em;
}

.site--builder .builder-hero--v4 .builder-hero__cta-block .button--builder-cta-secondary {
  font-size: clamp(0.75rem, 1.8vw, 0.8125rem);
  font-weight: 600;
  padding-inline: 0.8rem;
  border-width: 1px;
}

.site--builder .builder-hero--v4 .builder-hero__lede {
  font-size: clamp(0.875rem, 0.65vw + 0.76rem, 1rem);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

@media (min-width: 48rem) {
  .site--builder .builder-hero--v4 {
    --bb-hero-tablet-width: min(62vw, 20rem);
    --bb-hero-phone-width: calc(var(--bb-hero-tablet-width) * 0.4);
  }

  .site--builder .builder-hero--v4 .builder-hero__video-stage {
    max-width: min(100%, 52rem);
    min-height: clamp(16rem, 32vw, 26rem);
    margin-top: clamp(-2.25rem, -6vw, -1rem);
  }

  .site--builder .builder-hero--v4 .builder-hero__cta-block .builder-hero__actions {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: none;
    gap: var(--space-2);
  }

  .site--builder .builder-hero--v4 .builder-hero__cta-block .builder-hero__actions .button {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 0;
  }
}

@media (min-width: 64rem) {
  .site--builder .builder-hero--v4 {
    padding-block: clamp(var(--space-16), 9vw, var(--space-24)) clamp(var(--space-16), 8vw, var(--space-20));
    min-height: clamp(28rem, 58vh, 40rem);
    margin-bottom: var(--space-12);
  }

  .site--builder .builder-hero--v4 > .container.goverless-surface__content {
    padding-block: var(--space-4);
  }

  .site--builder .builder-hero--v4 .builder-hero__welcome {
    max-width: 64rem;
  }

  .site--builder .builder-hero--v4 .builder-hero__title {
    font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  }

  .site--builder .builder-hero--v4 .builder-hero__cta-block {
    margin-top: clamp(var(--space-8), 5vw, var(--space-12));
  }
}

.site--builder .builder-hero__chip-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
  background: color-mix(in srgb, var(--bb-accent-blue) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--bb-accent-blue) 30%, transparent);
  color: color-mix(in srgb, var(--bb-accent-blue-deep) 75%, var(--color-text));
}

.site--builder .builder-hero__chip .bb-icon--wa {
  color: #25d366;
}

.site--builder .builder-hero__chip .bb-icon--chip-gift {
  color: color-mix(in srgb, var(--bb-accent-blue-deep) 70%, var(--color-text));
}

.site--builder .builder-hero__lede--short,
.site--builder .builder-hero__lede--full {
  display: none;
}

.site--builder .builder-hero--v4 .builder-hero__frame-main {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.site--builder .builder-hero--v4 .builder-hero__frame-float {
  z-index: 10;
}

.site--builder .builder-hero--v4 .bb-frame--tablet.bb-frame--hero {
  position: relative;
  z-index: 1;
}

.site--builder .builder-hero--v4 .builder-hero__hotspot-layer {
  position: absolute;
  z-index: 30;
  top: 18%;
  left: 2%;
  right: 2%;
  bottom: 6%;
  pointer-events: none;
}

.site--builder .builder-hero--v4 .builder-hero__hotspots {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.01em;
  pointer-events: auto;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot-tl {
  left: 14%;
  top: 34%;
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot-tr {
  left: 82%;
  top: 34%;
  transform: translate(-100%, -50%);
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot-bl {
  left: 16%;
  top: 72%;
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot-br {
  left: 80%;
  top: 68%;
  transform: translate(-100%, -50%);
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded {
  z-index: 40;
}

.site--builder .builder-hero--v4 .builder-hero__chip-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--bb-hero-chip-hotspot-collapsed);
  min-width: var(--bb-hero-chip-hotspot-collapsed);
  height: var(--bb-hero-chip-hotspot-collapsed);
  min-height: var(--bb-hero-chip-hotspot-collapsed);
  padding: 0;
  border-radius: 999px;
  pointer-events: auto;
  cursor: pointer;
  text-align: left;
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  background: color-mix(in srgb, #fff 38%, transparent);
  border: 1px solid color-mix(in srgb, #fff 72%, var(--bb-accent-blue) 18%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    0 4px 18px color-mix(in srgb, var(--bb-accent-blue) 10%, transparent);
  backdrop-filter: blur(22px) saturate(1.65);
  -webkit-backdrop-filter: blur(22px) saturate(1.65);
  transition:
    width 0.28s cubic-bezier(0.33, 1, 0.68, 1),
    min-width 0.28s cubic-bezier(0.33, 1, 0.68, 1),
    padding 0.28s cubic-bezier(0.33, 1, 0.68, 1),
    gap 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.site--builder .builder-hero--v4 .builder-hero__chip-btn:focus-visible {
  outline: 2px solid var(--bb-accent-blue);
  outline-offset: 3px;
}

.site--builder .builder-hero--v4 .builder-hero__chip-label {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  transition:
    max-width 0.28s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.2s ease,
    margin 0.22s ease;
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded .builder-hero__chip-btn {
  position: relative;
  z-index: 1;
  width: max-content;
  min-width: var(--bb-hero-chip-hotspot-collapsed);
  max-width: min(9.5rem, calc(100vw - 2rem));
  height: var(--bb-hero-chip-hotspot-expanded);
  min-height: var(--bb-hero-chip-hotspot-expanded);
  padding: 0 0.55rem;
  justify-content: flex-start;
  gap: 0.3rem;
  background: color-mix(in srgb, #fff 52%, transparent);
  border-color: color-mix(in srgb, #fff 65%, var(--bb-accent-blue) 22%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 12px -4px color-mix(in srgb, var(--bb-accent-blue) 18%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--bb-accent-blue) 32%, transparent),
    0 6px 22px -6px color-mix(in srgb, var(--bb-accent-blue) 18%, transparent);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot-tr,
.site--builder .builder-hero--v4 .builder-hero__chip--hotspot-br {
  display: flex;
  justify-content: flex-end;
}

.site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded .builder-hero__chip-label {
  max-width: 7rem;
  opacity: 1;
  font-size: 0.625rem;
  letter-spacing: 0;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site--builder .builder-hero--v4 .builder-hero__chip-btn:hover {
    background: color-mix(in srgb, #fff 48%, transparent);
    border-color: color-mix(in srgb, #fff 78%, var(--bb-accent-blue) 24%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(255, 255, 255, 0.3),
      0 6px 20px color-mix(in srgb, var(--bb-accent-blue) 14%, transparent);
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded .builder-hero__chip-btn:hover {
    border-color: color-mix(in srgb, var(--bb-accent-blue) 52%, var(--color-border));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 0 12px -5px color-mix(in srgb, var(--bb-accent-blue) 20%, transparent),
      0 0 14px -2px color-mix(in srgb, var(--bb-accent-blue) 44%, transparent),
      0 0 22px -6px color-mix(in srgb, var(--bb-accent-blue) 24%, transparent);
  }
}

.site--builder .builder-hero--v4 .builder-hero__chip-mark.bb-icon {
  width: var(--bb-hero-chip-icon);
  height: var(--bb-hero-chip-icon);
  flex-shrink: 0;
}

.site--builder .builder-hero--v4 .builder-hero__chip-mark.bb-icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 48rem) {
  .site--builder {
    --bb-hero-chip-icon: 1.125rem;
  }

  .site--builder .builder-hero--v4 {
    --bb-hero-chip-hotspot-collapsed: 2.875rem;
    --bb-hero-chip-hotspot-expanded: 2.875rem;
  }

  .site--builder .builder-hero--v4 .builder-hero__hotspot-layer {
    top: 20%;
    left: 3%;
    right: 3%;
    bottom: 6%;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot-tl,
  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot-tr {
    top: 38%;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot-bl {
    top: 70%;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot-br {
    top: 66%;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded .builder-hero__chip-btn {
    max-width: min(18rem, 38vw);
    padding-inline: 0.85rem;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded .builder-hero__chip-label {
    font-size: 0.8125rem;
    max-width: 14rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-hero--v4 .builder-hero__chip-btn,
  .site--builder .builder-hero--v4 .builder-hero__chip-label {
    transition: none;
  }
}

.site--builder .builder-hero__chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-align: left;
}

.site--builder .builder-hero__chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site--builder .builder-hero__chip-label {
  display: inline-block;
  line-height: 1.2;
}

.site--builder .builder-hero__mockups {
  position: relative;
  width: 100%;
  max-width: min(100%, 36rem);
  margin-inline: auto;
  isolation: isolate;
}

.site--builder .builder-hero--v4 .builder-hero__visual-stage,
.site--builder .builder-hero--v4 .builder-hero__video-stage {
  position: relative;
  width: 100%;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site--builder .builder-hero--v4 .builder-hero__mockups {
  overflow: visible;
  width: 100%;
}

.site--builder .builder-hero--v4 .bb-halo {
  opacity: 0.55;
  filter: blur(56px);
}

.site--builder .bb-frame--tablet.bb-frame--hero {
  width: 100%;
  padding: clamp(0.22rem, 0.45vw, 0.32rem);
  border-radius: clamp(0.85rem, 1.5vw, 1.15rem);
  background: linear-gradient(165deg, #3f3f46 0%, #18181b 55%, #27272a 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0.5px 0 rgba(255, 255, 255, 0.1) inset,
    0 20px 48px rgba(20, 24, 36, 0.12);
}

.site--builder .bb-frame--tablet.bb-frame--hero .bb-tablet-screen {
  position: relative;
  overflow: hidden;
  background: #111;
  line-height: 0;
  border-radius: clamp(0.55rem, 1vw, 0.75rem);
  aspect-ratio: auto;
  width: 100%;
}

.site--builder .bb-frame--tablet.bb-frame--hero .bb-frame--hero-browser {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.site--builder .bb-frame--hero-browser.bb-frame--browser {
  border-radius: clamp(0.4rem, 0.75vw, 0.6rem);
  border: none;
  box-shadow: none;
  background: #f8f9fb;
  overflow: hidden;
}

.site--builder .bb-frame--hero-browser .bb-frame-bar {
  flex-shrink: 0;
  min-height: clamp(1.25rem, 2.2vw, 1.65rem);
  padding: 0 0.55rem;
  gap: 0.45rem;
}

.site--builder .bb-frame--hero-browser .bb-frame-dots i {
  width: 0.375rem;
  height: 0.375rem;
}

.site--builder .bb-frame--hero-browser .bb-frame-url {
  font-size: clamp(0.5rem, 0.9vw, 0.625rem);
}

.site--builder .bb-frame--hero-browser .bb-frame-screen {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1024 / 464;
  min-height: 0;
  overflow: hidden;
  background: #0e0e10;
  line-height: 0;
}

.site--builder .bb-frame--hero-browser img.bb-frame-media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
}

.site--builder .bb-frame--tablet .bb-frame-media,
.site--builder .bb-frame--hero-phone .bb-frame-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.site--builder .bb-frame--hero-phone.bb-frame--phone {
  width: 100%;
  padding: clamp(0.18rem, 0.35vw, 0.26rem);
  border-radius: clamp(1.35rem, 2.2vw, 1.65rem);
  background: linear-gradient(165deg, #3f3f46 0%, #18181b 55%, #27272a 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0.5px 0 rgba(255, 255, 255, 0.1) inset,
    0 16px 40px rgba(20, 24, 36, 0.14);
}

.site--builder .bb-frame--hero-phone .bb-phone-screen {
  position: relative;
  overflow: hidden;
  background: #000;
  line-height: 0;
  border-radius: clamp(1.1rem, 1.8vw, 1.35rem);
  aspect-ratio: 470 / 1024;
}

.site--builder .builder-hero__frame-main {
  position: relative;
  z-index: 1;
  width: 100%;
}

.site--builder .builder-hero__frame-float {
  position: absolute;
  z-index: 3;
  width: clamp(6.75rem, 28%, 10.5rem);
  right: 0;
  bottom: 0;
}

/* Desktop — tablet ancho + iPhone superpuesto abajo-derecha */
@media (min-width: 48rem) {
  .site--builder .builder-hero__mockups {
    max-width: none;
    margin-inline: 0;
    min-height: clamp(15rem, 22vw, 20rem);
    padding-right: clamp(3rem, 14%, 5rem);
    padding-bottom: clamp(0.5rem, 2vw, 1rem);
  }

  .site--builder .builder-hero__frame-float {
    right: 0;
    bottom: 0;
    width: clamp(7rem, 24%, 10rem);
  }

  .site--builder .builder-hero--v4 .builder-hero__frame-float {
    z-index: 10;
  }
}

@media (min-width: 64rem) {
  .site--builder .builder-hero--v4 .builder-hero__video-stage {
    margin-top: clamp(var(--space-5), 3vw, var(--space-8));
  }

  .site--builder .builder-hero__mockups {
    min-height: clamp(16rem, 20vw, 21rem);
    padding-right: clamp(3.5rem, 12%, 4.5rem);
  }

  .site--builder .builder-hero__frame-float {
    width: clamp(7.5rem, 22%, 9.5rem);
    right: 2%;
    bottom: 2%;
  }

  .site--builder .builder-hero--v4 .builder-hero__frame-float {
    z-index: 10;
  }
}

/* Mobile — hero v4 welcome */
@media (max-width: 47.99rem) {
  .site--builder .builder-hero--v4 .builder-hero__lockup {
    padding-inline: var(--space-3);
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 4;
  }

  .site--builder .builder-hero--v4 .builder-hero__eyebrow-mark {
    margin-bottom: var(--space-2);
    letter-spacing: 0.28em;
  }

  .site--builder .builder-hero--v4 .builder-hero__title {
    font-size: clamp(1.65rem, 7.2vw, 2.15rem);
    line-height: 1.14;
  }

  .site--builder .builder-hero--v4 .builder-hero__headline {
    padding-bottom: 0.16em;
  }

  .site--builder .builder-hero--v4 .builder-hero__video-stage {
    position: relative;
    z-index: 2;
    margin-top: var(--space-2);
    min-height: clamp(14.5rem, 62vw, 20rem);
    max-height: clamp(15rem, 64vw, 21rem);
    padding: 0;
  }

  .site--builder .builder-hero--v4 .bb-halo {
    display: none;
  }

  .site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal:nth-child(n + 9) {
    display: none;
  }

  .site--builder .builder-hero--v4 .builder-hero__metal-field .builder-hero__metal {
    opacity: 0.28;
  }

  .site--builder .builder-hero--v4 {
    --bb-hero-chip-icon: 0.875rem;
    --bb-hero-chip-hotspot-collapsed: 2rem;
    --bb-hero-chip-hotspot-expanded: 2rem;
    --bb-hero-tablet-width: min(82vw, 17.5rem);
    --bb-hero-phone-width: calc(var(--bb-hero-tablet-width) * 0.44);
    padding-block: clamp(var(--space-8), 8vw, var(--space-12)) clamp(var(--space-8), 7vw, var(--space-10));
    margin-bottom: var(--space-5);
    min-height: auto;
  }

  .site--builder .builder-hero--v4 > .container.goverless-surface__content {
    justify-content: flex-start;
  }

  .site--builder .builder-hero--v4 .builder-hero__shell {
    justify-content: flex-start;
  }

  .site--builder .builder-hero--v4 .builder-hero__hotspot-layer {
    top: 10%;
    left: 5%;
    right: 10%;
    bottom: 8%;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot {
    transform: translate(-50%, -50%);
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot-tl {
    left: 10%;
    top: 22%;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot-tr {
    left: 72%;
    top: 22%;
    transform: translate(-50%, -50%);
    justify-content: center;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot-bl {
    left: 10%;
    top: 76%;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot-br {
    left: 72%;
    top: 76%;
    transform: translate(-50%, -50%);
    justify-content: center;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded {
    z-index: 15;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded .builder-hero__chip-btn {
    max-width: min(8.75rem, 44vw);
    padding-inline: 0.4rem;
    gap: 0.22rem;
  }

  .site--builder .builder-hero--v4 .builder-hero__chip--hotspot.is-expanded .builder-hero__chip-label {
    max-width: 6.25rem;
    font-size: 0.5625rem;
    line-height: 1.05;
  }

  .site--builder {
    --bb-hero-chip-icon: 0.875rem;
  }

  .site--builder .builder-marquee {
    margin-top: 0;
  }

  .site--builder .builder-hero--v4 .builder-hero__cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-5);
    padding-inline: var(--space-4);
    position: relative;
    z-index: 4;
  }

  .site--builder .builder-hero--v4 .builder-hero__cta-block .builder-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    gap: 0.375rem;
    margin-inline: auto;
  }

  .site--builder .builder-hero--v4 .builder-hero__cta-block .button--builder-cta-primary,
  .site--builder .builder-hero--v4 .builder-hero__cta-block .button--builder-cta-secondary {
    min-height: 2.25rem;
    padding-block: 0.45rem;
  }

  .site--builder .builder-hero--v4 .builder-hero__cta-block .button--builder-cta-primary {
    order: 1;
    width: fit-content;
    max-width: 100%;
    font-size: 0.8125rem;
    font-weight: 700;
    padding-inline: 0.9rem;
    text-align: center;
    justify-content: center;
  }

  .site--builder .builder-hero--v4 .builder-hero__cta-block .button--builder-cta-secondary {
    order: 2;
    width: fit-content;
    max-width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    padding-inline: 0.75rem;
    text-align: center;
    justify-content: center;
  }

  .site--builder .builder-hero__mockups {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: end;
    gap: 0;
    max-width: 100%;
    width: 100%;
    min-height: 0;
    padding: 0;
    margin-inline: 0;
  }

  .site--builder .builder-hero__frame-main {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .site--builder .builder-hero__frame-float {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    width: clamp(4.25rem, 42%, 5.5rem);
    max-width: none;
    right: auto;
    bottom: auto;
    margin-top: -36%;
    margin-right: 0;
  }

  /* Hero v4 — tablet + iPhone en fila (lado a lado) */
  .site--builder .builder-hero--v4 .builder-hero__mockups {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 2vw, 0.5rem);
    position: relative;
    width: min(100%, calc(var(--bb-hero-tablet-width) + var(--bb-hero-phone-width) + 0.5rem));
    max-width: 100%;
    margin-inline: auto;
    min-height: max(calc(var(--bb-hero-tablet-width) * 0.58), calc(var(--bb-hero-phone-width) * 2.18));
    padding: 0;
  }

  .site--builder .builder-hero--v4 .builder-hero__frame-main {
    position: relative;
    z-index: 2;
    flex: 0 1 var(--bb-hero-tablet-width);
    width: var(--bb-hero-tablet-width);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
  }

  .site--builder .builder-hero--v4 .builder-hero__frame-float {
    position: relative;
    z-index: 10;
    flex: 0 0 var(--bb-hero-phone-width);
    width: var(--bb-hero-phone-width);
    align-self: center;
    right: auto;
    bottom: auto;
    top: auto;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
  }

  .site--builder .builder-hero--v4 .bb-frame--hero-phone.bb-frame--phone {
    width: 100%;
  }

  .site--builder .builder-hero--v4 .bb-frame--hero-phone .bb-phone-screen {
    aspect-ratio: 470 / 1024;
    width: 100%;
    height: auto;
  }

  .site--builder .bb-frame--hero-phone.bb-frame--phone {
    max-width: none;
  }

  .site--builder .bb-frame--tablet.bb-frame--hero {
    border-radius: 0.65rem;
    padding: 0.15rem;
  }

  .site--builder .bb-frame--tablet.bb-frame--hero .bb-tablet-screen {
    border-radius: 0.45rem;
  }

  .site--builder .bb-frame--hero-browser .bb-frame-bar {
    min-height: 1.1rem;
    padding: 0 0.35rem;
  }

  .site--builder .bb-frame--hero-browser .bb-frame-dots i {
    width: 0.3rem;
    height: 0.3rem;
  }

  .site--builder .bb-frame--hero-browser .bb-frame-url {
    font-size: 0.4375rem;
  }

  .site--builder .bb-frame--hero-browser .bb-frame-screen {
    aspect-ratio: 1024 / 464;
  }

  .site--builder .bb-frame--hero-phone.bb-frame--phone {
    border-radius: 1rem;
    padding: 0.12rem;
  }

  .site--builder .bb-frame--hero-phone .bb-phone-screen {
    border-radius: 0.85rem;
  }
}

/* —— Iridescent business marquee —— */
.site--builder .builder-marquee {
  position: relative;
  width: 100%;
  margin-top: var(--space-4);
  border-block: var(--goverless-strip-border);
  background:
    linear-gradient(
      102deg,
      color-mix(in srgb, #fff 92%, var(--bb-accent-blue) 8%) 0%,
      color-mix(in srgb, #fff 88%, #426fff 12%) 18%,
      color-mix(in srgb, #fff 90%, #f5911e 10%) 38%,
      color-mix(in srgb, #fff 88%, #14ff00 6%) 52%,
      color-mix(in srgb, #fff 90%, #426fff 10%) 68%,
      color-mix(in srgb, #fff 92%, #f5911e 8%) 82%,
      color-mix(in srgb, #fff 94%, var(--bb-accent-blue) 6%) 100%
    );
  background-size: 220% 100%;
  animation: builder-marquee-bg var(--holo-motion-shine-text) linear infinite;
}

@keyframes builder-marquee-bg {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.site--builder .builder-marquee .capability-rail__mask {
  overflow: hidden;
  padding-block: var(--space-4);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.site--builder .builder-marquee .capability-rail__track {
  display: flex;
  width: max-content;
  animation: capability-rail-marquee var(--holo-motion-rail-marquee) linear infinite;
}

.site--builder .builder-marquee .capability-rail__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-5);
  padding-inline: var(--space-6);
}

.site--builder .builder-marquee .capability-rail__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site--builder .builder-marquee .bb-icon--rail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-hero-chip-icon, 1rem);
  height: var(--bb-hero-chip-icon, 1rem);
  flex-shrink: 0;
  color: color-mix(in srgb, var(--color-identity) 72%, var(--bb-accent-blue) 28%);
}

.site--builder .builder-marquee .bb-icon--rail svg {
  width: 100%;
  height: 100%;
}

.site--builder .builder-marquee .bb-icon--rail.bb-icon--wa {
  color: #25d366;
}

.site--builder .builder-marquee .capability-rail__sep {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-identity) 22%, transparent);
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-hero--v4 .builder-hero__headline.text-gradient {
    animation: none;
    background-position: 24% 50%;
  }

  .site--builder .builder-marquee {
    animation: none;
    background-position: 40% 50%;
  }

  .site--builder .builder-marquee .capability-rail__track {
    animation: none;
  }
}

/* =============================================================================
   Casos de uso — Apple-style highlights (dark theme)
   ============================================================================= */

.site--builder .builder-casos-section {
  --bb-casos-bg: #0a0a0c;
  --bb-casos-bg-alt: #111114;
  --bb-casos-text: #f5f5f7;
  --bb-casos-muted: #a1a1a6;
  --bb-casos-title-gradient: linear-gradient(
    102deg,
    #f5f5f7 0%,
    #d2d2d7 8%,
    #ffffff 14%,
    color-mix(in srgb, #426fff 38%, #e8e8ed) 22%,
    #f5f5f7 30%,
    color-mix(in srgb, #f5911e 32%, #c8c8cc) 38%,
    #ffffff 46%,
    #e8e8ed 54%,
    color-mix(in srgb, #426fff 28%, #f5f5f7) 62%,
    #ffffff 70%,
    #d2d2d7 78%,
    color-mix(in srgb, #14ff00 6%, #f5f5f7) 86%,
    #ffffff 94%,
    #f5f5f7 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--space-12), 8vw, var(--space-20)) clamp(var(--space-16), 10vw, var(--space-24));
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, color-mix(in srgb, var(--bb-accent-blue) 14%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in srgb, #f5911e 8%, transparent), transparent 58%),
    linear-gradient(180deg, var(--bb-casos-bg-alt) 0%, var(--bb-casos-bg) 100%);
}

.site--builder .builder-casos-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #fff 4%, transparent) 0%,
    transparent 32%,
    transparent 100%
  );
  opacity: 0.5;
}

.site--builder .builder-casos-section > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

.site--builder #casos-uso .builder-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: 0;
  text-align: center;
}

.site--builder #casos-uso .builder-section-header .eyebrow,
.site--builder #casos-uso .builder-section-header__lede {
  width: 100%;
  text-align: center;
}

.site--builder .builder-section-header--dark .builder-section-header__title:not(.text-gradient--casos-metal) {
  color: var(--bb-casos-text);
}

.site--builder #casos-title.text-gradient--casos-metal {
  display: inline-block;
  line-height: 1.12;
  padding: 0 0.02em 0.12em;
  color: var(--bb-casos-text);
}

.site--builder #casos-uso #casos-title.text-gradient--casos-metal {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .site--builder #casos-title.text-gradient--casos-metal {
    background-image: var(--bb-casos-title-gradient);
    background-size: 280% 100%;
    background-position: 12% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: builder-casos-title-shine var(--holo-motion-shine-text, 8s) linear infinite;
  }
}

@keyframes builder-casos-title-shine {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

.site--builder .builder-section-header--dark .builder-section-header__lede {
  color: color-mix(in srgb, var(--bb-casos-muted) 88%, var(--bb-casos-text));
}

.site--builder .eyebrow--dark {
  color: color-mix(in srgb, var(--bb-casos-muted) 92%, var(--bb-accent-blue));
}

.site--builder #casos-uso .bb-highlights.bb-showcase--casos {
  padding-inline: var(--space-5);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.site--builder #casos-uso .bb-showcase--casos .bb-showcase__viewport {
  width: 100%;
  padding-inline: 0;
}

.site--builder #casos-uso .bb-showcase--casos .bb-showcase__slide {
  align-items: center;
  justify-content: center;
}

.site--builder #casos-uso .bb-showcase--casos .bb-showcase__media {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.site--builder #casos-uso .bb-showcase--casos .bb-frame--showcase-phone {
  margin-inline: auto;
  flex-shrink: 0;
}

.site--builder .bb-highlights.bb-showcase--casos {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  padding-top: clamp(var(--space-2), 2vw, var(--space-4));
  padding-bottom: clamp(2rem, 4vw, 3rem);
  box-sizing: border-box;
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus] .bb-showcase__nav {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
  margin-inline: auto;
  order: 2;
  width: max-content;
  max-width: min(26rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__pager {
  background: color-mix(in srgb, #fff 12%, transparent);
  border-color: color-mix(in srgb, #fff 14%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__dot {
  background: color-mix(in srgb, #fff 30%, transparent);
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__dot.is-active {
  background: color-mix(in srgb, #fff 88%, var(--bb-accent-blue));
}

.site--builder .bb-showcase--casos .bb-showcase__focus {
  width: 100%;
  display: flex;
  justify-content: center;
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus-btn {
  cursor: default;
  pointer-events: none;
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    width var(--bb-focus-duration, 0.48s) var(--bb-focus-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    min-width var(--bb-focus-duration, 0.48s) var(--bb-focus-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-radius var(--bb-focus-duration, 0.48s) var(--bb-focus-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    background var(--bb-focus-duration, 0.48s) var(--bb-focus-ease-soft, ease),
    border-color var(--bb-focus-duration, 0.48s) var(--bb-focus-ease-soft, ease),
    box-shadow var(--bb-focus-duration, 0.48s) var(--bb-focus-ease-soft, ease);
}

/* Colapsado: solo botón azul + (sin card) */
.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus:not(.is-expanded) .bb-showcase__focus-card {
  width: var(--bb-showcase-focus-size, 3.5rem);
  min-width: var(--bb-showcase-focus-size, 3.5rem);
  border-radius: 999px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus:not(.is-expanded) .bb-showcase__focus-btn {
  min-height: var(--bb-showcase-focus-size, 3.5rem);
  padding: 0;
  justify-content: center;
}

.site--builder .bb-showcase--casos .bb-casos-focus-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-showcase-focus-size, 3.5rem);
  height: var(--bb-showcase-focus-size, 3.5rem);
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(145deg, var(--bb-accent-blue), var(--bb-accent-blue-deep));
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--bb-accent-blue) 40%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
  transition:
    transform var(--bb-focus-duration, 0.48s) var(--bb-focus-ease, ease),
    box-shadow var(--bb-focus-duration, 0.48s) var(--bb-focus-ease, ease);
}

.site--builder .bb-showcase--casos .bb-casos-focus-mark svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke: #fff;
  transition: transform var(--bb-focus-duration, 0.48s) var(--bb-focus-ease, ease);
}

.site--builder .bb-showcase--casos .bb-showcase__focus.is-expanded .bb-casos-focus-mark {
  width: 1.65rem;
  height: 1.65rem;
}

.site--builder .bb-showcase--casos .bb-showcase__focus.is-expanded .bb-casos-focus-mark svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Expandido: card con título + descripción */
.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus.is-expanded .bb-showcase__focus-card {
  width: min(100%, 15.375rem);
  min-width: min(100%, 15.375rem);
  border-radius: 1.25rem;
  border-color: color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--bb-accent-blue) 32%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus.is-expanded .bb-showcase__focus-btn {
  min-height: var(--bb-showcase-focus-size, 3.5rem);
  padding: 0 1rem;
  justify-content: flex-start;
  gap: 0.5rem;
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus-btn {
  color: var(--bb-casos-text);
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus-label {
  color: var(--bb-casos-text);
  justify-content: flex-start;
  text-align: left;
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus-panel .bb-showcase__text {
  color: var(--bb-casos-muted);
  text-align: left;
}

.site--builder .bb-showcase--casos.bb-showcase--dark .bb-showcase__focus-panel {
  border-top-color: color-mix(in srgb, #fff 10%, transparent);
  text-align: left;
}

.site--builder .bb-showcase--casos .bb-showcase__viewport {
  width: 100%;
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}

.site--builder .bb-showcase--casos .bb-showcase__slide {
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  align-items: center;
  text-align: center;
}

.site--builder .bb-showcase--casos .bb-showcase__focus-card {
  margin-inline: auto;
}

.site--builder .bb-showcase--casos .bb-showcase__media {
  display: flex;
  justify-content: center;
  width: 100%;
}

.site--builder .bb-showcase--casos.bb-showcase--iphone .bb-frame--showcase-phone {
  --bb-showcase-phone-radius: 2rem;
  --bb-showcase-phone-bezel: 2px;
  width: min(14.5rem, 78vw);
  max-width: 14.5rem;
  background:
    linear-gradient(155deg,
      color-mix(in srgb, #6a6a72 88%, var(--bb-accent-blue) 8%) 0%,
      #121214 48%,
      #1a1a1e 100%);
  border: 0.5px solid color-mix(in srgb, #fff 18%, #2a2a30);
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, #fff 6%, transparent),
    0 0 48px color-mix(in srgb, var(--bb-accent-blue) 12%, transparent);
}

.site--builder .bb-showcase--casos .bb-phone-screen--showcase {
  position: relative;
  width: 100%;
  border-radius: calc(var(--bb-showcase-phone-radius) - var(--bb-showcase-phone-bezel));
  aspect-ratio: 499 / 924;
  max-height: min(78vh, 36.5rem);
  overflow: hidden;
  background: #0c0c0e;
  isolation: isolate;
}

.site--builder .bb-showcase--casos .bb-phone-screen--showcase .bb-frame-media {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: calc(var(--bb-showcase-phone-radius) - var(--bb-showcase-phone-bezel) - 1px);
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 47.99rem) {
  .site--builder .bb-showcase--casos.bb-showcase--iphone .bb-frame--showcase-phone {
    --bb-showcase-phone-radius: 1.85rem;
    width: min(13.25rem, 74vw);
    max-width: 13.25rem;
  }

  .site--builder .bb-showcase--casos .bb-phone-screen--showcase {
    max-height: min(70vh, 32rem);
  }

  .site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__viewport {
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
  }

  .site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__dot {
    transition:
      width 0.14s var(--bb-focus-ease-soft, ease),
      background 0.14s var(--bb-focus-ease-soft, ease);
  }
}

/* Casos — swipe: card siempre expandida, texto y dots en sync (sin colapso) */
.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus.is-scrolling .bb-showcase__focus-card,
.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus:not(.is-expanded) .bb-showcase__focus-card {
  width: min(100%, 15.375rem);
  min-width: min(100%, 15.375rem);
  border-radius: 1.25rem;
}

.site--builder .bb-showcase--casos.bb-showcase--dark[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus:not(.is-expanded) .bb-showcase__focus-card,
.site--builder .bb-showcase--casos.bb-showcase--dark[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus.is-expanded .bb-showcase__focus-card {
  border-color: color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--bb-accent-blue) 32%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus:not(.is-expanded) .bb-showcase__focus-btn,
.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus.is-expanded .bb-showcase__focus-btn {
  min-height: var(--bb-showcase-focus-size, 3.5rem);
  padding: 0 1rem;
  justify-content: flex-start;
  gap: 0.5rem;
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus:not(.is-expanded) .bb-showcase__focus-label,
.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus.is-expanded .bb-showcase__focus-label {
  max-width: 12.5rem;
  opacity: 1;
  white-space: normal;
  clip-path: inset(0 0 0 0);
  transform: none;
  filter: none;
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus:not(.is-expanded) .bb-showcase__focus-panel,
.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus.is-expanded .bb-showcase__focus-panel {
  grid-template-rows: 1fr;
  border-top-color: color-mix(in srgb, #fff 10%, transparent);
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus-panel .bb-showcase__text {
  opacity: 1;
  transform: none;
  filter: none;
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus.is-content-out .bb-showcase__focus-label,
.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus.is-content-out .bb-showcase__focus-panel .bb-showcase__text {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: inset(0 0 0 0) !important;
  transition: opacity 0.1s ease !important;
}

.site--builder .bb-showcase--casos[data-bb-showcase-focus-auto-scroll] .bb-showcase__focus-card {
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

@media (min-width: 48rem) {
  .site--builder .builder-casos-section {
    padding-block: clamp(var(--space-16), 9vw, var(--space-24)) clamp(var(--space-20), 11vw, var(--space-24));
  }

  .site--builder .builder-casos-section > .container {
    margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder #casos-title.text-gradient--casos-metal {
    animation: none;
    background-position: 24% 50%;
  }
}

/* —— CRO microcopy (signup reassurance; layout unchanged) —— */
.site--builder .builder-hero__subline {
  margin: var(--space-2) 0 0;
  max-width: 36rem;
  font-size: clamp(0.8125rem, 2.2vw, 0.9375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-text) 72%, var(--color-text-muted));
  text-align: center;
}

.site--builder .builder-hero__cta-note,
.site--builder .builder-pricing__note {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 68%, var(--color-text-muted));
  text-align: center;
}

.site--builder .builder-hero__cta-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  max-width: 26rem;
  margin-inline: auto;
}

.site--builder .builder-hero__cta-note-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site--builder .builder-hero__cta-note-icon {
  flex-shrink: 0;
  width: 0.9375rem;
  height: 0.9375rem;
  color: color-mix(in srgb, var(--color-identity) 55%, var(--color-text-muted));
  opacity: 0.9;
}

.site--builder .builder-hero__cta-note-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site--builder .builder-hero__cta-note-sep {
  opacity: 0.45;
  font-weight: 400;
  user-select: none;
}

.site--builder .builder-hero__cta-block .builder-hero__cta-note {
  max-width: 26rem;
}

.site--builder .builder-pricing__card .builder-pricing__note {
  margin-top: var(--space-2);
}

.site--builder .builder-cloud__cta-wrap {
  margin-top: var(--space-5);
  text-align: center;
}

.site--builder .builder-pricing__card--publish .button--builder-cta-primary {
  margin-top: var(--space-3);
}

@media (min-width: 48rem) {
  .site--builder .builder-hero__subline {
    text-align: left;
    margin-inline: 0;
  }

  .site--builder .builder-hero__cta-block .builder-hero__cta-note {
    justify-content: center;
  }
}

/* —— Soft launch: confianza + sticky CTA (sin rediseño global) —— */
.site--builder .builder-trust[hidden] {
  display: none !important;
}

.site--builder .builder-hero--v4 .builder-hero__eyebrow-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.55rem;
  margin: 0 auto var(--space-3);
  width: 100%;
}

.site--builder .builder-hero__beta-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-identity) 78%, #000);
  background: color-mix(in srgb, var(--bb-accent-blue, #426fff) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-identity) 12%, var(--color-border));
}

.site--builder .builder-hero--v4 .builder-hero__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.site--builder .builder-hero__cta-note {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  max-width: 18.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, #fff 72%, var(--bb-surface, #f4f4f2));
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}

.site--builder .builder-hero__cta-note-sep {
  display: none;
}

.site--builder .builder-hero__cta-note-item {
  justify-content: center;
  font-size: 0.6875rem;
  line-height: 1.35;
}

.site--builder .bloqio-secure-pay--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  width: 100%;
  max-width: 18.5rem;
  margin-inline: auto;
  padding: 0.5rem 0.75rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, #fff 78%, var(--bb-surface, #f4f4f2));
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  box-sizing: border-box;
}

.site--builder .bloqio-secure-pay--hero .bloqio-secure-pay__hero-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
}

.site--builder .bloqio-secure-pay--hero .bloqio-secure-pay__title {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
}

.site--builder .bloqio-secure-pay--hero .bloqio-secure-pay__providers {
  justify-content: center;
  width: 100%;
}

.site--builder .bloqio-secure-pay--hero .bloqio-secure-pay__logo {
  height: 1rem;
  max-width: 5.5rem;
}

.site--builder .builder-trust__grid {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .site--builder .builder-trust__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site--builder .builder-trust__card {
  margin: 0;
  padding: var(--space-4);
  border-radius: 1rem;
  background: color-mix(in srgb, #fff 88%, var(--bb-surface));
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.site--builder .builder-trust__quote {
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 88%, #000);
}

.site--builder .builder-trust__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.site--builder .builder-trust__origin {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.site--builder .builder-trust__origin a {
  color: var(--color-accent-blue);
  font-weight: 600;
}

.site--builder .builder-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  padding: 0.45rem 1rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 28%,
    rgba(255, 255, 255, 0.98) 100%
  );
  border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.site--builder .builder-sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site--builder .builder-sticky-cta__inner {
  max-width: 22rem;
  margin-inline: auto;
}

.site--builder .builder-sticky-cta__btn {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 2.625rem;
  font-size: 0.875rem;
  box-shadow: 0 6px 20px rgba(66, 111, 255, 0.22);
}

body.site--builder.has-builder-sticky-cta {
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

body.site--builder.has-builder-sticky-cta .bb-help-widget {
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48rem) {
  .site--builder .builder-hero__cta-note {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 26rem;
  }

  .site--builder .builder-hero__cta-note-sep {
    display: inline;
  }

  .site--builder .bloqio-secure-pay--hero {
    max-width: 26rem;
  }
}

@media (min-width: 64rem) {
  .site--builder .builder-sticky-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--builder .builder-sticky-cta {
    transition: none;
  }
}