/*
 * Bilzur design system — .bzr-* component styles
 *
 * This is Bilzur's own .bzr-* component system, ported faithfully from the
 * design mockups (docs/theme-mockup/bilzur-claude-handoff_by_ChatGpt).
 *
 * Design tokens (custom properties) live in styles/variables.css — this
 * file intentionally has no root-level token block.
 *
 * Header/navigation layout (the nav bar, its sticky shell, the nav links
 * and the logo) lives in styles/header.css, re-authored to target
 * GeneratePress's markup, and is intentionally NOT duplicated here.
 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bzr-color-bg);
  color: var(--bzr-color-ink);
  font-family: var(--bzr-font-body);
  font-size: var(--bzr-font-size-base);
  line-height: var(--bzr-line-height);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.bzr-container {
  width: min(calc(100% - var(--bzr-space-6)), var(--bzr-container));
  margin-inline: auto;
}

.bzr-section {
  position: relative;
  padding-block: var(--bzr-section-y);
  overflow: hidden;
}

.bzr-section--ice {
  background: linear-gradient(180deg, var(--bzr-color-bg), var(--bzr-color-ice));
}

.bzr-glow::before,
.bzr-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(4.5rem);
  pointer-events: none;
}

.bzr-glow::before {
  width: 34rem;
  height: 34rem;
  left: -12rem;
  top: 1rem;
  background: var(--bzr-color-glow);
  opacity: .78;
}

.bzr-glow::after {
  width: 31rem;
  height: 31rem;
  right: -10rem;
  top: 6rem;
  background: var(--bzr-color-glow-ice);
  opacity: .82;
}

.bzr-layer {
  position: relative;
  z-index: 2;
}

.bzr-kicker {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--bzr-color-accent-dark);
}

.bzr-h1,
.bzr-h2,
.bzr-h3 {
  margin: 0;
  font-family: var(--bzr-font-heading);
  letter-spacing: -.055em;
  line-height: 1.03;
  color: var(--bzr-color-ink);
}

.bzr-h1 {
  font-size: var(--bzr-type-h1);
  font-weight: 800;
}

/* Compact variant for landing H1s carrying a longer keyword phrase:
   keeps the mobile size (3.25rem floor, same as base) but caps the desktop
   size lower so a multi-word headline lands in ~3 lines and the CTA stays
   above the fold. Opt-in per element; the base .bzr-h1 (home) is untouched. */
.bzr-h1--compact {
  font-size: clamp(3.25rem, 5vw, 4rem);
}

.bzr-h2 {
  font-size: var(--bzr-type-h2);
  font-weight: 800;
}

.bzr-h3 {
  font-size: var(--bzr-type-h3);
  font-weight: 700;
}

.bzr-accent {
  color: var(--bzr-color-accent);
}

.bzr-lead {
  max-width: 38rem;
  margin: var(--bzr-space-4) 0 0;
  color: var(--bzr-color-muted);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.bzr-copy {
  margin: var(--bzr-space-3) 0 0;
  color: var(--bzr-color-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.bzr-actions {
  display: flex;
  gap: var(--bzr-space-2);
  flex-wrap: wrap;
  margin-top: var(--bzr-space-4);
}

.bzr-btn {
  min-height: 3rem;
  padding-inline: 1.375rem;
  gap: .5rem;
  border: var(--bzr-border);
  border-radius: var(--bzr-radius-control);
  background: var(--bzr-color-surface);
  color: var(--bzr-color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9375rem;
  font-weight: 700;
  transition: transform var(--bzr-motion-base) var(--bzr-ease),
    box-shadow var(--bzr-motion-base) var(--bzr-ease),
    border-color var(--bzr-motion-base) var(--bzr-ease),
    color var(--bzr-motion-base) var(--bzr-ease);
}

.bzr-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 .625rem 1.375rem -.375rem rgba(16, 37, 77, .18);
  border-color: var(--bzr-color-ring);
  color: var(--bzr-color-ink);
}

.bzr-btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  transition: transform var(--bzr-motion-fast) var(--bzr-ease);
}

.bzr-btn:hover svg {
  transform: translateX(3px);
}

.bzr-btn--primary:hover {
  color: var(--bzr-color-on-dark);
}

.bzr-btn--primary {
  background: var(--bzr-color-accent);
  border-color: var(--bzr-color-accent);
  color: var(--bzr-color-on-dark);
  box-shadow: var(--bzr-shadow-button);
}

.bzr-btn:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--bzr-focus-ring);
}

.bzr-card {
  background: var(--bzr-color-surface);
  border: var(--bzr-border);
  border-radius: var(--bzr-radius-card);
  box-shadow: var(--bzr-shadow-card);
}

.bzr-tile {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--bzr-radius-sm);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--bzr-color-accent-soft), var(--bzr-color-ice));
  box-shadow: 0 .125rem .375rem rgba(28, 121, 249, .10);
  color: var(--bzr-color-accent);
}

/* Naked stroke icon for feature/benefit rows — the calculadora look, one
   size up and no chip. Use it for concept icons; keep .bzr-tile for numbered
   steps and brand-mark badges, which need the box. Pairs with inline 24x24
   SVGs (fill:none; stroke:currentColor). */
.bzr-icon {
  display: flex;
  align-self: start;
  width: max-content;
  color: var(--bzr-color-accent);
  margin-bottom: .625rem;
}

.bzr-icon svg {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
}

/* Icono desnudo en tono atenuado: para listas de "esto NO aplica / queda
   fuera", donde el color apagado ya comunica la exclusión. */
.bzr-icon--muted {
  color: var(--bzr-color-muted);
}

