/* ============================================================
   SLTS · Soluciones de Aprendizaje y Tecnología Superior
   Identidad: índigo profundo + destello dorado (tomados del isotipo)
   ============================================================ */

:root{
  --slts-indigo: #3E3A8E;
  --slts-indigo-dark: #2B2865;
  --slts-indigo-light: #5852B8;
  --slts-gold: #F7A600;
  --slts-gold-light: #FFC94D;
  --slts-ink: #1D1B3A;
  --slts-paper: #F7F7FB;
  --slts-line: #E3E1F0;
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }

body{
  font-family: var(--font-body);
  color: var(--slts-ink);
  background: var(--slts-paper);
  line-height: 1.65;
}

h1,h2,h3,h4,.display-font{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--slts-indigo-dark);
}

a{ color: var(--slts-indigo); text-decoration: none; }
a:hover{ color: var(--slts-gold); }

.text-gold{ color: var(--slts-gold) !important; }
.text-indigo{ color: var(--slts-indigo) !important; }
.bg-indigo{ background-color: var(--slts-indigo) !important; }
.bg-indigo-dark{ background-color: var(--slts-indigo-dark) !important; }
.bg-paper{ background-color: var(--slts-paper) !important; }

/* ---------- Botones ---------- */
.btn-slts-gold{
  background: var(--slts-gold);
  border: none;
  color: var(--slts-indigo-dark);
  font-weight: 700;
  padding: .7rem 1.6rem;
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-slts-gold:hover{
  background: var(--slts-gold-light);
  color: var(--slts-indigo-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(247,166,0,.25);
}
.btn-slts-outline{
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  padding: .65rem 1.5rem;
  border-radius: 8px;
  background: transparent;
  transition: all .15s ease;
}
.btn-slts-outline:hover{
  background: #fff;
  color: var(--slts-indigo-dark);
}
.btn-slts-indigo{
  background: var(--slts-indigo);
  color:#fff;
  font-weight:700;
  padding:.7rem 1.6rem;
  border-radius:8px;
  border:none;
  transition:.15s ease;
}
.btn-slts-indigo:hover{ background: var(--slts-indigo-dark); color:#fff; transform: translateY(-2px); }

/* ---------- Navbar ---------- */
.navbar-slts{
  background: #fff;
  box-shadow: 0 2px 18px rgba(43,40,101,.08);
  padding: .6rem 0;
}
.navbar-slts .navbar-brand img{ height: 46px; }
.navbar-slts .nav-link{
  font-weight: 600;
  color: var(--slts-ink);
  margin: 0 .4rem;
  position: relative;
}
.navbar-slts .nav-link.active,
.navbar-slts .nav-link:hover{ color: var(--slts-indigo); }
.navbar-slts .nav-link.active::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:3px;
  background: var(--slts-gold);
  border-radius:3px;
}

/* ---------- Hero ---------- */
.hero-slts{
  background: linear-gradient(120deg, var(--slts-indigo-dark) 0%, var(--slts-indigo) 55%, var(--slts-indigo-light) 100%);
  color:#fff;
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
}
.hero-slts::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 85% 20%, rgba(247,166,0,.18) 0, transparent 45%);
  pointer-events: none;
}
.hero-slts h1{ color:#fff; font-size: 2.9rem; }
.hero-slts .lead{ color: #DAD8F3; font-size:1.15rem; }
.badge-hero{
  background: rgba(247,166,0,.15);
  border:1px solid var(--slts-gold);
  color: var(--slts-gold-light);
  font-weight:600;
  padding:.4rem .9rem;
  border-radius:30px;
  font-size:.8rem;
  letter-spacing:.04em;
}

/* ---------- Secciones ---------- */
.section{ padding: 4.5rem 0; }
.section-title-eyebrow{
  color: var(--slts-gold);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8rem;
}

/* ---------- Tarjetas ---------- */
.card-slts{
  border: 1px solid var(--slts-line);
  border-radius: 14px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Para que las tarjetas en una cuadrícula (cursos, features, etc.) queden con la misma
   altura, se agrega la utilidad "h-100" de Bootstrap directamente en el HTML de esas
   tarjetas — NO aquí de forma global, porque eso hacía que tarjetas usadas solas (como la
   de "Inscripción exitosa") se estiraran sin control y se superpusieran con el contenido
   siguiente (pie de página incluido). */
.card-slts:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 30px rgba(43,40,101,.12);
}
.icon-tile{
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--slts-indigo), var(--slts-indigo-light));
  display:flex; align-items:center; justify-content:center;
  color: var(--slts-gold-light);
  font-size: 1.5rem;
}

