/* ════════════════════════════════════════════════════════════
   CursosJumbo.com — REDISEÑO ESPACIAL v2
   Atmósfera: negro profundo + neón cyan/cósmico/esmeralda
   Mobile-first · breakpoints 480 / 768 / 1024
   ════════════════════════════════════════════════════════════ */
:root {
  /* Paleta espacial */
  --negro: #000000;
  --negro-nebula: #030008;
  --cyan: #00f2fe;
  --cosmico: #4facfe;
  --esmeralda: #00ff87;
  --dorado: #ffd166;

  /* Derivados */
  --texto: #eaf6ff;
  --texto-suave: #8fa3bd;
  --glass: rgba(255, 255, 255, .045);
  --glass-borde: rgba(0, 242, 254, .25);
  --radio: 18px;
  --blur: 12px;
  --grad-neon: linear-gradient(100deg, var(--cyan) 0%, var(--cosmico) 55%, var(--esmeralda) 100%);
  --sombra-neon: 0 0 24px rgba(0, 242, 254, .35), 0 0 60px rgba(79, 172, 254, .15);
  font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background:
    radial-gradient(700px 500px at 0% 0%, rgba(79, 172, 254, .10), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(0, 242, 254, .07), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(0, 255, 135, .06), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgba(79, 172, 254, .08), transparent 60%),
    linear-gradient(180deg, var(--negro) 0%, var(--negro-nebula) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Canvas de polvo cósmico: detrás de todo, jamás bloquea el scroll */
#cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body > *:not(#cosmos) { position: relative; z-index: 1; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 1.2rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; }
.seccion { padding: 4.2rem 0; }
.seccion-gris { background: rgba(4, 8, 20, .35); }
.seccion-sub { color: var(--texto-suave); margin: .5rem 0 1.8rem; }

/* ══════════════ HEADER ══════════════ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 2, .72);
  backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid rgba(0, 242, 254, .18);
}
.header-inner { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.2rem; flex-wrap: wrap; }
.logo {
  font-size: 1.32rem; font-weight: 900; text-decoration: none;
  letter-spacing: .02em;
  color: var(--texto);
  text-shadow: 0 0 18px rgba(0, 242, 254, .5);
}
.logo span {
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo em { font-style: normal; color: var(--dorado); font-size: .82em; }

.buscador {
  flex: 1; display: flex; min-width: 100%; max-width: none;
  border: 1px solid rgba(143, 163, 189, .35);
  border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .04);
  transition: border-color .25s, box-shadow .3s;
  order: 3;
}
.buscador:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, .18), var(--sombra-neon);
}
.buscador input {
  flex: 1; border: none; outline: none;
  background: transparent; color: var(--texto);
  padding: .58rem 1.1rem; font-size: .92rem;
}
.buscador input::placeholder { color: var(--texto-suave); }
.buscador button {
  border: none; cursor: pointer;
  background: var(--grad-neon); color: #001318;
  padding: 0 1.15rem; font-size: 1rem;
}

.nav-principal { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.nav-principal a {
  position: relative;
  text-decoration: none; color: var(--texto);
  font-weight: 600; font-size: .92rem;
  padding-bottom: .15rem;
}
/* subrayado láser */
.nav-principal a:not(.btn-cta)::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--grad-neon);
  box-shadow: 0 0 8px var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-principal a:not(.btn-cta):hover::after,
.nav-principal a:not(.btn-cta):focus-visible::after { transform: scaleX(1); }
.btn-cta {
  background: var(--grad-neon); color: #001318 !important;
  padding: .55rem 1.25rem; border-radius: 999px; font-weight: 800;
  transition: transform .18s, box-shadow .25s;
}
.btn-cta:hover, .btn-cta:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-neon); }