/* SVG dentro del chip .bzr-tile (badges con icono en vez de glifo). */
.bzr-tile svg {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

/* Item de exclusión (icono atenuado + título + copy en columna). */
.bzr-exclude {
  display: grid;
  gap: .5rem;
  align-content: start;
}

.bzr-exclude .bzr-icon {
  margin-bottom: 0;
}

.bzr-exclude strong {
  color: var(--bzr-color-ink);
}

/* Timeline de plazos: la cronología es el dato. Dos hitos conectados por una
   línea con degradado (del ahora accent al futuro border). */
.bzr-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bzr-space-5);
}

.bzr-timeline::before {
  content: "";
  position: absolute;
  top: .4375rem;
  left: .5rem;
  right: .5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--bzr-color-accent), var(--bzr-color-border));
}

.bzr-timeline__item {
  position: relative;
  padding-top: 2.25rem;
  display: grid;
  gap: .625rem;
  align-content: start;
}

.bzr-timeline__node {
  position: absolute;
  top: 0;
  left: 0;
  width: .9375rem;
  height: .9375rem;
  border-radius: 50%;
  background: var(--bzr-color-accent);
  box-shadow: 0 0 0 .3125rem var(--bzr-color-accent-soft);
}

.bzr-timeline__date {
  margin: 0;
  font-family: var(--bzr-font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--bzr-color-ink);
}

@media (max-width: 48rem) {
  .bzr-timeline {
    grid-template-columns: 1fr;
    gap: var(--bzr-space-4);
    padding-left: 1.5rem;
  }

  .bzr-timeline::before {
    top: .5rem;
    bottom: .5rem;
    left: .4375rem;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--bzr-color-accent), var(--bzr-color-border));
  }

  .bzr-timeline__item {
    padding-top: 0;
  }

  .bzr-timeline__node {
    left: -1.5rem;
    top: .3125rem;
  }
}

.bzr-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  width: max-content;
  padding: .4375rem .75rem;
  border-radius: var(--bzr-radius-pill);
  background: var(--bzr-color-ice);
  color: var(--bzr-color-ink);
  font-size: .75rem;
  font-weight: 700;
}

.bzr-chip--blue {
  background: var(--bzr-color-accent-soft);
  color: var(--bzr-color-accent);
}

.bzr-chip--success {
  background: var(--bzr-color-success-soft);
  color: var(--bzr-color-success);
}

.bzr-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bzr-space-5);
}

.bzr-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bzr-space-4);
}

/* Separación estándar cabecera de sección -> rejilla de tarjetas. */
.bzr-grid-3--top {
  margin-top: 2rem;
}

/* Pasos numerados — número grande como ancla visual (secuencia real, no
   scaffolding). Reemplaza al chip .bzr-tile con dígito. auto-fit: 3 o 4 en
   línea en desktop, colapsa solo en móvil. */
/* Pasos = PROCESO, no tres tarjetas idénticas (anti-patrón). Sin cajas, con un
   conector nodo→nodo: se lee como 1 → 2 → 3. */
.bzr-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--bzr-space-6) var(--bzr-space-5);
  margin-top: 2.5rem;
}

/* Se NEUTRALIZA la caja de .bzr-card/.bzr-card-pad con mayor especificidad
   (.bzr-steps .bzr-step = 2 clases), que gana pase lo que pase en el orden del CSS. */
.bzr-steps .bzr-step {
  position: relative;
  overflow: visible;
  display: grid;
  gap: .85rem;
  align-content: start;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bzr-step .bzr-copy {
  margin: 0;
}

/* Conector: línea del borde derecho de un nodo al izquierdo del siguiente.
   right negativo = se mete en el gap y llega al nodo de la columna siguiente.
   Robusto para 3 o 4 pasos porque usa % + el gap, no medidas fijas de columna. */
.bzr-steps .bzr-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 3rem;
  right: calc(-1 * var(--bzr-space-5));
  height: 2px;
  background: linear-gradient(90deg, var(--bzr-color-accent), var(--bzr-color-ring));
  z-index: 0;
}

/* Nodo numerado: token accent con glow, opaco, sentado sobre el conector. */
.bzr-step__n {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--bzr-radius-control);
  background: linear-gradient(150deg, var(--bzr-color-accent), var(--bzr-color-accent-dark));
  color: var(--bzr-color-on-dark);
  font-family: var(--bzr-font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  box-shadow: var(--bzr-shadow-button), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* Hover: adiós al box heredado de .bzr-card:hover, y toque espectacular. El nodo se
   energiza, el conector saliente se "carga" a accent sólido y el título vira. */
.bzr-steps .bzr-step:hover {
  transform: none;
  background: none;
  border: 0;
  box-shadow: none;
}
.bzr-step__n,
.bzr-steps .bzr-step:not(:last-child)::after,
.bzr-step .bzr-h3 {
  transition: transform var(--bzr-motion-base) var(--bzr-ease),
              box-shadow var(--bzr-motion-base) var(--bzr-ease),
              background var(--bzr-motion-slow) var(--bzr-ease),
              color var(--bzr-motion-fast) var(--bzr-ease);
}
.bzr-steps .bzr-step:hover .bzr-step__n {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 .625rem 1.5rem rgba(49, 120, 246, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.bzr-steps .bzr-step:hover:not(:last-child)::after {
  background: var(--bzr-color-accent);
}
.bzr-steps .bzr-step:hover .bzr-h3 {
  color: var(--bzr-color-accent-dark);
}

@media (prefers-reduced-motion: reduce) {
  .bzr-step__n,
  .bzr-steps .bzr-step:not(:last-child)::after,
  .bzr-step .bzr-h3 { transition: none; }
  .bzr-steps .bzr-step:hover .bzr-step__n { transform: none; }
}

/* Apilado (móvil/tablet estrecho): sin conector horizontal. */
@media (max-width: 60rem) {
  .bzr-steps .bzr-step:not(:last-child)::after { display: none; }
  .bzr-steps { gap: var(--bzr-space-5); }
}

.bzr-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bzr-space-3);
}

.bzr-dark {
  background: var(--bzr-color-brand-navy);
  color: var(--bzr-color-on-dark);
}

.bzr-dark .bzr-h2,
.bzr-dark .bzr-h3 {
  color: var(--bzr-color-on-dark);
}

.bzr-dark .bzr-copy {
  color: var(--bzr-color-on-dark-muted);
}

.bzr-dark .bzr-icon {
  color: var(--bzr-color-on-dark);
}

/* Banda de garantía (icono grande + titular + copy + chips) — para dignificar
   afirmaciones de cumplimiento ("Verifactu, cumplido de serie"). */
.bzr-assurance {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bzr-space-4);
  align-items: center;
}

