:root {
  --bg: #0d1d32;
  --panel: #22344a;
  --panel-dark: #0a1424;
  --line: rgba(255, 255, 255, .12);
  --muted: #aebbd3;
  --blue: #2e8dfb;
  --violet: #7169ff;
  --sidebar-width: 86px;
}

* {
  box-sizing: border-box;
}

/* Fondo oscuro también en <html> (no solo <body>): al navegar entre
   páginas (ej. Anterior/Siguiente lección) el navegador pinta el primer
   frame con el fondo de <html> antes de aplicar el CSS del body, y sin
   esto se veía un flash blanco. */
html {
  background: var(--bg);
}

/* Barra de scroll oscura en todo el sitio (el track blanco del navegador
   desentonaba con el tema oscuro). */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) var(--bg);
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 8px;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .28);
  background-clip: padding-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #ffffff;
  /* El fondo NO va aquí: ya lo pinta <html> (ver regla html{background}
     más abajo), que al ser no-transparente se convierte en el "canvas"
     real de la página (la capa más al fondo posible). Si <body> tuviera
     también su propio background, ese fondo se pintaría por delante de
     cualquier elemento con z-index negativo (como #particles-js),
     tapándolo aunque esté dibujando bien por dentro. El color visible
     es exactamente el mismo en ambos casos, esto no cambia nada del
     diseño actual. */
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
input {
  font: inherit;
}

button {
  letter-spacing: 0;
}

.top-offer {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #ffffff;
  background: radial-gradient(circle at 55% 50%, #643cff 0 12%, #100a62 45%, #070724 100%);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}

.top-offer strong {
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 700;
}

.top-offer__rotator {
  overflow: hidden;
  height: 40px;
  display: flex;
  align-items: center;
}

.top-offer__rotator-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  transition: transform .35s ease, opacity .35s ease;
}

.offer-badge {
  width: 86px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 2px solid #6e89ff;
  border-radius: 7px;
  color: #dbe3ff;
  font-weight: 700;
  font-size: 12px;
  line-height: 11px;
  text-align: center;
}

.offer-icon {
  color: #111827;
  font-size: 21px;
  filter: drop-shadow(3px -4px 0 #cabd55);
}

.top-offer button,
.top-offer__cta {
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #18308d;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 18px;
  box-shadow: 0 0 18px rgba(255, 255, 255, .45);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.top-offer .close {
  position: absolute;
  right: 11px;
  top: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  padding: 0;
  font-size: 21px;
  box-shadow: none;
  cursor: pointer;
}

.sidebar {
  position: fixed;
  z-index: 15;
  top: 54px;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  background: #0c1a2d;
  border-right: 1px solid var(--line);
}

.mark {
  height: 62px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #2e8dfb;
  font-size: 28px;
  font-weight: 900;
}
.mark-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.sidebar nav {
  display: grid;
  gap: 10px;
  padding: 0 9px;
}

.sidebar a {
  width: 100%;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  color: #ffffff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.sidebar a i {
  width: 28px;
  min-height: 22px;
  display: grid;
  place-items: center;
  font-size: 19px;
}

.sidebar a.active {
  background: #23344b;
  color: #2e8dfb;
}

.header {
  position: fixed;
  z-index: 14;
  top: 54px;
  right: 0;
  left: var(--sidebar-width);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  background: #0c1a2d;
}

.search {
  position: relative;
  width: 510px;
}

.search input {
  width: 100%;
  height: 39px;
  border: 1px solid #d4deef;
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  padding: 0 44px 0 14px;
  outline: none;
  font-weight: 500;
}

.search i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #fff;
}

.header-flags {
  position: absolute;
  left: 20px;
  width: calc((100vw - var(--sidebar-width) - 624px) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.header-flags img {
  width: 22px;
  height: auto;
  border-radius: 2px;
  display: block;
}

.header-actions {
  position: absolute;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-actions button {
  border: 0;
  color: #ffffff;
  font-weight: 600;
}

.cart,
.login {
  background: transparent;
  cursor: pointer;
}

.cart {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
}

.account {
  padding: 12px 19px;
  border-radius: 4px;
  background: #2e8dfb;
}

main {
  margin-left: var(--sidebar-width);
  padding: 141px 24px 0;
}

main > section,
main > .pager {
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}

.breadcrumb {
  color: #c8d7ef;
  font-size: 12px;
  font-weight: 500;
  padding: 0 0 13px;
}

.breadcrumb span {
  color: #9fc7ff;
  font-size: 18px;
}

.breadcrumb i {
  margin: 0 5px;
  color: #8492aa;
  font-size: 10px;
}

.hero {
  min-height: 168px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    linear-gradient(90deg, rgba(13, 29, 50, .25), rgba(7, 35, 74, .82) 42%, rgba(28, 105, 206, .75)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=80") center/cover;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
}

.hero div {
  width: 48%;
  text-align: center;
}

.hero h2 {
  margin: 0 0 17px;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 700;
}

.hero-intro {
  display: flex;
  align-items: center;
  gap: 90px;
  padding: 54px 0 56px;
  max-width: 1180px;
  margin: 0 auto;
}

.brands-marquee {
  max-width: 1180px;
  margin: 0 auto 17px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brands-marquee__track {
  display: flex;
  align-items: center;
  gap: 46px;
  width: max-content;
  animation: brands-scroll 22s linear infinite;
}

/* El carrusel ya NO se pausa ni al pasar el mouse ni al tocar: avanza
   siempre. El efecto de "color" usa :hover en PC (mouse real: se quita
   solo al sacar el mouse, sin problema) y :active en móvil/táctil (se
   pinta solo mientras el dedo está tocando y se quita al soltarlo) —
   así nunca queda "pegado" pintado cuando el chip se oculta y reaparece,
   que es lo que pasa en móvil si se usa :hover con pantallas táctiles. */

.brand-chip {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  transition: background .2s;
}

.brand-chip img {
  height: 32px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  opacity: .75;
  filter: brightness(0) invert(1);
  transition: opacity .2s, filter .2s;
}

/* Chips sin logo de marca (Hacking, Marketing, Libros): ícono + texto,
   con el mismo lenguaje visual (blanco apagado -> color de marca al hover). */
.brand-chip .ti {
  font-size: 26px;
  line-height: 1;
  color: rgba(255, 255, 255, .75);
  transition: color .2s, opacity .2s;
}

.brand-label {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #aebbd3;
  opacity: .8;
  transition: color .2s, opacity .2s;
}

@media (hover: hover) and (pointer: fine) {
  /* PC con mouse real */
  .brand-chip:hover { background: #ffffff; }
  .brand-chip:hover img {
    opacity: 1;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5)) drop-shadow(0 0 1px rgba(0, 0, 0, .5));
  }
  .brand-chip:hover .ti { color: var(--blue); }
  .brand-chip:hover .brand-label { color: #16273f; opacity: 1; }
}

@media (hover: none), (pointer: coarse) {
  /* Móvil/táctil: pinta solo mientras se toca, nunca se queda pegado */
  .brand-chip:active { background: #ffffff; }
  .brand-chip:active img {
    opacity: 1;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5)) drop-shadow(0 0 1px rgba(0, 0, 0, .5));
  }
  .brand-chip:active .ti { color: var(--blue); }
  .brand-chip:active .brand-label { color: #16273f; opacity: 1; }
}

/* Móvil: logos del carrusel un poquito más pequeños (~12%). */
@media (max-width: 900px) {
  .brands-marquee__track { gap: 40px; }
  .brand-chip { padding: 5px 12px; }
  .brand-chip img { height: 28px; max-width: 114px; }
  .brand-chip .ti { font-size: 23px; }
  .brand-label { font-size: 13.5px; margin-left: 7px; }
}

@keyframes brands-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .brands-marquee__track {
    animation: none;
  }
}

.section-divider {
  max-width: 1240px;
  margin: 48px auto 8px;
  height: 1px;
  background: rgba(255, 255, 255, .5);
}

.hero-intro__text {
  flex: 0.85 1 420px;
  min-width: 280px;
}

.hero-intro h1 {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
}

.hero-intro__big {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--blue);
}

.hero-intro p {
  margin: 0 0 22px;
  max-width: 540px;
  color: #c3cfe1;
  font-size: 15px;
  line-height: 1.6;
}

.hero-intro__features {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 14px 34px;
  margin: 0 0 26px;
}

.hero-intro__features span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.hero-intro__features i {
  color: #2e8dfb;
  font-size: 18px;
}

.hero-intro__text .hero-intro__price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  color: #aebbd3;
  font-size: 13px;
}

.hero-intro__price i {
  color: #2e8dfb;
}

.hero-intro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 30px;
  background: var(--blue);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity .15s;
}

.hero-intro__btn:hover {
  opacity: .88;
}

.hero-intro__video {
  flex: 1.15 1 400px;
  min-width: 280px;
  margin-left: auto;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0a1424;
  border: 1px solid rgba(46, 141, 251, .9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.hero-intro__video iframe,
.hero-intro__video video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hero-intro__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #16273f, #0a1424);
}

.hero-intro__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  font-size: 24px;
}

@media (max-width: 900px) {
  .hero-intro {
    flex-direction: column;
    align-items: stretch;
  }
}

.hero p {
  margin: 0;
  color: #ffffff;
  font-weight: 500;
}

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.hero p i {
  color: #2e8dfb;
  margin-right: 6px;
}

.catalog-head {
  scroll-margin-top: 88px;
}

.catalog-head h2 {
  margin: 24px 0 17px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}

.filters {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 45px;
}

.filters button,
.category-toggle {
  height: 39px;
  min-width: 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-radius: 4px;
  background: #26364d;
  color: #ffffff;
  padding: 0 17px;
  font-weight: 500;
}

.filter-link {
  height: 39px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #2e8dfb;
  border-radius: 4px;
  padding: 0 17px;
  color: #2e8dfb;
  font-weight: 500;
  text-decoration: none;
}

.category-filter {
  position: relative;
}

.category-toggle {
  min-width: 292px;
  cursor: pointer;
}

.category-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  max-height: none;
  overflow: visible;
  display: none;
  padding: 10px 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  background: #18263a;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
}

.category-filter.is-open .category-menu {
  display: block;
}

.category-filter.is-open .category-toggle i {
  transform: rotate(180deg);
}

.category-menu a {
  display: block;
  padding: 11px 16px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}

.category-menu a:first-child {
  color: #2e8dfb;
}

.category-menu a:hover,
.category-menu a:focus {
  background: #25344a;
  color: #ffffff;
  outline: none;
}

.filters .box {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: #697384;
  color: #fff;
}

.filters .box.checked {
  background: #2e8dfb;
  font-size: 11px;
}

.filters button > i {
  font-size: 12px;
}

.filters a {
  color: #2e8dfb;
  text-decoration: none;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.pager.top {
  margin-bottom: 24px;
}

.pager button {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #22364d;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 34px;
  margin-top: 45px;
  margin-bottom: 42px;
}

.course {
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--panel);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .42);
  display: flex;
  flex-direction: column;
  min-height: 0;
  cursor: pointer;
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  background-position: center;
  background-size: cover;
}

.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 26, 45, 0) 55%, rgba(12, 26, 45, .18));
}

