:root{
  --bg:#000; --fg:#fff; --muted:#bdbdbd; --card:#0d0d0d; --border:#1f1f1f;
  --accent:#fff; --highlight:#fff;

  /* Acentos sutiles */
  --hacker:#00ff00;          /* Verde consola para detalles */
  --hacker-dim:#00aa00;      /* Verde atenuado para bordes/sombras */
  --focus:rgba(0,255,0,.35); /* Anillo de enfoque accesible */
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Selección de texto */
::selection{ background:rgba(0,255,0,.25); color:#fff }

/* NAV superior */
.nav{
  position:sticky; top:0; z-index:10;
  display:flex; gap:10px; justify-content:center; align-items:center;
  padding:10px 12px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.nav a{
  color:var(--fg); text-decoration:none; font-weight:600; font-size:14px;
  padding:8px 12px; border-radius:999px; border:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav a:hover{ border-color:var(--hacker-dim) }
.nav a.active{ background:var(--fg); color:#000; }

/* Contenedores */
.wrap{ max-width:980px; margin:0 auto; padding:32px 20px }
.block{
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:16px; padding:32px 24px;
}
.center{ text-align:center }

/* HERO / Brand */
.brand{ position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center }
.brand img{
  width:300px; height:300px; object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.08));
  opacity:0; transform:scale(.96); animation:fadeInLogo .9s ease-out forwards;
}
@keyframes fadeInLogo { to{ opacity:1; transform:scale(1) } }
@media (max-width:560px){
  .brand img{ width:240px; height:240px }
}
.brand-header{ position:absolute; top:0; left:0; padding:8px 12px }

/* Tagline + cursor */
.tag, #tagline, #tagline span{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  color:var(--hacker);
  font-size:16px; white-space:nowrap;
}
@media (max-width:560px){
  .tag, #tagline, #tagline span{ font-size:13px }
}
/* Cursor verde estilo consola (el cursor de Typed.js está oculto) */
#tagline::after {
  content: "▋";
  margin-left: 4px;
  color: #00ff00;
  animation: blink 1s infinite;
}
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
/* Fade-out Typed.js */
#tagline span.typed-fade-out{
  opacity:0;
  transition:opacity .6s ease;
}

/* --- TARJETA: Curso destacado --- */
.feature-course{ margin-top:20px }
.feature-link{
  display:block;
  text-decoration:none; /* quita subrayado en todo el card */
  color:inherit;
}
.feature-body{
  display:flex; align-items:center; gap:16px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:16px;
  padding:16px 18px;
}
.feature-logo{
  width:72px; height:72px; object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.06));
  flex-shrink:0;
}
.feature-text{ text-align:left }
.feature-eyebrow{
  font-size:12px; color:var(--muted); margin-bottom:8px; text-align:left;
}
.feature-title{
  margin:0; font-size:20px; line-height:1.3; color:var(--fg);
}
.feature-desc{
  margin:.35rem 0 .2rem; color:#c7c7c7; font-size:15px;
}
.feature-cta{ margin-top:8px }
.feature-cta .btn{ padding:10px 14px; font-size:14px }

/* En móviles, que la tarjeta se apile */
@media (max-width:640px){
  .feature-body{ flex-direction:column; align-items:flex-start }
  .feature-text{ width:100% }
  .feature-logo{ width:84px; height:84px }
}

/* Botones */
.cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none;
  border:1px solid var(--border); color:#000; background:var(--accent); font-weight:700;
  transition: box-shadow .2s ease, border-color .2s ease, transform .02s ease-in;
}
.btn:hover{
  border-color:var(--hacker-dim);
  box-shadow:0 0 0 3px rgba(0,255,0,.06);
}
.btn:active{ transform: translateY(1px) }
.btn.secondary{ background:#0f0f10; color:#fff }
.btn.secondary:hover{ border-color:var(--hacker-dim); box-shadow:0 0 0 3px rgba(0,255,0,.06) }

/* Accesibilidad */
a:focus-visible, .btn:focus-visible, .nav a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--focus);
  border-color:var(--hacker-dim);
  border-radius:10px;
}

/* Enlaces generales */
a{ color:#e6e6e6 }
a:hover{ color:#fff }

/* Secciones de texto */
h1,h2{ margin:0 0 10px }
p{ color:#c7c7c7; margin:.4rem 0 }

/* Calendario */
.cal-wrap{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:700px){ .cal-wrap{ grid-template-columns:1fr 1fr } }
.calendar{ border:1px solid var(--border); border-radius:12px; background:var(--card); padding:20px; }
.cal-title{ font-weight:700; margin-bottom:8px }
.cal-sub{ color:#c7c7c7; font-size:14px; margin-bottom:10px }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; border-top:1px solid var(--border); padding-top:12px }
.dow{ color:#9b9b9b; text-align:center; font-size:13px; padding:6px 0 }
.day{
  aspect-ratio:1/1; border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:#d0d0d0; font-weight:600;
  position:relative; overflow:hidden; background:rgba(255,255,255,.01)
}
.day.muted{ color:#6f6f6f }
.day.event{
  color:#000;
  background:var(--highlight);
  box-shadow:0 6px 22px rgba(255,255,255,.18);
}

/* Footer */
footer{ margin:36px auto 24px; text-align:center; color:#8a8a8a; font-size:13px }

/* Animación de aparición genérica */
.fade-in-up { opacity:0; transform: translateY(20px); animation: fadeInUp .9s ease-out forwards }
@keyframes fadeInUp { to{ opacity:1; transform: translateY(0) } }