:root{
  --bg:#0b0e12; --elev:#10151b; --card:#141b23; --text:#e8edf5; --muted:#9fb1c9;
  --brand:#4fa3ff; --brand2:#19c5aa; --border:#223243; --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px; --radius-lg:18px;
  --header-h: 68px;
}
@media (max-width:900px){ :root{ --header-h: 60px } }

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;background:var(--bg);color:var(--text);line-height:1.6;padding-top:var(--header-h)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Scrollbar */
html{scrollbar-color:color-mix(in oklab,var(--brand)70%,var(--brand2)) var(--elev);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--elev);border-left:1px solid var(--border)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand),var(--brand2));border-radius:10px;border:2px solid var(--elev)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--brand2),var(--brand))}

/* Utils */
.container{width:min(1200px,92vw);margin-inline:auto}
.section-padded{padding:3rem 0}
.muted{color:var(--muted)}

/* Botón primario (hero) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:none;font-weight:800;padding:.8rem 1.1rem;border-radius:12px;cursor:pointer;transition:.2s transform,.2s opacity;box-shadow:var(--shadow);color:#001428;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.btn:hover{opacity:.95}.btn:active{transform:translateY(1px)}

/* ===== Header fijo ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:color-mix(in oklab,var(--bg)88%,transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0}
.brand{display:flex;align-items:center}
.brand-logo{height:40px}

/* Navegación limpia (sin puntos) */
.nav{display:flex;align-items:center;gap:1rem;position:relative}
.nav-menu,.nav-menu ul,.nav-menu li{list-style:none;margin:0;padding:0}
.nav-menu>li{display:inline-flex;align-items:center;white-space:nowrap}
.nav-link{display:inline-flex;align-items:center;padding:.55rem .9rem;border-radius:10px;font-weight:700;font-size:1.05rem;transition:background-color .2s,color .2s}
.nav-link::before{content:none!important}
.nav-link:hover,.nav-link:focus-visible{background:color-mix(in oklab,var(--brand)18%,transparent);color:#fff}

/* Menú móvil */
.nav-toggle{display:inline-grid;gap:4px;padding:.35rem;border:1px solid var(--border);background:var(--elev);border-radius:9px}
.nav-toggle-bar{width:20px;height:2px;background:var(--text)}
.nav-panel{position:fixed;inset:var(--header-h)0 0 0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.2s opacity}
.nav-panel.open{opacity:1;pointer-events:auto}
.nav-menu{position:fixed;left:0;right:0;top:var(--header-h);transform:translateY(-8px);opacity:0;pointer-events:none;background:var(--elev);border-top:1px solid var(--border);display:grid;gap:.5rem;padding:1rem;transition:.2s transform,.2s opacity;max-height:calc(100vh - var(--header-h));overflow:auto}
.nav-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
@media (min-width:1100px){
  .nav-toggle{display:none}.nav-panel{display:none}
  .nav-menu{position:static;transform:none;opacity:1;pointer-events:auto;display:flex;gap:.35rem;padding:0;background:transparent;border:none;max-height:none;overflow:visible;flex-wrap:nowrap}
}

/* ===== Hero ===== */
.hero{position:relative;min-height:68vh;display:grid;place-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.05) brightness(.75)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.55))}
.hero-content{position:relative;text-align:center;padding:3.5rem 0}
.hero-title{font-size:clamp(2rem,2.2vw + 1.4rem,3.4rem);margin:.2rem 0 .6rem;font-weight:800}
.hero-subtitle{color:var(--muted);font-size:clamp(1rem,1vw + .6rem,1.25rem);margin:0 0 1.2rem}

/* ===== Títulos de sección ===== */
.section-title{
  display:block;
  text-align:center;
  font-size:1.6rem;
  margin:0 0 1.4rem;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.accent-blue{color:color-mix(in oklab,var(--brand)85%,white 10%)}

/* =========================
   CURSOS (SOLO esta parte)
   ========================= */
#cursos .courses-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 22px;
}
@media (max-width:1100px){
  #cursos .courses-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width:700px){
  #cursos .courses-grid{ grid-template-columns: 1fr; }
}

#cursos .course-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;                 /* clip para esquinas redondeadas */
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#cursos .course-card:hover{
  transform:translateY(-4px);
  /* Borde BLANCO + sombra suave (sin tono azul) */
  border-color:#fff;
  box-shadow: 0 0 15px rgb(255, 255, 255); /* Sombra blanca al pasar el mouse */
}

/* Imagen: natural, sin recortes, ocupa el ancho y conserva su alto */
#cursos .course-figure{ margin:0; background:#000; }
#cursos .course-figure img{
  width:100%;
  height:auto;                     /* -> la imagen se ve completa */
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

/* Cuerpo */
#cursos .course-info{
  padding:16px 14px 18px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--elev);
  border-top:1px solid var(--border);
}
#cursos .course-title{
  margin:0; font-weight:800; text-align:center; line-height:1.35;
}

/* CTA claro de ancho completo */
#cursos .course-cta{
  display:block; width:100%; text-align:center;
  padding:.75rem 1rem; border-radius:12px; font-weight:800;
  background:linear-gradient(135deg,#eaf3ff,#ffffff);
  color:#0e3455;
  border:1px solid color-mix(in oklab,var(--brand)35%,white 30%);
  box-shadow:0 10px 22px rgba(79,163,255,.25);
}
#cursos .course-cta.course-free{
  background:linear-gradient(135deg,#e8fff8,#ffffff);
  color:#084235;
  border:1px solid color-mix(in oklab,var(--brand2)35%,white 30%);
  box-shadow:0 10px 22px rgba(25,197,170,.20);
}

/* ===== Galería / Servicios (sin cambios) ===== */
.gallery-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.gallery-grid{grid-template-columns:1fr}}

.gallery-item{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.gallery-item img{width:100%;height:260px;object-fit:cover}
.gallery-caption{padding:.7rem .9rem;color:var(--muted)}

/* ===== Tecnologías (sin cambios) ===== */
.tech-logos-grid{display:grid;gap:.8rem;align-items:center;justify-items:center;grid-template-columns:repeat(9,1fr)}
.tech-logos-grid img{height:46px;filter:saturate(1.2) drop-shadow(0 6px 14px rgba(0,0,0,.25))}
@media (max-width:1000px){.tech-logos-grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:600px){.tech-logos-grid{grid-template-columns:repeat(3,1fr)}}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);padding:1.2rem 0;color:var(--muted)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-social{display:flex;flex-wrap:wrap;gap:.6rem}
.social-link{padding:.45rem .65rem;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--elev)}
.social-link:hover{background:color-mix(in oklab,var(--brand)14%,transparent)}

body.menu-open{overflow:hidden}