/* ==========================================================================
   HERO — Leren Cloud
   ========================================================================== */
.hero{
  position:relative;
  min-height:88vh;
  background:
    radial-gradient(50% 50% at 85% 15%, rgba(37, 99, 235, .09), transparent 60%),
    radial-gradient(60% 45% at 10% 85%, rgba(14, 165, 233, .08), transparent 60%),
    #FFFFFF;
  color:var(--text-dark);
  overflow:hidden;
  display:flex;
  align-items:center;
  padding-top:130px;
}
.hero-grid{
  width:var(--container); margin-inline:auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:center;
  padding-bottom:50px;
}
.hero-copy .eyebrow{ margin-bottom:22px; }
.hero-copy h1{
  font-size:clamp(2.5rem, 5.2vw, 4.2rem);
  line-height:1.06;
  color:var(--text-dark);
}
.hero-copy h1 em{ font-style:italic; color:var(--gold); font-weight:500; }
.hero-copy p{
  margin-top:22px;
  font-size:1.12rem;
  color:var(--text-muted);
  max-width:48ch;
  line-height:1.65;
}
.hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-meta{
  margin-top:52px;
  display:flex;
  gap:44px;
  flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid var(--paper-3);
}
.hero-meta div span{ display:block; }
.hero-meta .mono-num{ font-size:1.7rem; color:var(--gold); font-weight:700; }
.hero-meta small{ font-size:.78rem; color:var(--text-muted); letter-spacing:.02em; font-weight:500; }

/* --- Constelación --- */
.constellation-wrap{
  position:relative;
}
.constellation-intro{
  text-align:center;
  font-size:.95rem;
  color:var(--text-muted);
  margin-bottom:18px;
  max-width:38ch;
  margin-inline:auto;
}
.constellation-intro strong{ color:var(--gold); font-weight:600; }
.constellation-hint{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted);
  display:flex; align-items:center; gap:8px;
  opacity:.85;
}
.constellation-hint svg{ width:13px; height:13px; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);} }

.constellation{
  position:relative;
  height:min(72vw, 540px);
  min-height:380px;
}
.const-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.const-line{
  fill:none;
  stroke:rgba(217,119,6,.35);
  stroke-width:1.6;
  transition:stroke .4s;
}

.const-node{
  position:absolute; top:0; left:0;
  border:none; background:none; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer;
  will-change:transform;
}
.const-node-ring{
  width:88px; height:88px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  border:2px solid rgba(217,119,6,.45);
  background:#FFFFFF;
  box-shadow:0 12px 30px -10px rgba(15,23,42,.12);
  transition:border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.const-node:hover .const-node-ring, .const-node:focus-visible .const-node-ring{
  border-color:var(--gold);
  transform:scale(1.08);
  box-shadow:0 18px 40px -12px rgba(217,119,6,.3);
}
.const-node-ring img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) brightness(.9);
  transition:filter .4s;
}
.const-node:hover .const-node-ring img{ filter:saturate(1) brightness(1); }
.const-node-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.22);
}
.const-node-play svg{ width:20px; height:20px; color:#FFFFFF; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.const-node-label{
  font-family:var(--font-mono); font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-dark);
  background:#FFFFFF;
  padding:5px 12px;
  border-radius:100px;
  white-space:nowrap;
  border:1px solid var(--paper-3);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.const-node:hover .const-node-label, .const-node:focus-visible .const-node-label{ color:var(--gold); border-color:var(--gold); }

.const-node--center{
  width:132px; height:132px;
  border-radius:50%;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  background:#FFFFFF;
  border:2px solid rgba(217,119,6,.5);
  box-shadow:0 0 0 14px rgba(217,119,6,.06), 0 20px 50px -15px rgba(15,23,42,.12);
  pointer-events:none;
}
.const-node--center img{ width:64%; }

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:130px; }
  .constellation{ height:min(96vw, 460px); margin-top:20px; }
  .hero-meta{ margin-top:44px; gap:30px; }
}
@media (max-width:560px){
  .const-node-ring{ width:64px; height:64px; }
  .const-node--center{ width:96px; height:96px; }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* ==========================================================================
   Lightbox de video
   ========================================================================== */
.video-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,13,22,.88);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
  padding:24px;
}
.video-modal.is-open{ opacity:1; pointer-events:auto; }
.video-modal-inner{
  width:min(920px, 100%);
  transform:scale(.94) translateY(16px);
  transition:transform .45s var(--ease);
}
.video-modal.is-open .video-modal-inner{ transform:scale(1) translateY(0); }
.video-modal-bar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.video-modal-bar span{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; color:var(--text-light-muted); text-transform:uppercase; }
.video-modal-close{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:none; color:var(--text-light);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, transform .3s;
}
.video-modal-close:hover{ border-color:var(--gold); color:var(--gold); transform:rotate(90deg); }
.video-modal-frame-wrap{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--radius-m); overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--ink-3);
}
.video-modal-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }