/* ---------- HEADER ---------- */
.main-header{padding:1rem 0;}
.header-inner{
  max-width:1200px;margin:0 auto;padding:0 1rem;
  display:flex;justify-content:space-between;align-items:center;
}
.site-logo{height:38px;width:auto;}       /* proporción intacta */
.nav-masthead .nav-link{margin-left:1.5rem;}

/* ---------- GLOBAL ---------- */
body{overflow-y:auto;}
.cover-container{width:100%;}
.programs-wrapper{max-width:1200px;padding:0 1rem 4rem;}

/* ---------- HERO & FILTROS ---------- */
.programs-hero h1{text-shadow:0 2px 6px rgba(0,0,0,.8);}
.filter-group{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;}
.filter-btn{
  font-weight:600;padding:.45rem 1.25rem;border-radius:25px;
  border:2px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(8px);
  transition:.25s;
}
.filter-btn:hover{background:rgba(255,255,255,.25);}
.filter-btn.active{background:#28a745;border-color:#28a745;}

/* ---------- GRID ---------- */
.course-grid{
  display:grid;gap:2rem;grid-template-columns:repeat(3,1fr);
  grid-auto-flow:row dense;justify-items:center;
}
@media(max-width:991px){.course-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:576px){.course-grid{grid-template-columns:1fr;} }

/* ---------- CARD BASE ---------- */
.course-card{
  position:relative;text-align:center;width:100%;max-width:360px;
  padding:2rem 1.5rem 3.75rem;border-radius:22px;
  background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);transition:.3s transform,.3s box-shadow;
}
.course-card:hover{transform:translateY(-6px);box-shadow:0 12px 34px rgba(0,0,0,.6);}
.course-card::before{
  content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;
  background:linear-gradient(135deg,#7b68ee,#00ffd1 45%,#e600ff 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.course-icon{font-size:2.4rem;margin-bottom:1rem;}

/* ---------- CARD RUTA ---------- */
.track-card{grid-column:1/-1;max-width:none;padding:3rem 2rem 4.5rem;}
.track-title{font-size:1.75rem;font-weight:700;margin-bottom:.5rem;}

/* ---------- BADGES ---------- */
.badge{font-size:.75rem;padding:.35rem .85rem;border-radius:20px;
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);}
.bg-gradient-purple{background:rgba(178,113,255,.25);}
.bg-gradient-teal{background:rgba(0,255,230,.25);}
.bg-gradient-cyan{background:rgba(0,220,255,.25);}
.bg-gradient-green{background:rgba(0,255,153,.25);}
.bg-gradient-pink,.bg-gradient-lightblue,.bg-gradient-magenta{background:rgba(255,255,255,.15);}

/* ---------- META ---------- */
.course-meta{display:flex;gap:.5rem;justify-content:center;
  font-size:.85rem;color:rgba(255,255,255,.8);margin:1rem 0 1.5rem;}
.course-meta li::after{content:"•";margin-left:.5rem;}
.course-meta li:last-child::after{content:"";}

/* ---------- BOTONES ---------- */
.btn-course{
  position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);
  padding:.65rem 2.25rem;font-weight:600;border-radius:25px;
  border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.15);
  color:#fff;backdrop-filter:blur(10px);transition:.25s;
}
.btn-course:hover{background:#28a745;border-color:#28a745;transform:translate(-50%,-3px);}
.btn-route{background:#28a745;border-color:#28a745;}

/* ---------- CONTACTO ---------- */
.contact-wrapper{
  display:flex;gap:3rem;margin-top:4rem;flex-wrap:wrap;
  justify-content:center;align-items:stretch;
}
.glass-box{
  border-radius:22px;padding:2rem;flex:1 1 400px;
  border:2px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);
}
.contact-info{background:rgba(0,0,0,.35);color:#fff;}
.contact-info a{color:#28a745;text-decoration:none;}
.contact-info a:hover{text-decoration:none;}
.contact-social{background:rgba(0,0,0,.35);color:#fff;}
.social-links i{color:#28a745;}
.contact-form{background:rgba(255,255,255,.95);color:#000;}
.contact-form iframe{max-width:100%!important;margin:0!important;}
.contact-form *, .contact-form label,
.contact-form legend,.contact-form h1,
.contact-form h2,.contact-form h3,
.contact-form h4,.contact-form h5,.contact-form h6
{color:#222!important;}
@media (max-width:991px){
  .contact-wrapper{flex-direction:column;gap:2rem;}
  .glass-box{max-width:100%;}
}
#contactanos{scroll-margin-top:80px;} /* para dejar espacio al anclar */

/* ---------- FOOTER ---------- */
footer{color:#fff;opacity:.6;}

.btn-octopia {
  background: #2e92e5;
  color: #fff;
  border-radius: 1.4em;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  padding: 0.45em 1.35em;
  margin-left: 0.6em;
  font-size: 1rem;
  box-shadow: 0 2px 8px 0 rgba(34,146,229,0.09);
  transition: background 0.18s, color 0.15s, box-shadow 0.18s;
  vertical-align: middle;
  display: inline-block;
}
.btn-octopia:hover,
.btn-octopia:focus {
  background: #2069aa;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 16px 0 rgba(34,146,229,0.15);
}

.btn-octopia,
.btn-course,
.btn-route {
  text-decoration: none !important;
}

.btn-course:hover,
.btn-course:focus,
.btn-route:hover,
.btn-route:focus,
.btn-octopia:hover,
.btn-octopia:focus {
  text-decoration: none !important;
}

/* ---------- ICONOS DE COLORES POR RUTA ---------- */
.icon-ia, .icon-ia *       { color: #a259fa !important; fill: #a259fa !important; }
.icon-ciber, .icon-ciber * { color: #20e3b2 !important; fill: #20e3b2 !important; }
.icon-software, .icon-software * { color: #0cbcf7 !important; fill: #0cbcf7 !important; }
.icon-datos, .icon-datos * { color: #00ff9e !important; fill: #00ff9e !important; }
.icon-general, .icon-general * { color: #e300ff !important; fill: #e300ff !important; }