/* ============================================================
   CESUP — Capa de mejoras visuales (enhance.css)
   Aditivo sobre main.css · 100% reversible (quitar el <link>)
   Marca: navy #0d1b4b + naranja #ff7200
   ============================================================ */

/* Scroll suave con offset para la nav fija */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

/* ── Barra de progreso de lectura (arriba) ───────────────── */
.cs-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--lime), var(--lime-dk));
  box-shadow: 0 0 10px rgba(255,114,0,.7);
  z-index: 9999; transition: width .1s linear;
}

/* ── Hero: aurora de luces flotantes ─────────────────────── */
.hero { position: relative; }
.hero > .container { position: relative; z-index: 2; }
.hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-aurora span {
  position: absolute; border-radius: 50%; filter: blur(72px);
  animation: cs-float 16s ease-in-out infinite;
}
.hero-aurora span:nth-child(1){ width: 440px; height: 440px; background: #ff7200; top: -130px; right: -90px; opacity: .28; }
.hero-aurora span:nth-child(2){ width: 380px; height: 380px; background: #2742b8; bottom: -150px; left: -70px; opacity: .42; animation-delay: -6s; }
.hero-aurora span:nth-child(3){ width: 260px; height: 260px; background: #ff3700; top: 38%; left: 52%; opacity: .16; animation-delay: -11s; }
@keyframes cs-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(34px,-26px) scale(1.08); }
  66%     { transform: translate(-26px,22px) scale(.94); }
}

/* ── Título del hero con degradado brillante ─────────────── */
.hero__title span {
  background: linear-gradient(100deg,#ff8a2b,#ffae5e,#ff7200,#ff3700);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: cs-shine 7s linear infinite;
}
@keyframes cs-shine { to { background-position: 220% center; } }

/* ── fade-up mejorado: aparece con desenfoque suave ──────── */
.fade-up {
  filter: blur(6px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1), filter .75s ease;
}
.fade-up.visible { filter: blur(0); }

/* ── Tarjetas: elevación + halo naranja al pasar el mouse ── */
.why-card, .step-card, .curso-card, .testimonio {
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease, border-color .35s ease;
}
.why-card:hover, .step-card:hover, .curso-card:hover, .testimonio:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 42px -14px rgba(13,27,75,.30), 0 0 0 1px rgba(255,114,0,.30);
}

/* Glow que sigue al cursor (solo tarjetas "¿Por qué CESUP?") */
.why-card { position: relative; overflow: hidden; isolation: isolate; }
.why-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(190px circle at var(--mx,50%) var(--my,50%), rgba(255,114,0,.18), transparent 60%);
  transition: opacity .3s ease;
}
.why-card:hover::before { opacity: 1; }

/* ── Botón naranja: barrido de brillo al pasar el mouse ──── */
.btn--lime { position: relative; overflow: hidden; }
.btn--lime::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transition: left .6s ease;
}
.btn--lime:hover::after { left: 150%; }

/* ── Subrayado degradado bajo los títulos de sección ─────── */
.section__head .section__title { position: relative; }
.section__head .section__title::after {
  content: ''; display: block; width: 54px; height: 4px; margin: 14px auto 0;
  border-radius: 4px; background: linear-gradient(90deg, var(--lime), var(--lime-dk));
}

/* ── Imagen de "Nosotros": zoom suave al pasar el mouse ──── */
.split__img { overflow: hidden; border-radius: 16px; }
.split__img img { display: block; width: 100%; transition: transform .6s ease; }
.split__img:hover img { transform: scale(1.05); }

/* Parallax suave de la aurora con el mouse */
.hero-aurora { transition: transform .25s ease; }

/* ============================================================
   v2 — Más detalles premium
   ============================================================ */

/* Selección de texto y scrollbar con los colores de la marca */
::selection { background: rgba(255,114,0,.85); color: #fff; }
* { scrollbar-color: var(--lime) rgba(13,27,75,.06); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(13,27,75,.06); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--lime), var(--lime-dk));
  border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--lime-dk); }

/* Heroes de páginas internas: aurora + contenido al frente */
.page-hero { position: relative; }
.page-hero > .container { position: relative; z-index: 2; }

/* Tarjetas de curso: glow del cursor + línea superior animada */
.curso-card { position: relative; overflow: hidden; isolation: isolate; }
.curso-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(255,114,0,.16), transparent 60%);
  transition: opacity .3s ease;
}
.curso-card:hover::before { opacity: 1; }
.curso-card::after {
  content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--lime), var(--lime-dk));
  transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.curso-card:hover::after { transform: scaleX(1); }

