:root{
  --brand-dark: #0f172a;     /* azul oscuro */
  --brand-dark-2: #111827;   /* navy */
  --accent: #f59e0b;         /* naranjo */
  --muted: #64748b;
  --card: rgba(255,255,255,.92);
  --shadow: 0 14px 40px rgba(2,6,23,.15);
}

*{ scroll-behavior: smooth; }

.topbar{
  background: linear-gradient(90deg, var(--brand-dark), var(--brand-dark-2));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.topbar-btn{ border-radius: 999px; }

.nav-branding{
  background: rgba(15, 23, 42, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.navbar-brand{
  align-items: center;
}
.brand-name{ line-height: 1.1; }
.brand-sub{ line-height: 1.1; }

 .navbar-brand { padding: 0; }

.brand-logo1{
  width: 90px;  /* antes 56px */
  height: auto;
  object-fit: contain;
}

.brand-logo{ height: 76px; max-height: 86px; width:auto; object-fit:contain; }


.brand-name{
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.05;
}

.brand-sub{
  font-size: .8rem;
  color: rgba(255,255,255,.72);
}

.btn-accent{
  background: var(--accent);
  border-color: var(--accent);
  color: #111827;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(245,158,11,.25);
}

.btn-accent:hover{
  filter: brightness(.97);
  transform: translateY(-1px);
}

.hero{
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 5rem 0;
  background:
    radial-gradient(1100px 500px at 10% 20%, rgba(245,158,11,.20), transparent 55%),
    radial-gradient(900px 500px at 90% 30%, rgba(56,189,248,.14), transparent 55%),
    linear-gradient(180deg, #0b1222, #0f172a);
  overflow: hidden;
}

.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background-image: url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=2000&q=70");
  background-size: cover;
  background-position: center;
  opacity: .18;
  filter: saturate(1.1) contrast(1.05);
}

.hero-inner{
  position:relative;
  z-index:1;
}

.hero-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.4rem .8rem;
  border-radius:999px;
  background: rgba(245,158,11,.14);
  color: #fde68a;
  border: 1px solid rgba(245,158,11,.25);
  font-weight: 700;
  font-size: .85rem;
}

.hero h1{
  color:#fff;
  font-weight: 900;
  letter-spacing: -.6px;
}

.hero p{
  color: rgba(255,255,255,.78);
  max-width: 56ch;
}

.hero-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}

.section{
  padding: 4.5rem 0;
}

.section-title{
  font-weight: 900;
  letter-spacing: -.4px;
}

.muted{
  color: var(--muted);
}

.feature{
  background: var(--card);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 1.25rem;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(2,6,23,.18);
}

.icon-pill{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.30);
}

.course-card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.course-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(2,6,23,.14);
}
.course-top{
  padding: 1rem 1rem .5rem;
  background: linear-gradient(120deg, rgba(15,23,42,.95), rgba(15,23,42,.75));
  color:#fff;
}

.badge-accent{
  background: rgba(245,158,11,.30);   /* más claro */
  border: 1px solid rgba(245,158,11,.55);
  color: #ffffff;                      /* texto blanco */
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,.25); /* mejora contraste */
}


.course-body{ padding: 1rem; }

.footer{
  background: linear-gradient(180deg, #0b1222, #0f172a);
  color: #fff;
}
.footer-logo{ width: 44px; height:auto; }
.footer-link{
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.footer-link:hover{ color:#fff; text-decoration: underline; }

/*** formato del Whatsapp ***/

.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #22c55e;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 14px 32px rgba(2,6,23,.22);
  z-index: 9999;
  text-decoration: none;
}
.whatsapp-float:hover{ filter: brightness(.95); }

.btn-top{
  position: fixed;
  right: 18px;
  bottom: 84px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 32px rgba(2,6,23,.14);
  display: none;
  z-index: 9999;
}

.glass{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(2,6,23,.08);
  backdrop-filter: blur(10px);
  border-radius: 18px;
}

.form-control, .form-select{
  border-radius: 14px;
  padding: .75rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 .25rem rgba(245,158,11,.20);
}

#catFilter.form-select{
  border-radius: 999px;
  padding-left: 1rem;
}
#courseSearch.form-control{
  border-radius: 999px;
}



/******** CONTADOR DE PERSONAS POR CURSO *******/

.counter-wrap .counter-card{
  background: rgba(15,23,42,.92);
  color: #fff;
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 32px rgba(2,6,23,.12);
}

.counter-num{
  font-weight: 900;
  font-size: 2.1rem;
  letter-spacing: -0.6px;
  line-height: 1.1;
}

.counter-suffix{
  color: var(--accent);
  margin-left: .15rem;
}

.counter-label{
  color: rgba(255,255,255,.75);
  margin-top: .25rem;
}