/*
 * Bonjour Marketing Digital — V2 Design System
 * Base visual inspirada en interfaces Apple: claridad, aire, jerarquía,
 * materiales translúcidos, movimiento sutil y foco en conversión.
 */

:root {
  --bj-brand: #1b407d;
  --bj-brand-deep: #083f79;
  --bj-brand-dark: #052f5e;
  --bj-accent: #168cff;
  --bj-accent-2: #48a8ff;
  --bj-red: #ec3450;
  --bj-text: #111827;
  --bj-text-soft: #596474;
  --bj-white: #ffffff;
  --bj-surface: #f7f8fa;
  --bj-surface-2: #eef1f5;
  --bj-line: rgba(17, 24, 39, 0.10);
  --bj-line-on-dark: rgba(255, 255, 255, 0.20);
  --bj-silver-a: #ececec;
  --bj-silver-b: #a9a9aa;

  --bj-radius-sm: 14px;
  --bj-radius-md: 24px;
  --bj-radius-lg: 34px;
  --bj-radius-pill: 999px;

  --bj-shadow-soft: 0 18px 55px rgba(4, 24, 52, 0.10);
  --bj-shadow-glass: 0 18px 55px rgba(4, 24, 52, 0.16);

  --bj-container: 1320px;
  --bj-gutter: clamp(20px, 4vw, 64px);
  --bj-section-y: clamp(76px, 9vw, 150px);

  --bj-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

.bonjour-v2 {
  color: var(--bj-text);
  background: var(--bj-white);
  font-family: var(--bj-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bonjour-v2 *,
.bonjour-v2 *::before,
.bonjour-v2 *::after {
  box-sizing: border-box;
}

.bonjour-v2 img {
  max-width: 100%;
  height: auto;
}

.bj-wrap {
  width: min(calc(100% - (var(--bj-gutter) * 2)), var(--bj-container));
  margin-inline: auto;
}

.bj-section {
  position: relative;
  padding-block: var(--bj-section-y);
}

.bj-section--blue {
  color: var(--bj-white);
  background:
    radial-gradient(circle at 72% 18%, rgba(40, 145, 255, 0.18), transparent 36%),
    linear-gradient(145deg, var(--bj-brand) 0%, var(--bj-brand-deep) 55%, var(--bj-brand-dark) 100%);
}

.bj-hero {
  position: relative;
  overflow: clip;
  color: var(--bj-white);
  background:
    linear-gradient(180deg, rgba(5, 48, 95, 0.02), rgba(5, 48, 95, 0.18)),
    linear-gradient(145deg, var(--bj-brand) 0%, var(--bj-brand-deep) 58%, var(--bj-brand-dark) 100%);
}

.bj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../brand/hero-lines.svg") center / cover no-repeat;
  opacity: 0.62;
}

.bj-hero > * {
  position: relative;
  z-index: 1;
}

.bj-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 15px;
  border-radius: 9px;
  background: var(--bj-accent);
  color: var(--bj-white);
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.01em;
}

.bj-display {
  margin: 0;
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 560;
}

.bj-h2 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 560;
}

.bj-lead {
  margin: 0;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.48;
  letter-spacing: -0.02em;
}

.bj-copy {
  color: var(--bj-text-soft);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
}

.bj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--bj-radius-pill);
  text-decoration: none;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.bj-btn:hover {
  transform: translateY(-1px);
}

.bj-btn--primary {
  color: var(--bj-white);
  background: linear-gradient(180deg, #2698ff, #087df0);
  box-shadow: 0 10px 30px rgba(16, 137, 255, 0.28);
}

.bj-btn--ghost-light {
  color: var(--bj-white);
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
}

.bj-btn--ghost-dark {
  color: var(--bj-brand);
  border-color: rgba(27, 64, 125, 0.35);
  background: rgba(255, 255, 255, 0.66);
}

.bj-glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.58));
  border: 1px solid rgba(255,255,255,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    var(--bj-shadow-glass);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
}

.bj-card {
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-md);
  background: var(--bj-white);
  box-shadow: 0 1px 0 rgba(255,255,255,0.60);
}

.bj-card--silver {
  color: var(--bj-white);
  border-color: rgba(255,255,255,0.30);
  background:
    linear-gradient(145deg, rgba(232,232,232,0.96), rgba(157,157,159,0.93));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    0 18px 45px rgba(0,0,0,0.10);
}

.bj-grid {
  display: grid;
  gap: clamp(18px, 2vw, 32px);
}

.bj-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bj-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bj-underline-draw {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.bj-underline-draw::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.12em;
  height: 0.18em;
  border-radius: 100%;
  background: var(--bj-accent);
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left center;
  transition: transform 760ms cubic-bezier(.22,.8,.25,1);
  z-index: -1;
  opacity: 0.92;
}

.bj-underline-draw.is-visible::after {
  transform: scaleX(1) rotate(-1deg);
}

.bj-sticky-shell {
  margin-inline: clamp(14px, 6vw, 96px);
  border-radius: 0;
  transition:
    margin 260ms ease,
    border-radius 260ms ease,
    transform 260ms ease,
    box-shadow 260ms ease,
    background-color 260ms ease;
}

.bj-sticky-shell.is-stuck {
  margin-top: 14px;
  border-radius: 26px;
  box-shadow: var(--bj-shadow-glass);
}

.bj-prose {
  max-width: 780px;
}

.bj-muted {
  color: var(--bj-text-soft);
}

.bj-separator {
  height: 1px;
  background: var(--bj-line);
}

.bj-on-dark .bj-separator {
  background: var(--bj-line-on-dark);
}

@media (max-width: 1024px) {
  .bj-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --bj-gutter: 20px;
    --bj-section-y: 72px;
  }

  .bj-grid--3,
  .bj-grid--4 {
    grid-template-columns: 1fr;
  }

  .bj-display {
    font-size: clamp(42px, 13vw, 62px);
  }

  .bj-h2 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .bj-sticky-shell {
    margin-inline: 10px;
  }

  .bj-sticky-shell.is-stuck {
    margin-top: 8px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonjour-v2 *,
  .bonjour-v2 *::before,
  .bonjour-v2 *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bj-underline-draw::after {
    transform: scaleX(1) rotate(-1deg);
  }
}