.bzr-assurance .bzr-icon {
  margin: 0;
}

.bzr-assurance .bzr-icon svg {
  width: 3rem;
  height: 3rem;
}

.bzr-assurance .bzr-copy {
  max-width: 48rem;
}

/* Marca de agua "B" reutilizable (misma pieza que form-panel--brandmark).
   Aplícala a cualquier contenedor sobre fondo oscuro para el sello de marca. */
.bzr-brandmark {
  position: relative;
}

.bzr-brandmark > * {
  position: relative;
  z-index: 1;
}

.bzr-brandmark::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(18rem, 34%);
  height: 200%;
  pointer-events: none;
  opacity: .08;
  z-index: 0;
  background: url("../img/logo/b-bilzur-blanco.png") right center / contain no-repeat;
}

/* Enlace de texto con flecha (learn-more). Variante on-dark para bandas. */
.bzr-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: var(--bzr-space-3);
  font-weight: 700;
  color: var(--bzr-color-accent);
}

.bzr-link svg {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  transition: transform var(--bzr-motion-fast) var(--bzr-ease);
}

.bzr-link:hover svg {
  transform: translateX(3px);
}

.bzr-dark .bzr-link {
  color: var(--bzr-color-kicker-on-dark);
}

@media (max-width: 48rem) {
  .bzr-assurance {
    grid-template-columns: 1fr;
  }
}

/* Interludio a sangre completa (banda más baja que una sección normal): para
   .bzr-dark a nivel de <section>, edge-to-edge, integrado en el ritmo. */
.bzr-band {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

/* Perks en rejilla 2x2 (icono + etiqueta en horizontal) — alternativa al
   checklist vertical para no repetir dos listas apiladas. */
.bzr-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bzr-space-4);
}

.bzr-perk {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}

.bzr-perk .bzr-icon {
  margin: 0;
  align-self: center;
}

.bzr-perk .bzr-icon svg {
  width: 2.25rem;
  height: 2.25rem;
}

.bzr-perk strong {
  color: var(--bzr-color-ink);
  font-size: 1.0625rem;
}

@media (max-width: 40rem) {
  .bzr-perks {
    grid-template-columns: 1fr;
  }
}

/* ===== Footer "Dark Anchor" — marca + navegación + barra inferior ===== */
.bzr-footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--bzr-space-7) var(--bzr-space-5);
}

/* Hairline superior con remate turquesa a cuentagotas (top-tech, sutil) */
.bzr-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 233, 220, .45), transparent);
}

.bzr-footer-inner {
  overflow: hidden;   /* contiene la marca de agua "B" (.bzr-brandmark::after) */
}

.bzr-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: var(--bzr-space-6) var(--bzr-space-5);
  align-items: start;
}

/* --- Bloque de marca --- */
.bzr-footer-brand {
  max-width: 30rem;
}

.bzr-footer-tagline {
  margin-top: var(--bzr-space-3);
  max-width: 34ch;
  color: var(--bzr-color-on-dark-muted);
  font-size: .9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Los contactos directos (teléfono + WhatsApp) reusan .bzr-form-contact
   (styles/forms.css): pastilla sobria on-dark, icono de WhatsApp en su verde. */

/* CTA del footer bajo los links (estilo Bilky): Calcula tu margen + Programa piloto.
   Sobre navy el azul-navy no se ve, así que el primario va en accent y el otro ghost. */
.bzr-footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bzr-space-2);
  justify-content: flex-end;
  margin-top: var(--bzr-space-5);
}

.bzr-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.75rem;
  padding-inline: 1.25rem;
  border-radius: var(--bzr-radius-control);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--bzr-color-on-dark);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1;
  transition: transform var(--bzr-motion-fast) var(--bzr-ease),
              background var(--bzr-motion-fast) var(--bzr-ease),
              border-color var(--bzr-motion-fast) var(--bzr-ease);
}

.bzr-footer-cta-btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
}

.bzr-footer-cta-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .35);
  color: var(--bzr-color-on-dark);   /* GP pinta a:hover oscuro; lo forzamos on-dark */
}

.bzr-footer-cta-btn:focus-visible {
  outline: none;
  box-shadow: var(--bzr-focus-ring);
}

.bzr-footer-cta-btn--primary {
  background: var(--bzr-color-accent);
  border-color: var(--bzr-color-accent);
  box-shadow: var(--bzr-shadow-button);
}

.bzr-footer-cta-btn--primary:hover {
  background: var(--bzr-color-accent);
  border-color: var(--bzr-color-accent);
}

/* --- Columnas de navegación --- */
.bzr-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bzr-space-5) var(--bzr-space-4);
}

