:root{
  --datix-bg:#070b10;
  --datix-panel:#0b1b2b;
  --datix-panel-2:#0e2438;
  --datix-text:#f3f6fb;
  --datix-muted:#b7c3d6;
  --datix-brand:#133a63;
  --datix-brand-2:#1b4f86;
  --datix-line:rgba(255,255,255,.12);
}

html,body{height:100%;}
body{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(27,79,134,.22), transparent 60%),
    radial-gradient(800px 500px at 80% 30%, rgba(19,58,99,.20), transparent 60%),
    var(--datix-bg);
}

/* Bootstrap helpers */
.bg-datix{background:linear-gradient(180deg, rgba(11,27,43,.85), rgba(7,11,16,.9));}
.text-muted-2{color:var(--datix-muted)!important;}
.border-soft{border:1px solid var(--datix-line)!important;}
.shadow-soft{box-shadow:0 14px 34px rgba(0,0,0,.35)!important;}
.rounded-4{border-radius:1.25rem!important;}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--datix-line);
}
.hero .hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
  transform:scale(1.02);
}
.hero .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,11,16,.92) 0%, rgba(7,11,16,.72) 55%, rgba(7,11,16,.25) 100%);
}
.hero .container{position:relative; z-index:1;}

.badge-soft{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.14);
  color:var(--datix-muted);
}

.card-glass{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
}

.btn-primary{
  background:linear-gradient(135deg, var(--datix-brand-2), var(--datix-brand))!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

.section-title{letter-spacing:-.2px;}

.icon-circle{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}



/* ===== SOLUCIONES (4 paquetes) ===== */
.solutions-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.solution-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(11,27,43,.78), rgba(255,255,255,.04));
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

.solution-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.solution-icon{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  flex: 0 0 auto;
  font-size: 20px;
}

.solution-card h3{
  margin:0;
  font-size: 18px;
}

.solution-card .mini{
  margin:4px 0 0;
  color: rgba(183,195,214,.9);
  font-size: 13.5px;
}

.solution-block{
  display:grid;
  gap:10px;
  margin-top: 12px;
}

.solution-item{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.04);
}

.solution-item b{
  display:block;
  font-size: 13px;
  margin-bottom: 6px;
  color: #f3f6fb;
}

.solution-item p{
  margin:0;
  color: rgba(183,195,214,.9);
  font-size: 13.5px;
}

.solution-cta{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.solution-pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(183,195,214,.95);
  font-size: 12.5px;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 920px){
  .solutions-grid{ grid-template-columns: 1fr; }
}



/* ===== Navbar claro ===== */
.navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb;
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: #0f172a !important; /* texto oscuro */
  font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #2563eb !important; /* azul DATIX */
}

.navbar-toggler {
  border-color: #cbd5e1;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ===== Diagnóstico – texto legible en fondo oscuro ===== */
.diagnostico-dark-text,
.diagnostico-dark-text .form-label,
.diagnostico-dark-text .form-check-label {
  color: #f1f5f9; /* blanco suave */
}

.diagnostico-dark-text .quiz-option {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
}

.diagnostico-dark-text .quiz-option:hover {
  background: rgba(255,255,255,0.1);
}

/* Carousel */
.carousel .carousel-item{
  height:340px;
}
.carousel .carousel-item img{
  height:340px;
  object-fit:cover;
  filter:brightness(.8);
}
.carousel-caption{
  text-align:left;
  left:6%;
  right:6%;
}

/* Quiz */
.quiz-option input{display:none;}
.quiz-option{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:12px 14px;
  transition:transform .05s ease, background .12s ease, border-color .12s ease;
}
.quiz-option:hover{background:rgba(255,255,255,.06);}
.quiz-option.is-selected{
  border-color:rgba(110,168,255,.55);
  background:rgba(110,168,255,.12);
}

/* Forms */
.form-control, .form-select{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:var(--datix-text)!important;
}
.form-control::placeholder{color:rgba(183,195,214,.72)!important;}

a.link-secondary{color:rgba(183,195,214,.85)!important;}
a.link-secondary:hover{color:#fff!important;}

/* Small performance: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important; transition:none!important;}
}

@media (max-width: 991px){
  .hero .hero-overlay{background:linear-gradient(180deg, rgba(7,11,16,.92) 0%, rgba(7,11,16,.76) 60%, rgba(7,11,16,.55) 100%);} 
  .carousel .carousel-item, .carousel .carousel-item img{height:280px;}
}

/* Package cards */
.package-card{
  background:linear-gradient(180deg, rgba(11,27,43,.78), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:1.25rem;
}
.package-card .meta{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
}

/* Quiz */
.quiz-card{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
}
.quiz-option .form-check-input{transform:scale(1.05);}
.quiz-option{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:1rem;
  padding:12px 12px;
}
.quiz-option:hover{background:rgba(255,255,255,.06);}

/* Forms */
.form-control, .form-select{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:var(--datix-text)!important;
}
.form-control::placeholder{color:rgba(183,195,214,.75)!important;}
.form-control:focus, .form-select:focus{
  box-shadow:0 0 0 .25rem rgba(110,168,255,.15)!important;
}

/* Link styling */
a.link-secondary:hover{color:var(--datix-text)!important;}

/* Small screens */
@media (max-width: 992px){
  .hero .hero-overlay{background:linear-gradient(180deg, rgba(7,11,16,.92) 0%, rgba(7,11,16,.78) 60%, rgba(7,11,16,.45) 100%);} 
  .carousel .carousel-item, .carousel .carousel-item img{height:260px;}
}