.thumb .play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(20, 28, 41, .82);
  color: #ffffff;
  font-size: 22px;
}

.thumb .play i {
  transform: translateX(2px);
}

.thumb b {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 9px;
  padding: 4px 6px;
  border-radius: 2px;
  background: #ff5b87;
  color: #ffffff;
  font-size: 9px;
}

.course-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 9px 12px 11px;
}

.course-body small + small {
  margin-top: -2px;
}

.course small {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 3px 6px;
  background: #2e8dfb;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  align-self: flex-start;
}

.course h3 {
  min-height: 0;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}

.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin: 0 0 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  min-height: 0;
}

.meta i {
  color: #fff;
  font-size: 10px;
}

.course-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin: 0 0 8px;
  color: var(--muted, #8fa3c0);
  font-size: 9.5px;
}
.course-badges i { margin-right: 3px; }

.course-badges--lista {
  flex-direction: column;
  gap: 3px;
}

.price {
  margin: auto 0 8px;
  color: #b4c0d2;
  font-size: 13px;
  font-weight: 500;
}

.price em {
  color: #ff4f79;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.codigo-otp {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 8px;
}

.codigo-otp:placeholder-shown {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
}

.course-body button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 4px;
  background: #7169ff;
  color: #ffffff;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.course-body button i {
  font-size: 12.5px;
}

/* Módulo marcado como "En desarrollo" desde el admin: reemplaza el precio
   y el botón de compra por este aviso (no es un botón real, no hace nada
   al hacer clic). */
.badge-en-desarrollo {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  border-radius: 4px;
  background: #3a4a63;
  color: #aebbd3;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
}
.badge-en-desarrollo i {
  font-size: 12.5px;
}

.grid + .pager {
  margin-top: 29px;
  margin-bottom: 28px;
}

/* ---- Streaming ---- */

.streaming-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 210px;
  margin: 28px 0 8px;
  padding: 28px 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(46, 141, 251, .35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.streaming-banner__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.streaming-banner__tint {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--blue);
  mix-blend-mode: color;
  opacity: .9;
}

.streaming-banner__overlay {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 20, 36, .96) 0%, rgba(10, 20, 36, .82) 32%, rgba(10, 20, 36, .35) 60%, rgba(10, 20, 36, .05) 85%);
}

.streaming-banner__text {
  position: relative;
  z-index: 1;
  flex: 1.1 1 380px;
}

.streaming-banner__text small {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 7px;
  background: #2e8dfb;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.streaming-banner__text h2 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.18;
  font-weight: 800;
  color: #ffffff;
}