.bzr-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bzr-footer-col strong {
  margin-bottom: var(--bzr-space-1);
  color: var(--bzr-color-on-dark);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.bzr-footer-col a {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding-block: .35rem;
  color: var(--bzr-color-on-dark-muted);
  font-size: .9375rem;
  line-height: 1.4;
  transition: color var(--bzr-motion-fast) var(--bzr-ease);
}

.bzr-footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .2rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--bzr-motion-base) var(--bzr-ease);
}

.bzr-footer-col a:hover {
  color: var(--bzr-color-on-dark);
}

.bzr-footer-col a:hover::after {
  transform: scaleX(1);
}

.bzr-footer-col a:focus-visible {
  outline: none;
  box-shadow: var(--bzr-focus-ring);
  border-radius: var(--bzr-radius-sm);
}

/* --- Barra inferior --- */
.bzr-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--bzr-space-2);
  margin-top: var(--bzr-space-6);
  padding-top: var(--bzr-space-4);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--bzr-color-on-dark-muted);
  font-size: .8125rem;
}

@media (max-width: 60rem) {
  .bzr-footer-top {
    grid-template-columns: 1fr;
    gap: var(--bzr-space-5);
  }
  .bzr-footer-brand {
    max-width: none;
  }
}

@media (max-width: 40rem) {
  .bzr-footer-nav {
    grid-template-columns: 1fr 1fr;
  }
  .bzr-footer-cta {
    justify-content: stretch;
  }
  .bzr-footer-cta-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .bzr-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bzr-footer-cta-btn,
  .bzr-footer-col a,
  .bzr-footer-col a::after {
    transition: none;
  }
  .bzr-footer-cta-btn:hover {
    transform: none;
  }
}

.bzr-brand-negative {
  font-family: var(--bzr-font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--bzr-color-on-dark);
}

.bzr-diagonal {
  width: 3.5rem;
  height: .25rem;
  border-radius: var(--bzr-radius-pill);
  background: var(--bzr-color-accent);
  transform: skewX(-28deg);
}

.bzr-product-window {
  position: relative;
  overflow: hidden;
  background: var(--bzr-color-surface);
  border: var(--bzr-border);
  border-radius: var(--bzr-radius-window);
  box-shadow: var(--bzr-shadow-window);
}

.bzr-browserbar {
  height: 2.125rem;
  border-bottom: var(--bzr-border);
  display: flex;
  align-items: center;
  gap: .375rem;
  padding-inline: .875rem;
}

.bzr-browserbar i {
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: var(--bzr-color-border);
}

.bzr-product-body {
  display: grid;
  grid-template-columns: 8.25rem 1fr;
  min-height: 19rem;
}

.bzr-product-side {
  background: var(--bzr-color-brand-navy);
  color: var(--bzr-color-on-dark);
  padding: 1.125rem;
}

.bzr-product-main {
  padding: 1.25rem;
  background: linear-gradient(180deg, var(--bzr-color-bg), var(--bzr-color-ice));
}

.bzr-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
}

.bzr-metric {
  padding: .9375rem;
}

.bzr-metric small {
  color: var(--bzr-color-muted);
}

.bzr-metric b {
  display: block;
  margin-top: .25rem;
  color: var(--bzr-color-brand-navy);
  font-size: 1.3125rem;
}

.bzr-chart {
  height: 6.25rem;
  margin-top: .75rem;
  border: var(--bzr-border);
  border-radius: 1.375rem;
  overflow: hidden;
  color: var(--bzr-color-accent);
  background: linear-gradient(180deg, var(--bzr-color-accent-soft), var(--bzr-color-bg));
}

.bzr-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sidebar del mockup: nav fake para cuerpo de producto real. */
.bzr-product-side strong {
  display: block;
  font-size: .8125rem;
}

.bzr-product-nav {
  margin-top: 1rem;
  display: grid;
  gap: .625rem;
}

.bzr-product-nav span {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: var(--bzr-color-on-dark-muted);
}

.bzr-product-nav span svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.bzr-product-nav .is-active {
  color: var(--bzr-color-on-dark);
  font-weight: 700;
}

/* Lista de facturas del mockup (última actividad). */
.bzr-inv {
  margin-top: .75rem;
  display: grid;
  gap: .5rem;
}

.bzr-inv-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border: var(--bzr-border);
  border-radius: .75rem;
  background: var(--bzr-color-surface);
  font-size: .75rem;
}

.bzr-inv-name {
  font-weight: 700;
  color: var(--bzr-color-ink);
}

.bzr-inv-amt {
  font-weight: 700;
  color: var(--bzr-color-brand-navy);
  font-variant-numeric: tabular-nums;
}

.bzr-inv-row > svg {
  width: 1rem;
  height: 1rem;
  color: var(--bzr-color-muted);
}

.bzr-inv-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .625rem;
  font-weight: 700;
  color: var(--bzr-color-accent-dark);
  background: var(--bzr-color-accent-soft);
  padding: .1875rem .4375rem;
  border-radius: var(--bzr-radius-pill);
}

/* Motion del hero — solo loops sobre elementos visibles (no gatea visibilidad). */
@keyframes bzr-bob-a {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-.5rem); }
}

@keyframes bzr-bob-b {
  0%, 100% { transform: rotate(1.5deg) translateY(0); }
  50% { transform: rotate(1.5deg) translateY(-.4rem); }
}

@keyframes bzr-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 194, 168, .5); }
  70% { box-shadow: 0 0 0 .4rem rgba(0, 194, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 194, 168, 0); }
}

.bzr-float--left {
  animation: bzr-bob-a 6s var(--bzr-ease) infinite;
}

.bzr-float--right {
  animation: bzr-bob-b 7s var(--bzr-ease) infinite;
  animation-delay: -2.5s;
}

.bzr-chip--live::before {
  animation: bzr-live-pulse 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bzr-float--left,
  .bzr-float--right,
  .bzr-chip--live::before {
    animation: none;
  }
}