/* ---------- Curso card ---------- */
.curso-img{
  overflow: hidden;
  background: linear-gradient(135deg, var(--slts-indigo-dark), var(--slts-indigo-light));
}
.curso-img svg{ width:100%; height:100%; display:block; }
.curso-card .curso-img{
  height: 170px;
  border-radius: 14px 14px 0 0;
}
.curso-card .badge-modalidad{
  background: var(--slts-indigo);
  color:#fff;
  font-weight:600;
}
.curso-card .badge-nivel{
  background: var(--slts-paper);
  color: var(--slts-indigo);
  border: 1px solid var(--slts-line);
  font-weight:600;
}
.precio-curso{
  color: var(--slts-indigo-dark);
  font-weight: 800;
  font-size: 1.4rem;
}

/* ---------- Misión / Visión ---------- */
.mv-card{
  border-radius: 16px;
  padding: 2.2rem;
  height: 100%;
  color: #fff;
}
.mv-card.mision{ background: linear-gradient(135deg, var(--slts-indigo), var(--slts-indigo-dark)); }
.mv-card.vision{ background: linear-gradient(135deg, #C98600, var(--slts-gold)); color: var(--slts-indigo-dark); }
.mv-card.vision .icon-tile{ background: rgba(43,40,101,.12); color: var(--slts-indigo-dark); }

/* ---------- Valores ---------- */
.valor-item{
  display:flex; gap:1rem; align-items:flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--slts-line);
}
.valor-item:last-child{ border-bottom:none; }

/* ---------- Pasos (Campus / Inscripción) ---------- */
.paso-num{
  width: 42px; height:42px;
  border-radius:50%;
  background: var(--slts-gold);
  color: var(--slts-indigo-dark);
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ---------- Formularios ---------- */
.form-slts label{ font-weight:600; color: var(--slts-indigo-dark); }
.form-slts .form-control, .form-slts .form-select{
  border-radius: 8px;
  border: 1.5px solid var(--slts-line);
  padding: .65rem .9rem;
}
.form-slts .form-control:focus, .form-slts .form-select:focus{
  border-color: var(--slts-indigo-light);
  box-shadow: 0 0 0 .2rem rgba(88,82,184,.15);
}
.dropzone-slts{
  border: 2px dashed var(--slts-indigo-light);
  border-radius: 12px;
  padding: 1.8rem;
  text-align:center;
  background: #FBFAFF;
  cursor:pointer;
  transition: .15s ease;
}
.dropzone-slts:hover{ background:#F1F0FC; }

/* ---------- Footer ---------- */
.footer-slts{
  background: var(--slts-indigo-dark);
  color: #C9C7E8;
  padding: 3.5rem 0 1.5rem;
}
.footer-slts h5{ color:#fff; }
.footer-slts a{ color:#C9C7E8; }
.footer-slts a:hover{ color: var(--slts-gold); }
.footer-slts .social-icon{
  width:38px; height:38px;
  border-radius:50%;
  background: rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5rem;
  transition:.15s ease;
}
.footer-slts .social-icon:hover{ background: var(--slts-gold); color: var(--slts-indigo-dark); }

/* ---------- Avales institucionales ---------- */
.avales-slts{
  padding: 1rem 0;
}
.avales-logo-item{
  background: #fff;
  border: 1px solid var(--slts-line);
  border-radius: 12px;
  padding: .9rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.avales-logo-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(43,40,101,.10);
}
.avales-logo-item img{
  max-height: 62px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.avales-compacta{
  border-top: 1px solid var(--slts-line);
  border-bottom: 1px solid var(--slts-line);
  padding: 1.2rem 0;
  margin: 1.5rem 0;
}
.avales-compacta .avales-logo-item{
  height: 64px;
  padding: .5rem .9rem;
}
.avales-compacta .avales-logo-item img{
  max-height: 42px;
  max-width: 140px;
}
@media (max-width: 575px){
  .avales-logo-item{ height: 74px; padding: .6rem 1rem; }
  .avales-logo-item img{ max-height: 48px; max-width: 140px; }
}

/* ---------- Utilidades ---------- */
.divider-star{
  color: var(--slts-gold);
  font-size: 1.4rem;
}
.stat-box{
  text-align:center;
  padding: 1.2rem;
}
.stat-box .num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--slts-indigo);
}
.stat-box .num .star{ color: var(--slts-gold); }

@media (max-width: 767px){
  .hero-slts h1{ font-size: 2.1rem; }
  .section{ padding: 3rem 0; }
}