.streaming-banner__text p {
  margin: 0 0 14px;
  max-width: 460px;
  color: #c3cfe1;
  font-size: 14px;
  line-height: 1.5;
}

.streaming-banner__price {
  display: flex;
  align-items: center;
  gap: 14px;
}

.streaming-banner__price .price {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.streaming-banner__price a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 24px;
  background: var(--violet);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity .15s;
}

.streaming-banner__price a:hover {
  opacity: .88;
}

@media (max-width: 900px) {
  .streaming-banner {
    padding: 30px 24px;
  }
  .streaming-banner__overlay {
    background: linear-gradient(180deg, rgba(10, 20, 36, .55) 0%, rgba(10, 20, 36, .92) 75%);
  }
}

.streaming-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.streaming-tabs button,
.streaming-tabs a {
  height: 39px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 4px;
  background: #26364d;
  color: #ffffff;
  padding: 0 17px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}

.streaming-tabs button i,
.streaming-tabs a i {
  font-size: 14px;
}

.streaming-tabs button.active,
.streaming-tabs a.active {
  background: var(--blue);
}

.thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #16273f, #0a1424);
}

.thumb--placeholder i {
  font-size: 34px;
  color: rgba(255, 255, 255, .5);
}

.rewards {
  min-height: 142px;
  display: grid;
  grid-template-columns: 1.4fr .65fr .45fr;
  align-items: center;
  gap: 20px;
  border-radius: 8px;
  background: linear-gradient(105deg, #9b405b, #513379 48%, #1c399b);
  padding: 24px 24px;
}

.rewards h3 {
  margin: 0 0 18px;
  font-size: 19px;
}

.rewards h3 span {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 2px;
  background: #2e8dfb;
  font-size: 10px;
  vertical-align: middle;
}

.rewards p {
  margin: 12px 0;
  font-weight: 500;
}

.prizes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  color: #ecefff;
  font-size: 42px;
  white-space: nowrap;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .25));
}

.stores {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.stores strong {
  font-size: 12px;
  text-align: center;
}

.stores button {
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #4f5668;
  font-size: 16px;
  font-weight: 600;
}

/* ---- Bloques de feature (imagen + texto, alternados) ---- */
.feature-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px;
}
.feature-showcase--reverse {
  flex-direction: row-reverse;
}
.hero + .feature-showcase {
  padding-top: 120px;
}
.feature-showcase + .testimonials {
  padding-top: 60px;
}

.feature-showcase__img {
  flex: 0 0 auto;
  width: 380px;
  max-width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0c1a2d;
}

.feature-showcase__text {
  flex: 0 1 480px;
}
.feature-showcase__text h2 {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
}
.feature-showcase__text > p {
  margin: 0 0 20px;
  max-width: 480px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.feature-showcase__text ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-showcase__text li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}
.feature-showcase__text li i {
  color: var(--blue);
  font-size: 17px;
}

.product-row {
  padding: 28px 16px 6px;
}
.hero + .product-row {
  padding-top: 60px;
}
.product-row + .product-row {
  padding-top: 6px;
}
.product-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.product-row__head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
}
.product-row__head h2 i {
  color: var(--blue);
  font-size: 19px;
}
.product-row__head a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #3a4a63;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  color: #cdd6e6;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.product-row__head a:hover {
  background: rgba(46, 141, 251, .12);
  border-color: #2e8dfb;
  color: #ffffff;
}
.product-row__head a i {
  font-size: 12.5px;
}

/* El botón "Ver todos" late en celeste (doble pulso como un corazón +
   pausa) para que no pase desapercibido, en PC, tablet y móvil. */
.product-row__head a {
  animation: verTodosLatido 1.2s ease-in-out infinite;
}
.product-row__head a i {
  animation: verTodosFlecha 1.2s ease-in-out infinite;
}
/* Con el mouse encima se detiene, para que se vea el hover normal. */
.product-row__head a:hover,
.product-row__head a:hover i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .product-row__head a,
  .product-row__head a i { animation: none; }
}
@keyframes verTodosLatido {
  0%, 40%, 100% {
    border-color: #3a4a63;
    color: #cdd6e6;
    box-shadow: 0 0 0 0 rgba(89, 183, 255, 0);
  }
  8%, 24% {
    border-color: #59b7ff;
    color: #59b7ff;
    box-shadow: 0 0 0 0 rgba(89, 183, 255, .55), 0 0 12px rgba(89, 183, 255, .45);
  }
  16% {
    border-color: rgba(89, 183, 255, .6);
    box-shadow: 0 0 0 5px rgba(89, 183, 255, .18), 0 0 6px rgba(89, 183, 255, .2);
  }
  34% {
    box-shadow: 0 0 0 9px rgba(89, 183, 255, 0), 0 0 0 rgba(89, 183, 255, 0);
  }
}
@keyframes verTodosFlecha {
  0%, 8%, 24%, 40%, 100% { transform: translateX(0); }
  14%, 30%               { transform: translateX(3px); }
}

/* Fila con flechas: scroll horizontal manual (sin animación ni loop),
   controlado por JS con viewport.scrollBy(). El viewport oculta la
   scrollbar nativa porque la navegación es con las flechas. */
.product-row__wrap {
  position: relative;
  /* Ancho fijo a exactamente 5 tarjetas (220px + 16px de gap), centrado en
     el espacio disponible. Evita que una 6ª tarjeta asome a medias en el
     borde derecho cuando sobra un poco de espacio (se veía "incompleta"). */
  max-width: calc(5 * 220px + 4 * 16px);
  margin: 0 auto;
}
.product-row__viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  /* Deslizar con el dedo en móvil: scroll horizontal nativo con inercia
     (iOS) y sin que el gesto lateral quede "atrapado" por la página. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.product-row__viewport::-webkit-scrollbar {
  display: none;
}
.product-row__track {
  /* Rejilla de 2 filas que fluye por columnas: las tarjetas llenan la
     fila 1 y la fila 2 de cada columna y luego pasan a la siguiente
     columna. Así el inicio muestra 2 líneas de tarjetas a la vez, sin
     límite de columnas (se generan tantas como productos haya: 10, 30,
     50...), y el scroll horizontal + las flechas siguen funcionando
     igual hasta llegar a la última.
     align-items:start evita que la rejilla estire las tarjetas cortas
     para igualar la más alta de su fila. */
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 220px;
  align-items: start;
  gap: 16px;
  padding-bottom: 2px;
}
.product-row__track .course {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 220px;
}
.product-row__empty {
  margin: 0;
  padding: 30px 0;
  color: var(--muted);
  font-size: 14px;
}

.product-row__arrow {
  position: absolute;
  top: 43%;
  z-index: 3;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(10, 20, 36, .78);
  color: #ffffff;
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background .15s, opacity .15s;
}
.product-row__arrow:hover {
  background: var(--blue);
}
.product-row__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}
.product-row__arrow--prev {
  left: -46px;
}
.product-row__arrow--next {
  right: -46px;
}

