/* Nerdeland — design system de la landing (extraído de la plantilla del cliente) */

/* Scroll suave para anclas (#precios, etc.): no toca wire:navigate ni formularios, es CSS puro. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── DARK MODE (default) ── */
:root,
[data-theme="dark"] {
  --nd-purple: #6c3df5;
  --nd-purple-light: #8b5cf6;
  --nd-blue-deep: #0b0f2a;
  --nd-blue-mid: #111538;
  --nd-blue-card: #151a3e;
  --nd-surface: #151a3e;
  --nd-icon: #a78bfa;
  --nd-pink: #e040fb;
  --nd-cyan: #00e5ff;
  --nd-gold: #ffd700;
  --nd-gold-text: #ffd700;
  --nd-text: #e8eaf6;
  --nd-muted: #9095b8;
  --nd-navbar-bg: rgba(11,15,42,0.95);
  --nd-footer-bg: rgba(8,11,30,0.98);
  --nd-logo-color: #fff;
  --nd-nav-hover: #fff;
  --nd-section-alt: var(--nd-blue-mid);
  --nd-card-shadow: rgba(108,61,245,.2);
  --nd-divider: rgba(108,61,245,.4);
  --nd-input-bg: rgba(255,255,255,.06);
  --nd-input-border: rgba(108,61,245,.3);
  --nd-pill-bg: rgba(108,61,245,.12);
  --nd-pill-border: rgba(108,61,245,.25);
  --nd-route-bg: linear-gradient(135deg, #151a3e, rgba(108,61,245,.08));
  --nd-teach-bg: var(--nd-blue-mid);
  --nd-cta-bg: #0b0f2a;
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --nd-blue-deep: #f0f2ff;
  --nd-blue-mid: #e8ebff;
  --nd-blue-card: #ffffff;
  --nd-surface: #ffffff;
  --nd-icon: #6c3df5;
  --nd-text: #1a1d3a;
  --nd-gold-text: #b45309;
  --nd-muted: #5a6080;
  --nd-navbar-bg: rgba(240,242,255,0.97);
  --nd-footer-bg: rgba(220,224,255,0.98);
  --nd-logo-color: #1a1d3a;
  --nd-nav-hover: #1a1d3a;
  --nd-section-alt: #e8ebff;
  --nd-card-shadow: rgba(108,61,245,.12);
  --nd-divider: rgba(108,61,245,.25);
  --nd-input-bg: rgba(108,61,245,.05);
  --nd-input-border: rgba(108,61,245,.25);
  --nd-pill-bg: rgba(108,61,245,.08);
  --nd-pill-border: rgba(108,61,245,.2);
  --nd-route-bg: linear-gradient(135deg, #ffffff, rgba(108,61,245,.05));
  --nd-teach-bg: #e8ebff;
  --nd-cta-bg: #f0f2ff;
}

* { box-sizing: border-box; }

/* Filtro Rubro → Categoría → Habilidad (listados): el panel flota sobre el contenido (position:
   absolute, anclado a .nd-filtro) en vez de empujarlo hacia abajo al abrirse. overflow:visible se
   mantiene en escritorio porque los flyouts de categoría/habilidad escapan hacia la derecha
   (left:100%); en celular los flyouts son estáticos (ver media query de abajo), así que ahí sí
   se puede limitar la altura y scrollear sin cortarlos. */
.nd-filtro { position:relative; }
.nd-mega {
  position:absolute; top:calc(100% + .5rem); left:0; width:min(340px,100%);
  padding:.5rem; overflow:visible !important; transform:none; z-index:1040;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.nd-mega:hover { transform:none; box-shadow:0 20px 50px rgba(0,0,0,.25); border-color:var(--nd-divider); }
.nd-mega-nodo { position:relative; }
.nd-mega-titulo { font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--nd-purple); margin:.4rem .6rem; }
.nd-mega-item { display:flex; align-items:center; width:100%; text-align:left; background:transparent; border:0; border-radius:8px;
  padding:.5rem .6rem; color:var(--nd-text); font-size:.9rem; }
.nd-mega-item:hover { background:var(--nd-pill-bg); }
.nd-mega-item.activo { background:linear-gradient(135deg,var(--nd-purple),var(--nd-pink)); color:#fff; font-weight:600; }
.nd-mega-vacio { color:var(--nd-muted); font-size:.85rem; margin:.3rem .6rem; }
.nd-chip-x { background:none; border:0; color:inherit; font-size:1rem; line-height:1; padding:0 2px; cursor:pointer; }

/* Escritorio: cada nivel se despliega al pasar el mouse sobre el anterior */
.nd-flyout { display:none; position:absolute; top:-.5rem; left:100%; min-width:260px; overflow:visible;
  background:var(--nd-blue-card); border:1px solid var(--nd-card-shadow); border-radius:12px; padding:.5rem;
  box-shadow:0 12px 32px rgba(0,0,0,.25); z-index:1050; }
@media (min-width: 768px) {
  .nd-mega-nodo:hover > .nd-flyout { display:block; }
}

/* Celular: sin cascada; el rubro y la categoría elegidos muestran sus opciones debajo */
@media (max-width: 767px) {
  .nd-mega { width:100%; max-height:70vh; overflow-y:auto; }
  .nd-flyout { position:static; display:none; min-width:0; max-height:none; box-shadow:none; border:0; border-left:2px solid var(--nd-divider);
    border-radius:0; margin:.2rem 0 .4rem .9rem; padding:0 0 0 .4rem; background:transparent; overflow:visible; }
  .nd-mega-nodo.activo > .nd-flyout { display:block; }
}
/* Menú lateral de secciones (panel de usuario): fondo tintado para que no se pierda en claro. */
.nd-side-nav { background: var(--nd-pill-bg); border-color: var(--nd-pill-border) !important; }
.nd-side-nav a:not(.active):hover { background: rgba(108,61,245,.1); }

/* Sin Popper (desplegables propios en nerdeland.js), la alineación "end" de Bootstrap no aplica. */
.dropdown-menu.dropdown-menu-end { right: 0; left: auto; }

/* El navegador pinta el popup nativo de <select> (y otros controles del SO) con su
   paleta por defecto, sin heredar nuestras variables de color: sin esto, en modo
   oscuro el texto de las opciones sale gris claro sobre un fondo blanco que el
   navegador elige solo, casi ilegible. color-scheme es la señal "oficial", pero en
   Windows/Chrome no siempre alcanza por sí sola, así que además coloreamos las
   <option> explícitamente (sí se puede, aunque el select en sí no se pueda). */
[data-theme="dark"] select,
[data-theme="dark"] input,
[data-theme="dark"] textarea { color-scheme: dark; }

[data-theme="light"] select,
[data-theme="light"] input,
[data-theme="light"] textarea { color-scheme: light; }

[data-theme="dark"] select option {
  background-color: var(--nd-blue-card);
  color: var(--nd-text);
}

[data-theme="light"] select option {
  background-color: #ffffff;
  color: var(--nd-text);
}

body {
  background-color: var(--nd-blue-deep);
  color: var(--nd-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}

[x-cloak] { display: none !important; }

/* ── NAVBAR ── */
.nd-navbar {
  background: var(--nd-navbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(108,61,245,0.3);
  position: sticky; top:0; z-index:1000;
  transition: background .35s ease;
}
.nd-logo { font-size: 1.6rem; font-weight: 900; letter-spacing: -1px; color: var(--nd-logo-color) !important; }
.nd-logo span { color: var(--nd-purple); }
.nav-link { color: var(--nd-muted) !important; font-size:.9rem; font-weight:500; transition:.2s; }
.nav-link:hover { color: var(--nd-nav-hover) !important; }

/* ── THEME TOGGLE ── */
.nd-theme-toggle {
  width: 44px; height: 24px;
  background: rgba(108,61,245,.25);
  border: 1.5px solid rgba(108,61,245,.4);
  border-radius: 50px;
  position: relative; cursor: pointer;
  transition: background .3s;
  flex-shrink: 0;
  display: flex; align-items: center; padding: 2px;
}
.nd-theme-toggle .toggle-knob {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nd-purple), var(--nd-pink));
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
}
[data-theme="light"] .nd-theme-toggle { background: rgba(108,61,245,.12); }
[data-theme="light"] .nd-theme-toggle .toggle-knob { transform: translateX(20px); background: linear-gradient(135deg,#f59e0b,#fbbf24); }
.btn-nd-primary {
  background: linear-gradient(135deg, var(--nd-purple), var(--nd-pink));
  border: none; color:#fff; font-weight:600;
  border-radius: 8px; padding: 8px 20px;
  transition: opacity .2s, transform .2s;
}
.btn-nd-primary:hover { opacity:.88; transform:translateY(-1px); color:#fff; }
/* Bootstrap pone el texto en negro al deshabilitar un botón que no usa su clase
   oficial btn-primary/btn-secondary/etc (aquí usamos la nuestra, btn-nd-primary):
   sin esto, wire:loading.attr="disabled" deja el botón con letras negras. */
.btn-nd-primary:disabled,
.btn-nd-primary.disabled { color:#fff; opacity:.75; }
.btn-nd-outline {
  border: 1.5px solid var(--nd-purple); color:var(--nd-purple);
  background: transparent; font-weight:600;
  border-radius:8px; padding:8px 20px; transition:.2s;
}
.btn-nd-outline:hover { background:var(--nd-purple); color:#fff; }

/* ── HERO ── */
.nd-hero {
  min-height: 92vh;
  display: flex; align-items:center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(108,61,245,.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(224,64,251,.2) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(0,229,255,.15) 0%, transparent 50%),
    var(--nd-blue-deep);
  position:relative; overflow:hidden;
}
.nd-hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(108,61,245,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,61,245,.07) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Video de fondo del hero principal (home): cubre toda la sección, detrás de las tarjetas
   flotantes y del texto. object-fit:cover lo recorta en vez de deformarlo en pantallas angostas. */
.nd-hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.nd-hero-video-overlay {
  position:absolute; inset:0; z-index:0;
  /* Más oscuro al centro (donde va el texto) que en los bordes, para que el título siga
     legible sin importar qué tan clara salga esa parte puntual del video, pero sin tapar
     tanto el video que ya no se note (el texto ahora tiene color fijo claro, ver abajo,
     así que no hace falta oscurecer tanto solo para compensar el tema claro). */
  background:radial-gradient(ellipse at center, rgba(5,6,20,.68) 0%, rgba(5,6,20,.42) 100%);
}

.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(108,61,245,.18); border:1px solid rgba(108,61,245,.4);
  /* --nd-icon en vez de --nd-purple-light: contraste 4.44:1 sobre el fondo del hero, justo bajo
     el 4.5:1 de WCAG AA para texto normal (no califica como texto grande). */
  color:var(--nd-icon); border-radius:50px; padding:5px 14px;
  font-size:.8rem; font-weight:600; margin-bottom:1.2rem;
}
.hero-title { font-size:clamp(2.4rem,5vw,4rem); font-weight:900; line-height:1.1; }
.hero-title .highlight {
  background: linear-gradient(90deg, var(--nd-purple), var(--nd-pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-subtitle { color:var(--nd-muted); font-size:1.1rem; max-width:520px; line-height:1.7; }
.hero-stats { display:flex; gap:2rem; flex-wrap:wrap; margin-top:2rem; }
.hero-stat-num { font-size:1.8rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.hero-stat-label { font-size:.8rem; color:var(--nd-muted); }
.hero-visual {
  background: linear-gradient(135deg, rgba(108,61,245,.25), rgba(0,229,255,.1));
  border:1px solid rgba(108,61,245,.3); border-radius:24px;
  padding:2rem; backdrop-filter:blur(8px);
}
.course-pill {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:12px 16px; margin-bottom:10px;
  display:flex; align-items:center; gap:12px; transition:.2s;
}
.course-pill:hover { border-color:var(--nd-purple); transform:translateX(4px); }
.course-pill-icon { width:40px;height:40px; border-radius:10px; display:flex;align-items:center;justify-content:center; font-size:1.1rem; flex-shrink:0; }

/* ── HERO "vitrina" (tarjetas flotantes alrededor del texto, estilo Platzi) ── */
.nd-hero-vitrina { min-height:90vh; padding:70px 0; }
.hero-vitrina-center { max-width:640px; margin:0 auto; position:relative; z-index:2; }
.hero-float-card {
  position:absolute; width:180px; aspect-ratio:3/4;
  border-radius:20px; overflow:hidden; display:block;
  box-shadow:0 20px 45px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .25s, box-shadow .25s;
  z-index:1;
}
.hero-float-card:hover { box-shadow:0 25px 55px rgba(0,0,0,.55); }
.hero-float-img { position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-float-grad {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; color:#fff;
  background:linear-gradient(135deg, var(--nd-purple), var(--nd-pink));
}
.hero-float-overlay {
  position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px;
  background:linear-gradient(0deg, rgba(0,0,0,.88) 15%, transparent 100%);
  color:#fff;
}
.hero-float-title { font-weight:700; font-size:.9rem; line-height:1.25; margin-bottom:3px; }
.hero-float-meta { font-size:.7rem; opacity:.85; }
.hero-float-stats { font-size:.68rem; opacity:.65; margin-top:1px; }

.hero-float-tl { top:-45px; left:0; animation:heroFloatTL 5s ease-in-out infinite; }
.hero-float-tr { top:-45px; right:0; animation:heroFloatTR 5.5s ease-in-out infinite .3s; }
.hero-float-bl { bottom:-55px; left:4%; animation:heroFloatBL 6s ease-in-out infinite .6s; }
.hero-float-br { bottom:-55px; right:4%; animation:heroFloatBR 5.2s ease-in-out infinite .2s; }
@keyframes heroFloatTL { 0%,100%{transform:rotate(-8deg) translateY(0)} 50%{transform:rotate(-8deg) translateY(-14px)} }
@keyframes heroFloatTR { 0%,100%{transform:rotate(7deg) translateY(0)} 50%{transform:rotate(7deg) translateY(-10px)} }
@keyframes heroFloatBL { 0%,100%{transform:rotate(6deg) translateY(0)} 50%{transform:rotate(6deg) translateY(-16px)} }
@keyframes heroFloatBR { 0%,100%{transform:rotate(-7deg) translateY(0)} 50%{transform:rotate(-7deg) translateY(-12px)} }

/* Tablet y celular: siguen flotando e inclinadas como en escritorio (nunca se ocultan ni se
   convierten en otra cosa), solo más chicas y más pegadas al borde — como body tiene
   overflow-x:hidden, lo que se sale del viewport simplemente se recorta, igual que en la
   referencia de diseño, en vez de empujar o toparse con el texto del centro. */
@media (max-width: 1199px) {
  .hero-float-card { width:135px; }
  /* El contenedor donde flotan (.container) solo mide lo que ocupa el texto (no toda la sección),
     así que arriba/abajo queda poco margen entre la tarjeta superior y la inferior si los offsets
     son chicos — por eso acá son bastante más grandes que en escritorio (hay más espacio vacío
     arriba/abajo de sobra, ver .nd-hero-vitrina). A los costados, se empujan bien hacia afuera del
     contenedor para no pisar la columna de texto (máx. 640px, centrada). */
  .hero-float-tl { top:-70px; left:-108px; }
  .hero-float-tr { top:-80px; right:-108px; }
  .hero-float-bl { bottom:-75px; left:-95px; }
  .hero-float-br { bottom:-85px; right:-108px; }
  /* En tablet y celular la tarjeta queda chica y pegada al borde (parcialmente recortada por
     overflow-x:hidden): el título/autor/horas ya no caben legibles ahí, así que se ocultan y
     queda solo la imagen de fondo (o el degradado si no tiene), como miniatura decorativa. */
  .hero-float-overlay { display:none; }
}
@media (max-width: 767px) {
  .hero-float-card { width:88px; }
  /* En celular el texto del hero ya ocupa casi todo el ancho del contenedor (no hay margen natural
     como en tablet con la columna de 640px): se le da un respiro a los costados para que las
     tarjetas tengan dónde asomar sin taparlo, y el título se achica un poco (el clamp() general no
     baja de 2.4rem) para no invadir en 3 líneas la zona vertical donde flotan las tarjetas. */
  .hero-vitrina-center { padding:0 64px; }
  .hero-title { font-size:1.9rem; }
  .hero-float-tl { top:-16px; left:-40px; }
  .hero-float-tr { top:-30px; right:-40px; }
  .hero-float-bl { bottom:-20px; left:-34px; }
  .hero-float-br { bottom:-34px; right:-40px; }
}

/* ── PARALLAX "Aprende a tu ritmo" ── */
/* Siempre oscuro con texto blanco en los dos temas: es una foto nocturna (la Tierra desde el
   espacio), forzarle los colores del tema claro se vería raro — mismo criterio que .nd-curso-hero. */
.nd-parallax {
  position:relative; min-height:320px; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed; padding:70px 0; overflow:hidden;
}
.nd-parallax-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,10,28,.6) 0%, rgba(8,10,28,.75) 100%);
}
.nd-parallax-text {
  position:relative; z-index:1; color:#fff; font-size:clamp(1.3rem,3vw,2.1rem); font-weight:700;
  line-height:1.45; max-width:780px; margin:0 auto; text-align:center;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
@media (max-width: 767px) {
  /* background-attachment:fixed no funciona bien (o nada) en iOS Safari y varios Android: se
     desactiva ahí y queda como una imagen de fondo normal, sin el efecto de scroll. */
  .nd-parallax { background-attachment:scroll; min-height:260px; padding:50px 0; }
}

/* ── SECTION TITLES ── */
.nd-section { padding:90px 0; }
.section-tag { color:var(--nd-purple); font-size:.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.section-title { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:#fff; }
.section-sub { color:var(--nd-muted); font-size:1rem; max-width:560px; }

/* ── CARDS ── */
.nd-card {
  background: var(--nd-blue-card);
  border:1px solid rgba(108,61,245,.2);
  border-radius:20px; transition:.25s; overflow:hidden;
}
.nd-card:hover { border-color:var(--nd-purple); transform:translateY(-6px); box-shadow:0 20px 50px var(--nd-card-shadow); }
/* .nd-side-nav también es .nd-card, pero es un menú de navegación fijo, no una tarjeta clicable:
   sin el "levantarse" ni la sombra grande, que en claro se veía como una sombra tapando la opción activa. */
.nd-side-nav:hover { transform:none; box-shadow:none; }

/* ── MARQUEE DE TESTIMONIOS ── */
/* Franja horizontal infinita: el track dibuja el mismo set de tarjetas 2 veces (ver blade) y se
   desliza -50%, que es exactamente el ancho de un set, así el loop no se nota. */
.nd-marquee {
  overflow:hidden; position:relative; width:100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.nd-marquee-track { display:flex; gap:1.5rem; width:max-content; padding:0 1.5rem; animation: nd-marquee-scroll 60s linear infinite; }
.nd-marquee:hover .nd-marquee-track, .nd-marquee:focus-within .nd-marquee-track { animation-play-state: paused; }
.nd-testimonio-card {
  flex:0 0 320px; background: var(--nd-blue-card); border:1px solid rgba(108,61,245,.2);
  border-radius:20px; padding:1.5rem;
}
@keyframes nd-marquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nd-marquee-track { animation:none; }
}

/* ── RUTAS ── */
.route-card {
  background: var(--nd-route-bg);
  border:1px solid rgba(108,61,245,.2); border-radius:20px; padding:1.8rem;
  transition:.25s;
}
.route-card:hover { border-color:var(--nd-purple); transform:translateY(-4px); }
.route-step { display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.route-num {
  width:28px;height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--nd-purple),var(--nd-pink));
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem; font-weight:700; flex-shrink:0; color: #fff;
}

/* ── PRICING ── */
.price-card {
  background:var(--nd-blue-card); border:1px solid rgba(108,61,245,.2);
  border-radius:24px; padding:2.5rem 2rem; text-align:center; transition:.25s;
}
.price-card.featured {
  border-color:var(--nd-purple);
  background:linear-gradient(160deg, rgba(108,61,245,.25), var(--nd-blue-card));
  transform:scale(1.04);
}
.price-card:hover { box-shadow:0 20px 50px rgba(108,61,245,.2); }
.price-badge { background:linear-gradient(135deg,var(--nd-purple),var(--nd-pink)); color:#fff; font-size:.7rem; font-weight:700; padding:3px 12px; border-radius:50px; }
.price-amount { font-size:3rem; font-weight:900; color:var(--nd-text); }
.price-period { color:var(--nd-muted); font-size:.9rem; }
.price-feature { display:flex; align-items:center; gap:8px; color:var(--nd-muted); font-size:.9rem; margin-bottom:8px; }
.price-feature i { color:var(--nd-purple); }

/* ── TEACH ── */
.teach-section {
  background:
    radial-gradient(ellipse at 0% 50%, rgba(108,61,245,.2) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 50%, rgba(0,229,255,.1) 0%, transparent 55%),
    var(--nd-teach-bg);
  border-top:1px solid rgba(108,61,245,.2);
  border-bottom:1px solid rgba(108,61,245,.2);
}
.teach-step { display:flex; gap:1.2rem; margin-bottom:1.5rem; }
.teach-step-num {
  width:48px;height:48px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,var(--nd-purple),var(--nd-pink));
  display:flex;align-items:center;justify-content:center; font-weight:800; color:#fff;
}

/* ── EVENTS ── */
.event-card {
  background:var(--nd-blue-card); border:1px solid rgba(255,215,0,.2);
  border-radius:20px; overflow:hidden; transition:.25s;
}
.event-card:hover { border-color:var(--nd-gold); transform:translateY(-5px); box-shadow:0 20px 50px rgba(255,215,0,.1); }
.event-header {
  background:linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,140,0,.08));
  padding:1.5rem; border-bottom:1px solid rgba(255,215,0,.15);
}
.event-trophy { font-size:2rem; }
.prize-badge {
  background:linear-gradient(135deg,var(--nd-gold),#ff8c00);
  color:#000; font-size:.75rem; font-weight:800; padding:3px 12px; border-radius:50px;
}

/* ── FOOTER ── */
.nd-footer { background: var(--nd-footer-bg); border-top:1px solid rgba(108,61,245,.2); transition: background .35s ease; }
.footer-logo { font-size:1.4rem; font-weight:900; color:var(--nd-text); }
.footer-logo span { color:var(--nd-purple); }
.footer-link { color:var(--nd-muted); font-size:.9rem; text-decoration:none; transition:.2s; }
.footer-link:hover { color:var(--nd-text); }
.social-btn {
  width:38px;height:38px; border-radius:10px;
  background:rgba(108,61,245,.15); border:1px solid rgba(108,61,245,.3);
  display:flex;align-items:center;justify-content:center;
  color:var(--nd-muted); text-decoration:none; transition:.2s;
}
.social-btn:hover { background:var(--nd-purple); color:#fff; border-color:var(--nd-purple); }

/* ── LIGHT MODE — overrides de textos blancos hardcoded ── */
[data-theme="light"] .hero-title,
[data-theme="light"] .section-title,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] .price-amount,
[data-theme="light"] .hero-stat-num { color: var(--nd-text) !important; }
[data-theme="light"] .nd-logo { color: var(--nd-text) !important; }
[data-theme="light"] .course-pill { background:rgba(108,61,245,.06); border-color:rgba(108,61,245,.15); }
[data-theme="light"] .hero-visual { background:linear-gradient(135deg,rgba(108,61,245,.08),rgba(0,229,255,.04)); border-color:rgba(108,61,245,.2); }

/* Este hero siempre tiene el video oscuro de fondo, en los dos temas: su texto queda con
   colores claros fijos (no var(--nd-text)/var(--nd-muted), que cambian con el tema y en claro
   quedarían oscuros sobre un fondo que sigue siendo oscuro) — mismo criterio que .nd-curso-hero.
   Va DESPUÉS del bloque "LIGHT MODE" de arriba a propósito: esa regla también pelea por
   `.hero-title` con la misma especificidad y !important, así que gana quien esté más abajo. */
.nd-hero-vitrina .hero-badge { color:#c9b8ff !important; }
.nd-hero-vitrina .hero-title { color:#fff !important; }
.nd-hero-vitrina .hero-subtitle,
.nd-hero-vitrina .hero-start-note { color:#e6e3f7 !important; }
[data-theme="light"] .nd-hero { background:
  radial-gradient(ellipse at 20% 50%, rgba(108,61,245,.12) 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, rgba(224,64,251,.08) 0%, transparent 55%),
  radial-gradient(ellipse at 60% 80%, rgba(0,229,255,.06) 0%, transparent 50%),
  var(--nd-blue-deep); }
[data-theme="light"] .nd-hero::before { background-image:
  linear-gradient(rgba(108,61,245,.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(108,61,245,.04) 1px, transparent 1px);
  background-size:60px 60px; }
[data-theme="light"] .price-card.featured { background:linear-gradient(160deg,rgba(108,61,245,.08),#fff); }
[data-theme="light"] .nd-progress { background:rgba(0,0,0,.08); }
[data-theme="light"] .countdown-box { background:rgba(255,215,0,.05); border-color:rgba(255,215,0,.3); }
[data-theme="light"] .floating-card { background:rgba(255,255,255,.9); border-color:rgba(108,61,245,.2); }
[data-theme="light"] .bg-pill { background:rgba(108,61,245,.08); border-color:rgba(108,61,245,.2); }
[data-theme="light"] .nav-pills .nav-link { border-color:rgba(108,61,245,.2); color:var(--nd-muted); }
[data-theme="light"] .nav-pills .nav-link:hover { color:var(--nd-text); }
[data-theme="light"] .input-group .form-control { background:rgba(108,61,245,.05); border-color:rgba(108,61,245,.25); color:var(--nd-text); }
[data-theme="light"] .nd-cta-section { background: radial-gradient(ellipse at 50% 50%, rgba(108,61,245,.12) 0%, transparent 70%), var(--nd-blue-deep); }
[data-theme="light"] input::placeholder { color: var(--nd-muted); }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--nd-blue-deep); }

/* ── DIVIDER ── */
.nd-divider { height:1px; background:linear-gradient(90deg,transparent,rgba(108,61,245,.4),transparent); margin:0; }

/* ── MISC ── */
.bg-pill {
  /* --nd-icon en vez de --nd-purple-light: con fondo rgba(108,61,245,.12) el texto quedaba en ~4:1 de
     contraste (bajo el 4.5:1 que pide WCAG AA para texto normal); --nd-icon es más claro y sí lo cumple. */
  background:rgba(108,61,245,.12); border:1px solid rgba(108,61,245,.25);
  color:var(--nd-icon); border-radius:50px; padding:4px 14px; font-size:.8rem; font-weight:600;
}
.floating-card {
  background:rgba(21,26,62,.9); border:1px solid rgba(108,61,245,.3);
  border-radius:14px; padding:.8rem 1.2rem; backdrop-filter:blur(8px);
}

/* ── ANIMATIONS ── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 20px rgba(108,61,245,.3)} 50%{box-shadow:0 0 40px rgba(108,61,245,.6)} }
.float-anim { animation: float 4s ease-in-out infinite; }
.pulse-anim { animation: pulse-glow 3s ease-in-out infinite; }

/* Carátula "cargando" para cursos/carreras/escuelas/rutas sin imagen propia (ver nd-portada.blade.php):
   el mismo degradado de marca, con un brillo que se desliza para que no se sienta un hueco vacío. */
@keyframes nd-skeleton-shimmer { from { background-position: -150% 0; } to { background-position: 250% 0; } }
.nd-skeleton {
  background:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%),
    linear-gradient(135deg, rgba(108,61,245,.5), rgba(0,229,255,.25));
  background-size: 200% 100%, 100% 100%;
  animation: nd-skeleton-shimmer 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .nd-skeleton { animation: none; } }

*, *::before, *::after { transition: background-color .3s ease, border-color .3s ease, color .2s ease, box-shadow .3s ease; }
.float-anim, .pulse-anim, .nd-skeleton { transition: none !important; animation-play-state: running; }

[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"] { color: var(--nd-text) !important; }
[data-theme="light"] .btn-nd-primary,
[data-theme="light"] .btn-nd-primary *,
[data-theme="light"] .price-badge,
[data-theme="light"] .hero-badge,
[data-theme="light"] .route-num,
[data-theme="light"] .teach-step-num,
[data-theme="light"] .btn-nd-primary { color: #fff !important; }
[data-theme="light"] .route-num,
[data-theme="light"] .teach-step-num { color: #fff !important; }

.nav-pills .nav-link.active { background: linear-gradient(135deg,var(--nd-purple),var(--nd-pink)) !important; color: #fff !important; }
.nav-pills .nav-link { color:var(--nd-muted); border:1px solid rgba(108,61,245,.2); margin:4px; border-radius:50px; }
.nav-pills .nav-link:hover { color:#fff; border-color:var(--nd-purple); }

.nd-progress { background:rgba(255,255,255,.08); border-radius:50px; height:6px; overflow:hidden; }
.nd-progress-bar { height:100%; background:linear-gradient(90deg,var(--nd-purple),var(--nd-pink)); border-radius:50px; }

.countdown-box {
  background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.25);
  border-radius:16px; padding:1rem 1.5rem; text-align:center;
}
.countdown-num { font-size:2rem; font-weight:900; color:var(--nd-gold); line-height:1; }
.countdown-label { font-size:.7rem; color:var(--nd-muted); text-transform:uppercase; letter-spacing:1px; }

::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--nd-blue-deep)}
::-webkit-scrollbar-thumb{background:var(--nd-purple);border-radius:3px}

/* ── Layout general: footer abajo, títulos de footer, formularios, accesibilidad ── */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main, body > div[wire\:id] { flex: 1 0 auto; }
.footer-title { color: var(--nd-text); font-weight: 700; margin-bottom: 1rem; font-size: .9rem; }
.nd-input {
  background: var(--nd-input-bg); border: 1px solid var(--nd-input-border); color: var(--nd-text);
  border-radius: 10px; padding: .6rem .9rem;
}
.nd-input:focus { background: var(--nd-input-bg); color: var(--nd-text); border-color: var(--nd-purple); box-shadow: 0 0 0 .2rem rgba(108,61,245,.25); }
.nd-input::placeholder { color: var(--nd-muted); }
.nd-label { color: var(--nd-muted); font-size: .85rem; margin-bottom: .3rem; }
/* --nd-icon en vez de --nd-purple-light: mismo motivo de contraste que .bg-pill y .hero-badge. */
.nav-link.active { color: var(--nd-icon) !important; font-weight: 600; }
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  background: var(--nd-blue-card); border: 1px solid rgba(108,61,245,.3); color: var(--nd-text);
  border-radius: 12px; padding: .75rem 1rem; font-weight: 600; transition: .2s;
}
.btn-social:hover { border-color: var(--nd-purple); transform: translateY(-1px); color: var(--nd-text); }
.nd-auth-card { max-width: 440px; margin: 0 auto; padding: 2.2rem; }
.nd-stat-card { text-align: center; padding: 1.4rem; }
.nd-stat-card .num { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, var(--nd-purple), var(--nd-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nd-error-code { font-size: clamp(5rem, 18vw, 9rem); font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--nd-purple), var(--nd-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* Textos que estaban en blanco fijo (#fff) deben seguir el tema: */
.nd-card h5, .nd-card h4, .nd-card h3, .route-card h5, .event-card h4 { color: var(--nd-text); }

/* Tarjetas de listado completas como enlace */
.nd-card-link { color: inherit; }
.nd-card-link:hover .nd-card, .nd-card-link:hover.route-card, .nd-card-link:hover .route-card { border-color: rgba(108,61,245,.5); transform: translateY(-2px); transition: transform .15s, border-color .15s; }
.nd-card-link .route-card, .nd-card-link .nd-card { transition: transform .15s, border-color .15s; }

/* Checkout: el resumen queda fijo solo en pantallas grandes (en móvil no tapa el contenido). */
@media (min-width: 992px) {
  .checkout-sticky { position: sticky; top: 20px; }
  .checkout-sticky-cupon { position: sticky; top: 260px; }
}

/* Curso: la tarjeta de compra sube sobre el encabezado oscuro y sigue el scroll (solo pantallas grandes). */
@media (min-width: 992px) {
  .nd-curso-compra { position: relative; z-index: 2; margin-top: -330px; }
  .nd-curso-compra > .nd-card { position: sticky; top: 90px; }
}

/* Encabezado de curso: en oscuro sigue el fondo del tema; en claro conserva el azul profundo para que el texto blanco se lea. */
.nd-curso-hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(108,61,245,.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(224,64,251,.18) 0%, transparent 55%),
    linear-gradient(180deg, var(--nd-blue-deep) 0%, var(--nd-surface) 100%);
}
[data-theme="light"] .nd-curso-hero { background: linear-gradient(180deg,#0b0a1f 0%,#14122e 100%); }

/* Encabezado de curso: colores del texto según el tema. */
:root { --nd-hero-text: #ffffff; --nd-hero-sub: #e6e3f7; --nd-hero-muted: #bdb8e0; --nd-hero-link: #c9b8ff; }
[data-theme="light"] {
  --nd-hero-text: #1a1d3a; --nd-hero-sub: #3b3f63; --nd-hero-muted: #5a6080; --nd-hero-link: #6c3df5;
}
[data-theme="light"] .nd-curso-hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(108,61,245,.14) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(224,64,251,.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--nd-blue-deep) 0%, var(--nd-surface) 100%);
}

/* Encabezado de curso: mismo degradado que el botón "Comprar ahora" (btn-nd-primary), en ambos temas. */
.nd-curso-hero,
[data-theme="light"] .nd-curso-hero,
[data-theme="dark"] .nd-curso-hero {
  background: linear-gradient(135deg, var(--nd-purple), var(--nd-pink));
}
[data-theme="light"] {
  --nd-hero-text: #ffffff; --nd-hero-sub: #f3efff; --nd-hero-muted: #ece6ff; --nd-hero-link: #ffffff;
}

/* Enlace de volver dentro del encabezado morado: texto claro para que se lea. */
.nd-curso-hero a.footer-link, .nd-curso-hero a.footer-link:hover { color: var(--nd-hero-text) !important; }

/* Las píldoras de modalidad (bg-pill: "Híbrida", "Síncrona"...) usan tonos morados pensados para
   el fondo normal de la página; sobre el degradado morado-rosa del encabezado del curso casi
   desaparecen. Mismo tratamiento que el link "Volver": blanco translúcido en vez del morado. */
.nd-curso-hero .bg-pill {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff;
}

/* Carreras, escuelas y especializaciones: encabezado más bajo, así que la tarjeta de compra sube menos. */
@media (min-width: 992px) {
  .nd-curso-compra.nd-compra-corta { margin-top: -200px; }
}

/* Ventana para cambiar el país y la moneda (encabezado). */
.nd-modal-pais { background: var(--nd-surface); color: var(--nd-text); border: 1px solid var(--nd-input-border); border-radius: 14px; width: 90%; max-width: 420px; padding: 0; }
.nd-modal-pais::backdrop { background: rgba(0,0,0,.55); }

/* Menú del panel: tarjeta fija en escritorio (≥992px); por debajo, offcanvas que se desliza
   desde la izquierda (Bootstrap ya lo hace solo con .offcanvas-lg, esto solo lo tiñe con
   nuestra paleta en vez de los colores por defecto de Bootstrap). */
.nd-panel-menu.offcanvas-lg { --bs-offcanvas-bg: var(--nd-surface); --bs-offcanvas-color: var(--nd-text); }
@media (max-width: 991.98px) {
  .nd-panel-menu.offcanvas-lg { border-right: 1px solid var(--nd-input-border); }
  .nd-panel-menu .offcanvas-header { border-bottom: 1px solid var(--nd-divider); }
}

/* ── LANDINGS B2B (empresas, instituciones): chips flotantes sobre el hero ── */
.hero-chip { position:absolute; z-index:2; }
.hero-chip-1 { top:6%; left:1%; animation-delay:.2s; }
.hero-chip-2 { top:12%; right:2%; animation-delay:1s; }
.hero-chip-3 { bottom:10%; left:4%; animation-delay:1.6s; }
.hero-chip-4 { bottom:18%; right:5%; animation-delay:.6s; }
@media (max-width: 1299px) { .hero-chip { display:none; } }
.hero-chip-icon { width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--nd-purple),var(--nd-pink));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; }

/* ── Tira animada (marquee) de rubros/beneficios: se desliza sola en bucle y se pausa al pasar el mouse ── */
.nd-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.nd-marquee-track { display:flex; width:max-content; gap:.75rem; animation:nd-marquee-scroll 36s linear infinite; }
.nd-marquee:hover .nd-marquee-track { animation-play-state:paused; }
@keyframes nd-marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.nd-marquee-item { white-space:nowrap; flex-shrink:0; }

/* ── Aparición al hacer scroll (progresiva: sin JS o con "reducir movimiento" el contenido ya está visible) ── */
@media (prefers-reduced-motion: no-preference) {
  .nd-reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.65,.3,1), transform .7s cubic-bezier(.2,.65,.3,1); }
  .nd-reveal.is-visible { opacity:1; transform:translateY(0); }
  .nd-reveal-d1 { transition-delay:.08s; }
  .nd-reveal-d2 { transition-delay:.16s; }
  .nd-reveal-d3 { transition-delay:.24s; }
  .nd-reveal-d4 { transition-delay:.32s; }
}

/* ── Degradado de fondo "aurora" reutilizable para secciones destacadas (precios, CTA con más presencia) ── */
.nd-aurora { position:relative; overflow:hidden; }
.nd-aurora::before {
  content:''; position:absolute; inset:-20%; z-index:0; opacity:.55;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(108,61,245,.35), transparent 60%),
    radial-gradient(ellipse 45% 35% at 85% 15%, rgba(224,64,251,.25), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(0,229,255,.18), transparent 60%);
  animation:nd-aurora-drift 16s ease-in-out infinite alternate;
}
.nd-aurora > * { position:relative; z-index:1; }
@keyframes nd-aurora-drift { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-2%,2%,0) scale(1.06)} }
[data-theme="light"] .nd-aurora::before { opacity:.3; }