/* =========================================================
   BASE — todo escopado bajo #bm-page para que los estilos
   globales de Elementor (kit) no pisen la landing
========================================================= */
#bm-page{
  --bm-yellow:#ffd200;
  --bm-yellow-h:#e6bd00;
  --bm-ink:#111111;
  --bm-bg:#f7f7f7;
  --bm-bg2:#efefef;
  color:var(--bm-ink);
  font-family:'Montserrat',sans-serif;
  background:var(--bm-bg);
}
#bm-page *, #bm-page *::before, #bm-page *::after{ box-sizing:border-box; }
#bm-page .bm__container{ max-width:1400px; margin:0 auto; padding:0 40px; }
#bm-page img{ display:block; max-width:100%; }
#bm-page h1, #bm-page h2, #bm-page h3, #bm-page p, #bm-page ul, #bm-page li, #bm-page a, #bm-page span{
  font-family:'Montserrat',sans-serif;
  letter-spacing:0;
}
#bm-page a{ text-decoration:none; }
#bm-page ul{ list-style:none; }

/* =========================================================
   HERO — H1: 600 · 100px · 93% | Sub: 500 · 35px · 110%
========================================================= */
#bm-page .bm-hero{
  position:relative; color:#fff; text-align:center;
  padding:140px 20px; background:#000 center center / cover no-repeat;
}
#bm-page .bm-hero__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
#bm-page .bm-hero__inner{ position:relative; z-index:1; }
#bm-page .bm-hero__title{
  margin:0 auto 30px; max-width:1500px;
  font-weight:600;
  font-size:clamp(42px, 5.208vw, 100px);
  line-height:93%;
  color:#fff;
}
#bm-page .bm-hero__subtitle{
  margin:0 auto; max-width:1000px;
  font-weight:500;
  font-size:clamp(18px, 1.823vw, 35px);
  line-height:110%;
  color:#fff;
}

/* =========================================================
   SECCIONES / TITULARES
   ¿Qué es?: 700 · 80px · 110% | ¿Por qué?: 700 · 65px · 105%
========================================================= */
#bm-page .bm-section{ padding:110px 0; }
#bm-page .bm-section--alt{ background:var(--bm-bg2); }
#bm-page .bm-section--stats{ padding:90px 0; }
#bm-page .bm-h2{
  margin:0 0 40px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--bm-ink);
}
#bm-page .bm-h2--que{
  font-size:clamp(34px, 4.167vw, 80px);
  line-height:110%;
}
#bm-page .bm-h2--porque{
  font-size:clamp(30px, 3.385vw, 65px);
  line-height:105%;
}
/* Cada línea del titular forzada a una sola línea (2 líneas totales) */
#bm-page .bm-h2__line{ display:inline-block; white-space:nowrap; }
#bm-page .bm-highlight{ display:inline-block; background:var(--bm-yellow); padding:2px 16px; }
#bm-page .bm-split__copy{ min-width:0; }

/* Párrafos "qué es": 400 · 20px · 110% */
#bm-page .bm-p{
  margin:0 0 26px; max-width:700px;
  font-weight:400;
  font-size:clamp(15px, 1.042vw, 20px);
  line-height:110%;
  color:#222;
}

/* Layout texto + imagen inclinada */
#bm-page .bm-split{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
#bm-page .bm-skew{ clip-path:polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
#bm-page .bm-skew img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   EDICIONES — cards como imágenes 680×380 con crossfade al hover
   (width 680 · height 380 · opacity 1, según Figma)
========================================================= */
#bm-page .bm-section--alt:has(.bm-editions) .bm__container{ max-width:1500px; }
#bm-page .bm-editions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 680px));
  gap:60px;
  justify-content:center;
}
#bm-page .bm-edition{
  position:relative; display:block;
  width:100%; max-width:680px;
  aspect-ratio:680 / 380;  /* clava 680×380 a tamaño completo */
  margin:0 auto;
  opacity:1;
}
#bm-page .bm-edition__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;              /* antes: cover → recortaba y desplazaba */
  display:block;
  transition:opacity .3s ease;
}
#bm-page .bm-edition__img--hover{ opacity:0; }
#bm-page .bm-edition:hover .bm-edition__img--normal,
#bm-page .bm-edition:focus-visible .bm-edition__img--normal{ opacity:0; }
#bm-page .bm-edition:hover .bm-edition__img--hover,
#bm-page .bm-edition:focus-visible .bm-edition__img--hover{ opacity:1; }

