/* ===== YouBIM PM – CSS GLOBAL (WPBakery) ===== */
/* Scope: solo afecta a la landing dentro de .ybpm-landing */
.ybpm-landing {
  --ybpm-bg:#ffffff;
  --ybpm-text:#13223b;
  --ybpm-muted:#6c7a91;
  --ybpm-primary:#1976d2;
  --ybpm-primary-2:#0f5ec4;
  --ybpm-surface:#f6f9ff;
  --ybpm-border:#e8edf7;
  --ybpm-radius:18px;
  --ybpm-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Contenedor y tipografía base de secciones */
.ybpm-landing .ybpm-container{ width:min(1180px,92%); margin-inline:auto; }
.ybpm-landing .ybpm-section{ padding:clamp(44px,8vw,96px) 0; }
.ybpm-landing .ybpm-h2{ font-size:clamp(24px,3.5vw,40px); margin:0 0 16px; letter-spacing:-.01em; }
.ybpm-landing .ybpm-sub{ margin:0 0 20px; color:var(--ybpm-muted); }
.ybpm-landing .ybpm-eyebrow{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ybpm-muted); margin:0 0 6px }

/* Botones */
.ybpm-landing .ybpm-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.15rem; border-radius:999px; text-decoration:none;
  font-weight:700; border:1px solid transparent;
  transition:transform .08s ease, filter .2s ease;
}
.ybpm-landing .ybpm-btn:active{ transform:translateY(1px) }
.ybpm-landing .ybpm-btn--primary{ background:var(--ybpm-primary); color:#fff }
.ybpm-landing .ybpm-btn--primary:hover{ filter:brightness(1.05) }
.ybpm-landing .ybpm-btn--secondary{ background:#fff; color:var(--ybpm-primary); border-color:var(--ybpm-border) }
.ybpm-landing .ybpm-btn--ghost{ background:transparent; color:var(--ybpm-text); border-color:var(--ybpm-border) }

/* HERO */
.ybpm-landing .ybpm-hero{
  background:linear-gradient(140deg, var(--ybpm-primary) 0%, var(--ybpm-primary-2) 50%, #093e8b 100%);
  color:#fff; position:relative; overflow:visible !important;
}
/* Fix extra por si WPBakery/tema fuerza overflow en la fila que contiene el Raw HTML */
.vc_row.ybpm-hero, .ybpm-hero { overflow: visible !important; }

.ybpm-landing .ybpm-hero:before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:80%;
  background:radial-gradient(1000px 400px at 80% 10%, rgba(255,255,255,.12), transparent 60%);
}
.ybpm-landing .ybpm-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center }
.ybpm-landing .ybpm-hero__title{ font-size:clamp(32px,4.6vw,56px); line-height:1.1; margin:0 0 10px }
.ybpm-landing .ybpm-hero__subtitle{ margin:0 0 18px; color:#e7f0ff }
.ybpm-landing .ybpm-hero__cta{ display:flex; flex-wrap:wrap; gap:12px }
.ybpm-landing .ybpm-hero__media{ position:relative; min-height:420px }
.ybpm-landing .ybpm-card{
  position:absolute; z-index:2; left:6%; top:8%;
  background:#fff; color:var(--ybpm-text); border-radius:16px;
  box-shadow:var(--ybpm-shadow); padding:18px; max-width:320px;
}
.ybpm-landing .ybpm-card__title{ margin:0 0 6px; font-weight:800 }
.ybpm-landing .ybpm-card__text{ margin:0 0 10px; color:var(--ybpm-muted) }
.ybpm-landing .ybpm-card__btn{ width:100%; justify-content:center }
.ybpm-landing .ybpm-hero__mock{ position:absolute; filter:drop-shadow(0 22px 30px rgba(0,0,0,.25)) }
.ybpm-landing .ybpm-hero__mock--phone{ right:6%; top:14%; width:220px; height:auto }
.ybpm-landing .ybpm-hero__mock--laptop{ left:10%; bottom:-10px; width:min(640px,46vw); height:auto }

/* Bullets */
.ybpm-landing .ybpm-points__wrap{ display:grid; place-items:center; text-align:center }
.ybpm-landing .ybpm-points__list{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px; list-style:none; margin:12px 0 18px; padding:0; max-width:900px;
}
.ybpm-landing .ybpm-points__list li{
  background:var(--ybpm-surface); border:1px solid var(--ybpm-border);
  border-radius:14px; padding:14px;
}

/* Compare */
.ybpm-landing .ybpm-compare{ background:linear-gradient(135deg, #eaf3ff 0%, #f7fbff 60%, #ffffff 100%) }
.ybpm-landing .ybpm-compare__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.ybpm-landing .ybpm-compare__col{
  background:linear-gradient(160deg, #2a78d6, #1a59b7);
  border-radius:18px; padding:20px; color:#fff; box-shadow:var(--ybpm-shadow);
}
.ybpm-landing .ybpm-compare__col--muted{ background:linear-gradient(160deg, #b7c8e5, #8aa0c7) }
.ybpm-landing .ybpm-checks, .ybpm-landing .ybpm-crosses{ list-style:none; margin:10px 0 0; padding:0 }
.ybpm-landing .ybpm-checks li:before{ content:"✓"; margin-right:10px }
.ybpm-landing .ybpm-crosses li:before{ content:"✕"; margin-right:10px }

/* Roles */
.ybpm-landing .ybpm-roles__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:start }
.ybpm-landing .ybpm-role{
  background:#fff; border:1px solid var(--ybpm-border);
  border-radius:16px; padding:16px; text-align:center; box-shadow:var(--ybpm-shadow);
}
.ybpm-landing .ybpm-role h3{ margin:10px 0 6px }
.ybpm-landing .ybpm-role p{ margin:0; color:var(--ybpm-muted) }

/* Pricing */
.ybpm-landing .ybpm-pricing__box{
  background:linear-gradient(140deg, #2a78d6, #13479f);
  color:#fff; border-radius:22px; padding:clamp(24px,4.5vw,40px);
  box-shadow:var(--ybpm-shadow); text-align:center;
}
.ybpm-landing .ybpm-pricing__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px }
.ybpm-landing .ybpm-price{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:16px; padding:16px }
.ybpm-landing .ybpm-price__value{ display:flex; justify-content:center; align-items:flex-end; gap:8px; line-height:1 }
.ybpm-landing .ybpm-price__curr{ opacity:.9 }
.ybpm-landing .ybpm-price__num{ font-size:56px; font-weight:800 }
.ybpm-landing .ybpm-price__label{ margin:4px 0 12px; opacity:.9 }

/* Preview */
.ybpm-landing .ybpm-preview__wrap{
  border-radius:18px; overflow:hidden; border:1px solid var(--ybpm-border);
  box-shadow:var(--ybpm-shadow);
}
.ybpm-landing .ybpm-preview__wrap img{ display:block; width:100%; height:auto }

/* FAQ */
.ybpm-landing .ybpm-faq__list{ display:grid; gap:10px; max-width:860px }
.ybpm-landing .ybpm-faq details{ background:#fff; border:1px solid var(--ybpm-border); border-radius:12px; padding:12px }
.ybpm-landing .ybpm-faq summary{ cursor:pointer; font-weight:700 }

/* Logos */
.ybpm-landing .ybpm-logos__row{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:18px; align-items:center; justify-items:center }
.ybpm-landing .ybpm-logos__row img{ filter:grayscale(1); opacity:.85 }

/* Responsive */
@media (max-width: 1000px){
  .ybpm-landing .ybpm-hero__grid{ grid-template-columns:1fr }
  .ybpm-landing .ybpm-hero__media{ min-height:480px }
  .ybpm-landing .ybpm-points__list{ grid-template-columns:1fr }
  .ybpm-landing .ybpm-compare__grid{ grid-template-columns:1fr }
  .ybpm-landing .ybpm-roles__grid{ grid-template-columns:1fr }
  .ybpm-landing .ybpm-pricing__grid{ grid-template-columns:1fr }
}


/* --- HERO ajuste layout y contraste --- */
.ybpm-landing .ybpm-hero{padding:clamp(80px,10vw,140px) 0 0}
.ybpm-landing .ybpm-hero__media{min-height:560px}
.ybpm-landing .ybpm-card{left:8%; top:6%; max-width:340px}
.ybpm-landing .ybpm-hero__mock--laptop{left:50%; bottom:-40px; transform:translateX(-40%); width:min(820px,70vw)}
.ybpm-landing .ybpm-hero__mock--phone{right:10%; top:10%; width:240px}

/* --- Títulos y secciones --- */
.ybpm-landing .ybpm-h2{color:#0f2f5e}
.ybpm-landing .ybpm-compare .ybpm-h2, .ybpm-landing .ybpm-pricing__box .ybpm-h2{color:#fff}

/* --- Compare: más definición y legibilidad --- */
.ybpm-landing .ybpm-compare{padding:clamp(44px,6vw,72px) 0}
.ybpm-landing .ybpm-compare__col{backdrop-filter:saturate(140%) blur(.5px)}

/* --- Roles: alinear alturas y suavizar cards --- */
.ybpm-landing .ybpm-roles__grid{gap:28px}
.ybpm-landing .ybpm-role{padding:18px}
.ybpm-landing .ybpm-role img{width:100%; height:320px; object-fit:contain; object-position:center; margin-bottom:10px}

/* --- Pricing: mejorar contraste y jerarquía --- */
.ybpm-landing .ybpm-pricing__box{box-shadow:0 20px 50px rgba(13,57,109,.25)}
.ybpm-landing .ybpm-price{background:rgba(255,255,255,.14)}
.ybpm-landing .ybpm-price__num{font-size:64px}
.ybpm-landing .ybpm-price .ybpm-btn{margin-top:6px}

/* --- Preview: centrar ancho --- */
.ybpm-landing .ybpm-preview__wrap{max-width:1120px; margin-inline:auto}

/* --- FAQ & Logos --- */
.ybpm-landing .ybpm-faq summary{font-size:16px}
.ybpm-landing .ybpm-logos__row img{opacity:.9; filter:grayscale(1) contrast(.9)}

/* --- Anclas con header fijo --- */
.ybpm-landing :where(#pricing,#demo){scroll-margin-top:96px}