@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #142850;
  --navy-dark: #0B1A33;
  --cyan: #0FB8C9;
  --cyan-light: #4FE0EE;
  --bg: #0B1A33;
  --warm: #F7F3EC;
}

* { font-family: 'Sora', system-ui, sans-serif; }

html, body {
  background: var(--bg);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7CEDD; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #A9B3C7; }

/* Reveal-on-scroll animation, toggled by main.js via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fadeIn 0.4s ease both; }

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-slow { animation: floatSlow 5s ease-in-out infinite; }

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.typing-dot { animation: typingDot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* Custom range/progress fill transition */
.progress-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Lenguaje visual "glass" — inspirado en agencias modernas
   (paneles flotantes translúcidos + botones con relleno deslizante).
   Usa siempre los mismos colores de marca (navy/cian), solo cambia
   cómo se presentan: transparencia, blur y movimiento.
   ============================================================ */

/* Panel flotante oscuro tipo "vidrio esmerilado" (navbar, sidebar) */
.glass-pill {
  background: rgba(11, 26, 51, 0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tarjeta clara translúcida, para flotar sobre fondos con color.
   Tono cálido (no blanco frío) + transparencia real con blur.
   brightness() alto porque flota sobre fondos oscuros: sin esto,
   el fondo oscuro se filtra y la tarjeta se ve gris sucio en vez de cálida. */
.glass-card {
  background: rgba(247, 243, 236, 0.88);
  backdrop-filter: blur(20px) brightness(180%);
  -webkit-backdrop-filter: blur(20px) brightness(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Tarjeta oscura translúcida */
.glass-card-dark {
  background: rgba(11, 26, 51, 0.72);
  backdrop-filter: blur(20px) brightness(92%);
  -webkit-backdrop-filter: blur(20px) brightness(92%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Insignia flotante pequeña, sobrepuesta al borde de una tarjeta */
.floating-badge {
  position: absolute;
  animation: floatSlow 6s ease-in-out infinite;
}

/* Botón con relleno que se desliza al hacer hover (en vez de solo cambiar de color) */
.btn-slide {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.btn-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-slide:hover::before { width: 100%; }

.btn-slide-navy::before { background: var(--navy); }
.btn-slide-navy:hover { color: #fff; }

.btn-slide-cyan::before { background: var(--cyan); }
.btn-slide-cyan:hover { color: var(--navy); }

.btn-slide-white::before { background: #fff; }
.btn-slide-white:hover { color: var(--navy); }

/* Hero: mini demo interactiva de builders */
.hero-tab {
  background: #fff;
  color: var(--navy);
  border: 1px solid #E2E8F0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hero-tab:hover {
  border-color: var(--cyan);
}
.hero-tab.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.hero-panel {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.hero-panel.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ============================================================
   Colores de marca por constructor (Divi / Elementor / BeTheme / Astra)
   Uso: acento visual en el selector del hero, la sección "Builders" y,
   más adelante, en las tarjetas de curso de la Academia — así el usuario
   asocia cada color con "su" builder en todo el sitio.
   Colores aproximados a la identidad real de cada marca (no oficiales
   al pixel, solo evocan su paleta pública).
   ============================================================ */
:root {
  --c-divi: #5B4FE9;       /* Elegant Themes / Divi — azul-violeta */
  --c-elementor: #D6119F;  /* Elementor — magenta/rosa */
  --c-betheme: #0089F7;    /* BeTheme / Muffin Group — azul */
  --c-astra: #86CE32;      /* Astra / Brainstorm Force — verde */
}

.builder-chip {
  border: 1px solid #E2E8F0;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}
.builder-chip:hover { transform: translateY(-2px); }
.builder-chip-divi:hover { border-color: var(--c-divi); background: color-mix(in srgb, var(--c-divi) 6%, white); }
.builder-chip-elementor:hover { border-color: var(--c-elementor); background: color-mix(in srgb, var(--c-elementor) 6%, white); }
.builder-chip-betheme:hover { border-color: var(--c-betheme); background: color-mix(in srgb, var(--c-betheme) 6%, white); }
.builder-chip-astra:hover { border-color: var(--c-astra); background: color-mix(in srgb, var(--c-astra) 6%, white); }

.builder-dot-divi { background: var(--c-divi); }
.builder-dot-elementor { background: var(--c-elementor); }
.builder-dot-betheme { background: var(--c-betheme); }
.builder-dot-astra { background: var(--c-astra); }

/* Filtros del blog (mismo patrón visual que los tabs de Academia) */
.blog-filter {
  background: rgba(247, 243, 236, 0.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.blog-filter.is-active { color: #fff; }

/* Tabs de "Mi cuenta" */
.cuenta-tab {
  background: rgba(247, 243, 236, 0.88);
  backdrop-filter: blur(10px);
  color: var(--navy);
  border: 1px solid rgba(255,255,255,0.5);
}
.cuenta-tab.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Wizard de onboarding: tarjeta de builder seleccionable */
.onb-builder-card.is-selected {
  border-color: var(--cyan);
  transform: translateY(-2px);
}
.onb-dot { transition: background 0.3s ease; }
[data-onb-task].is-done span[data-onb-check] {
  background: var(--cyan);
  border-color: var(--cyan);
  position: relative;
}
[data-onb-task].is-done { color: var(--navy); }
[data-onb-task].is-done span[data-onb-check]::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}