/*
 * ─────────────────────────────────────────────────────────────────
 *  SINAPSYS — COMPONENTS
 *  Nav, Botones, Stats, Service Cards, About Card,
 *  Testimonial Cards, Pricing Cards, FAQ, Footer.
 * ─────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════ */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-4) var(--section-pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 20, 45, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

.logo-text {
  font-weight: var(--font-black);
  font-size: 3.4rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--grad-blue-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(92, 168, 223, 0.65));
  transition: filter var(--transition-fast);
}

.logo-text:hover {
  filter: drop-shadow(0 0 32px rgba(92, 168, 223, 0.95));
}

.logo-neuron {
  width: 44px;
  height: 28px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-10);
  align-items: center;
}

nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--font-bold);
  transition: color var(--transition-fast);
}

nav a:hover { color: var(--color-blue-light); }

.nav-cta {
  background: var(--grad-main) !important;
  color: var(--color-white) !important;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: var(--font-bold) !important;
  transition: opacity var(--transition-fast) !important;
}
.nav-cta:hover { opacity: 0.85; color: var(--color-white) !important; }


/* ═══════════════════════════════════════════════
   HERO — EYEBROW + CONTENIDO
   ═══════════════════════════════════════════════ */

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-8);
  animation: fadeUp 0.8s ease both;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--color-blue-light);
  border-radius: var(--radius-circle);
  animation: pulse 2s infinite;
}

.hero-sub {
  font-size: var(--text-xl);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
  margin-bottom: var(--space-10);
  animation: fadeUp 0.8s 0.2s ease both;
  font-weight: var(--font-light);   /* Manual: párrafos → Light */
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  animation: fadeUp 0.8s 0.3s ease both;
}


/* ═══════════════════════════════════════════════
   BOTONES — SISTEMA COMPLETO
   ═══════════════════════════════════════════════ */

/* Btn primario — degradé principal */
.btn-main {
  background: var(--grad-main);
  color: var(--color-white);
  padding: var(--space-4) 2.2rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: var(--font-bold);     /* Manual: CTAs → Bold */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform var(--transition-fast), opacity var(--transition-base);
  display: inline-block;
  box-shadow: var(--shadow-purple-lg);
}
.btn-main:hover { transform: translateY(-2px); opacity: 0.9; }

/* Btn azul — acento de marca (paleta azul/violeta/blanco) */
.btn-yellow {
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-4) 2.2rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: var(--font-black);    /* Manual: CTAs → Black */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform var(--transition-fast);
  display: inline-block;
  box-shadow: var(--shadow-blue);
}
.btn-yellow:hover { transform: translateY(-2px); }

/* Btn CTA azul (sección final) */
.btn-cta-yellow {
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-4) 2.2rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--font-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-blue);
}
.btn-cta-yellow:hover { transform: translateY(-2px); }

/* Btn CTA blanco/ghost (sección final) */
.btn-cta-white {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  padding: var(--space-4) 2.2rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background var(--transition-base);
}
.btn-cta-white:hover { background: rgba(255, 255, 255, 0.25); }

/* Btn pricing azul */
.btn-pricing-yellow {
  display: block;
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity var(--transition-base);
}
.btn-pricing-yellow:hover { opacity: 0.85; }

/* Btn pricing ghost */
.btn-pricing-ghost {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--transition-base), color var(--transition-base);
  text-align: center;
}
.btn-pricing-ghost:hover { border-color: var(--color-blue-light); color: var(--color-blue-light); }


/* ═══════════════════════════════════════════════
   STATS STRIP
   ═══════════════════════════════════════════════ */

.stat-num {
  font-size: var(--text-stat);
  font-weight: var(--font-black);    /* Manual: cifras destacadas → Black */
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: var(--font-light);
}


/* ═══════════════════════════════════════════════
   SERVICE CARDS — ESPECIALIDADES
   ═══════════════════════════════════════════════ */

.service-card {
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 2.25rem 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Overlay de gradiente en hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-main);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.service-card:hover {
  border-color: var(--color-purple-light);
  box-shadow: var(--shadow-glow-sm), var(--shadow-purple-md);
}

.service-card:hover::before { opacity: 0.1; }

/* Todos los hijos sobre el overlay */
.service-card > * { position: relative; z-index: 1; }

/* Wrapper de ícono SVG */
.service-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: rgba(135, 60, 160, 0.2);
  border: 1px solid rgba(135, 60, 160, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--color-purple-light);
  transition: background var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.service-icon-wrap svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  flex-shrink: 0;
}

.service-card:hover .service-icon-wrap {
  background: rgba(135, 60, 160, 0.35);
  border-color: var(--border-focus);
  transform: scale(1.12);
}

/* Títulos de card — Manual: Bold para títulos */
.service-card h3 {
  font-size: var(--text-h3);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-3);
}

/* Descripción — Manual: Light para párrafos, contraste corregido */
.service-card p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  font-weight: var(--font-light);
}

/* Tag de especialidad */
.service-tag {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue-light);
  border: 1px solid rgba(92, 168, 223, 0.3);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-weight: var(--font-bold);
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.service-card:hover .service-tag {
  transform: translateY(-2px);
  border-color: rgba(92, 168, 223, 0.55);
}


/* ═══════════════════════════════════════════════
   HOW IT WORKS — PASOS
   ═══════════════════════════════════════════════ */

.step { text-align: center; position: relative; }

.step-circle {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-circle);
  background: var(--grad-main);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  font-size: 1.5rem;
  font-weight: var(--font-black);    /* Manual: números/cifras → Black */
  box-shadow: 0 0 30px rgba(135, 60, 160, 0.4);
}