/* Badges e info-pills con micro-elevación al pasar el mouse */
.trust-badge, .info-bar__inner > * {
  transition: transform .25s ease, box-shadow .25s ease;
}
.trust-badge:hover, .info-bar__inner > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px -8px rgba(13,27,75,.35);
}

/* Botón flotante "volver arriba" (abajo-derecha, no choca con WhatsApp) */
.cs-top {
  position: fixed; right: 20px; bottom: 24px; width: 48px; height: 48px;
  border: none; border-radius: 50%; cursor: pointer; z-index: 997;
  background: linear-gradient(135deg, var(--lime), var(--lime-dk)); color: #fff;
  font-size: 1.25rem; line-height: 1; box-shadow: 0 6px 20px rgba(255,114,0,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease;
}
.cs-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.cs-top:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 28px rgba(255,114,0,.6); }
@media (max-width: 600px) { .cs-top { right: 16px; bottom: 20px; width: 44px; height: 44px; } }

/* ============================================================
   v3 — Animaciones en TODAS las páginas + navegación tipo app
   ============================================================ */

/* Reveal universal (solo se oculta si el JS está activo → seguro) */
.cs-js .cs-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.cs-js .cs-reveal.in { opacity: 1; transform: none; }

/* Barra de carga al navegar entre páginas */
.cs-navbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10000;
  background: linear-gradient(90deg, var(--lime), var(--lime-dk));
  box-shadow: 0 0 10px rgba(255,114,0,.7);
  opacity: 0; transition: width .35s ease, opacity .4s ease;
}
.cs-navbar.go { opacity: 1; }

/* ============================================================
   v4 — MODO OSCURO 🌙 (opcional, se activa con el botón)
   La web sigue clara por defecto. data-theme="dark" lo activa.
   ============================================================ */
[data-theme="dark"] {
  --white:      #131a2e;   /* superficie principal (antes blanco) */
  --off-white:  #0e1525;   /* superficie alterna (secciones grises) */
  --text:       #e7ecf7;   /* texto principal (claro) */
  --muted:      #9fb0cf;   /* texto secundario */
  --border:     #2a3552;   /* bordes sutiles */
  --shadow:     0 2px 16px rgba(0,0,0,.45);
  --shadow-md:  0 4px 24px rgba(0,0,0,.55);
  --shadow-lg:  0 12px 48px rgba(0,0,0,.65);
}

/* Tarjetas: superficie un poco más clara para destacar del fondo */
[data-theme="dark"] .why-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .curso-card,
[data-theme="dark"] .testimonio,
[data-theme="dark"] .hero-form,
[data-theme="dark"] .card--white,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .value-item,
[data-theme="dark"] .accordion,
[data-theme="dark"] .cert-bar { background: #1b2540 !important; border-color: #2a3552; }

/* Textos que usaban azul oscuro → claros para que se lean */
[data-theme="dark"] .hero-form__title,
[data-theme="dark"] .split__eyebrow,
[data-theme="dark"] .stat__num,
[data-theme="dark"] .card--white .card__title,
[data-theme="dark"] .cert-bar__title,
[data-theme="dark"] .cert-bar__tags span,
[data-theme="dark"] .value-item__title,
[data-theme="dark"] .feature-card__title,
[data-theme="dark"] .why-card__title,
[data-theme="dark"] .step-card__title,
[data-theme="dark"] .section__title,
[data-theme="dark"] .split__title,
[data-theme="dark"] .curso-card__title,
[data-theme="dark"] .testimonio__name,
[data-theme="dark"] .accordion__link { color: var(--text) !important; }

/* Etiquetas (pills) de sección: resaltar en naranja */
[data-theme="dark"] .section__tag {
  background: rgba(255,114,0,.14) !important; color: var(--lime) !important;
}

/* Campos de formulario en oscuro */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] select {
  background: #0e1525 !important; color: var(--text) !important; border-color: var(--border) !important;
}

/* Transición suave al cambiar de tema */
body { transition: background-color .35s ease, color .35s ease; }

/* Botón de cambio de tema (se inyecta en el menú) */
.cs-theme {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: #fff; font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.cs-theme:hover { background: rgba(255,114,0,.25); border-color: var(--lime); transform: translateY(-1px); }
.cs-theme--float { position: fixed; top: 14px; right: 16px; z-index: 9998; }

/* ── Respeta a quien prefiere menos movimiento ───────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-aurora, .hero-aurora span, .hero__title span { animation: none; transition: none; }
  .fade-up { filter: none; }
  .split__img:hover img, .curso-card::after { transform: none; }
  .cs-js .cs-reveal { opacity: 1; transform: none; }
}