/* PALETA KEVO ROJAS */
:root{
  --bg:#0A0C0F;
  --accent:#00E6FF;
  --accent-secondary:#00C6E6;
  --accent-opaque:rgba(0,230,255,0.14);
  --accent-soft:rgba(0,230,255,0.06);
  --light:#FFFFFF;
  --muted:rgba(255,255,255,0.50);
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  font-family:"DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--light);
}

/* CONTENEDOR PRINCIPAL */
.stage{
  width:100%;
  max-width:1080px;
  min-height:100vh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:var(--bg);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Desktop */
@media (min-width: 1120px) {
  .stage {
    height:1920px;
    margin:40px auto;
    border-radius:28px;
  }
}

/* FONDO SVG */
.bg-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(24px) opacity(.55);
}

/* GLOW ANIMADO */
@keyframes pulseGlow{
  0%   { opacity:.22; transform:translate(-50%,-46%) scale(.95); }
  50%  { opacity:.38; transform:translate(-50%,-46%) scale(1.05); }
  100% { opacity:.22; transform:translate(-50%,-46%) scale(.95); }
}

.center-glow{
  position:absolute;
  left:50%;
  top:46%;
  width:min(760px, 80vw);
  height:min(760px, 80vw);
  transform:translate(-50%,-46%);
  background:radial-gradient(circle, rgba(0,230,255,0.14), transparent 40%);
  filter:blur(80px);
  border-radius:50%;
  animation:pulseGlow 6s ease-in-out infinite;
}

/* CONTENIDO */
.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(20px, 3vw, 34px);
  padding:clamp(60px, 10vw, 160px) clamp(20px, 5vw, 84px) clamp(40px, 5vw, 72px);
  box-sizing:border-box;
  position:relative;
  z-index:3;
}

/* LOGO */
.logo{
  width:clamp(140px, 20vw, 220px);
  height:clamp(140px, 20vw, 220px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo .mark{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* NOMBRE / TÍTULO */
.name-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
}

.placeholder{
  background:rgba(255,255,255,0.05);
  padding:12px 24px;
  border-radius:14px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    inset 0 0 20px rgba(0,230,255,0.04);
  text-align:center;
  max-width:100%;
}

.placeholder.name .text{
  font-size:clamp(18px, 2.5vw, 22px);
  font-weight:600;
}

.placeholder.title .text{
  font-size:clamp(13px, 2vw, 16px);
  font-weight:500;
  color:var(--muted);
}

/* DESCRIPCIÓN */
.desc{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  width:100%;
  max-width:720px;
  padding:0 20px;
  box-sizing:border-box;
}

.desc .line{
  width:100%;
  /* background:rgba(255,255,255,0.02); */
  padding:8px 14px;
  border-radius:10px;
  text-align:center;
  box-sizing:border-box;
}

.desc .text{
  font-size:clamp(12px, 1.5vw, 14px);
  color:var(--muted);
}

/* BOTONES */
.buttons{
  width:100%;
  max-width:720px;
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 2vw, 18px);
  padding:0 20px;
  box-sizing:border-box;
}

/* Tarjeta completa como botón */
.btn{
  width:100%;
  min-height:clamp(70px, 10vw, 90px);
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:clamp(14px, 2.5vw, 22px);
  padding:0 clamp(16px, 3vw, 26px);
  text-decoration:none;
  background:rgba(255,255,255,0.03);
  border:1.5px solid rgba(0,230,255,0.20);
  backdrop-filter:blur(10px);
  transition:220ms ease;
  box-shadow:
    0 0 14px rgba(0,230,255,0.12),
    inset 0 0 22px rgba(0,230,255,0.04);
  color:var(--light);
  box-sizing:border-box;
}

/* Hover neon */
.btn:hover{
  background:rgba(0,230,255,0.10);
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:
    0 0 26px rgba(0,230,255,0.32),
    inset 0 0 20px rgba(0,230,255,0.10);
}

/* ÍCONOS */
.btn-icon{
  width:clamp(36px, 5vw, 46px);
  height:clamp(36px, 5vw, 46px);
  object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(0,230,255,0.4));
  opacity:0.9;
  flex-shrink:0;
}

/* Texto principal */
.btn-label{
  flex:1;
  font-size:clamp(16px, 2.2vw, 20px);
  font-weight:600;
  letter-spacing:0.2px;
  text-align:left;
}

/* "Chip" derecha */
.btn-meta{
  padding:6px 16px;
  border-radius:10px;
  font-size:clamp(12px, 1.5vw, 14px);
  font-weight:600;
  background:rgba(255,255,255,0.08);
  letter-spacing:0.3px;
  flex-shrink:0;
}