.step h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.step p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  font-weight: var(--font-light);
}


/* ═══════════════════════════════════════════════
   ABOUT CARD — SOBRE NOSOTROS
   ═══════════════════════════════════════════════ */

.about-card-main {
  background: var(--grad-main);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* Círculo decorativo de fondo */
.about-card-main::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-circle);
}

.about-card-main > * { position: relative; z-index: 1; }

/* Cita — Manual: texto en cursiva Bold Italic para énfasis en títulos */
.about-quote {
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: var(--font-light);    /* Cita larga → Light Italic del manual */
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.about-name {
  font-weight: var(--font-black);    /* Manual: nombre propio → Black */
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.about-role {
  font-size: var(--text-2xs);
  opacity: 0.7;
  letter-spacing: 0.08em;
  font-weight: var(--font-light);
}

/* Texto del about — Manual: párrafos → Light */
.about-text p {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.85;
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--font-light);
}

/* Credenciales */
.credentials {
  margin-top: var(--space-7, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cred-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  font-weight: var(--font-light);
}

.cred-dot {
  width: 6px;
  height: 6px;
  background: var(--color-blue-light);
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════
   TESTIMONIAL CARDS
   ═══════════════════════════════════════════════ */

.testimonial-card {
  grid-column: span 2;
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Centrar las últimas 2 cards cuando el grid tiene 5 items */
.testimonial-card:nth-child(4) { grid-column: 2 / span 2; }
.testimonial-card:nth-child(5) { grid-column: 4 / span 2; }

.testimonial-card:hover {
  border-color: var(--color-purple-light);
  box-shadow: var(--shadow-glow-md), var(--shadow-purple-sm);
}

.stars {
  color: var(--color-blue-light);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
  letter-spacing: 0.1em;
}

/* Cita — Manual: Italic para énfasis en cuerpo */
.testimonial-card p {
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-6);
  font-weight: var(--font-light);
}

.t-author { display: flex; align-items: center; gap: var(--space-3); }

/* Avatar — degradé azul-morado (del manual, no verde) */
.t-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-circle);
  background: var(--grad-blue-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-black);
  font-size: var(--text-base);
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color var(--transition-base);
}

.testimonial-card:hover .t-avatar {
  border-color: rgba(168, 85, 200, 0.5);
}

/* Nombre — Manual: nombre propio → Bold uppercase */
.t-name {
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Sub (profesión + edad) — contraste corregido */
.t-sub {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.62);
  font-weight: var(--font-light);
}


/* ═══════════════════════════════════════════════
   PRICING CARDS
   ═══════════════════════════════════════════════ */

.pricing-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  position: relative;
  transition: transform var(--transition-base);
  /* Gradiente animado suave — tonos oscuros navy/purple */
  background: linear-gradient(-45deg,
    var(--color-navy),
    rgba(135, 60, 160, 0.55),
    var(--color-navy-mid),
    rgba(41, 122, 191, 0.45)
  );
  background-size: 300% 300%;
  animation: gradientCard 18s ease infinite;
}

.pricing-card:hover { transform: translateY(-4px); }

/* Card destacada — gradiente más luminoso con colores más brillantes */
.pricing-card.featured {
  border-color: transparent;
  box-shadow: var(--shadow-purple-lg);
  background: linear-gradient(-45deg,
    var(--color-navy-mid),
    var(--color-purple-light),
    var(--color-blue),
    var(--color-navy)
  );
  background-size: 300% 300%;
  animation: gradientCard 12s ease infinite;
}

.pricing-badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: var(--text-2xs);
  font-weight: var(--font-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-name {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: var(--font-bold);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-6);
}
.pricing-card.featured .pricing-name { color: rgba(255, 255, 255, 0.8); }

.pricing-amount {
  font-size: var(--text-price);
  font-weight: var(--font-black);    /* Manual: cifras → Black */
  line-height: 1;
  margin-bottom: var(--space-1);
}

.pricing-period {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-8);
  font-weight: var(--font-light);
}
.pricing-card.featured .pricing-period { color: rgba(255, 255, 255, 0.65); }

.pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: var(--space-8);
}

.pricing-features li {
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: rgba(255, 255, 255, 0.65);
  font-weight: var(--font-light);
}
.pricing-features li::before {
  content: '✓';
  color: var(--color-blue-light);
  font-weight: var(--font-black);
  font-size: var(--text-2xs);
}
.pricing-card.featured .pricing-features li {
  border-bottom-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}


/* ═══════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════ */

.faq-item {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-6) 0;
  cursor: pointer;
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-md);
  font-weight: var(--font-bold);     /* Manual: pregunta/título → Bold */
  gap: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.faq-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-circle);
  background: rgba(135, 60, 160, 0.25);
  border: 1px solid rgba(135, 60, 160, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-purple-light);
  transition: transform var(--transition-base), background var(--transition-base);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: rgba(135, 60, 160, 0.5);
}

/* Respuesta — Manual: párrafo → Light */
.faq-a {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding var(--transition-base);
  font-weight: var(--font-light);
}

.faq-item.open .faq-a {
  max-height: 200px;
  padding-top: var(--space-4);
}


/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */

.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.footer-logo-text {
  font-weight: var(--font-black);    /* Manual: marca → Black */
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-desc {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.75;
  max-width: 280px;
  font-weight: var(--font-light);
}

.footer-col h4 {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blue-light);
  margin-bottom: var(--space-5);
  font-weight: var(--font-black);
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--space-2); }

.footer-col a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--text-base);
  transition: color var(--transition-base);
  font-weight: var(--font-light);
}
.footer-col a:hover { color: var(--color-blue-light); }