@media (max-width: 640px) {
  .product-row {
    /* Sin padding horizontal propio: hereda el del <main> (12px en móvil, igual que módulos). */
    padding: 20px 0 4px;
  }
  .product-row__head h2 {
    font-size: 18px;
  }
  /* En móvil el wrap toma todo el ancho disponible sin restricción */
  .product-row__wrap {
    max-width: 100% !important;
    width: 100%;
  }
  .product-row__track {
    /* Mismo gap que usa el .grid de los módulos (streaming/cursos/libros) en
       móvil. Hereda la rejilla de 2 filas: 4 tarjetas visibles = 2 columnas
       x 2 filas, todas en pantalla sin necesidad de mover las flechas. */
    gap: 18px;
    grid-auto-columns: calc((100vw - 24px - 18px) / 2);
  }
  .product-row__track .course {
    /* Mismo ancho exacto que en los módulos dedicados:
       100vw - 12px*2 (padding main) - 18px (gap del grid) dividido entre 2 columnas */
    width: calc((100vw - 24px - 18px) / 2);
  }
  /* En móvil cada "página" muestra 4 tarjetas (2 columnas x 2 filas), pero
     se renderizan TODAS las del módulo (sin límite): el resto queda fuera
     de pantalla y se alcanza deslizando con el dedo o con las flechas ‹ ›. */
  /* Thumbnail: mismo aspect-ratio 16/9 que en los módulos — con el ancho
     correcto la altura resultante es idéntica a la de las páginas dedicadas. */
  .product-row__track .thumb {
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
  }
  .product-row__arrow {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .product-row__arrow--prev {
    left: -4px;
  }
  .product-row__arrow--next {
    right: -4px;
  }
}

@media (max-width: 800px) {
  .feature-showcase,
  .feature-showcase--reverse {
    flex-direction: column;
    text-align: center;
    gap: 26px;
    padding: 24px 20px;
  }
  .feature-showcase__text ul {
    align-items: center;
  }
}

.testimonials {
  /* Mismo tipo de espacio holgado arriba que la sección de abajo
     ("Descubre los mejores cursos online", .intro) — en cualquier
     tamaño de pantalla, no solo en móvil angosto. */
  padding: 87px 0 74px;
  text-align: center;
}

.testimonials h2 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  color: #ffffff;
}

@media (max-width: 900px) {
  /* En móvil, mismo tamaño que el logo "Fuxlatin" del header (20px) */
  .testimonials h2 { font-size: 20px; }
  /* 5px menos que en PC (87px), solo en móvil */
  .testimonials { padding-top: 82px; }
}

.testimonials > p {
  /* Más aire antes de que empiecen las tarjetas de testimonios */
  margin: 0 0 87px;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 900px) {
  /* 5px menos que en PC (87px), solo en móvil */
  .testimonials > p { margin-bottom: 82px; }
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 4px;
  background: var(--panel);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3);
}

.testimonial-card h3 {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.3;
}

.testimonial-card h3 a {
  color: var(--blue);
  text-decoration: none;
}

.testimonial-card h3 a:hover {
  text-decoration: underline;
}

.testimonial-card__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.testimonial-card__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #334867;
  color: #aebbd3;
  font-size: 16px;
}

.testimonial-card__user strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}

.testimonial-card__user .estrellas {
  font-size: 12px;
}

.testimonial-card p {
  flex: 1;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  /* En móvil, mismo tamaño que la descripción de las tarjetas (.course-badges, 9px) */
  .testimonial-card p { font-size: 9px; }
}

.testimonial-card__more {
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.testimonial-card__more:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.intro {
  padding: 26px 0 43px;
  text-align: center;
}

.intro h2 {
  margin: 0 0 19px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
}

.intro p {
  max-width: 1090px;
  margin: 0 auto;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.55;
}

@media (max-width: 900px) {
  /* En móvil, mismo tamaño que "¿Qué opinan nuestros usuarios?" (.testimonials h2) */
  .intro h2 { font-size: 20px; }
  /* En móvil, mismo tamaño que el texto de .testimonials > p */
  .intro p { font-size: 15px; }
}

footer {
  margin-left: var(--sidebar-width);
  background: #020719;
  padding: 0 24px;
  border-top: 1px solid var(--line);
}

footer > div {
  max-width: 1240px;
  margin: 0 auto;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 60px;
  padding: 26px 0 22px;
}

.footer-currency-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  color: #7c8aa3;
  font-size: 12.5px;
}

.footer-copy i {
  font-size: 12px;
}

.info-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 12, 22, .72);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.info-modal-overlay.is-open {
  display: flex;
}

.info-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--panel, #16273f);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 36px 34px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.info-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

.info-modal__close:hover {
  background: rgba(255, 255, 255, .16);
}

.info-modal__panel {
  display: none;
}

.info-modal__panel h2 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  padding-right: 30px;
}

.info-modal__panel h3 {
  margin: 22px 0 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.info-modal__panel p {
  margin: 0 0 4px;
  color: #c3cfe1;
  font-size: 14px;
  line-height: 1.7;
}

.info-modal__panel p a {
  color: #2e8dfb;
}

.info-modal__faq {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 0;
}

.info-modal__faq summary {
  cursor: pointer;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 600;
  list-style: none;
}

.info-modal__faq summary::-webkit-details-marker {
  display: none;
}

.info-modal__faq summary::before {
  content: "+";
  display: inline-block;
  width: 16px;
  color: #2e8dfb;
  font-weight: 800;
}

.info-modal__faq[open] summary::before {
  content: "\2212";
}

.info-modal__faq p {
  margin: 10px 0 0 16px;
  color: #aebbd3;
}

footer h4 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

footer p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: #9aaac2;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}

footer .footer-bottom > div > a {
  display: block;
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s;
}

footer .footer-bottom > div > a:hover {
  opacity: .75;
}

footer .footer-link-plain {
  color: #c2cee7 !important;
}

.btn-verify {
  margin-top: 6px;
  height: 42px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #ffffff;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}

.btn-verify:hover {
  opacity: .88;
}

.social {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  letter-spacing: 0;
}

.social-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.currency-filter {
  display: inline-block;
}

.currency-toggle {
  height: 36px;
  min-width: auto;
  gap: 8px;
  border: 1px solid #4a5568;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
}

.currency-filter .category-menu {
  width: max-content;
  min-width: 100%;
  /* Se abre hacia ARRIBA del botón, no hacia abajo */
  top: auto;
  bottom: calc(100% + 10px);
  padding: 8px;
}

.currency-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 5px;
  color: #cdd6e6;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.currency-radio:hover {
  background: #25344a;
  color: #fff;
}

.currency-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.currency-radio__dot {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #4a5568;
  position: relative;
}

.currency-radio input:checked ~ .currency-radio__dot {
  border-color: #2e8dfb;
}

.currency-radio input:checked ~ .currency-radio__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #2e8dfb;
}

