/* ─────────────────────────────────────────
   Implementación 1:1 — ajustes exclusivos de esta página
   (el resto del sistema visual vive en ../index.css, sin tocar)
   ───────────────────────────────────────── */

/* Hero + VSL comprimidos: sin nav y sin franja para el video aparte, todo
   el contenido intenta entrar en una sola pantalla. */
.gfm-hero-compact {
  min-height: auto;
}
.gfm-hero-compact .gfm-hero-body {
  padding: 24px 24px 32px;
}

/* H1 de ancho completo (sin el max-width de 820px del resto del sitio) */
.gfm-hero-h1-full {
  max-width: 100%;
  font-size: clamp(32px, 4.8vw, 58px);
  margin-bottom: 18px;
}

/* H1: mismo acento naranja estático que .gfm-sh-title em (resto de los
   títulos de la página), en vez del degradé con blanco + shimmer que usa
   el H1 por defecto en el resto del sitio. */
.gfm-hero-h1-full .l2 {
  background-image: linear-gradient(90deg, var(--c-primary), var(--c-accent2));
  background-size: auto;
  animation: none;
}

/* Todos los títulos de sección al mismo tamaño y ancho que el H1 del hero.
   El color (blanco + degradé naranja/ámbar en <em>) ya lo define
   ../index.css — acá se iguala tamaño y se quita el max-width de 820px
   que traían por defecto. */
.gfm-sh-title,
.gfm-problem-title,
.gfm-impl-close-title,
.gfm-founder-title,
.gfm-cta-title {
  font-size: clamp(32px, 4.8vw, 58px);
  max-width: 100%;
}

/* Párrafo del VSL, pegado debajo del H1 sin el margen de sección aparte.
   El hero es oscuro siempre (--c-ink, ver comentario en ../index.css), pero
   var(--text-muted) pasa a un gris oscuro en .gfm-light-theme — sin este
   color hardcodeado el texto queda casi invisible sobre el fondo. */
.gfm-hero-compact .gfm-vsl-intro {
  color: #f4f2ee;
}
.gfm-vsl-intro {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  max-width: 860px;
  margin: 0 auto 24px;
}

/* Tarjeta del video */
.gfm-vsl-card-compact {
  max-width: 820px;
  padding: 16px;
  margin: 0 auto 24px;
}

.gfm-orbital-closing-compact {
  margin: 0 auto;
  max-width: none;
}

/* Botón "Reservar reunión" agrandado */
.gfm-cta-big {
  padding: 22px 60px;
  font-size: 18px;
}

@media (max-width: 700px) {
  .gfm-hero-h1-full { font-size: clamp(22px, 6vw, 30px); }
  .gfm-cta-big { padding: 18px 40px; font-size: 16px; }
}

/* Mobile (≤768px, mismo breakpoint donde ../index.css activa .gfm-sticky-cta):
   el CTA del hero (pegado debajo de "Mira este video antes de reservar un
   lugar") queda justo arriba de la barra fija "QUIERO AGENDAR UNA LLAMADA",
   duplicando el mismo botón en la primera pantalla. Nos quedamos con el
   botón inline del hero y ocultamos la barra fija solo en esta página. */
@media (max-width: 768px) {
  .gfm-sticky-cta {
    display: none;
  }
  .gfm-hero-compact .gfm-hero-body {
    padding: 20px 20px 24px;
  }
  .gfm-vsl-intro {
    margin-bottom: 18px;
  }
  .gfm-vsl-card-compact {
    margin-bottom: 18px;
  }
}

/* Footer recortado: solo columna de marca + una columna de navegación
   (la Home usa una tercera columna de servicios que esta página no necesita). */
.gfm-footer-grid {
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 768px) {
  .gfm-footer-grid { grid-template-columns: 1fr; }
}

/* Bloque destacado de la sección Diferencial ("Es una Implementación 1:1...")
   con el mismo fondo violeta animado y tipografía blanca que los botones
   .gfm-btn-fill (reutiliza la keyframe mesh-move ya definida en la raíz).
   Solo este bloque puntual — el de Acompañamiento usa la misma clase base
   .gfm-impl-highlight sin este modificador y no se ve afectado. */
.gfm-impl-highlight-accent {
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent2), var(--c-primary-hover));
  background-size: 200% auto;
  animation: mesh-move 5s ease infinite;
  border-color: transparent;
  box-shadow: 0 0 45px rgba(var(--c-primary-rgb), 0.35);
}
.gfm-impl-highlight-accent .gfm-impl-highlight-title,
.gfm-impl-highlight-accent .gfm-impl-highlight-text {
  color: #fff;
}

/* ─────────────────────────────────────────
   Rediseño visual 2026-08-02 (ver spec en
   docs/superpowers/specs/2026-08-02-onboarding-landing-visual-redesign-design.md)
   ───────────────────────────────────────── */

/* Cuatro fases: pulso sutil en los puntos de la línea de tiempo. */
.gfm-impl-tl-dot {
  animation: gfm-dot-pulse 2.4s ease infinite;
}
@keyframes gfm-dot-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(var(--c-primary-rgb), 0.7); }
  50% { box-shadow: 0 0 18px rgba(var(--c-primary-rgb), 1); }
}

/* Menos aire antes de Perfil ideal — con "Cómo trabajamos", "El sistema" y
   "Cómo funciona el sistema" eliminadas, el padding de 140px por defecto
   se sentía como demasiado espacio vacío antes de esta sección. */
.gfm-qualifier {
  padding: 90px 0;
}