/* BANNER CURSO */
.banner{
  width:100%;
  max-width:920px;
  min-height:clamp(120px, 15vw, 160px);
  display:flex;
  flex-wrap:wrap;
  gap:clamp(12px, 2vw, 20px);
  padding:clamp(16px, 2.5vw, 20px) clamp(16px, 3vw, 26px);
  background:rgba(0,230,255,0.05);
  border-radius:20px;
  border:1px solid rgba(0,230,255,0.22);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  margin-top:12px;
  box-sizing:border-box;
}

.banner-left{
  width:clamp(56px, 8vw, 68px);
  height:clamp(56px, 8vw, 68px);
  background:rgba(0,230,255,0.14);
  border-radius:14px;
  flex-shrink:0;
}

.banner-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-width:200px;
}

.banner-title{
  font-size:clamp(15px, 2vw, 18px);
  font-weight:700;
  background:rgba(255,255,255,0.04);
  padding:8px 14px;
  border-radius:12px;
}

.banner-sub{
  font-size:clamp(11px, 1.5vw, 13px);
  background:rgba(255,255,255,0.02);
  padding:6px 12px;
  border-radius:10px;
  color:var(--muted);
}

.banner-cta{
  background:linear-gradient(90deg, var(--accent), var(--accent-secondary));
  padding:clamp(8px, 1.5vw, 10px) clamp(16px, 2.5vw, 20px);
  border-radius:12px;
  font-weight:700;
  font-size:clamp(13px, 1.8vw, 16px);
  color:#0A0C0F;
  align-self:center;
  cursor:pointer;
  transition:150ms ease;
  white-space:nowrap;
}

.banner-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(0,230,255,0.30);
}

/* Mobile: CTA debajo */
@media (max-width: 640px) {
  .banner {
    justify-content:center;
  }
  
  .banner-cta {
    width:100%;
    text-align:center;
  }
}

/* VIDEO CARD */
.video-card{
  width:100%;
  max-width:920px;
  display:flex;
  align-items:center;
  gap:clamp(12px, 2vw, 22px);
  padding:clamp(16px, 2.5vw, 22px) clamp(16px, 3vw, 28px);
  border-radius:clamp(16px, 2vw, 22px);
  background:rgba(255,255,255,0.03);
  border:1.5px solid rgba(0,230,255,0.22);
  backdrop-filter:blur(12px);
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  margin-top:clamp(16px, 3vw, 26px);
  box-sizing:border-box;
  flex-wrap:wrap;
}

.video-thumb{
  width:clamp(84px, 10vw, 128px);
  height:clamp(84px, 10vw, 128px);
  border-radius:clamp(10px, 1.5vw, 14px);
  object-fit:cover;
  background:#434446;
  border:1.5px solid rgba(0,230,255,0.26);
  flex-shrink:0;
}

.video-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:clamp(4px, 1vw, 6px);
  min-width:200px;
}

.video-title{
  font-size:clamp(15px, 2vw, 18px);
  font-weight:700;
  color:white;
  line-height:1.3;
}

.video-desc{
  font-size:clamp(12px, 1.5vw, 14px);
  color:var(--muted);
  line-height:1.4;
}

.video-cta{
  background:linear-gradient(90deg, var(--accent), var(--accent-secondary));
  padding:clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 20px);
  border-radius:12px;
  font-weight:700;
  font-size:clamp(13px, 1.8vw, 16px);
  color:#0A0C0F;
  text-decoration:none;
  transition:150ms ease;
  align-self:center;
  white-space:nowrap;
  flex-shrink:0;
}

.video-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(0,230,255,0.35);
}

/* Mobile: Stack vertical */
@media (max-width: 640px) {
  .video-card {
    flex-direction:column;
    text-align:center;
    gap:16px;
  }
  
  .video-thumb {
    width:100%;
    max-width:200px;
    height:auto;
    aspect-ratio:1;
  }
  
  .video-body {
    width:100%;
  }
  
  .video-cta {
    width:100%;
    max-width:300px;
  }
}

/* Tablet: Ajuste de gap */
@media (min-width: 641px) and (max-width: 920px) {
  .video-card {
    gap:16px;
  }
  
  .video-cta {
    margin-top:8px;
  }
}

/* FOOTER */
.footer{
  margin-top:auto;
  width:100%;
  padding:0 20px;
  box-sizing:border-box;
}

.footer .small{
  margin-top:20px;
  color:var(--muted);
  font-size:clamp(11px, 1.5vw, 13px);
  /* background:rgba(255,255,255,0.02); */
  padding:8px 12px;
  border-radius:10px;
  text-align:center;
}