/* BRODWAYBARBER — editorial premium, mobile-first */

:root {
  --bg: #faf8f3;
  --bg-soft: #f3efe6;
  --ink: #14110c;
  --ink-soft: #2a251c;
  --muted: #6b6256;
  --line: #d9d2c4;
  --line-soft: #e8e2d4;
  --gold: #b8924a;
  --gold-deep: #8f6f33;
  --gold-tint: #e9dcb8;
  --paper: #ffffff;
  --shadow-sm: 0 1px 2px rgba(20, 17, 12, 0.06);
  --shadow-md: 0 8px 24px -10px rgba(20, 17, 12, 0.18);
  --shadow-lift: 0 14px 30px -12px rgba(20, 17, 12, 0.28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ───────────── App shell (responsive, sin marco de dispositivo) ───────────── */

.bb-shell {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}

/* Escritorio: la web se presenta como una columna editorial centrada,
   sobre un fondo oscuro con la retícula estilo mapa de metro — el
   "formato PC" del sitio. */
@media (min-width: 860px) {
  body {
    background:
      radial-gradient(rgba(184,146,74,0.14) 1px, transparent 1.4px) 0 0 / 34px 34px,
      linear-gradient(0deg, rgba(184,146,74,0.05) 1px, transparent 1px) 0 0 / 34px 34px,
      linear-gradient(90deg, rgba(184,146,74,0.05) 1px, transparent 1px) 0 0 / 34px 34px,
      #100e0a;
  }

  .bb-shell {
    max-width: 620px;
    height: auto;
    min-height: calc(100dvh - 96px);
    max-height: calc(100dvh - 96px);
    margin: 48px auto;
    border-radius: 3px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 0 1px rgba(184,146,74,0.18);
  }
}

@media (min-width: 1200px) {
  .bb-shell { max-width: 680px; }
}

/* ───────────── Type system ───────────── */

.bb-display {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.0;
}

.bb-display-roman {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
}

.bb-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.bb-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.bb-body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.bb-small {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* ───────────── Wordmark ───────────── */

.bb-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bb-wordmark .rule {
  width: 100%;
  height: 1px;
  background: var(--gold);
}

.bb-wordmark .name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.bb-wordmark .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ───────────── Buttons ───────────── */

.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 0;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.bb-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.bb-btn:active { transform: translateY(1px); box-shadow: none; }
.bb-btn:disabled { cursor: default; transform: none; box-shadow: none; }

.bb-btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--paper);
}

.bb-btn--ghost {
  background: transparent;
  color: var(--ink);
}

.bb-btn--ghost-light {
  background: transparent;
  color: var(--bg);
  border-color: rgba(250, 248, 243, 0.4);
}

.bb-btn--block { width: 100%; }

/* ───────────── Placeholder image ───────────── */

.bb-ph {
  position: relative;
  background:
    linear-gradient(160deg, rgba(184,146,74,0.10) 0%, transparent 45%),
    repeating-linear-gradient(
      135deg,
      var(--bg-soft) 0px,
      var(--bg-soft) 8px,
      var(--line-soft) 8px,
      var(--line-soft) 9px
    ),
    var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bb-ph--dark {
  background:
    linear-gradient(160deg, rgba(184,146,74,0.16) 0%, transparent 50%),
    repeating-linear-gradient(
      135deg,
      #1a1814 0px,
      #1a1814 8px,
      #25211a 8px,
      #25211a 9px
    );
}

.bb-ph__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  padding: 4px 8px;
  border: 1px solid var(--line);
  text-align: center;
}

.bb-ph--dark .bb-ph__label {
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.15);
}

/* ───────────── Section ───────────── */

.bb-section {
  padding: 56px 24px;
  background: var(--bg);
}

.bb-section--paper { background: var(--paper); }

/* Dark sections get a faint NYC transit-map grid — thin crossing lines with
   a dot at each intersection, echoing a subway map without needing a photo. */
.bb-section--ink {
  background:
    radial-gradient(rgba(184,146,74,0.16) 1px, transparent 1.4px) 0 0 / 34px 34px,
    linear-gradient(0deg, rgba(184,146,74,0.07) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(184,146,74,0.07) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--ink);
  color: var(--bg);
}

.bb-section--ink .bb-section-head h2 {
  text-shadow: 0 0 22px rgba(184,146,74,0.35);
}

.bb-section-head {
  text-align: center;
  margin-bottom: 32px;
}

.bb-section-head .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 0.3em;
  margin-bottom: 14px;
}

.bb-section-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.05;
  margin: 0 0 12px;
  color: inherit;
}

.bb-section-head p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 auto;
  max-width: 280px;
  line-height: 1.55;
}

.bb-section--ink .bb-section-head p { color: rgba(250,248,243,0.65); }

/* Decorative gold rule */
.bb-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 18px;
}
.bb-rule::before, .bb-rule::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.bb-rule .dot {
  width: 4px; height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ───────────── Cards / Tiles ───────────── */

.bb-tile {
  background: var(--paper);
  border: 1px solid var(--line-soft);
}

/* Hover/tap lift used on product cards, testimonials and gallery tiles */
.bb-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bb-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.bb-lift:active { transform: translateY(-1px); }

/* ───────────── Misc ───────────── */

.bb-divider {
  height: 1px;
  background: var(--line-soft);
}

.bb-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.bb-chip:hover { border-color: var(--gold); }
.bb-chip:active { transform: scale(0.96); }

.bb-chip--active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.bb-chip--gold {
  background: var(--gold);
  color: var(--paper);
  border-color: var(--gold);
}

/* Focus ring — accesibilidad + pulido en formularios */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 146, 74, 0.22);
}

/* Scroll-snap horizontal rails */
.bb-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 24px 8px;
  margin: 0 -24px;
  scrollbar-width: none;
}
.bb-rail::-webkit-scrollbar { display: none; }
.bb-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Hide scrollbars on the inner page scroll */
.bb-page::-webkit-scrollbar { width: 0; }
.bb-page { scrollbar-width: none; }

/* Botón secundario de pago con tarjeta */
.bb-btn--card {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
}