/* CAPYCON — capas sobre Tailwind */
:root {
  --capy-teal: #0d9488;
  --capy-blue: #0ea5e9;
  /* Fondo plantilla: slate-900 mate (#0F172A) */
  --capy-dark: #0f172a;
  --capy-glow: rgba(14, 165, 233, 0.35);
  /* Bloques navy alineados al mismo base para continuidad visual */
  --capy-navy: #0f172a;
  --capy-card: #111827;
  --capy-accent-teal: #2dd4bf;
  --capy-muted: #94a3b8;
  --capy-card-border: rgb(30 41 55);
}

/* Bloque Capacitadores: fondo midnight, sin malla del body */
.section-capacitadores {
  background-color: var(--capy-navy);
  border-top: 1px solid rgb(30 41 55);
  border-bottom: 1px solid rgb(30 41 55);
}

/* Misma paleta navy sin repetir borde superior (bloque siguiente a Capacitadores) */
.section-capacitadores-cont {
  background-color: var(--capy-navy);
  border-bottom: 1px solid rgb(30 41 55);
}

.trainer-card-palette {
  background-color: var(--capy-card);
  border: 1px solid var(--capy-card-border);
  border-radius: 1rem;
  box-shadow: 0 1px 0 0 rgba(45, 212, 191, 0.04);
}

.trainer-avatar-palette {
  background: linear-gradient(145deg, #115e59 0%, #0f766e 35%, #0c4a6e 100%);
  border: 1px solid rgba(45, 212, 191, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "kern" 1, "liga" 1;
}

/*
  Fondo global: una sola clase (evita que utilidades de Tailwind CDN pisen el color
  o que el navegador sirva CSS en caché sin la malla).
*/
.capy-body {
  min-height: 100vh;
  background-color: #0f172a;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -25%, rgba(56, 189, 248, 0.07), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 0%, rgba(45, 212, 191, 0.06), transparent 50%),
    radial-gradient(ellipse 45% 35% at 0% 100%, rgba(56, 189, 248, 0.05), transparent 50%);
}

/* Compatibilidad si aún usas la clase antigua en algún sitio */
.bg-tech-mesh {
  background-color: var(--capy-dark);
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -25%, rgba(56, 189, 248, 0.07), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 0%, rgba(45, 212, 191, 0.06), transparent 50%),
    radial-gradient(ellipse 45% 35% at 0% 100%, rgba(56, 189, 248, 0.05), transparent 50%);
}

.capy-header-bg {
  background-color: rgba(15, 23, 42, 0.85);
}

.capy-footer-bg {
  background-color: #0f172a;
}

/* Títulos: gradiente horizontal teal → sky (alto contraste sobre #0F172A) */
.gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, #5eead4 0%, #2dd4bf 40%, #38bdf8 85%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.card-glass {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.15);
}

.testimonial-viewport {
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonial-slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .testimonial-slide {
    flex: 0 0 calc(50% - 0.75rem);
    min-width: calc(50% - 0.75rem);
  }
}

@media (min-width: 1024px) {
  .testimonial-slide {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: calc(33.333% - 1rem);
  }
}

.nav-link-active {
  color: #2dd4bf;
}

/* Carrusel dots */
.dot-active {
  background: linear-gradient(90deg, #14b8a6, #0ea5e9);
  transform: scale(1.15);
}