@media (max-width: 1050px) {
  .top-offer strong {
    font-size: 16px;
  }

  .header {
    justify-content: flex-start;
  }

  .search {
    width: min(48vw, 510px);
  }

  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .rewards,
  .footer-bottom {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .top-offer {
    height: auto;
    min-height: 54px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 34px 8px 12px;
  }

  .top-offer__rotator {
    height: auto;
    overflow: visible;
  }

  .top-offer__rotator-inner {
    transition: none;
    flex-wrap: wrap;
    justify-content: center;
  }

  .top-offer strong {
    text-align: center;
  }

  .sidebar {
    display: none;
  }

  .header {
    top: 70px;
    left: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }

  .search {
    width: 100%;
  }

  .header-actions {
    position: static;
    justify-content: flex-end;
  }

  .header-flags {
    display: none;
  }

  main,
  footer {
    margin-left: 0;
  }

  main {
    padding: 168px 14px 0;
  }

  .hero div {
    width: 86%;
    margin-left: 0;
  }

  .filters {
    flex-wrap: wrap;
    gap: 10px;
  }

  .filters button:first-child,
  .filters button {
    min-width: 0;
    width: 100%;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .course {
    height: auto;
  }

  .rewards,
  .footer-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

/* ── Página Crear Cuenta ── */
body.page-register {
  overflow-y: scroll; /* reserva el espacio del scrollbar igual que el index */
}

/* En esta página no hay banner, header y sidebar arrancan en top:0 */
body.page-register .header {
  top: 0;
}

body.page-register .sidebar {
  top: 0;
}

/* Panel admin: tampoco hay banner de ofertas, mismo ajuste */
body.page-admin .header {
  top: 0;
}

body.page-admin .sidebar {
  top: 0;
}

body.page-admin .page {
  padding-top: 78px; /* altura del header (68px) + respiro, sin el hueco del banner */
}

.main-register {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding-top: 68px; /* altura del header */
  display: flex;
  overflow-y: auto; /* si la pantalla es muy baja, permite desplazar en vez de cortar */
}

.register-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding-right: 8%;
}

/* ── Panel izquierdo (bienvenida) ── */
.register-welcome {
  position: relative;
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 56px;
  overflow: hidden;
}

.register-welcome h2 {
  position: relative;
  z-index: 2;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.18;
  margin: 0;
  color: #fff;
}

.register-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.deco-icon {
  position: absolute;
  font-weight: 900;
}

.deco-at {
  font-size: 200px;
  top: 60px;
  right: 20px;
  line-height: 1;
  color: rgba(46, 82, 160, 0.55);
}

.deco-bubble {
  font-size: 120px;
  top: 30px;
  left: 14px;
  color: rgba(46, 82, 160, 0.40);
}

.deco-thumb {
  font-size: 190px;
  bottom: -30px;
  left: 20px;
  color: rgba(30, 70, 150, 0.55);
}

.deco-star {
  font-size: 80px;
  bottom: 130px;
  right: 60px;
  color: rgba(180, 150, 20, 0.45);
}

/* Íconos de los productos (Streaming, video, Cursos, Libros) con una
   ligera inclinación para que el fondo se vea más dinámico. */
.deco-at     { transform: rotate(-8deg); }
.deco-bubble { transform: rotate(6deg); }
.deco-thumb  { transform: rotate(-10deg); }
.deco-star   { transform: rotate(12deg); }

/* ── Panel derecho (formulario) ── */
.register-form-panel {
  background: var(--panel-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 48px;
}

/* Logo de la web arriba del título en Entrar / Crear cuenta. */
.register-logo {
  display: block;
  margin: 0 auto 14px;
  line-height: 0;
  transition: transform .2s ease;
}
.register-logo img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(46, 141, 251, .35));
}
.register-logo:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
  .register-logo img { width: 50px; height: 50px; }
}
.register-form-panel h1 {
  width: 100%;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 18px;
  text-align: center;
}

.register-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.register-form input {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
}

.register-form input::placeholder {
  color: var(--muted);
}

.register-form input:focus {
  outline: none;
  border-color: var(--blue);
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 46px !important;
}

.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 46px;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.password-toggle:hover {
  color: #fff;
}

