/* ============================================================
 * impeccable.css · Capa de delight sobre polish.css
 *
 * 5 mejoras de impacto alto siguiendo principios Emil Kowalski:
 *   1. View Transitions API · transición nativa entre páginas
 *   2. Hero choreography · entrada coreografiada con stagger
 *   3. Terminal typing · efecto máquina de escribir progresivo
 *   4. Magnetic CTA · botón primario sigue el cursor (decorativo)
 *   5. Page progress bar · barra fina superior durante navegación
 *
 * Filosofía:
 *   - Solo se ven en escritorio (puntero fino)
 *   - Se respetan prefers-reduced-motion
 *   - Cada efecto tiene un propósito claro
 *   - Pueden interrumpirse (transitions, no keyframes)
 * ============================================================ */

/* ============================================================
 * 1. VIEW TRANSITIONS API · transición nativa entre páginas
 *
 * Activado con <meta name="view-transition" ...> y en JS.
 * El navegador hace un fade-cross entre las páginas al navegar.
 * Soporte: Chrome 111+, Edge 111+, Safari 18+, Firefox próximamente.
 * Fallback: silencioso (navegación normal sin animación).
 * ============================================================ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: impeccable-fade-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

::view-transition-new(root) {
  animation: impeccable-fade-in 280ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes impeccable-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes impeccable-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header se mantiene fijo entre páginas (continuidad visual) */
.site-header {
  view-transition-name: site-header;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
  mix-blend-mode: normal;
}

/* ============================================================
 * 2. HERO CHOREOGRAPHY · entrada coreografiada
 *
 * Los elementos del hero entran escalonados (eyebrow → title → sub
 * → CTAs → microcopy → terminal). Cada uno con un delay incremental.
 * Solo en escritorio para no quemar batería móvil.
 * ============================================================ */

