/* ═══════════════════════════════════════════════════════════════
   ═══ PREMIUM.CSS · v2.0 — Acabado premium del INDEX          ═══
   ═══════════════════════════════════════════════════════════════
   Se carga SOLO en index.html, DESPUÉS de styles.css.
   No modifica lógica ni estructura: solo eleva el acabado visual.
   Paleta OdonTeck intacta: #005187 / #0c74c4 / #7fd3ff.
   Las subpáginas (pages/) NO cargan este archivo.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --navy: #071A33;
  --navy-2: #0C223D;
  --glow: rgba(12, 116, 196, 0.45);
  --glow-soft: rgba(127, 211, 255, 0.25);
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── Tipografía display en titulares ── */
h1, h2, h3, .section-title, .stat-number, .cta-box h2 {
  font-family: var(--font-display);
}

/* ═══════════════ TOPBAR ═══════════════ */
.topbar {
  background: linear-gradient(90deg, #061426, var(--navy-2) 50%, #0A2C4E);
  border-bottom: 1px solid rgba(127, 211, 255, 0.08);
}
.topbar a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  transition: color .2s ease;
}
.topbar a:hover { color: #fff; }

/* ═══════════════ HEADER / NAV ═══════════════ */
.site-header {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(219, 228, 239, 0.7), 0 12px 34px rgba(7, 26, 51, 0.05);
  border-bottom: none;
}
.nav-links a { transition: background .22s ease, color .22s ease, box-shadow .22s ease; }
.nav-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  box-shadow: 0 8px 20px rgba(0, 81, 135, 0.28);
}
.nav-cta:hover { box-shadow: 0 12px 26px rgba(0, 81, 135, 0.38); }
.nav-club {
  background: linear-gradient(135deg, #EAF4FD, #DCEBFA) !important;
  border: 1px solid rgba(0, 81, 135, 0.16) !important;
}

/* ═══════════════ HERO — foto de fondo + texto encima ═══════════════
   La foto vive en assets/img/banner/hero-foto.jpg y cubre TODO el hero
   (object cover). Encima lleva un velo navy suave para que el texto
   blanco siempre sea legible, en cualquier tamaño de pantalla.
   Si la foto no carga, queda el degradado navy como respaldo. */
.hero-section {
  --hero-pos: center 38%;
  position: relative;
  background:
    linear-gradient(170deg, rgba(6, 20, 38, 0.72) 0%, rgba(7, 26, 51, 0.55) 46%, rgba(7, 26, 51, 0.68) 100%),
    url('assets/img/banner/hero-foto.jpg'),
    linear-gradient(165deg, #0A2440 0%, var(--navy) 100%);
  background-size: cover, cover, cover;
  background-position: center, var(--hero-pos), center;
  background-repeat: no-repeat;
  padding: 104px 0 150px !important;
  isolation: isolate;
}
/* Reemplaza el fondo claro original */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(127, 211, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(127, 211, 255, 0.045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 78% 90% at 50% 30%, #000 0%, transparent 74%);
          mask-image: radial-gradient(ellipse 78% 90% at 50% 30%, #000 0%, transparent 74%);
}
/* Aurora animada sutil */
.hero-section::after {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: 900px; height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  filter: blur(70px);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
  animation: heroAurora 16s ease-in-out infinite alternate;
}
@keyframes heroAurora {
  0%   { transform: translateX(-56%) scale(1); opacity: .42; }
  100% { transform: translateX(-44%) scale(1.12); opacity: .62; }
}

.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(127, 211, 255, 0.08);
  border: 1px solid rgba(127, 211, 255, 0.22);
  backdrop-filter: blur(6px);
}
.hero-copy .eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulseDot 1.9s ease-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

.hero-copy h1 {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, #FFFFFF 30%, rgba(203, 228, 250, 0.72) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.hero-copy .hero-text {
  color: rgba(196, 214, 235, 0.92);
  text-wrap: pretty;
}

.hero-actions .btn-primary {
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  box-shadow: 0 14px 38px rgba(12, 116, 196, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(127, 211, 255, 0.35);
}
.hero-actions .btn-primary:hover {
  box-shadow: 0 20px 48px rgba(12, 116, 196, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, #1183d8, #06639f);
}
.hero-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  color: #EAF4FD;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}
.hero-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.36);
}

.hero-points { gap: 12px 14px; }
.hero-points li {
  color: #D7E7F7;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(127, 211, 255, 0.16);
  border-radius: 999px;
  padding: 9px 18px 9px 36px;
  font-size: 13.5px;
  backdrop-filter: blur(6px);
}
.hero-points li::before {
  content: "✓";
  width: auto; height: auto;
  background: none;
  color: var(--accent);
  font-weight: 800;
  font-size: 12px;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* ═══════════════ STATS — glass flotando sobre el hero ═══════════════ */
.stats-section {
  padding: 0 0 34px;
  margin-top: -86px;
  position: relative;
  z-index: 3;
}
.stat-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(219, 228, 239, 0.95);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(7, 26, 51, 0.14);
  transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  background-size: 200% 100%;
  animation: shimmerBar 4s ease-in-out infinite;
}
@keyframes shimmerBar {
  0%, 100% { background-position: 0 0; }
  50%      { background-position: 200% 0; }
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 70px rgba(7, 26, 51, 0.18);
}
.stat-number {
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--primary) 20%, var(--primary-2) 90%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card p {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* ═══════════════ EYEBROWS de sección (pill + punto) ═══════════════ */
.eyebrow.dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(0, 81, 135, 0.07);
  border: 1px solid rgba(0, 81, 135, 0.16);
}
.eyebrow.dark::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary-2);
  box-shadow: 0 0 8px rgba(12, 116, 196, 0.7);
  animation: pulseDot 2s ease-out infinite;
}

.section-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--text) 30%, rgba(13, 27, 47, 0.62) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}