/* ══════════════ HERO ══════════════ */
.hero { padding: 4rem 0 3.2rem; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.hero-badge {
  display: inline-block;
  background: rgba(0, 255, 135, .1); color: var(--esmeralda);
  border: 1px solid rgba(0, 255, 135, .35);
  font-weight: 700; font-size: .78rem;
  padding: .3rem .95rem; border-radius: 999px; margin-bottom: 1.1rem;
  box-shadow: 0 0 16px rgba(0, 255, 135, .18);
}
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 900; line-height: 1.1; letter-spacing: -.02em;
}
.hero h1 span {
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(0, 242, 254, .45));
}
.hero-sub { color: var(--texto-suave); font-size: 1.04rem; margin: 1.2rem 0 1.8rem; max-width: 56ch; }
.hero-acciones { display: flex; gap: .9rem; flex-wrap: wrap; }
.btn-primario {
  background: var(--grad-neon); color: #001318; text-decoration: none;
  font-weight: 800; padding: .9rem 1.8rem; border-radius: 14px;
  transition: transform .18s, box-shadow .28s;
}
.btn-primario:hover, .btn-primario:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(0, 242, 254, .55), 0 0 80px rgba(0, 255, 135, .25);
}
.btn-grande { font-size: 1.05rem; padding: 1rem 2.3rem; }
.btn-secundario {
  background: var(--glass); color: var(--cyan); text-decoration: none;
  font-weight: 700; padding: .9rem 1.8rem; border-radius: 14px;
  border: 1px solid var(--glass-borde);
  backdrop-filter: blur(var(--blur));
  transition: box-shadow .25s, transform .18s, border-color .25s;
}
.btn-secundario:hover, .btn-secundario:focus-visible {
  border-color: var(--cyan);
  box-shadow: var(--sombra-neon);
  transform: translateY(-3px);
}
.hero-stats { display: flex; gap: 1.6rem 2.4rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-stats strong {
  display: block; font-size: 1.55rem; font-weight: 900;
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats span { color: var(--texto-suave); font-size: .8rem; }

/* Tarjetas flotantes del hero (glass + float desincronizado) */
.hero-visual { position: relative; min-height: 300px; display: none; }
.tarjeta-flotante {
  position: absolute;
  background: var(--glass);
  border: 1px solid var(--glass-borde);
  border-radius: 16px;
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5), inset 0 0 24px rgba(0, 242, 254, .05);
  padding: .95rem 1.25rem; font-weight: 700; font-size: .95rem;
  animation: float 6s ease-in-out infinite;
}
.tarjeta-flotante small { color: var(--texto-suave); font-weight: 500; }
.tf-1 { top: 6%;  right: 10%; animation-delay: 0s; }
.tf-2 { top: 42%; right: 40%; animation-delay: 1.7s; }
.tf-3 { top: 76%; right: 4%;  animation-delay: 3.3s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(.6deg); }
}

/* ══════════════ FRANJA ══════════════ */
.franja-confianza {
  border-top: 1px solid rgba(0, 242, 254, .15);
  border-bottom: 1px solid rgba(0, 242, 254, .15);
  background: rgba(0, 242, 254, .04);
  color: var(--texto-suave);
  padding: .9rem 0; text-align: center; font-size: .85rem; letter-spacing: .05em;
}

/* ══════════════ CATEGORÍAS (chips) ══════════════ */
.chips { display: flex; gap: .7rem; flex-wrap: wrap; }
.chip {
  background: var(--glass);
  border: 1px solid rgba(143, 163, 189, .3);
  border-radius: 999px;
  backdrop-filter: blur(var(--blur));
  padding: .55rem 1.3rem; font-weight: 700; font-size: .88rem; color: var(--texto);
  cursor: pointer; transition: all .22s;
}
.chip:hover { border-color: var(--esmeralda); color: var(--esmeralda); box-shadow: 0 0 16px rgba(0, 255, 135, .25); }
.chip.activa {
  background: var(--grad-neon); border-color: transparent; color: #001318;
  box-shadow: var(--sombra-neon);
}

/* ══════════════ CATÁLOGO: tarjetas glass 3D ══════════════ */
.catalogo-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; }
.contador { color: var(--texto-suave); font-size: .9rem; }
.grid-cursos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  perspective: 1200px;          /* escenario 3D para el tilt */
}
.curso-card {
  --mx: 50%; --my: 50%;
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radio);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .3s ease;
  animation: float 7s ease-in-out infinite;
  will-change: transform;
}
/* borde degradado neón semitransparente */
.curso-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 242, 254, .55), rgba(79, 172, 254, .18) 45%, rgba(0, 255, 135, .45));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* brillo especular que sigue al puntero */
.curso-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(0, 242, 254, .14), transparent 65%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.curso-card:hover::after { opacity: 1; }
.curso-card:hover { box-shadow: 0 18px 60px rgba(0, 0, 0, .7), var(--sombra-neon); }
/* desincronizar el float por tarjeta */
.curso-card:nth-child(6n+1) { animation-delay: 0s; }
.curso-card:nth-child(6n+2) { animation-delay: 1.1s; }
.curso-card:nth-child(6n+3) { animation-delay: 2.3s; }
.curso-card:nth-child(6n+4) { animation-delay: 3.4s; }
.curso-card:nth-child(6n+5) { animation-delay: 4.6s; }
.curso-card:nth-child(6n+6) { animation-delay: 5.5s; }

