/* ============ Sistema de color (azules suaves) ============ */
:root{
  --bg: #f6faff;
  --soft: #eef5ff;
  --card: #ffffff;
  --text: #0b1b33;
  --muted: #5b6b80;

  --primary: #2d6cdf;   /* azul suave principal */
  --primary-2: #5aa7ff; /* acento más claro */
  --border: rgba(15, 40, 80, .10);
  --shadow: 0 10px 30px rgba(20, 60, 120, .10);
  --shadow-soft: 0 8px 22px rgba(20, 60, 120, .08);

  --radius: 18px;
}

html, body{
  background: var(--bg);
  color: var(--text);
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ============ Ajustes Bootstrap ============ */
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 10px 20px rgba(45, 108, 223, .18);
}
.btn-primary:hover{
  background: #255fc9;
  border-color: #255fc9;
}
.btn-outline-primary{
  border-color: rgba(45, 108, 223, .35);
  color: var(--primary);
}
.btn-outline-primary:hover{
  background: rgba(45, 108, 223, .08);
  border-color: rgba(45, 108, 223, .50);
  color: #255fc9;
}

.form-control:focus{
  border-color: rgba(45,108,223,.45);
  box-shadow: 0 0 0 .25rem rgba(45,108,223,.12);
}

.section{
  scroll-margin-top: 90px;
}

/* ============ Topbar / Navbar ============ */
.topbar{
  background: linear-gradient(90deg, rgba(45,108,223,.06), rgba(90,167,255,.08));
  border-bottom: 1px solid var(--border);
}

.icon-link{
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.icon-link:hover{
  transform: translateY(-1px);
  background: rgba(45,108,223,.06);
}

.nav-glass{
  background: rgba(246, 250, 255, .72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,40,80,.06);
  transition: box-shadow .2s ease, background .2s ease;
}
.nav-scrolled{
  background: rgba(246, 250, 255, .92);
  box-shadow: var(--shadow-soft);
}

.navbar-brand .brand-dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--primary-2), var(--primary));
  box-shadow: 0 6px 14px rgba(45,108,223,.25);
  display: inline-block;
}

.navbar .nav-link{
  color: rgba(11, 27, 51, .72);
  font-weight: 500;
}
.navbar .nav-link:hover{
  color: rgba(11, 27, 51, .95);
}

/* ============ Hero ============ */
.hero-section{
  position: relative;
  overflow: hidden;
}
.hero-section::before{
  content:"";
  position:absolute;
  inset:-200px -200px auto -200px;
  height: 520px;
  background:
    radial-gradient(closest-side at 25% 40%, rgba(90,167,255,.25), transparent 65%),
    radial-gradient(closest-side at 70% 30%, rgba(45,108,223,.18), transparent 60%),
    radial-gradient(closest-side at 55% 65%, rgba(45,108,223,.10), transparent 60%);
  pointer-events:none;
  filter: blur(2px);
}

.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: rgba(45,108,223,.08);
  border: 1px solid rgba(45,108,223,.14);
  color: rgba(11,27,51,.82);
  font-weight: 600;
  font-size: .9rem;
}

.text-gradient{
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:.35rem .65rem;
  border-radius: 999px;
  background: rgba(45,108,223,.08);
  border: 1px solid rgba(45,108,223,.14);
  font-size: .85rem;
  color: rgba(11,27,51,.8);
}

.mini-item{
  display:flex;
  gap: .9rem;
  padding: .85rem;
  border-radius: 14px;
  border: 1px solid rgba(15,40,80,.08);
  background: rgba(246,250,255,.6);
}
.mini-icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(45,108,223,.10);
  border: 1px solid rgba(45,108,223,.18);
  color: var(--primary);
  flex: 0 0 auto;
}

.callout{
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(90,167,255,.12);
  border: 1px solid rgba(90,167,255,.22);
  color: rgba(11,27,51,.78);
}

.stat-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,40,80,.08);
  border-radius: 16px;
  padding: .9rem;
}
.stat-value{
  font-weight: 700;
  font-size: 1.1rem;
}
.stat-label{
  color: var(--muted);
  font-size: .85rem;
  margin-top: .15rem;
}

.logo-chip{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,40,80,.08);
  border-radius: 999px;
  padding: .65rem .85rem;
  display:flex; align-items:center; gap:.5rem;
  color: rgba(11,27,51,.78);
}