.register-legal {
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.register-legal a {
  color: var(--blue);
  text-decoration: none;
}

.register-legal a:hover {
  text-decoration: underline;
}

.btn-create {
  width: 100%;
  height: 50px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s;
}

.btn-create:hover {
  opacity: .88;
}

.register-separator {
  width: 100%;
  margin: 14px 0 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.register-social {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.btn-facebook,
.btn-apple {
  height: 48px;
  border-radius: 6px;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: opacity .2s;
}

.btn-facebook:hover,
.btn-apple:hover {
  opacity: .88;
}

.btn-facebook {
  background: #1877f2;
  color: #fff;
}

.btn-apple {
  background: #ffffff;
  color: #000;
}

.account-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.account-link .account {
  cursor: pointer;
}

.login-forgot {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  margin-top: -4px;
}

.login-forgot:hover {
  text-decoration: underline;
}

.btn-bees {
  width: 100%;
  height: 50px;
  margin-top: 14px;
  background: #f5c518;
  color: #000;
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity .2s;
}

.btn-bees:hover {
  opacity: .88;
}

.login-signup {
  width: 100%;
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.login-signup a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.login-signup a:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════
   PÁGINA DE DETALLE DE CURSO (curso.html)
   ════════════════════════════════════════ */

body.page-cd {
  overflow-y: visible; /* 'auto' aquí rompía el position:sticky de la tarjeta de compra */
}

.cd-main {
  margin-left: var(--sidebar-width);
  padding-top: 122px; /* 54px banner + 68px header */
  min-height: 100vh;
}

/* Hero oscuro */
.cd-hero {
  background: #07111e;
  padding: 40px 48px 40px calc(var(--sidebar-width) + 0px);
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: calc(-1 * var(--sidebar-width));
  padding-left: calc(var(--sidebar-width) + 48px);
}

.cd-hero__left {
  flex: 1;
  max-width: 680px;
}

.cd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}
.cd-breadcrumb a { color: var(--muted); text-decoration: none; }
.cd-breadcrumb a:hover { color: #fff; }
.cd-breadcrumb i { font-size: 10px; }

.cd-tags-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.cd-tag {
  background: rgba(13,148,136,.18);
  color: #2e8dfb;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.cd-title {
  /* Mismo tamaño que el precio de la tarjeta (.cd-card__price, 28px) — solo
     en PC; en móvil usa su propio tamaño (23px) definido en app.css. */
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 14px;
  color: #fff;
}

.cd-desc {
  font-size: 15px;
  color: #ccd8ea;
  line-height: 1.65;
  margin: 0 0 16px;
}

/* Etiquetas tipo "SE ENTREGA:" dentro de la descripción (ver
   formatear_descripcion_producto() en config.php): un poco de aire arriba
   y color de marca, para que se vean como un mini-título de sección. */
.cd-desc strong {
  display: inline-block;
  margin-top: 10px;
  color: #59b7ff;
  font-weight: 800;
  letter-spacing: .3px;
}

.cd-rating-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #ccd8ea;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cd-stars { color: #f5c518; font-size: 13px; }
.cd-stars--gold { color: #f5c518; }
.cd-count { color: var(--muted); }

/* 5 estrellas de valoración: doradas hasta el promedio, resto apagadas.
   Se apunta directo al <i> (no solo al <span> padre) para que gane
   siempre, incluso dentro de ".meta" que fuerza color:#fff a sus iconos. */
.estrellas { letter-spacing: 1px; }
.estrellas i { color: #f5c518; }
.estrellas i.is-vacia { color: #3a4a63; }
.cd-dot { color: var(--muted); }

.cd-instructor-line {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}
.cd-instructor-line a { color: #2e8dfb; text-decoration: none; }
.cd-instructor-line a:hover { text-decoration: underline; }

.cd-info-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.cd-info-row i { margin-right: 5px; }

/* Card de compra */
.cd-card {
  width: 320px;
  flex-shrink: 0;
  background: #111f33;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  position: sticky;
  top: 100px; /* queda fija al hacer scroll, justo debajo del header */
  align-self: flex-start;
}

.cd-card__thumb {
  position: relative;
  cursor: pointer;
}
.cd-card__thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.cd-card__preview-btn {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  gap: 8px;
  opacity: 0;
  transition: opacity .2s;
}
.cd-card__thumb:hover .cd-card__preview-btn { opacity: 1; }
/* Fondo difuminado de la portada de libro: solo en móvil (ver app.css). */
.cd-card__thumb-bg { display: none; }

.cd-card__body {
  padding: 20px;
}

.cd-card__price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cd-card__price {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
}
.cd-card__original {
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
}
.cd-card__badge {
  background: #1a3a1a;
  color: #4caf50;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.cd-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: #2e8dfb;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
  font-family: inherit;
  box-sizing: border-box;
}
.cd-buy-btn:hover { background: #1a7ae8; transform: translateY(-1px); }
.cd-buy-btn--sm { width: auto; padding: 10px 20px; font-size: 14px; }
/* Módulo "En desarrollo": mismo tamaño que el botón de compra real, pero
   gris y sin acción (no es un link ni un submit). */
.cd-buy-btn--disabled { background: #3a4a63; color: #aebbd3; cursor: default; }
.cd-buy-btn--disabled:hover { background: #3a4a63; transform: none; }

.cd-card__guarantee {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 16px;
}
.cd-card__guarantee i { margin-right: 4px; color: #4caf50; }

.cd-includes-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.cd-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-includes-list li {
  font-size: 13px;
  color: #ccd8ea;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cd-includes-list i { color: #2e8dfb; width: 16px; text-align: center; }

/* Cuerpo del detalle */
.cd-body {
  padding: 40px 48px;
}

.cd-content {
  max-width: 720px;
}

.cd-section {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.cd-section:last-child { border-bottom: 0; }

.cd-section h2 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cd-curriculum-meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* Lo que aprenderás */
.cd-learn-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}
.cd-learn-grid li {
  font-size: 14px;
  color: #ccd8ea;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cd-learn-grid i { color: #4caf50; margin-top: 2px; flex-shrink: 0; }

/* Requisitos */
.cd-req-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-req-list li {
  font-size: 14px;
  color: #ccd8ea;
  padding-left: 18px;
  position: relative;
}
.cd-req-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #2e8dfb;
  font-size: 20px;
  line-height: 1;
}

/* Curriculum accordion */
.cd-curriculum {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.cd-module { border-bottom: 1px solid var(--line); }
.cd-module:last-child { border-bottom: 0; }

.cd-module__hdr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #111f33;
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  gap: 12px;
  transition: background .15s;
}
.cd-module__hdr:hover { background: #162840; }
.cd-module__meta { font-size: 12px; color: var(--muted); font-weight: 400; flex-shrink: 0; }
.cd-chev { margin-right: 8px; font-size: 11px; color: var(--muted); }

.cd-lessons {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cd-lessons--hidden { display: none; }

.cd-lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .15s;
}
.cd-lesson:hover { background: rgba(255,255,255,.03); }
.cd-lesson--free { color: #2e8dfb; }
.cd-lesson__icon { width: 16px; text-align: center; color: var(--muted); font-size: 14px; }
.cd-lesson--free .cd-lesson__icon { color: #2e8dfb; }
.cd-lesson__name { flex: 1; font-size: 13px; color: #ccd8ea; }
.cd-lesson__right { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }

.cd-free-badge {
  background: rgba(46, 141, 251,.15);
  color: #2e8dfb;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}

/* Instructor */
.cd-instructor-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.cd-instructor__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.cd-instructor__info h3 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}
.cd-instructor__role {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}
.cd-instructor__stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #ccd8ea;
  margin-bottom: 12px;
}
.cd-instructor__stats i { color: #f5c518; margin-right: 4px; }
.cd-instructor__bio {
  font-size: 14px;
  color: #aebbd3;
  line-height: 1.6;
  margin: 0;
}

/* Reviews */
.cd-reviews-summary {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-bottom: 28px;
}
.cd-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cd-score-num {
  font-size: 52px;
  font-weight: 900;
  color: #f5c518;
  line-height: 1;
}
.cd-score-label { font-size: 12px; color: var(--muted); }

.cd-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cd-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.cd-bar-row > span:first-child { width: 40px; text-align: right; }
.cd-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
}
.cd-bar__fill {
  height: 100%;
  background: #f5c518;
  border-radius: 3px;
}

.cd-review-list { display: flex; flex-direction: column; gap: 24px; }
.cd-review { display: flex; gap: 14px; align-items: flex-start; }
.cd-review__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cd-review__body { flex: 1; }
.cd-review__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.cd-review__top strong { color: #fff; font-size: 14px; }
.cd-review__date { font-size: 12px; color: var(--muted); }
.cd-review__body p { font-size: 14px; color: #ccd8ea; margin: 0; line-height: 1.6; }

/* Barra inferior sticky */
.cd-bottombar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background: #07111e;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 48px;
  transform: translateY(100%);
  transition: transform .3s ease;
  z-index: 100;
}
.cd-bottombar--show { transform: translateY(0); }
.cd-bottombar__left { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; }
.cd-bottombar__right { display: flex; align-items: center; gap: 16px; }
.cd-bottombar__price { font-size: 16px; font-weight: 800; color: #fff; }
.cd-bottombar__price s { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 6px; }


/* ════════════════════════════════════════
   REPRODUCTOR DE CURSO (reproducir.html)
   ════════════════════════════════════════ */

body.page-player {
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header del reproductor */
.player-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: #07111e;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 8px 0 20px;
  gap: 24px;
  z-index: 200;
}

.player-header__logo {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.player-header__logo span { color: #2e8dfb; font-size: 14px; font-weight: 600; }

.player-header__course {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #ccd8ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.player-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.player-progress-bar {
  width: 100px;
  height: 5px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  overflow: hidden;
}
.player-progress-fill {
  height: 100%;
  background: #4caf50;
  border-radius: 3px;
  transition: width .4s;
}
.player-progress-pct { color: #4caf50; font-weight: 700; }

.player-header__back {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.player-header__back:hover { color: #fff; }

/* Layout principal del reproductor */
.player-layout {
  display: flex;
  height: 100vh;
  padding-top: 58px;
  overflow: hidden;
}

/* Área de video + info */
.player-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg);
}

.player-video-wrap {
  background: #000;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  flex-shrink: 0;
}
.player-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Info de lección */
.player-info {
  padding: 24px 32px;
}

.player-info__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.player-info__module { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.player-info__title { font-size: 22px; font-weight: 800; color: #fff; margin: 0; }

.player-info__actions { display: flex; gap: 10px; flex-shrink: 0; }
.player-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: #ccd8ea;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.player-action-btn:hover { background: rgba(255,255,255,.06); }
.player-action-btn--primary { background: #2e8dfb; border-color: #2e8dfb; color: #fff; }
.player-action-btn--primary:hover { background: #1a7ae8; }

/* Tabs */
.player-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.player-tab {
  padding: 10px 20px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color .15s;
  margin-bottom: -1px;
}
.player-tab--active { color: #fff; border-bottom-color: #2e8dfb; }
.player-tab:hover:not(.player-tab--active) { color: #ccd8ea; }

.player-tab-content { animation: fadeIn .2s ease; }
.player-tab-content--hidden { display: none; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.player-tab-content p {
  font-size: 14px;
  color: #ccd8ea;
  line-height: 1.7;
  margin: 0 0 16px;
}
.player-overview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-overview-list li {
  font-size: 14px;
  color: #ccd8ea;
  display: flex;
  align-items: center;
  gap: 8px;
}
.player-overview-list i { color: #4caf50; }

/* Notas */
.player-notes {
  width: 100%;
  min-height: 140px;
  background: #111f33;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #ccd8ea;
  font-size: 14px;
  font-family: inherit;
  padding: 14px;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.player-notes:focus { outline: none; border-color: #2e8dfb; }
.player-notes-save {
  padding: 9px 18px;
  background: #2e8dfb;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
}
.player-notes-save:hover { background: #1a7ae8; }

/* Recursos */
.player-resources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.player-resources a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2e8dfb;
  font-size: 14px;
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid rgba(13,148,136,.2);
  border-radius: 6px;
  transition: background .15s;
}
.player-resources a:hover { background: rgba(13,148,136,.08); }
.player-resources i { width: 16px; text-align: center; }

/* Sidebar de lecciones */
.player-sidebar {
  width: 320px;
  flex-shrink: 0;
  background: #07111e;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.player-sidebar__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.player-sidebar__head h2 { font-size: 14px; font-weight: 800; color: #fff; margin: 0 0 3px; }
.player-sidebar__total { font-size: 12px; color: var(--muted); }

.player-sidebar__body { overflow-y: auto; flex: 1; }

.ps-module { border-bottom: 1px solid var(--line); }
.ps-module__hdr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #0c1829;
  border: 0;
  color: #ccd8ea;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  gap: 8px;
  transition: background .15s;
}
.ps-module__hdr:hover { background: #111f33; }
.ps-module__meta { font-size: 11px; color: var(--muted); font-weight: 400; flex-shrink: 0; }
.ps-chev { margin-right: 6px; font-size: 10px; }

.ps-lessons { list-style: none; padding: 0; margin: 0; }
.ps-lessons--hidden { display: none; }

.ps-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .15s;
}
.ps-lesson:hover { background: rgba(255,255,255,.04); }
.ps-lesson--active { background: rgba(46, 141, 251,.12); border-left: 3px solid #2e8dfb; }

.ps-check { font-size: 14px; color: var(--muted); width: 16px; flex-shrink: 0; }
.ps-lesson--done .ps-check { color: #4caf50; }
.ps-lesson--active .ps-check { color: #2e8dfb; }

.ps-lesson__name { flex: 1; font-size: 13px; color: #ccd8ea; line-height: 1.3; }
.ps-lesson--active .ps-lesson__name { color: #fff; font-weight: 600; }
.ps-lesson__dur { font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* ---- Botón flotante de WhatsApp ---- */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 38px;
  z-index: 200;
  width: 51px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  animation: wa-float-pulse 2.4s ease-in-out infinite;
}

.wa-float:hover {
  animation-play-state: paused;
  filter: brightness(1.06);
}

.wa-float__tip {
  position: absolute;
  right: 68px;
  white-space: nowrap;
  background: #1f2b3d;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

.wa-float:hover .wa-float__tip {
  opacity: 1;
  transform: translateX(0);
}

@keyframes wa-float-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 0 rgba(37, 211, 102, .55); }
  50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 10px rgba(37, 211, 102, 0); }
}

@media (max-width: 640px) {
  .wa-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .wa-float__tip {
    display: none;
  }
}

/* ---- Botón flotante del Asistente IA (arriba del de WhatsApp) ---- */
.ai-float {
  position: fixed;
  right: 24px;
  bottom: 105px;
  z-index: 210;
  width: 51px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  animation: ai-float-pulse 2.4s ease-in-out infinite;
}
.ai-float:hover { animation-play-state: paused; filter: brightness(1.08); }
.ai-float--activo { animation: none; }

.ai-float__tip {
  position: absolute;
  right: 68px;
  white-space: nowrap;
  background: #1f2b3d;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.ai-float:hover .ai-float__tip { opacity: 1; transform: translateX(0); }

@keyframes ai-float-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 0 rgba(46, 141, 251, .55); }
  50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 10px rgba(46, 141, 251, 0); }
}

/* ---- Panel de chat del Asistente IA ---- */
.ai-chat {
  position: fixed;
  right: 24px;
  bottom: 170px;
  z-index: 220;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: min(520px, calc(100vh - 200px));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
/* display:flex de arriba le gana por defecto al [hidden] del navegador
   (una regla propia siempre pisa el estilo nativo del atributo) — sin
   esto, el panel queda visible desde que carga la página. */
.ai-chat[hidden] { display: none; }

.ai-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #0d1d32;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.ai-chat__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 700;
  font-size: 14.5px;
}
.ai-chat__title i { color: var(--blue); font-size: 17px; }
.ai-chat__actions { display: flex; gap: 4px; }
.ai-chat__actions button {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  color: var(--muted); font-size: 15px; cursor: pointer;
}
.ai-chat__actions button:hover { background: rgba(255,255,255,.08); color: #ffffff; }

.ai-chat__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel-dark);
}

.ai-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.55;
}
.ai-msg--bot {
  align-self: flex-start;
  background: var(--panel);
  color: #e6edf7;
  border-bottom-left-radius: 4px;
}
.ai-msg--user {
  align-self: flex-end;
  background: var(--blue);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.ai-msg--typing { color: var(--muted); font-style: italic; }
.ai-msg--error {
  background: rgba(255, 79, 121, .15);
  color: #ff90a8;
  border: 1px solid rgba(255, 79, 121, .4);
}

.ai-chat__form {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}
.ai-chat__form input {
  flex: 1;
  background: var(--panel-dark);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 13.5px;
  outline: none;
}
.ai-chat__form input:focus { border-color: var(--blue); }
.ai-chat__form button {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
}
.ai-chat__form button:hover { filter: brightness(1.08); }

@media (max-width: 640px) {
  .ai-float {
    right: 16px;
    bottom: 80px;
    width: 52px;
    height: 52px;
    font-size: 23px;
  }
  .ai-float__tip { display: none; }
  .ai-chat {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    height: min(72vh, calc(100vh - 24px));
  }
}

/* ---- Botón flotante de Comunidad (se apila arriba del de IA; si el
   asistente IA no está activo, toma su lugar arriba del de WhatsApp) ---- */
.comunidad-float {
  position: fixed;
  right: 24px;
  bottom: 105px;
  z-index: 205;
  width: 51px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #7c5cff;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  animation: comunidad-float-pulse 2.4s ease-in-out infinite;
}
.comunidad-float:hover { animation-play-state: paused; filter: brightness(1.08); }
body.has-ai-chat .comunidad-float { bottom: 172px; }

@keyframes comunidad-float-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 0 rgba(124, 92, 255, .55); }
  50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 10px rgba(124, 92, 255, 0); }
}

.comunidad-float__tip {
  position: absolute;
  right: 68px;
  white-space: nowrap;
  background: #1f2b3d;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.comunidad-float:hover .comunidad-float__tip { opacity: 1; transform: translateX(0); }

@media (max-width: 640px) {
  .comunidad-float {
    right: 16px;
    bottom: 80px;
    width: 52px;
    height: 52px;
    font-size: 23px;
  }
  body.has-ai-chat .comunidad-float { bottom: 144px; }
  .comunidad-float__tip { display: none; }
}

/* ============================================================
   ANUNCIO EMERGENTE (pop-up promocional) — editable desde
   admin/popup.php: imagen, título, subtítulo, botón y su enlace.
   ============================================================ */
.promo-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 10, 20, .74);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.promo-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}
/* Contenedor de la tarjeta: lleva el ancho y la animación, y sirve de
   referencia para la X, que va FUERA de la tarjeta (en su esquina superior
   derecha) para no tapar la imagen. La tarjeta tiene scroll propio
   (overflow), así que la X no puede ir dentro de ella sin recortarse. */
.promo-popup-frame {
  position: relative;
  width: 100%;
  max-width: 260px; /* PC; en móvil lo redefine el @media (max-width: 640px) */
  transform: translateY(10px) scale(.97);
  transition: transform .25s ease;
}
/* Con varios anuncios, solo se ve el que está en turno. */
.promo-popup-frame[hidden] { display: none; }
.promo-popup-overlay.is-open .promo-popup-frame {
  transform: translateY(0) scale(1);
}
.promo-popup {
  /* Misma forma que las tarjetas del catálogo (.course): mismo radio de
     esquina, mismo fondo y misma sombra, para que se sienta parte del sitio. */
  width: 100%;
  max-height: calc(90vh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  background: var(--panel);
  border-radius: 4px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .42);
}
.promo-popup__close {
  /* Centrada justo sobre la esquina superior derecha de la tarjeta
     (desplazada la mitad de su tamaño hacia arriba y hacia afuera). */
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.promo-popup__close:hover { background: rgba(255, 255, 255, .3); }
.promo-popup__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0d1d32;
}
.promo-popup__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo-popup__body { padding: 16px 18px 20px; }
.promo-popup__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: #59b7ff;
  line-height: 1.3;
}
.promo-popup__subtitle {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #c8d7ef;
  line-height: 1.5;
}
.promo-popup__btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 22px;
  /* Mismo radio que la tarjeta del popup, sin brillo alrededor. */
  border-radius: 4px;
  text-decoration: none;
  box-shadow: none;
  transition: transform .15s ease;
  cursor: pointer;
}
.promo-popup__btn:hover {
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  /* Mismo ancho exacto que una tarjeta de producto en móvil (2 por fila
     en la portada): 100vw - 12px*2 (padding main) - 18px (gap), entre 2. */
  .promo-popup-frame {
    max-width: calc((100vw - 24px - 18px) / 2);
  }
  .promo-popup__close {
    width: 24px;
    height: 24px;
    font-size: 16px;
    top: -12px;
    right: -12px;
  }
  .promo-popup__body { padding: 10px 12px 14px; }
  .promo-popup__title {
    font-size: 13px;
    margin: 0 0 4px;
  }
  .promo-popup__subtitle {
    font-size: 10.5px;
    margin: 0 0 10px;
    line-height: 1.4;
  }
  .promo-popup__btn {
    font-size: 10.5px;
    padding: 8px 14px;
  }
}

/* ============================================================
   ANCHO FLUIDO (todas las pantallas ≥901px, sin "saltos" de breakpoint)
   Antes el contenido se quedaba fijo a ~1240px sin importar qué tan
   grande fuera la pantalla, dejando una isla chica centrada con mucho
   espacio vacío. Con max-width en vw (no en px), el contenedor crece
   de forma continua con el ancho REAL del viewport — no depende de
   cruzar un umbral exacto, así que funciona igual con el navegador
   maximizado o no, y con cualquier % de escalado de Windows.
   ============================================================ */
main > section,
main > .pager,
.hero-intro,
.brands-marquee,
.hero,
.section-divider,
footer > div {
  max-width: min(2400px, 90vw);
}

@media (min-width: 901px) {
  /* Tarjetas de curso: agrega columnas solas según el espacio disponible
     y cada columna se reparte con 1fr, así que siempre llenan el 100%
     del ancho (nunca queda un hueco a la derecha). Antes esto no era
     seguro porque .course tenía una altura fija (385px) y una tarjeta
     más ancha hacía que la miniatura (16:9) creciera y recortara el
     contenido de abajo; con .course en min-height (más arriba en este
     archivo) el grid ahora estira cada fila a la altura de la tarjeta
     más alta, así que cualquier ancho de tarjeta es seguro. Va dentro
     de este media query para no pisar las reglas de 2/1 columna que ya
     existen para tablets/celulares (≤900px). */
  .grid {
    max-width: min(2400px, 90vw);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* "Mis cursos" suele tener pocos ítems: con auto-fit, las tarjetas
     se estiran para llenar el ancho y quedan enormes. auto-fill deja
     las columnas vacías reservadas en vez de estirar las existentes. */
  .grid.grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .hero-intro__big,
  .hero-intro h1 {
    font-size: clamp(36px, 2.4vw, 50px);
  }
}