/* =========================================================
   CHECKLIST — 400 · 25px · 110%
========================================================= */
#bm-page .bm-checks{ margin:0; padding:0; list-style:none; }
#bm-page .bm-checks li{ display:flex; gap:18px; align-items:flex-start; margin-bottom:30px; max-width:760px; }
#bm-page .bm-checks svg{
  flex:none; margin-top:4px;
  width:clamp(22px, 1.56vw, 30px); height:clamp(22px, 1.56vw, 30px);
  stroke:var(--bm-yellow);
}
#bm-page .bm-checks span{
  font-weight:400;
  font-size:clamp(16px, 1.302vw, 25px);
  line-height:110%;
  color:#222;
}

/* =========================================================
   STATS — num 700 · 80px · 110% | label 400 · 35px · 110%
   Alineadas en línea, el "+" nunca salta del número
========================================================= */
#bm-page .bm-section--stats .bm__container{ max-width:1800px; }
#bm-page .bm-stats{ display:grid; grid-template-columns:repeat(4, 1fr); }
#bm-page .bm-stat{
  display:flex; flex-direction:column; justify-content:center;
  min-width:0; text-align:center;
  padding:10px 24px; border-right:2px solid var(--bm-yellow);
}
#bm-page .bm-stat:last-child{ border-right:0; }
#bm-page .bm-stat__num{
  margin:0 0 10px;
  font-weight:700;
  font-size:clamp(36px, 4.167vw, 80px);
  line-height:110%;
  white-space:nowrap;
  color:var(--bm-ink);
}
#bm-page .bm-stat__label{
  margin:0 auto; max-width:340px;
  font-weight:400;
  font-size:clamp(18px, 1.823vw, 35px);
  line-height:110%;
  color:#222;
}

/* =========================================================
   CTA FINAL — title 700 · 65px · 94% | sub 500 · 35px · 110%
========================================================= */
#bm-page .bm-cta{
  position:relative; text-align:center; color:#fff;
  padding:120px 20px; background:#222 center center / cover no-repeat;
}
#bm-page .bm-cta__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
#bm-page .bm-cta__inner{ position:relative; z-index:1; }
#bm-page .bm-cta__title{
  margin:0 auto 26px; max-width:1200px;
  font-weight:700;
  font-size:clamp(30px, 3.385vw, 65px);
  line-height:94%;
  color:#fff;
}
#bm-page .bm-cta__subtitle{
  margin:0 0 44px;
  font-weight:500;
  font-size:clamp(18px, 1.823vw, 35px);
  line-height:110%;
  color:#fff;
}
#bm-page .bm-cta__btns{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   BOTONES — 700 · 20px · 110%
========================================================= */
#bm-page .bm-btn{
  display:inline-block; background:var(--bm-yellow); color:#111 !important;
  padding:16px 32px; border-radius:4px;
  font-weight:700;
  font-size:clamp(14px, 1.042vw, 20px);
  line-height:110%;
  text-decoration:none !important; transition:background .18s ease;
}
#bm-page .bm-btn:hover{ background:var(--bm-yellow-h); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1000px){
  #bm-page .bm-split{ grid-template-columns:1fr; gap:44px; }
  #bm-page .bm-split__media{ max-width:560px; }
  #bm-page .bm-editions{ grid-template-columns:minmax(0, 680px); }
  #bm-page .bm-stats{ grid-template-columns:repeat(2, 1fr); gap:34px 0; }
  #bm-page .bm-stat:nth-child(2){ border-right:0; }
}
@media (max-width:640px){
  #bm-page .bm-section{ padding:60px 0; }
  #bm-page .bm-hero{ padding:80px 20px; }
  #bm-page .bm-stats{ grid-template-columns:1fr; }
  #bm-page .bm-stat{ border-right:0; border-bottom:2px solid var(--bm-yellow); padding-bottom:24px; }
  #bm-page .bm-stat:last-child{ border-bottom:0; }
}