.ribbon {
  position: absolute; top: 14px; left: -1px; z-index: 3;
  background: linear-gradient(90deg, var(--dorado), #ffb703);
  color: #2b1d00;
  font-size: .68rem; font-weight: 900; letter-spacing: .05em;
  padding: .28rem .85rem; border-radius: 0 999px 999px 0;
  box-shadow: 0 0 18px rgba(255, 209, 102, .5);
}
.curso-cover {
  height: 128px; display: grid; place-items: center; font-size: 3rem;
  filter: saturate(1.15);
}
.g-azul    { background: linear-gradient(135deg, #0b2b6b, #1d5fd2); }
.g-violeta { background: linear-gradient(135deg, #3b0764, #8b2fd6); }
.g-verde   { background: linear-gradient(135deg, #013a26, #00b368); }
.g-cian    { background: linear-gradient(135deg, #083344, #00aecb); }
.g-rojo    { background: linear-gradient(135deg, #5c0a0a, #e04444); }
.g-naranja { background: linear-gradient(135deg, #5a2404, #f97a2f); }
.g-amarillo{ background: linear-gradient(135deg, #4a3305, #eab308); }

.curso-body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.curso-cat {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.curso-body h3 { font-size: 1.05rem; font-weight: 800; line-height: 1.3; margin: .4rem 0 .5rem; }
.curso-desc { color: var(--texto-suave); font-size: .86rem; flex: 1; }
.curso-meta { color: var(--texto-suave); font-size: .78rem; margin-top: .5rem; }
.rating { color: var(--dorado); font-weight: 800; }
.rating em {
  font-style: normal; letter-spacing: .05em;
  color: var(--dorado);
  text-shadow: 0 0 10px rgba(255, 209, 102, .8);   /* destello */
}
.curso-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid rgba(0, 242, 254, .15);
}
.precio { font-size: 1.3rem; font-weight: 900; }
.precio small { font-size: .65rem; color: var(--texto-suave); font-weight: 600; }
.btn-inscribir {
  background: var(--grad-neon); color: #001318; text-decoration: none;
  font-weight: 800; font-size: .85rem;
  padding: .55rem 1.25rem; border-radius: 11px;
  transition: transform .16s, box-shadow .25s;
}
.btn-inscribir:hover, .btn-inscribir:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(0, 255, 135, .5);
}
.catalogo-vacio { text-align: center; color: var(--texto-suave); padding: 2.5rem 0; }
.catalogo-vacio a { color: var(--cyan); font-weight: 700; }

/* ══════════════ BENEFICIOS ══════════════ */
.beneficios { display: grid; grid-template-columns: 1fr; gap: 1.3rem; margin-top: 2rem; }
.beneficio {
  background: var(--glass);
  border: 1px solid rgba(143, 163, 189, .18);
  border-radius: var(--radio);
  backdrop-filter: blur(var(--blur));
  padding: 1.5rem 1.6rem;
  transition: transform .22s, border-color .25s, box-shadow .3s;
}
.beneficio:hover {
  transform: translateY(-5px);
  border-color: var(--glass-borde);
  box-shadow: 0 12px 44px rgba(0, 0, 0, .5), 0 0 24px rgba(0, 242, 254, .12);
}
.b-icono { font-size: 1.8rem; margin-bottom: .6rem; filter: drop-shadow(0 0 12px rgba(0, 242, 254, .4)); }
.beneficio h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: .4rem; }
.beneficio p { color: var(--texto-suave); font-size: .88rem; }

/* ══════════════ TESTIMONIOS: carrusel infinito ══════════════ */
.carrusel { overflow: hidden; margin-top: 2rem; position: relative; }
.carrusel::before, .carrusel::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2;
  pointer-events: none;
}
.carrusel::before { left: 0;  background: linear-gradient(90deg, var(--negro-nebula), transparent); }
.carrusel::after  { right: 0; background: linear-gradient(-90deg, var(--negro-nebula), transparent); }
.carrusel-track {
  display: flex; gap: 1.4rem; width: max-content;
  animation: desfile 36s linear infinite;
}
.carrusel:hover .carrusel-track { animation-play-state: paused; }
@keyframes desfile { to { transform: translateX(-50%); } }
.testimonio {
  flex: 0 0 320px;
  background: var(--glass);
  border: 1px solid rgba(143, 163, 189, .18);
  border-radius: var(--radio);
  backdrop-filter: blur(var(--blur));
  padding: 1.5rem;
  animation: float 8s ease-in-out infinite;
}
.testimonio:nth-child(odd)  { animation-delay: 1.2s; }
.testimonio:nth-child(3n)   { animation-delay: 2.6s; }
.testimonio blockquote { font-size: .93rem; font-style: italic; }
.testimonio blockquote::before {
  content: '“'; font-size: 1.6rem; font-weight: 900;
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.testimonio figcaption { margin-top: 1rem; color: var(--texto-suave); font-size: .82rem; }
.testimonio strong { color: var(--texto); }

/* ══════════════ INSTRUCTOR: tarjeta holográfica ══════════════ */
.instructor-inner {
  position: relative;
  display: flex; gap: 2.2rem; align-items: center; flex-wrap: wrap;
  background: var(--glass);
  border-radius: 22px;
  backdrop-filter: blur(var(--blur));
  padding: 2.2rem 2.4rem;
  overflow: hidden;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.instructor-inner::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, rgba(0,242,254,.6), rgba(79,172,254,.15) 40%, rgba(0,255,135,.5) 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* barrido holográfico */
.instructor-inner::after {
  content: '';
  position: absolute; top: -60%; bottom: -60%; width: 46%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(0, 242, 254, .10) 45%, rgba(0, 255, 135, .12) 55%, transparent);
  transform: rotate(12deg);
  animation: holograma 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes holograma { 55%, 100% { left: 130%; } }
.instructor-avatar {
  width: 128px; height: 128px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #062a54, #0d47a1);
  border: 2px solid var(--glass-borde);
  color: var(--cyan); font-size: 2.6rem; font-weight: 900;
  box-shadow: var(--sombra-neon);
  animation: float 6.5s ease-in-out infinite;
}
.instructor-bio { flex: 1; min-width: 260px; position: relative; z-index: 1; }
.instructor-cargo {
  font-weight: 700; font-size: .92rem; margin: .3rem 0 .9rem;
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.instructor-bio > p:last-of-type { color: var(--texto-suave); }
.instructor-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.instructor-tags span {
  background: rgba(0, 242, 254, .07);
  border: 1px solid rgba(0, 242, 254, .3);
  border-radius: 999px;
  font-size: .76rem; font-weight: 700; padding: .3rem .9rem;
  color: var(--cyan);
}

/* ══════════════ CTA FINAL ══════════════ */
.cta-final {
  position: relative;
  text-align: center; padding: 4.6rem 1rem;
  background:
    radial-gradient(600px 300px at 50% 120%, rgba(0, 255, 135, .12), transparent 70%),
    radial-gradient(700px 320px at 50% -20%, rgba(0, 242, 254, .12), transparent 70%);
  border-top: 1px solid rgba(0, 242, 254, .15);
}
.cta-final h2 {
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-final p { color: var(--texto-suave); margin: .7rem 0 1.8rem; }

/* ══════════════ FOOTER ══════════════ */
.site-footer { background: rgba(0, 0, 3, .8); border-top: 1px solid rgba(0, 242, 254, .12); color: var(--texto-suave); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.2rem 2rem; }
.logo-footer { font-size: 1.2rem; }
.footer-desc { font-size: .85rem; margin-top: .6rem; }
.site-footer h4 {
  color: var(--texto); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem;
}
.site-footer a {
  display: block; color: var(--texto-suave); text-decoration: none;
  font-size: .88rem; margin-bottom: .5rem;
  transition: color .2s, text-shadow .25s;
}
.site-footer a:hover { color: var(--cyan); text-shadow: 0 0 12px rgba(0, 242, 254, .6); }
.footer-legal {
  border-top: 1px solid rgba(0, 242, 254, .1);
  padding: 1.2rem; font-size: .78rem; text-align: center;
}

/* ══════════════ WHATSAPP FLOTANTE ══════════════ */
.wa-float {
  position: fixed; bottom: 22px; right: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 0 26px rgba(37, 211, 102, .6);
  transition: transform .2s, box-shadow .25s;
  animation: float 5s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 0 40px rgba(37, 211, 102, .85); }

/* ══════════════ ACCESIBILIDAD / MOVIMIENTO ══════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══════════════ BREAKPOINTS (mobile-first) ══════════════ */
@media (min-width: 480px) {
  .grid-cursos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .buscador { min-width: 0; max-width: 440px; order: 0; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .beneficios { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1.15fr .85fr; }
  .hero-visual { display: block; }
}
/* Móvil: menos blur (rendimiento) y nav compacta */
@media (max-width: 767px) {
  :root { --blur: 7px; }
  .nav-principal { margin-left: 0; }
  .nav-principal a:not(.btn-cta) { display: none; }
  .hero { padding-top: 2.6rem; }
  .carrusel-track { animation-duration: 28s; }
  .testimonio { flex-basis: 270px; }
}