/* ============ Cards / Componentes ============ */
.card-soft{
  border: 1px solid rgba(15,40,80,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  background: rgba(255,255,255,.86);
}

.feature-icon{
  width: 48px; height: 48px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(45,108,223,.10);
  border: 1px solid rgba(45,108,223,.16);
  color: var(--primary);
}

.list-check{
  list-style: none;
  padding-left: 0;
  color: var(--muted);
}
.list-check li{
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .35rem;
}
.list-check li::before{
  content:"";
  position:absolute;
  left:.3rem;
  top:.55rem;
  width:.55rem; height:.55rem;
  border-radius: 999px;
  background: rgba(45,108,223,.45);
}

/* ============ Secciones ============ */
.bg-soft{
  background: linear-gradient(180deg, rgba(238,245,255,.95), rgba(246,250,255,1));
  border-top: 1px solid rgba(15,40,80,.06);
  border-bottom: 1px solid rgba(15,40,80,.06);
}

.step{
  display:flex;
  gap: .9rem;
  align-items:flex-start;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(15,40,80,.08);
  background: rgba(255,255,255,.70);
}
.step-badge{
  width: 36px; height: 36px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(45,108,223,.12);
  border: 1px solid rgba(45,108,223,.18);
  color: var(--primary);
  font-weight: 700;
  flex: 0 0 auto;
}

.panel{
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,40,80,.08);
  box-shadow: var(--shadow);
}

.mini-kpi{
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid rgba(15,40,80,.08);
  background: rgba(246,250,255,.55);
}

.case-metrics{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  color: rgba(11,27,51,.75);
  font-size: .95rem;
}

.avatar{
  width: 44px; height: 44px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 30%, rgba(90,167,255,.55), rgba(45,108,223,.35));
  border: 1px solid rgba(45,108,223,.18);
  font-weight: 800;
  color: rgba(11,27,51,.85);
}

.contact-item{
  display:flex;
  gap: .85rem;
  align-items:center;
}
.contact-item i{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(45,108,223,.10);
  border: 1px solid rgba(45,108,223,.16);
  color: var(--primary);
}

/* ============ Footer ============ */
.footer{
  border-top: 1px solid rgba(15,40,80,.08);
  background: rgba(255,255,255,.70);
}
.footer-link{
  color: rgba(11,27,51,.70);
  text-decoration: none;
}
.footer-link:hover{
  color: rgba(11,27,51,.95);
}

/* ============ Ajustes responsivos ============ */
@media (max-width: 575.98px){
  .display-5{ font-size: 2.2rem; }
  .hero-card{ box-shadow: var(--shadow-soft); }
}


.product-card{
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(20, 60, 120, .12);
}

.price{
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.2px;
}



/* ====== Página de producto ====== */
.product-hero{
  position: relative;
  overflow: hidden;
}
.product-hero::before{
  content:"";
  position:absolute;
  inset:-220px -220px auto -220px;
  height: 520px;
  background:
    radial-gradient(closest-side at 25% 40%, rgba(90,167,255,.22), transparent 65%),
    radial-gradient(closest-side at 70% 30%, rgba(45,108,223,.16), transparent 60%),
    radial-gradient(closest-side at 55% 65%, rgba(45,108,223,.10), transparent 60%);
  pointer-events:none;
  filter: blur(2px);
}

.product-header-image{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,40,80,.08);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.65);
}

.table-soft{
  --bs-table-bg: transparent;
}
.table-soft thead th{
  color: rgba(11,27,51,.8);
  border-bottom-color: rgba(15,40,80,.10);
}
.table-soft tbody td{
  border-top-color: rgba(15,40,80,.08);
}

.feat-yes{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius: 999px;
  background: rgba(45,108,223,.10);
  border: 1px solid rgba(45,108,223,.18);
  color: rgba(11,27,51,.82);
  font-weight: 600;
  font-size: .9rem;
}
.feat-no{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius: 999px;
  background: rgba(15,40,80,.06);
  border: 1px solid rgba(15,40,80,.12);
  color: rgba(11,27,51,.62);
  font-weight: 600;
  font-size: .9rem;
}

.video-card{
  box-shadow: var(--shadow);
}