.bzr-float {
  position: absolute;
  width: 11.25rem;
  padding: .9375rem;
  z-index: 4;
  transition: transform var(--bzr-motion-base) var(--bzr-ease);
  box-shadow: var(--bzr-shadow-float);
}

.bzr-float:hover {
  transform: translateY(-.25rem);
}

.bzr-float strong {
  display: block;
  margin-top: .625rem;
  font-size: .75rem;
}

.bzr-float span {
  display: block;
  margin-top: .1875rem;
  color: var(--bzr-color-muted);
  font-size: .625rem;
  line-height: 1.4;
}

.bzr-float b {
  display: block;
  margin-top: .25rem;
  color: var(--bzr-color-accent);
  font-size: 1.375rem;
}

.bzr-compliance {
  padding: 1rem;
  border-radius: 1.125rem;
  background: var(--bzr-color-ice);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
}

.bzr-compliance strong {
  display: block;
  font-size: .75rem;
}

.bzr-compliance span {
  display: block;
  margin-top: .25rem;
  color: var(--bzr-color-muted);
  font-size: .6875rem;
}

.bzr-blog-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--bzr-radius-image);
  background:
    radial-gradient(130% 120% at 85% 0%, var(--bzr-color-glow-ice), transparent 55%),
    linear-gradient(150deg, var(--bzr-color-glow), var(--bzr-color-surface));
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
}

/* Fallback de marca cuando la entrada no tiene imagen destacada: sello "B" sobre
   el degradado — limpio e intencional, no una miniatura simulada. Con foto real,
   .bzr-blog-img--photo apaga este ::before (overrides.css) y la <img> llena la caja. */
.bzr-blog-img::before {
  content: "";
  width: 30%;
  max-width: 5.5rem;
  aspect-ratio: 1;
  background: url(../img/logo/b-bilzur.png) center / contain no-repeat;
  opacity: .18;
}

.bzr-blog-img::after {
  content: none;
}

.bzr-post-card {
  overflow: hidden;
}

.bzr-post-card .bzr-blog-img {
  border-radius: 0;
}

.bzr-post-body {
  padding: 1.125rem 1.125rem 1.25rem;
}

.bzr-post-body h3 {
  font-size: 1.0625rem;
}

.bzr-post-excerpt {
  margin-top: .5rem;
  color: var(--bzr-color-muted);
  font-size: .8125rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bzr-meta {
  display: flex;
  gap: .4375rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .75rem;
  color: var(--bzr-color-muted);
  font-size: .6875rem;
  letter-spacing: .005em;
}

.bzr-meta span {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
}

.bzr-meta span + span::before {
  content: "";
  width: .1875rem;
  height: .1875rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Navegación por tema del blog: fila de pastillas (índice + archivos de categoría).
   Feed cronológico + filtro por tema, sin hubs por categoría. */
.bzr-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--bzr-space-5);
}

.bzr-cat-chip {
  display: inline-flex;
  align-items: center;
  padding: .5rem .9375rem;
  border: var(--bzr-border);
  border-radius: var(--bzr-radius-pill);
  background: var(--bzr-color-surface);
  color: var(--bzr-color-ink);
  font-size: .8125rem;
  font-weight: 600;
  transition: color var(--bzr-motion-base) var(--bzr-ease),
              border-color var(--bzr-motion-base) var(--bzr-ease),
              background var(--bzr-motion-base) var(--bzr-ease),
              transform var(--bzr-motion-base) var(--bzr-ease);
}

.bzr-cat-chip:hover {
  color: var(--bzr-color-accent);
  border-color: var(--bzr-color-ring);
  transform: translateY(-.0625rem);
}

.bzr-cat-chip.is-active {
  background: var(--bzr-color-accent);
  border-color: var(--bzr-color-accent);
  color: var(--bzr-color-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .bzr-cat-chip:hover { transform: none; }
}

@media (max-width: 62rem) {
  .bzr-grid-2,
  .bzr-grid-3,
  .bzr-grid-4 {
    grid-template-columns: 1fr;
  }

  .bzr-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bzr-product-body {
    grid-template-columns: 5rem 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.bzr-actions--nav {
  margin-top: 0;
}

.bzr-float--left {
  left: -2rem;
  bottom: 1.5rem;
  transform: rotate(-2deg);
}

.bzr-float--right {
  right: -1rem;
  bottom: .5rem;
  transform: rotate(1.5deg);
}

.bzr-hero-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3.75rem;
  align-items: center;
}

.bzr-stage {
  position: relative;
  min-height: 31rem;
}

.bzr-stage-main {
  position: absolute;
  width: min(39rem, 90%);
  left: 5%;
  top: 9%;
}

.bzr-card-pad {
  padding: 1.375rem;
}

.bzr-section-head {
  max-width: 46rem;
}

.bzr-bento {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-auto-rows: 9.5rem;
  gap: 1rem;
  margin-top: 2rem;
}

.bzr-bento .bzr-card:first-child {
  grid-row: span 2;
}

.bzr-bento .bzr-card:last-child {
  grid-column: span 2;
}

.bzr-cta-panel {
  padding: 2rem;
}

.bzr-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.bzr-plan {
  padding: 1.25rem;
}

.bzr-plan--featured {
  border-color: var(--bzr-color-ring);
  transform: translateY(-.25rem);
}

.bzr-plan b {
  display: block;
  margin-top: .75rem;
  font-size: 1.75rem;
}

.bzr-plan ul {
  padding-left: 1rem;
  color: var(--bzr-color-muted);
  font-size: .75rem;
}

/* Reusable check list for conviction bands (promises, feature bullets).
   Pure-CSS accent checkmark on a soft pill — no glyphs, no inline SVG. */
.bzr-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .875rem;
}

.bzr-checklist li {
  position: relative;
  min-height: 1.75rem;
  padding-left: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bzr-color-ink);
}

