/* =========================================================
   THEME: COMERCIAL
   Usage:
     <div class="bt-scope bt-theme--guides ..."> ... </div>
   Load AFTER bt-universal-landing-system.css
   ========================================================= */

/* =========================================
   BOOMTOWN FIX
========================================= */
.bt-content-wrapper .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* =========================================
   COMERCIAL · TOKENS (scope)
   - Adaptado al patrón de themes (como developments)
========================================= */
.bt-scope.bt-theme--guides {
  /* Fonts */
  --bt-font-display: "Inter", "Times New Roman", serif;
  --bt-font-body: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bt-font-heading: var(--bt-font-body);

  /* Ink (defaults) */
  --bt-navy: #0e243f;
  --bt-ink: #0b1b2a;
  --bt-h2-color: var(--bt-navy);
  --bt-text-color: var(--bt-ink);
  --bt-accent: var(--bt-navy);
  --bt-stage-bg: var(--bt-navy);

  /* Dark / Light surfaces controlled by the theme */
  --bt-bg: var(--bt-navy);
  --bt-surface: #ffffff;
  --bt-surface-2: #f5f3ee;
  --bt-ink-soft: rgba(11, 27, 42, .78);
  --bt-ink-muted: rgba(11, 27, 42, .62);
  --bt-p-color: rgba(255, 255, 255, .92);
  --bt-title-color: #ffffff;
  --bt-subtitle-color: rgba(255, 255, 255, .84);

  /* Hero title */
  --bt-hero-title-size: clamp(40px, 6vw, 90px);
  --bt-hero-title-letter-spacing: 0.11em;
  --bt-hero-title-line-height: 1.0;
  --bt-heroTitle-weight: 300;
  --bt-heroTitle-transform: uppercase;
  --bt-heroTitle-font: var(--bt-font-display);

  /* Hero subtitle */
  --bt-heroSubtitle-size: clamp(18px, 2.6vw, 38px);
  --bt-heroSubtitle-ls: .28em;
  --bt-heroSubtitle-lh: 1.05;
  --bt-heroSubtitle-underline-w: 62%;
  --bt-heroSubtitle-underline-a: .55;

  --bt-hero-height: 100svh;
  --bt-hero-minh: 680px;
  --bt-hero-maxh: 860px;

  --bt-hero-height-mobile: 100svh;
  --bt-hero-minh-mobile: 540px;
  --bt-hero-maxh-mobile: 760px;

  /* Meta */
  --bt-heroMeta-mt: auto;
  --bt-heroMeta-mb: 100px;
  --bt-heroBody-justify: center;
  --bt-heroBody-shiftY: 0px;
  --bt-heroContent-justify: center;
  --bt-heroMeta-pad-bottom: 0px;
  --bt-heroContent-pb: 0px;

  --bt-heroMeta-gap: 26px;
  --bt-heroMeta-icon: 45px;
  --bt-heroMeta-value: 20px;
  --bt-heroMeta-label: 20px;
  --bt-heroMeta-sep-w: 1px;
  --bt-heroMeta-sep-h: 22px;
  --bt-heroMeta-sep: rgba(255, 255, 255, .55);
  --bt-heroMeta-ink: rgba(255, 255, 255, .95);
  --bt-heroMeta-ink-soft: rgba(255, 255, 255, .85);
  --bt-heroMeta-shadow: 0 8px 26px rgba(0, 0, 0, .18);
  --bt-heroMeta-bg: rgba(0, 0, 0, .18);
  --bt-heroMeta-radius: 999px;
  --bt-heroMeta-pad-y: 10px;
  --bt-heroMeta-pad-x: 18px;

  /* H2 global landing (consumido por bt-universal) */
  --bt-title-mb: 5px;
  --bt-h2-size: clamp(30px, 4vw, 45px);
  --bt-h2-weight: 100;
  --bt-h2-ls: .12em;
  --bt-h2-lh: 1.05;

  --bt-subtitle-capsWide-ls: .38em;
  --bt-subtitle-capsWide-weight: 400;

  /* contenido */
  --bt-p-margin: 0 0 20px 0;
  --bt-p-align: justify;

  /* layout */
  --bt-pad-x: 100px;

  /* accordion (si aplica en tu universal) */
  --bt-acc-border: 0px solid rgba(255, 255, 255, 0.3);

  --bt-acc-icon-strokes-display: block;
  --bt-acc-icon-bg: transparent;
  --bt-acc-icon-radius: 0px;
  --bt-acc-icon-mask: none;
  --bt-acc-icon-mask-open: none;
  --bt-acc-icon-v-opacity: 1;
  --bt-acc-icon-v-opacity-open: 0;

  /* misc */
  --bt-translateHover: -100px;
  --bt-agentBand-pad-x: 170px;
  --bt-agentBand-photo: 250px;

  --bt-splitCta-media-minh: 520px;

  --bt-acc-maxw: 800px;
  --bt-acc-q-pad-y: 22px;
  --bt-acc-q-pad-x: 0px;

  --bt-acc-q-color: var(--bt-ink-soft);
  --bt-acc-q-color-hover: var(--bt-navy);

  --bt-acc-icon-size: 24px;
  --bt-acc-icon-stroke: 2px;
  --bt-acc-icon-gap: 20px;

  --bt-acc-a-pad-x: 20px;
  --bt-acc-a-pad-bottom: 25px;

  --bt-acc-a-color: rgba(255, 255, 255, 0.95);
  --bt-acc-a-size: 16px;
  --bt-acc-a-lh: 1.7;
  --bt-acc-a-indent: 40px;

  --bt-acc-dur: 300ms;
  --bt-acc-ease: ease;

}

