/* =========================================================
   ENTHRA — Sistema visual compartido
   Extraído de la maqueta original (enthra-landing.html).
   No modificar colores ni tipografías sin una razón clara.
   ========================================================= */

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  background: #0A0A0A;
  color: #fff;
  font-family: 'Sora', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(6,182,212,0.30); color: #fff; }
:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; border-radius: 6px; }

/* ---------- BACKGROUND LAYERS (global) ---------- */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
}
.bg-grid-fine {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- AURORA GLOW ---------- */
.aurora { position: absolute; border-radius: 9999px; filter: blur(80px); will-change: transform; }

/* ---------- TEXT GRADIENT ---------- */
.text-grad {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-cyan-grad {
  background: linear-gradient(120deg, #22D3EE 0%, #06B6D4 50%, #0891B2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- ANIMATED CONIC BORDER (cards) ---------- */
.conic-border { position: relative; isolation: isolate; }
.conic-border::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from 0deg, transparent 0%, rgba(6,182,212,0.55) 20%, transparent 40%, transparent 60%, rgba(6,182,212,0.35) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.conic-border:hover::before { opacity: 1; animation: spinConic 6s linear infinite; }
@keyframes spinConic { to { transform: rotate(360deg); } }

/* ---------- SPOTLIGHT (mouse follow) ---------- */
.spotlight-target { position: relative; }
.spotlight-target::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(6,182,212,0.10), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
}
.spotlight-target:hover::before { opacity: 1; }

/* ---------- REVEAL ON SCROLL ---------- */
[data-reveal] { opacity: 0; transform: translate3d(0,28px,0); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: translate3d(0,0,0); }
[data-reveal-delay="100"] { transition-delay: .1s; }
[data-reveal-delay="200"] { transition-delay: .2s; }
[data-reveal-delay="300"] { transition-delay: .3s; }
[data-reveal-delay="400"] { transition-delay: .4s; }
[data-reveal-delay="500"] { transition-delay: .5s; }

/* ---------- MARQUEE ---------- */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { animation: marquee 34s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- DOTTED CONNECTOR ---------- */
.dotted-v {
  background-image: linear-gradient(180deg, rgba(6,182,212,0.55) 0 6px, transparent 6px 14px);
  background-size: 1px 14px; background-repeat: repeat-y;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,0.45); }

/* ---------- BUTTONS ---------- */
.btn-primary {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #22D3EE 0%, #06B6D4 100%);
  color: #06121A; transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary::after {
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background: radial-gradient(60% 80% at 50% 50%, rgba(34,211,238,0.45), transparent 70%);
  filter: blur(14px); opacity: .55; transition: opacity .25s ease;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:hover::after { opacity: .9; }

.btn-ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }

.btn-white {
  background:#fff; color:#000; transition: background .25s ease, transform .15s ease;
}
.btn-white:hover { background: rgba(255,255,255,0.9); }
.btn-white:active { transform: scale(.98); }

/* ---------- GLASS ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* ---------- DIVIDER LABEL ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #22D3EE; font-weight: 500;
}
.eyebrow::before {
  content:""; width: 6px; height: 6px; border-radius: 9999px; background: #22D3EE;
  box-shadow: 0 0 0 4px rgba(34,211,238,0.18); flex: none;
}

/* ---------- NAV ---------- */
.nav-scrolled {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.7,.2,1); }
#mobile-menu.open { max-height: 80vh; overflow-y: auto; }

/* ---------- COURSE CARD ACCENT ---------- */
.course-accent {
  position:absolute; inset:auto; bottom:-40%; left:50%; transform:translateX(-50%);
  width:80%; aspect-ratio:1/1; border-radius:9999px;
  background: radial-gradient(circle, rgba(6,182,212,0.35), transparent 60%);
  filter: blur(36px); opacity:.35; transition: opacity .4s ease; pointer-events:none;
}
.group:hover .course-accent { opacity: .85; }

/* ---------- SHIMMER LINE ---------- */
.shimmer-line { background: linear-gradient(90deg, transparent, rgba(34,211,238,0.6), transparent); background-size: 200% 100%; }

/* ---------- SHINY GRADIENT TEXT (hero) ---------- */
.text-shiny {
  background-image: linear-gradient(to right,
    #091020 0%, #0B2551 12.5%, #A4F4FD 32.5%, #00d2ff 50%,
    #0B2551 67.5%, #091020 87.5%, #091020 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: url(#c3-noise);
}
.animate-shiny { animation: shiny 6s linear infinite; }
@keyframes shiny {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ---------- VIDEO BG VIGNETTE ---------- */
.video-vignette {
  background:
    radial-gradient(120% 80% at 50% 25%, rgba(10,10,10,0.20) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.85) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.20) 0%, rgba(10,10,10,0.40) 50%, rgba(10,10,10,0.92) 100%);
}
/* En móvil el video de fondo se sustituye por un degradado equivalente (ahorro de datos) */
@media (max-width: 640px) {
  .bg-video { display: none; }
  .bg-video-fallback { display: block; }
}
.bg-video-fallback {
  display: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(6,182,212,0.20) 0%, transparent 65%),
    linear-gradient(180deg, #0E1116 0%, #0A0A0A 60%);
}

/* =========================================================
   COMPONENTES NUEVOS (siguen el mismo lenguaje visual)
   ========================================================= */

/* ---------- PLACEHOLDER (contenido pendiente de definir) ---------- */
.ph {
  border: 1px dashed rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.05);
  border-radius: 12px;
}
.ph-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#FBBF24; background:rgba(251,191,36,0.10);
  border:1px solid rgba(251,191,36,0.25);
  padding:2px 8px; border-radius:9999px;
}