.bzr-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bzr-color-accent);
  box-shadow: 0 .25rem .5rem rgba(49, 120, 246, .28);
}

.bzr-checklist li::after {
  content: "";
  position: absolute;
  left: .875rem;
  top: 50%;
  width: .35rem;
  height: .65rem;
  border: solid #fff;
  border-width: 0 .125rem .125rem 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.bzr-trust {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.bzr-proof {
  padding: 1rem;
}

.bzr-proof strong {
  display: block;
}

.bzr-proof span {
  display: block;
  margin-top: .25rem;
  color: var(--bzr-color-muted);
  font-size: .75rem;
}

.bzr-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.bzr-swatch {
  height: 6rem;
  border-radius: var(--bzr-radius-card);
}

.bzr-swatch--accent {
  background: var(--bzr-color-accent);
}

.bzr-swatch--ink {
  background: var(--bzr-color-ink);
}

.bzr-swatch--navy {
  background: var(--bzr-color-brand-navy);
}

.bzr-swatch--ice {
  background: var(--bzr-color-ice);
  border: var(--bzr-border);
}

.bzr-control {
  min-height: 2.875rem;
  padding-inline: .875rem;
  border: var(--bzr-border);
  border-radius: var(--bzr-radius-control);
  display: flex;
  align-items: center;
  color: var(--bzr-color-muted);
}

.bzr-control--focus {
  border-color: var(--bzr-color-ring);
  box-shadow: 0 0 0 .25rem rgba(28, 121, 249, .10);
}

.bzr-list {
  border: var(--bzr-border);
  border-radius: 1.125rem;
  overflow: hidden;
}

.bzr-row {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr auto;
  gap: .75rem;
  align-items: center;
  padding: .8125rem .875rem;
  border-bottom: var(--bzr-border);
  font-size: .75rem;
}

.bzr-row:last-child {
  border-bottom: 0;
}

/* FAQ = acordeón nativo <details>/<summary>: 1ª abierta, resto plegadas.
   Contenido siempre en el DOM (SEO-safe); accesible por teclado sin JS. */
.bzr-faq-item {
  padding: 0;
  border-bottom: var(--bzr-border);
}

/* La pregunta es el <summary> clicable; quitamos el marcador nativo. */
.bzr-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bzr-space-3);
  padding: 1.125rem 0;
  font-weight: 700;
  color: var(--bzr-color-ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--bzr-motion-fast) var(--bzr-ease);
}
.bzr-faq-q::-webkit-details-marker { display: none; }
.bzr-faq-q:hover { color: var(--bzr-color-accent-dark); }
.bzr-faq-q:focus-visible {
  outline: none;
  box-shadow: var(--bzr-focus-ring);
  border-radius: var(--bzr-radius-sm);
}

/* Marcador +/− dibujado con dos barras: al abrir se colapsa la vertical → − */
.bzr-faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--bzr-color-accent);
}
.bzr-faq-mark::before,
.bzr-faq-mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.bzr-faq-mark::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.bzr-faq-mark::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform var(--bzr-motion-base) var(--bzr-ease),
              opacity var(--bzr-motion-fast) var(--bzr-ease);
}
.bzr-faq-item[open] .bzr-faq-mark::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.bzr-faq-a {
  margin: 0;
  padding: 0 0 1.125rem;
  max-width: 68ch;
  color: var(--bzr-color-muted);
  font-size: .9375rem;
  line-height: 1.6;
}
.bzr-faq-item[open] .bzr-faq-a {
  animation: bzr-faq-in var(--bzr-motion-slow) var(--bzr-ease);
}
@keyframes bzr-faq-in {
  from { opacity: 0; transform: translateY(-.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bzr-faq-mark::after { transition: none; }
  .bzr-faq-item[open] .bzr-faq-a { animation: none; }
}

.bzr-interior-hero {
  padding-block: 4rem;
  border-bottom: var(--bzr-border);
}

.bzr-breadcrumb {
  display: flex;
  gap: .5rem;
  color: var(--bzr-color-muted);
  font-size: .6875rem;
}

.bzr-subnav {
  min-height: 3rem;
  border-bottom: var(--bzr-border);
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-size: .6875rem;
  color: var(--bzr-color-muted);
  position: sticky;
  top: 5.25rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(.75rem);
  z-index: 10;
}

.bzr-content-grid {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 2.5rem;
}

.bzr-toc {
  font-size: .75rem;
  color: var(--bzr-color-muted);
}

.bzr-toc strong {
  display: block;
  color: var(--bzr-color-ink);
  margin-bottom: .5rem;
}

/* En pantalla ancha el índice sigue al lector (columna izquierda del content-grid).
   En móvil el grid colapsa a 1 col y el TOC vuelve a fluir normal. */
@media (min-width: 62.01rem) {
  .bzr-toc {
    position: sticky;
    top: 6rem;
    align-self: start;
    max-height: calc(100vh - 8rem);
    overflow: auto;
  }
}

.bzr-article {
  max-width: 44rem;
}

.bzr-article p,
.bzr-article li {
  color: var(--bzr-color-muted);
  line-height: 1.75;
}

.bzr-pullquote {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: .1875rem solid var(--bzr-color-accent);
  font-family: var(--bzr-font-heading);
  font-size: 1.25rem;
}

.bzr-editorial-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 4rem;
}

.bzr-note {
  padding-bottom: 1.25rem;
  border-bottom: var(--bzr-border);
}

.bzr-note + .bzr-note {
  margin-top: 1.25rem;
}

.bzr-note small {
  color: var(--bzr-color-accent);
  font-weight: 700;
}

.bzr-note strong {
  display: block;
  margin-top: .375rem;
  font-family: var(--bzr-font-heading);
  font-size: 1.125rem;
}

.bzr-note span {
  display: block;
  margin-top: .375rem;
  color: var(--bzr-color-muted);
  font-size: .75rem;
}

.bzr-blog-feature {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.5rem;
  align-items: center;
}

.bzr-blog-hero-img {
  aspect-ratio: 16 / 9;
}

.bzr-blog-feature h2 {
  font-size: 2rem;
}

/* Título como afordancia de clic: acento en hover (tarjeta y destacado). */
.bzr-post-card .bzr-h3 a,
.bzr-blog-feature h2 a {
  color: inherit;
  transition: color var(--bzr-motion-base) var(--bzr-ease);
}

.bzr-post-card:hover .bzr-h3 a,
.bzr-blog-feature h2 a:hover {
  color: var(--bzr-color-accent);
}

.bzr-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
}

.bzr-article-hero-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 2rem;
  align-items: center;
}

.bzr-tag {
  display: inline-flex;
  padding: .375rem .625rem;
  border-radius: var(--bzr-radius-pill);
  background: var(--bzr-color-accent-soft);
  color: var(--bzr-color-accent);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.bzr-orbit-visual {
  height: 15rem;
  border: var(--bzr-border);
  border-radius: var(--bzr-radius-card);
  background: linear-gradient(180deg, var(--bzr-color-bg), var(--bzr-color-ice));
  position: relative;
  overflow: hidden;
}

.bzr-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9.5rem;
  height: 9.5rem;
  transform: translate(-50%, -50%);
  border: var(--bzr-border);
  border-radius: 50%;
}

.bzr-orbit::before,
.bzr-orbit::after {
  content: "";
  position: absolute;
  border: var(--bzr-border);
  border-radius: 50%;
  inset: -1.75rem;
}

.bzr-orbit::after {
  inset: -3.5rem;
}

.bzr-orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.25rem;
  height: 4.25rem;
  transform: translate(-50%, -50%);
  border-radius: var(--bzr-radius-window);
  display: grid;
  place-items: center;
  background: var(--bzr-color-accent-soft);
  color: var(--bzr-color-accent);
  font-family: var(--bzr-font-heading);
  font-weight: 800;
}

.bzr-structure-label {
  margin-top: 1rem;
  color: var(--bzr-color-muted);
  font-size: .75rem;
}

.bzr-hero-copy {
  max-width: 34rem;
}

.bzr-table {
  border: var(--bzr-border);
  border-radius: var(--bzr-radius-card);
  overflow: hidden;
  background: var(--bzr-color-surface);
  box-shadow: var(--bzr-shadow-card);
}

.bzr-trow {
  display: grid;
  grid-template-columns: .8fr .9fr .9fr 1.6fr;
  min-height: 3.25rem;
  align-items: center;
  border-bottom: var(--bzr-border);
}

.bzr-trow:last-child {
  border-bottom: 0;
}

.bzr-trow:not(.bzr-trow--head):hover {
  background: var(--bzr-color-accent-soft);
}

.bzr-trow--head {
  background: var(--bzr-color-ice);
}

.bzr-trow--head .bzr-cell {
  color: var(--bzr-color-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .6875rem;
}

.bzr-cell {
  padding: .875rem 1rem;
  font-size: .9375rem;
  color: var(--bzr-color-ink);
}

.bzr-check {
  color: var(--bzr-color-success);
  font-weight: 800;
}

/* Card destacada (oferta / founder): tinte accent para diferenciarla. */
.bzr-card--accent {
  border-color: var(--bzr-color-ring);
  background: linear-gradient(180deg, var(--bzr-color-accent-soft), var(--bzr-color-surface));
}

/* Realce de la última columna de la tabla (el resultado/margen). */
.bzr-trow .bzr-cell:last-child {
  background: var(--bzr-color-accent-soft);
}

/* Split 60-40 alineado arriba (tabla comprimida + aside). */
.bzr-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--bzr-space-5);
  align-items: start;
}

@media (max-width: 60rem) {
  .bzr-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .bzr-table {
    overflow-x: auto;
  }

  .bzr-trow {
    min-width: 30rem;
  }
}

@media (max-width: 62rem) {
  .bzr-hero-grid,
  .bzr-editorial-grid,
  .bzr-blog-feature,
  .bzr-article-hero-grid,
  .bzr-content-grid {
    grid-template-columns: 1fr;
  }

  .bzr-stage {
    min-height: 26rem;
  }

  .bzr-float {
    display: none;
  }

  .bzr-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .bzr-bento .bzr-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .bzr-price-grid,
  .bzr-summary-grid {
    grid-template-columns: 1fr;
  }

  /* Tablet: la rejilla del blog baja a 2 columnas (no salta a 1 de golpe). */
  .bzr-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bzr-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 40rem) {
  .bzr-blog-grid {
    grid-template-columns: 1fr;
  }
}

.bzr-metrics--top {
  margin-top: 1rem;
}

.bzr-orbit-visual--top {
  margin-top: 2rem;
}

.bzr-blog-grid--top {
  margin-top: 2rem;
}

.bzr-table--top {
  margin-top: 2rem;
}

.bzr-compliance--top {
  margin-top: 1rem;
}

/* ==========================================================================
   .bzr-phone — mockup de teléfono premium para el hero.
   Encaja en .bzr-stage igual que .bzr-product-window, pero en VERTICAL: marca
   el mensaje "app que se instala en tu móvil" del autónomo, frente al portal de
   escritorio de las gestorías. La pantalla es la app de facturación (Verifactu
   + QR). En vez de posición absoluta (.bzr-stage-main), va centrado en flujo:
   el stage crece a su altura y los .bzr-float anclan a las esquinas.
   ========================================================================== */