/* =========================================
   TIPOGRAFÍA (global dentro del tema)
   - Igual patrón que developments (solo dentro del theme)
========================================= */
.bt-scope.bt-theme--guides h1,
.bt-scope.bt-theme--guides h2,
.bt-scope.bt-theme--guides .bt-main-title,
.bt-scope.bt-theme--guides .bt-title--h1,
.bt-scope.bt-theme--guides .bt-title--h2 {
  font-family: var(--bt-font-display, var(--bt-font-heading)) !important;
}

/* Si quieres forzar body/textos al font-body dentro del tema */
.bt-scope.bt-theme--guides p,
.bt-scope.bt-theme--guides .bt-text,
.bt-scope.bt-theme--guides .bt-subtitle,
.bt-scope.bt-theme--guides .bt-subtitle--capsWide {
  font-family: var(--bt-font-body) !important;
}

/* =========================================
   DARK / LIGHT SECTION BEHAVIOR
   - Keep section tokens predictable inside this theme
========================================= */
.bt-scope.bt-theme--guides .bt-section--dark {
  background: var(--bt-bg, var(--bt-navy)) !important;
  color: #ffffff !important;
  --bt-h1-color: #ffffff;
  --bt-h2-color: #ffffff;
  --bt-h3-color: #ffffff;
  --bt-title-color: #ffffff;
  --bt-subtitle-color: rgba(255, 255, 255, .84);
  --bt-p-color: rgba(255, 255, 255, .92);
}

.bt-scope.bt-theme--guides .bt-section--dark .bt-title,
.bt-scope.bt-theme--guides .bt-section--dark h1,
.bt-scope.bt-theme--guides .bt-section--dark h2,
.bt-scope.bt-theme--guides .bt-section--dark h3,
.bt-scope.bt-theme--guides .bt-section--dark .bt-subtitle,
.bt-scope.bt-theme--guides .bt-section--dark .bt-text,
.bt-scope.bt-theme--guides .bt-section--dark p {
  color: inherit;
}

.bt-scope.bt-theme--guides .bt-section--light {
  background: var(--bt-surface, #ffffff) !important;
  color: var(--bt-ink) !important;
  --bt-h1-color: var(--bt-ink);
  --bt-h2-color: var(--bt-ink);
  --bt-h3-color: var(--bt-ink);
  --bt-title-color: var(--bt-ink);
  --bt-subtitle-color: var(--bt-ink-soft);
  --bt-p-color: var(--bt-ink-soft);
}

.bt-scope.bt-theme--guides .bt-section--light .bt-title,
.bt-scope.bt-theme--guides .bt-section--light h1,
.bt-scope.bt-theme--guides .bt-section--light h2,
.bt-scope.bt-theme--guides .bt-section--light h3 {
  color: var(--bt-ink) !important;
}

.bt-scope.bt-theme--guides .bt-section--light .bt-subtitle,
.bt-scope.bt-theme--guides .bt-section--light .bt-text,
.bt-scope.bt-theme--guides .bt-section--light p {
  color: var(--bt-ink-soft) !important;
}

/* =========================================
   MEDIA QUERIES (fuera del scope)
========================================= */
@media (max-width: 768px) {
  .bt-scope.bt-theme--guides {
    --bt-pad-x: clamp(16px, 4vw, 24px);
    --bt-agentBand-pad-x: 10px;
  }

  /* Mantengo tu ajuste original para headingsStack */
  .bt-scope.bt-theme--guides .bt-headingStack--lux {
    --bt-title-capsWide-ls: .18em;
    --bt-subtitle-capsWide-ls: .26em;
  }
}