/* ---------- SELECTOR "¿QUÉ QUIERES APRENDER?" ---------- */
.picker-opt {
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.picker-opt[aria-selected="true"] {
  border-color: rgba(34,211,238,0.55);
  background: rgba(6,182,212,0.08);
}
.picker-opt[aria-selected="true"] .picker-dot { background:#22D3EE; box-shadow:0 0 0 4px rgba(34,211,238,0.18); }
.picker-panel { display:none; }
.picker-panel.active { display:block; animation: fadeUp .5s cubic-bezier(.2,.7,.2,1); }
@keyframes fadeUp { from { opacity:0; transform: translate3d(0,12px,0);} to { opacity:1; transform:none; } }

/* ---------- ACORDEÓN (temario / FAQ) ---------- */
.acc-item { border-bottom: 1px solid rgba(255,255,255,0.07); }
.acc-trigger {
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  text-align:left; padding:1.15rem 0; cursor:pointer; transition: color .25s ease;
}
.acc-trigger:hover { color:#22D3EE; }
.acc-icon { transition: transform .35s cubic-bezier(.2,.7,.2,1); flex:none; }
.acc-trigger[aria-expanded="true"] .acc-icon { transform: rotate(45deg); color:#22D3EE; }
.acc-panel { display:grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.7,.2,1); }
.acc-panel > div { overflow:hidden; }
.acc-trigger[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; }

/* ---------- CERTIFICADO ---------- */
.cert {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    #0B0C0F;
  border:1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 80px -30px rgba(6,182,212,0.35);
}
.cert-guilloche {
  background-image:
    repeating-linear-gradient(115deg, rgba(6,182,212,0.10) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(65deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 11px);
}

/* ---------- TABLA DE SESIONES ---------- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap table { min-width: 640px; width:100%; border-collapse:collapse; }
.table-wrap th, .table-wrap td { text-align:left; padding:.85rem 1rem; border-bottom:1px solid rgba(255,255,255,0.06); vertical-align:top; }
.table-wrap th { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,0.36); font-weight:500; }
.table-wrap tbody tr:hover { background: rgba(255,255,255,0.02); }

/* ---------- FORM ---------- */
.field {
  width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10);
  border-radius:12px; padding:.8rem 1rem; color:#fff; font-size:14px;
  transition:border-color .25s ease, background .25s ease;
}
.field::placeholder { color: rgba(255,255,255,0.30); }
.field:focus { outline:none; border-color:rgba(34,211,238,0.55); background:rgba(255,255,255,0.05); }

/* ---------- CHIP ---------- */
.chip {
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03);
  border-radius:9999px; padding:.3rem .7rem; font-size:12px; color:rgba(255,255,255,0.75);
}

/* ---------- REDUCE MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}