/* ═══════════════ MINI FEATURES ═══════════════ */
.mini-feature {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
}
.mini-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(7, 26, 51, 0.14);
}
.mini-feature span {
  font-family: var(--font-mono);
  font-size: 22px;
  box-shadow: inset 0 0 0 1px rgba(0, 81, 135, 0.12);
}
.mini-feature.alt {
  background: radial-gradient(circle at 85% 0%, rgba(127, 211, 255, 0.2), transparent 46%),
              linear-gradient(150deg, #0A2440, #0D5D98);
  border-color: rgba(127, 211, 255, 0.24);
}
.mini-feature.alt span {
  background: rgba(255, 255, 255, 0.14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(127, 211, 255, 0.3);
}

/* ═══════════════ WHY CARDS ═══════════════ */
.why-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0;
  transition: opacity .3s ease;
}
.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(12, 116, 196, 0.3);
  box-shadow: 0 30px 66px rgba(7, 26, 51, 0.15);
}
.why-card:hover::before { opacity: 1; }
.why-icon {
  background: linear-gradient(145deg, #E7F2FC, #D2E5F7);
  box-shadow: inset 0 0 0 1px rgba(0, 81, 135, 0.1), 0 10px 22px rgba(0, 81, 135, 0.1);
  transition: transform .3s ease;
}
.why-card:hover .why-icon { transform: scale(1.08) rotate(-4deg); }

/* ═══════════════ COURSE CARDS ═══════════════ */
.course-card {
  transition: transform .32s cubic-bezier(.2,.8,.25,1), box-shadow .32s ease, border-color .32s ease;
}
.course-card:hover {
  transform: translateY(-7px);
  border-color: rgba(12, 116, 196, 0.32);
  box-shadow: 0 32px 70px rgba(7, 26, 51, 0.17);
}
.course-card img { transition: transform .5s cubic-bezier(.2,.8,.25,1); }
.course-card:hover img { transform: scale(1.035); }
.course-card { overflow: hidden; }
.course-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: linear-gradient(135deg, #EAF4FD, #DCEBFA);
  border: 1px solid rgba(0, 81, 135, 0.14);
}
.course-card .course-price {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.small-btn { transition: transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.small-btn:hover { transform: translateY(-2px); border-color: rgba(0, 81, 135, 0.3); }
.small-btn.primary {
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  box-shadow: 0 10px 22px rgba(0, 81, 135, 0.26);
}
.small-btn.primary:hover { box-shadow: 0 14px 28px rgba(0, 81, 135, 0.36); }
.control-btn { transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
.control-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 81, 135, 0.35);
  color: var(--primary);
  box-shadow: 0 12px 24px rgba(0, 22, 40, 0.13);
}

/* Máscara de desvanecido en los bordes de los carruseles */
.gallery-scroller,
.reviews-scroller {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

/* ═══════════════ CTA FINAL ═══════════════ */
.cta-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 12% 0%, rgba(127, 211, 255, 0.22), transparent 42%),
              radial-gradient(circle at 92% 110%, rgba(22, 146, 230, 0.4), transparent 52%),
              linear-gradient(140deg, #061426 0%, #005187 55%, #1183d8 100%);
  border: 1px solid rgba(127, 211, 255, 0.2);
}
.cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(127, 211, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(127, 211, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%);
}
.cta-box .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(127, 211, 255, 0.1);
  border: 1px solid rgba(127, 211, 255, 0.26);
}
.cta-box .eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulseDot 2s ease-out infinite;
}
.cta-box h2 { color: #fff; font-weight: 800; text-wrap: balance; }
.cta-actions .btn-primary {
  background: #fff;
  color: var(--primary);
  border: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}
.cta-actions .btn-primary:hover { background: #EAF4FD; }

/* ═══════════════ FOOTER ═══════════════ */
.site-footer {
  background: linear-gradient(180deg, #061223, #081625);
  border-top: 1px solid rgba(127, 211, 255, 0.1);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(680px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 211, 255, 0.45), transparent);
}
.site-footer h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

/* ═══════════════ FLOTANTES Y MODAL ═══════════════ */
.social { transition: transform .2s ease, box-shadow .25s ease; }
.social:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 38px rgba(0, 0, 0, 0.24); }
.scroll-top { transition: opacity .25s ease, transform .2s ease, background .2s ease; }
.scroll-top:hover { background: var(--primary); transform: translateY(-3px); }
.course-modal-dialog { border: 1px solid rgba(219, 228, 239, 0.9); }
.modal-topline { font-family: var(--font-mono); font-size: 10.5px; }

/* ═══════════════ REVEAL ON SCROLL (activado por JS aditivo) ═══════
   Solo se ocultan elementos si JS marcó .r-init — si el script no
   corre, todo queda visible. Cero riesgo. */
.r-init {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.r-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .r-init { opacity: 1; transform: none; transition: none; }
  .hero-section::after, .stat-card::before,
  .hero-copy .eyebrow::before, .eyebrow.dark::before, .cta-box .eyebrow::before { animation: none; }
}

/* ═══════════════ v3.0 — Texto del hero SIEMPRE encima ═══════════════ */
.hero-section .container { position: relative; z-index: 2; }

/* ═══════════════ v2.1 — STATS dinámicas en móvil (2×2) ═══════════════ */
@media (max-width: 820px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .stat-card { padding: 18px 15px; border-radius: 18px; }
  .stat-number { font-size: clamp(1.7rem, 8vw, 2.2rem); margin-bottom: 7px; }
  .stat-card p { font-size: 10.5px; line-height: 1.45; }
}

/* ═══════════════ RESPONSIVE del acabado premium ═══════════════ */
@media (max-width: 1100px) {
  .stats-section { margin-top: -66px; }
}
@media (max-width: 820px) {
  .hero-section { padding: 76px 0 110px !important; }
  .stats-section { margin-top: -70px; }
  .stat-card { border-radius: 20px; }
  .hero-points li { font-size: 12.5px; padding: 8px 15px 8px 32px; }
  .hero-points { flex-direction: row !important; flex-wrap: wrap; justify-content: center; max-width: none !important; align-items: center !important; }
  /* Foto en móvil/tablet: encuadre hacia el diente (lado derecho de la foto) */
  .hero-section { --hero-pos: 66% 40%; }
}
@media (max-width: 520px) {
  .hero-section { padding: 68px 0 96px !important; }
  .hero-copy .eyebrow { font-size: 9.5px; padding: 8px 14px; }
  .stats-section { margin-top: -60px; }
}
/* ═══════════════════════════════════════════════════════════════ */