@media (min-width: 768px) {
  .hero-eyebrow,
  .hero-title,
  .hero-sub,
  .hero-ctas,
  .hero-microcopy,
  .terminal {
    opacity: 0;
    animation: impeccable-hero-enter 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  .hero-eyebrow    { animation-delay: 100ms; }
  .hero-title      { animation-delay: 200ms; }
  .hero-sub        { animation-delay: 320ms; }
  .hero-ctas       { animation-delay: 440ms; }
  .hero-microcopy  { animation-delay: 560ms; }
  .terminal        { animation-delay: 700ms; }
}

@keyframes impeccable-hero-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* La línea verde del título crece desde la izquierda */
.accent-line {
  position: relative;
  display: inline-block;
}

.accent-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background: var(--accent, #22C55E);
  transform: scaleX(0);
  transform-origin: left center;
  animation: impeccable-line-grow 600ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 900ms;
  border-radius: 2px;
}

@keyframes impeccable-line-grow {
  to { transform: scaleX(1); }
}

/* ============================================================
 * 3. TERMINAL TYPING · líneas aparecen progresivamente
 *
 * Cada línea de la terminal aparece como si la estuviera tecleando.
 * Crea sensación de "el sistema está vivo".
 * Sincronizado con la entrada del hero.
 * ============================================================ */

@media (min-width: 768px) {
  .terminal .terminal-line {
    opacity: 0;
    transform: translateX(-8px);
    animation: impeccable-terminal-line 380ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  .terminal .terminal-line:nth-child(2) { animation-delay: 850ms; }
  .terminal .terminal-line:nth-child(3) { animation-delay: 1000ms; }
  .terminal .terminal-line:nth-child(4) { animation-delay: 1150ms; }
  .terminal .terminal-line:nth-child(5) { animation-delay: 1300ms; }
  .terminal .terminal-line:nth-child(6) { animation-delay: 1450ms; }
  .terminal .terminal-line:nth-child(7) { animation-delay: 1600ms; }
}

@keyframes impeccable-terminal-line {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Cursor parpadeante al final de la última línea */
.terminal .terminal-line:last-child::after {
  content: "▊";
  margin-left: 4px;
  color: var(--accent, #22C55E);
  animation: impeccable-cursor-blink 1.1s steps(2, start) infinite;
  animation-delay: 2s;
  opacity: 0;
}

@keyframes impeccable-cursor-blink {
  0%   { opacity: 1; }
  49%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ============================================================
 * 4. MAGNETIC CTA · botón sigue ligeramente al cursor
 *
 * Style necesario; el JS aplica --mx/--my según mouse position.
 * Hardware accelerated (solo transform).
 * Solo en escritorio con puntero fino.
 * ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .btn--accent.is-magnetic {
    --mx: 0px;
    --my: 0px;
    transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
    transform: translate3d(var(--mx), var(--my), 0);
  }

  .btn--accent.is-magnetic:active {
    transition: transform 100ms ease-out;
    transform: translate3d(var(--mx), var(--my), 0) scale(0.97);
  }

  /* La flecha también se desplaza pero el doble — parallax sutil */
  .btn--accent.is-magnetic .btn-arrow {
    --arrow-mx: calc(var(--mx) * 1.6);
    transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
    transform: translate3d(var(--arrow-mx), 0, 0);
  }

  .btn--accent.is-magnetic:hover .btn-arrow {
    transform: translate3d(calc(var(--arrow-mx) + 4px), 0, 0);
  }
}

/* ============================================================
 * 5. PAGE PROGRESS BAR · barra fina superior
 *
 * Aparece durante navegación entre páginas (View Transitions trigger).
 * Imita YouTube/GitHub para dar sensación de velocidad.
 * ============================================================ */

.impeccable-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--brand, #0F2A44),
    var(--accent, #22C55E)
  );
  width: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #22C55E) 50%, transparent);
}

.impeccable-progress.is-loading {
  opacity: 1;
  animation: impeccable-progress-grow 8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.impeccable-progress.is-done {
  opacity: 0;
  width: 100% !important;
  transition: width 200ms ease, opacity 300ms ease 200ms;
}

@keyframes impeccable-progress-grow {
  0%   { width: 0; }
  10%  { width: 35%; }
  40%  { width: 70%; }
  70%  { width: 85%; }
  100% { width: 92%; }
}

/* ============================================================
 * 6. CHAT LAUNCHER vs STICKY CTA · evitar solapamiento
 *
 * Cuando aparece la sticky-cta-bar (impact.js añade has-sticky-cta
 * al body), el chat launcher se sube para no chocar.
 * Transición suave para que no salte de golpe.
 * ============================================================ */

.igc-launcher,
.chat-launcher,
[class*="chat-bubble-launcher"],
#chat-launcher,
.chatbot-launcher {
  transition:
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
    bottom 280ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 200ms ease;
}

body.has-sticky-cta .igc-launcher,
body.has-sticky-cta .chat-launcher,
body.has-sticky-cta [class*="chat-bubble-launcher"],
body.has-sticky-cta #chat-launcher,
body.has-sticky-cta .chatbot-launcher {
  transform: translateY(-72px);
}

/* En móvil, el sticky CTA ocupa más alto (stack vertical). El launcher real
   es .igc-launcher: sin él aquí, en móvil solo subía -72px y el pill de chat
   quedaba montado sobre la barra "Pocas plazas". */
@media (max-width: 640px) {
  body.has-sticky-cta .igc-launcher,
  body.has-sticky-cta .chat-launcher,
  body.has-sticky-cta [class*="chat-bubble-launcher"],
  body.has-sticky-cta #chat-launcher,
  body.has-sticky-cta .chatbot-launcher {
    transform: translateY(-128px);
  }
}

/* Móvil + sticky CTA visible: el .igc-launcher se colapsa a círculo de icono.
   La barra ya tiene su propio botón ("Empezar ahora"), un pill de 240px de
   ancho encima es ruido y obliga a subirlo aún más. */
@media (max-width: 540px) {
  body.has-sticky-cta .igc-launcher {
    padding: 0;
    width: 52px;
    justify-content: center;
    gap: 0;
  }
  body.has-sticky-cta .igc-launcher > span:last-child {
    display: none;
  }
}

/* ============================================================
 * 7. STICKY CTA · más sutil para no competir con el launcher
 * ============================================================ */

.imp-sticky-cta {
  /* Hacemos hueco a la derecha para el chat launcher (~70px ancho + 24px margen) */
  padding-right: clamp(0px, 100px, 110px);
}

@media (max-width: 900px) {
  .imp-sticky-cta {
    padding-right: 80px;
  }
}

/* < 640px el launcher ya no va AL LADO de la barra sino ENCIMA (ver bloque 6):
   el hueco reservado a la derecha solo aplastaba el texto en una columna
   estrecha. */
@media (max-width: 640px) {
  .imp-sticky-cta {
    padding-right: 0;
  }
}

/* En móvil, ocultar el texto del launcher cuando el sticky CTA es visible
 * (el sticky CTA ya tiene su propio botón "Diagnóstico", no necesitamos otro) */
@media (max-width: 540px) {
  body.has-sticky-cta .chat-launcher .chat-launcher-text,
  body.has-sticky-cta [class*="chat-bubble-launcher"] span {
    display: none;
  }
}

/* ============================================================
 * 8. STAT NUMBERS · counting tabular para evitar layout shift
 * ============================================================ */

.stat-num,
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 9. DEMO BUTTON · cyan → verde brand (coherencia paleta)
 *
 * El botón "Reproducir demo" usa --d-brand cyan que rompe la paleta.
 * Lo unificamos al verde brand del resto de la web.
 * ============================================================ */

.demo-stage .demo-play-btn {
  background: var(--accent, #22C55E) !important;
  color: #052e16 !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent, #22C55E) 35%, transparent),
              0 0 0 0 color-mix(in srgb, var(--accent, #22C55E) 40%, transparent);
  transition:
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 280ms ease,
    background-color 200ms ease;
  position: relative;
  animation: impeccable-pulse-glow 2.4s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  .demo-stage .demo-play-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 40px color-mix(in srgb, var(--accent, #22C55E) 50%, transparent),
                0 0 0 8px color-mix(in srgb, var(--accent, #22C55E) 12%, transparent);
    animation: none;
  }
}

.demo-stage .demo-play-btn:active {
  transform: translateY(0) scale(0.97);
}

@keyframes impeccable-pulse-glow {
  0%, 100% {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent, #22C55E) 35%, transparent),
                0 0 0 0 color-mix(in srgb, var(--accent, #22C55E) 40%, transparent);
  }
  50% {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent, #22C55E) 35%, transparent),
                0 0 0 12px color-mix(in srgb, var(--accent, #22C55E) 0%, transparent);
  }
}

/* ============================================================
 * 10. STICKY CTA · más sutil, no compite con el hero
 *
 * El bar actual es muy opaco y aparece de inmediato. Lo hacemos:
 *   - backdrop-blur para integrarse con la página
 *   - bordes redondeados arriba (no full-width agresivo)
 *   - padding interior más cómodo
 *   - el botón CTA con la misma personalidad que el hero
 * ============================================================ */

.imp-sticky-cta {
  /* Barra exterior transparente: solo se ve el pill interior centrado.
     Sin fondo full-width ni blur (evita los bloques oscuros laterales). */
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
  box-shadow: none;
}

.imp-sticky-cta-btn {
  background: #0F2A44 !important;
  color: #5CD387 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  font-weight: 700;
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 200ms ease,
    background-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .imp-sticky-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15, 42, 68, 0.4);
    border-color: #22C55E !important;
  }
}

.imp-sticky-cta-btn:active {
  transform: scale(0.97);
}

.imp-sticky-cta-close {
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.imp-sticky-cta-close:hover {
  opacity: 1;
}

/* ============================================================
 * 11. TRUST STRIP · barra de credibilidad post-hero
 *
 * Se inyecta automáticamente si no existe ya (ver impeccable.js).
 * Logos/badges de tecnologías + garantías rápidas.
 * Aumenta conversión por trust signal denso.
 * ============================================================ */

.impeccable-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 48px);
  padding: 20px clamp(16px, 4vw, 40px);
  border-top: 1px solid color-mix(in srgb, var(--border, #1f2937) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border, #1f2937) 50%, transparent);
  background: color-mix(in srgb, var(--bg, #000) 80%, transparent);
  flex-wrap: wrap;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-muted, #94a3b8) 95%, transparent);
}

.impeccable-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: impeccable-trust-in 500ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  white-space: nowrap;
}

.impeccable-trust-item:nth-child(1) { animation-delay: 1.2s; }
.impeccable-trust-item:nth-child(2) { animation-delay: 1.32s; }
.impeccable-trust-item:nth-child(3) { animation-delay: 1.44s; }
.impeccable-trust-item:nth-child(4) { animation-delay: 1.56s; }
.impeccable-trust-item:nth-child(5) { animation-delay: 1.68s; }
.impeccable-trust-item:nth-child(6) { animation-delay: 1.80s; }

@keyframes impeccable-trust-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.impeccable-trust-item svg {
  width: 14px;
  height: 14px;
  color: var(--accent, #22C55E);
  flex-shrink: 0;
}

.impeccable-trust-item strong {
  color: var(--text, #fff);
  font-weight: 600;
}

@media (max-width: 640px) {
  .impeccable-trust-strip {
    font-size: 10.5px;
    padding: 16px 12px;
    gap: 14px;
  }
}

/* ============================================================
 * 12. NAV LINK ACTIVE · subrayado más prominente
 *
 * El link activo (página actual) debe destacar claramente.
 * El polish.css ya añade el underline animado, aquí lo refinamos.
 * ============================================================ */

.nav-link.is-active {
  color: var(--text, #fff);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .nav-link.is-active::after {
    background: var(--accent, #22C55E);
    height: 2px;
    opacity: 1;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #22C55E) 50%, transparent);
  }
}

/* ============================================================
 * 13. HERO CTA · pulso de respiración para guía visual
 *
 * El CTA primario tiene un glow que respira sutilmente para
 * atraer el ojo SIN ser invasivo. Se detiene en hover.
 * Solo en escritorio.
 * ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .hero-ctas .btn--accent {
    position: relative;
    animation: impeccable-cta-breathe 3.6s ease-in-out 2s infinite;
  }

  .hero-ctas .btn--accent:hover {
    animation: none;
  }
}

@keyframes impeccable-cta-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #22C55E) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent, #22C55E) 18%, transparent);
  }
}

/* ============================================================
 * 14. HEADER BAR · estado scrolled con borde más denso
 *
 * Cuando hay scroll, el header se vuelve más sólido para mejor
 * contraste con el contenido. polish.css ya añade transition.
 * Aquí definimos el estado.
 * ============================================================ */

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg, #000) 92%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--accent, #22C55E) 12%, transparent) !important;
  box-shadow: 0 4px 24px color-mix(in srgb, #000 25%, transparent);
}

/* ============================================================
 * 15. HERO TITLE · cursor de typing sutil tras la accent-line
 *
 * Añade un cursor parpadeante después de "departamento" — solo
 * después de que el accent-line haya terminado su animación.
 * Personalidad tech sin sobrecargar.
 * ============================================================ */

.accent-line::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 8%;
  bottom: 18%;
  width: 4px;
  background: var(--accent, #22C55E);
  opacity: 0;
  animation:
    impeccable-cursor-appear 200ms ease forwards 1.7s,
    impeccable-cursor-blink-hero 1.1s steps(2, start) infinite 1.9s;
  border-radius: 2px;
}

@keyframes impeccable-cursor-appear {
  to { opacity: 1; }
}

@keyframes impeccable-cursor-blink-hero {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================================
 * 16. SCROLL INDICATOR · mini chevron al final del hero
 *
 * Sutil indicación de "hay más debajo" — sube conversión
 * porque guía al usuario sin pedirlo explícitamente.
 * ============================================================ */

.impeccable-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  color: color-mix(in srgb, var(--text-muted, #94a3b8) 60%, transparent);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  animation:
    impeccable-scroll-hint-appear 600ms ease forwards 2.4s,
    impeccable-scroll-hint-bounce 1.8s ease-in-out infinite 3s;
}

.impeccable-scroll-hint svg {
  width: 100%;
  height: 100%;
}

@keyframes impeccable-scroll-hint-appear {
  to { opacity: 1; }
}

@keyframes impeccable-scroll-hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 768px) {
  .impeccable-scroll-hint { display: none; }
}

/* ============================================================
 * REDUCED MOTION · todo se simplifica a fades
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-title,
  .hero-sub,
  .hero-ctas,
  .hero-microcopy,
  .terminal,
  .terminal .terminal-line,
  .accent-line::after {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }

  .btn--accent.is-magnetic {
    --mx: 0px;
    --my: 0px;
    transform: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: impeccable-fade-only 200ms ease forwards;
  }
}

@keyframes impeccable-fade-only {
  from { opacity: 0; }
  to { opacity: 1; }
}