.bzr-phone {
  position: relative;
  z-index: 3;
  width: min(16rem, 68%);
  aspect-ratio: 9 / 19;
  margin-inline: auto;
  padding: .5rem;                 /* grosor del marco (bisel) */
  border-radius: 2.75rem;
  background: linear-gradient(155deg, var(--bzr-color-ink), var(--bzr-color-brand-navy));
  box-shadow: var(--bzr-shadow-window), inset 0 .0625rem 0 rgba(255, 255, 255, .14);
}

/* Isla superior (Dynamic Island): flota sobre la pantalla. */
.bzr-phone-island {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 1.15rem;
  border-radius: var(--bzr-radius-pill);
  background: var(--bzr-color-ink);
  z-index: 5;
}

.bzr-phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.25rem;
  border: var(--bzr-border);
  background: linear-gradient(180deg, var(--bzr-color-bg), var(--bzr-color-ice));
}

.bzr-phone-app {
  position: relative;
  z-index: 1;                     /* por encima de la marca de agua del fondo */
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
  padding: 2.4rem .8rem .9rem;    /* el top despeja la isla */
}

/* Marca de agua "B" dentro de la pantalla: ocupa la banda vacía entre la
   lista de facturas y el total. Va detrás del contenido de la app (z-index:0),
   así solo asoma en el hueco. Isotipo en color, sutil. */
.bzr-phone-brandmark {
  position: absolute;
  left: 50%;
  top: 82%;
  transform: translate(-50%, -50%);
  width: 70%;
  aspect-ratio: 1;
  z-index: 0;
  opacity: .12;
  pointer-events: none;
  background: url("../img/logo/b-bilzur.png") center / contain no-repeat;
}

.bzr-phone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}

.bzr-phone-head small {
  color: var(--bzr-color-muted);
  font-size: .625rem;
}

.bzr-phone-head strong {
  display: block;
  margin-top: .1rem;
  color: var(--bzr-color-ink);
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.bzr-phone-head .bzr-chip {
  padding: .25rem .5rem;
  font-size: .5625rem;
}

/* Factura protagonista + QR Verifactu. */
.bzr-phone-bill {
  padding: .8rem;
  border: var(--bzr-border);
  border-radius: var(--bzr-radius-window);
  background: var(--bzr-color-surface);
  box-shadow: var(--bzr-shadow-card);
}

.bzr-phone-bill-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}

.bzr-phone-bill-top small {
  color: var(--bzr-color-muted);
  font-size: .625rem;
}

.bzr-phone-bill-top b {
  display: block;
  margin-top: .1rem;
  color: var(--bzr-color-brand-navy);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.bzr-phone-qr {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: var(--bzr-border);
}

.bzr-phone-qr svg {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  color: var(--bzr-color-brand-navy);
}

.bzr-phone-qr span {
  color: var(--bzr-color-muted);
  font-size: .625rem;
  line-height: 1.35;
}

.bzr-phone-qr b {
  color: var(--bzr-color-ink);
  font-weight: 700;
}

/* Mini-lista de facturas: reusa .bzr-inv/.bzr-inv-row en 2 columnas (estrecho). */
.bzr-phone .bzr-inv {
  margin-top: 0;
}

.bzr-phone .bzr-inv-row {
  grid-template-columns: 1fr auto;
  gap: .4rem;
  padding: .4rem .55rem;
  font-size: .625rem;
}

/* Remate de total/estado, anclado abajo. */
.bzr-phone-total {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem .8rem;
  border-radius: var(--bzr-radius-control);
  background: var(--bzr-color-accent-soft);
}

.bzr-phone-total span {
  color: var(--bzr-color-accent-dark);
  font-size: .625rem;
  font-weight: 700;
}

.bzr-phone-total b {
  color: var(--bzr-color-brand-navy);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 62rem) {
  .bzr-phone {
    width: min(15rem, 72%);
  }
}

/* ==========================================================================
   Hero del teléfono: sello "B" de marca al fondo del stage + miniventanas
   (.bzr-mini) orbitando el móvil con inputs positivos. Clase A; se referencian
   desde el hero. Como los .bzr-float, se ocultan bajo 62rem (una sola columna).
   ========================================================================== */

/* Miniventana: chip-tarjeta ligera (pill) con icono + etiqueta breve. Más
   liviana que .bzr-float; puebla el aire alrededor del móvil sin recargar. */
.bzr-mini {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: max-content;
  max-width: 12rem;
  padding: .5rem .75rem;
  border-radius: var(--bzr-radius-pill);
  background: var(--bzr-color-surface);
  border: var(--bzr-border);
  box-shadow: var(--bzr-shadow-float);
  color: var(--bzr-color-ink);
  font-size: .75rem;
  font-weight: 700;
}

.bzr-mini svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--bzr-color-accent);
}

.bzr-mini--tl { top: .5rem; left: 0; }
.bzr-mini--tr { top: 0; right: .5rem; }
.bzr-mini--ml { top: 44%; left: -2.5rem; }
.bzr-mini--mr { top: 39%; right: -2.5rem; }

/* Bob vertical suave (sin rotación), escalonado por miniventana. */
@keyframes bzr-bob-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.4rem); }
}

.bzr-mini { animation: bzr-bob-y 7s var(--bzr-ease) infinite; }
.bzr-mini--tr { animation-duration: 8s; animation-delay: -2s; }
.bzr-mini--ml { animation-duration: 6.5s; animation-delay: -3.5s; }
.bzr-mini--mr { animation-duration: 7.5s; animation-delay: -1s; }

@media (max-width: 62rem) {
  .bzr-mini { display: none; }
}