/* =====================================================================
   DeedToGo — Motion & Layout Kit  (mk-*)
   ---------------------------------------------------------------------
   Patrones de movimiento, ritmo de espaciado y CTA destilados de
   antigravity.google (Astro + GSAP). Aquí NO hay branding ajeno:
   ni colores, ni tipografía, ni logos, ni textos. Solo el sistema:
   curvas de easing, escala de espacio, estructura de CTA y las
   mecánicas de animación, reescritas en CSS + JS vanilla y pintadas
   con los tokens de DeedToGo (navy / green / Inter).

   Se carga DESPUÉS de styles.css. Todo va prefijado con `mk-` para no
   chocar con nada existente.

   Requiere: assets/js/motion-kit.js
   ===================================================================== */

:root {
  /* ── Curvas de easing (set Penner completo) ──
     El original usa exactamente estas 19. Son la razón de que todo
     "aterrice" en vez de frenar de golpe. Las que más rinden aquí:
     --mk-ease-out-quart  → entradas y reveals
     --mk-ease-out-expo   → paneles grandes / modales
     --mk-ease-out-back   → micro-pops (cursor, chips)                 */
  --mk-ease-in-quad:      cubic-bezier(.55, .085, .68, .53);
  --mk-ease-in-cubic:     cubic-bezier(.55, .055, .675, .19);
  --mk-ease-in-quart:     cubic-bezier(.895, .03, .685, .22);
  --mk-ease-in-quint:     cubic-bezier(.755, .05, .855, .06);
  --mk-ease-in-expo:      cubic-bezier(.95, .05, .795, .035);
  --mk-ease-in-circ:      cubic-bezier(.6, .04, .98, .335);
  --mk-ease-out-quad:     cubic-bezier(.25, .46, .45, .94);
  --mk-ease-out-cubic:    cubic-bezier(.215, .61, .355, 1);
  --mk-ease-out-quart:    cubic-bezier(.165, .84, .44, 1);
  --mk-ease-out-quint:    cubic-bezier(.23, 1, .32, 1);
  --mk-ease-out-expo:     cubic-bezier(.19, 1, .22, 1);
  --mk-ease-out-circ:     cubic-bezier(.075, .82, .165, 1);
  --mk-ease-in-out-quad:  cubic-bezier(.455, .03, .515, .955);
  --mk-ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --mk-ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --mk-ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --mk-ease-in-out-expo:  cubic-bezier(1, 0, 0, 1);
  --mk-ease-in-out-circ:  cubic-bezier(.785, .135, .15, .86);
  --mk-ease-out-back:     cubic-bezier(.34, 1.85, .64, 1);

  /* ── Duraciones canónicas del original ── */
  --mk-dur-micro:  .15s;  /* hover de botón: all .15s ease-out         */
  --mk-dur-fast:   .2s;   /* estados, salidas                          */
  --mk-dur-base:   .3s;   /* aparición de overlays / cursor            */
  --mk-dur-slow:   .6s;   /* entrada de copy con stagger               */

  /* ── Escala de espacio (la del original, tal cual) ──
     Nótese el salto: 4→8→16→24→36→48→60→80→88→120→180.
     Casi todo el "aire" de la página sale de 3xl / 4xl / 6xl.         */
  --mk-space-xs:  4px;
  --mk-space-sm:  8px;
  --mk-space-md:  16px;
  --mk-space-lg:  24px;
  --mk-space-xl:  36px;
  --mk-space-2xl: 48px;
  --mk-space-3xl: 60px;
  --mk-space-4xl: 80px;
  --mk-space-5xl: 88px;
  --mk-space-6xl: 120px;
  --mk-space-7xl: 180px;

  /* ── Radios ── */
  --mk-corner-xs:      4px;
  --mk-corner-sm:      8px;
  --mk-corner-md:      16px;
  --mk-corner-lg:      24px;
  --mk-corner-xl:      36px;
  --mk-corner-2xl:     48px;
  --mk-corner-rounded: 9999px;

  /* ── Rejilla / márgenes de página (responsive) ── */
  --mk-page-margin:  72px;
  --mk-grid-gutter:  64px;
  --mk-grid-columns: 12;
  --mk-maxw:         1600px;

  /* ── Parámetros de la onda de iconos ── */
  --mk-wave-amp:    35px;   /* amplitud vertical del seno              */
  --mk-wave-period: 7s;     /* un ciclo completo                       */
}

@media (max-width: 1024px) {
  :root { --mk-page-margin: 40px; --mk-grid-gutter: 40px; --mk-grid-columns: 8; }
}
@media (max-width: 767px) {
  :root { --mk-page-margin: 16px; --mk-grid-gutter: 16px; --mk-grid-columns: 4; --mk-wave-amp: 18px; }
}

/* =====================================================================
   1. RITMO DE ESPACIADO
   El original respira con 3 alturas de sección, no con una sola.
   ===================================================================== */

/* Contenedor ancho: el aire lateral es un token, no un padding suelto. */
.mk-container {
  width: 100%;
  max-width: calc(var(--mk-maxw) + var(--mk-page-margin) * 2);
  padding-inline: var(--mk-page-margin);
  margin-inline: auto;
}

/* Sección normal — respiración media. */
.mk-section { padding-block: var(--mk-space-4xl); }

/* Sección "capítulo" — abre grande, cierra un punto menos.
   Asimétrico a propósito: el título necesita más aire arriba.        */
.mk-section--chapter { padding-block: var(--mk-space-6xl) var(--mk-space-5xl); }

/* Banda de CTA final — el gesto más caro de la página: aire extremo.
   Desktop 200px arriba y abajo; en móvil colapsa a 88px.             */
.mk-band {
  padding-block: 200px;
  padding-inline: var(--mk-page-margin);
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
@media (max-width: 1024px) { .mk-band { padding-block: var(--mk-space-5xl); } }

/* Cabecera de héroe: márgenes de bloque explícitos (32 arriba / 64 abajo),
   no el margin-bottom heredado del h1.                                */
.mk-hero-head { margin-block: 32px 64px; position: relative; }

/* =====================================================================
   2. TITULAR TIPEADO  (mk-typed)
   Cada caracter aparece con opacity 0→1 en 10ms, escalonado.
   El cursor es un bloque que salta al último caracter escrito.
   Hero: stagger .05s. Texto de sección: .02s (mucho más rápido).
   ===================================================================== */
.mk-typed { position: relative; display: inline-block; }
.mk-typed__content { display: inline; }
.mk-typed__word { display: inline-block; }
.mk-typed__char { opacity: 0; will-change: opacity; }
.mk-typed.is-instant .mk-typed__char { opacity: 1; }

.mk-typed__caret {
  position: absolute;
  top: 0; left: 0;
  width: .46em; height: .95em;
  border-radius: 2px;
  background: var(--brand-green, #43B573);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--mk-caret-x, 0), var(--mk-caret-y, 0), 0);
  animation: mk-blink .5s steps(1, end) infinite;
}
.mk-typed.is-typing .mk-typed__caret,
.mk-typed.is-caret-persist .mk-typed__caret { opacity: 1; }
@keyframes mk-blink { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }

/* =====================================================================
   3. REVEAL CON STAGGER  (mk-reveal)
   y:30 → 0, opacity 0 → 1, 600ms, ease-out, hijos escalonados 100ms.
   Se dispara cuando el bloque cruza el 80–85% del viewport (o sea:
   cuando ya entró de verdad, no al primer pixel).
   ===================================================================== */
.mk-on .mk-reveal > * {
  opacity: 0;
  transform: translateY(30px);
}
.mk-on .mk-reveal.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--mk-dur-slow) var(--mk-ease-out-quart),
              transform var(--mk-dur-slow) var(--mk-ease-out-quart);
}

/* Variante para un solo bloque (sin escalonar hijos). */
.mk-on .mk-reveal-self { opacity: 0; transform: translateY(30px); }
.mk-on .mk-reveal-self.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--mk-dur-slow) var(--mk-ease-out-quart),
              transform var(--mk-dur-slow) var(--mk-ease-out-quart);
}

/* =====================================================================
   4. ONDA DE ICONOS  (mk-wave)
   Fila horizontal donde cada icono sube/baja según sin() de su
   posición X + una fase que avanza en loop. Resultado: una ola que
   viaja por la fila. Además la fila entera deriva en X con el scroll.
   ===================================================================== */
.mk-wave-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mk-wave {
  display: flex;
  align-items: center;
  gap: var(--mk-space-lg);
  padding-block: var(--mk-space-2xl);
  width: max-content;
  will-change: transform;
}
.mk-wave__item {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--mk-corner-md);
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #E5E7EB);
  color: var(--brand-navy, #0D1B3D);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(13,27,61,.05));
  will-change: transform;
}
.mk-wave__item svg { width: 24px; height: 24px; }
.mk-on-dark .mk-wave__item {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #fff;
  box-shadow: none;
}

/* =====================================================================
   5. CURSOR PROPIO DENTRO DE UN PANEL  (mk-cursor)
   Al entrar al panel se oculta el cursor del sistema y aparece una
   pastilla que sigue al puntero con retardo (~350 ms de amortiguación).
   Entra con un pop (back.out) y sale encogiendo. Sobre el mockup
   convierte una imagen estática en algo que invita a hacer clic sin
   tener que poner un botón encima.
   ===================================================================== */
.mk-cursor-zone { position: relative; }
.mk-cursor {
  position: absolute; top: 0; left: 0;
  z-index: 5;
  display: inline-flex; align-items: center; gap: var(--mk-space-sm);
  padding: 10px 18px;
  border-radius: var(--mk-corner-rounded);
  background: var(--brand-navy, #0D1B3D);
  color: #fff;
  font-size: .875rem; font-weight: 700; white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--mk-cur-x, 0px), var(--mk-cur-y, 0px), 0)
             translate(-50%, -50%) scale(var(--mk-cur-s, 0));
  transition: opacity var(--mk-dur-base) var(--mk-ease-out-quart);
}
.mk-cursor svg { width: 16px; height: 16px; }

/* =====================================================================
   6. CTA  (mk-cta)
   Estructura del original: primaria sólida + secundaria translúcida
   con blur, ambas píldora, mismo alto, gap 16 px, centradas.
   Hover = all .15s ease-out. Nada de rebotes ni escalas grandes.
   La secundaria NO es un enlace de texto: pesa visualmente casi lo
   mismo que la primaria, y por eso la gente la usa.
   ===================================================================== */
.mk-cta {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--mk-space-md);
  max-width: 100%;
}
.mk-cta--start { justify-content: flex-start; }

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mk-space-sm);
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--mk-corner-rounded);
  font-family: inherit;
  font-size: 1.0625rem;   /* 17 px — el original usa 17.5 */
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mk-dur-micro) ease-out,
              color var(--mk-dur-micro) ease-out,
              border-color var(--mk-dur-micro) ease-out,
              box-shadow var(--mk-dur-micro) ease-out;
}
.mk-btn:hover { text-decoration: none; }
.mk-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.mk-btn--primary { background: var(--brand-green, #43B573); color: #fff; }
.mk-btn--primary:hover,
.mk-btn--primary:focus-visible { background: var(--brand-green-dark, #3A9D64); color: #fff; }

.mk-btn--secondary {
  background: rgba(13, 27, 61, .05);
  color: var(--brand-navy, #0D1B3D);
  border-color: rgba(13, 27, 61, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mk-btn--secondary:hover,
.mk-btn--secondary:focus-visible { background: rgba(13, 27, 61, .09); color: var(--brand-navy, #0D1B3D); }

/* Sobre fondo oscuro se invierten los papeles, no los colores. */
.mk-btn--primary-inverse { background: #fff; color: var(--brand-navy, #0D1B3D); }
.mk-btn--primary-inverse:hover,
.mk-btn--primary-inverse:focus-visible { background: var(--brand-green, #43B573); color: #fff; }
.mk-btn--secondary-inverse {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mk-btn--secondary-inverse:hover,
.mk-btn--secondary-inverse:focus-visible { background: rgba(255,255,255,.16); color: #fff; }

/* Flecha que avanza al hover — el único movimiento del botón. */
.mk-btn__arrow { transition: transform var(--mk-dur-fast) var(--mk-ease-out-quart); }
.mk-btn:hover .mk-btn__arrow,
.mk-btn:focus-visible .mk-btn__arrow,
:hover > .mk-btn__arrow,
:focus-visible > .mk-btn__arrow { transform: translateX(4px); }

/* Nota bajo el CTA: la línea que quita el miedo (sin tarjeta, etc.). */
.mk-cta-note {
  margin-top: var(--mk-space-md);
  font-size: .875rem;
  color: var(--ink-3, #6B7280);
}
.mk-on-dark .mk-cta-note { color: var(--ink-on-navy-dim, #8FA3C4); }

/* Etiqueta pequeña sobre el titular. */
.mk-eyebrow {
  display: inline-flex; align-items: center; gap: var(--mk-space-sm);
  padding: 6px 14px;
  border-radius: var(--mk-corner-rounded);
  background: var(--brand-green-soft, #E8F5ED);
  color: var(--brand-green-dark, #3A9D64);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.mk-on-dark .mk-eyebrow { background: rgba(67,181,115,.14); color: var(--brand-green, #43B573); }
.mk-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: mk-pulse 2.4s var(--mk-ease-in-out-quad) infinite;
}
@keyframes mk-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* =====================================================================
   7. SCRUB DE SCROLL  (data-mk-scrub)
   Desplazamiento ligado al scroll: la capa se mueve mientras la
   sección cruza el viewport. Es lo que da profundidad sin parallax
   pesado. Valores chicos (±40 px) para fondos; grandes (−250 px) para
   filas decorativas.
   ===================================================================== */
[data-mk-scrub] { will-change: transform; }

/* =====================================================================
   8. GLOW DE FONDO
   Una mancha de color difuminada detrás del héroe. Barata (dos
   radial-gradient) y hace que el fondo blanco deje de ser plano.
   ===================================================================== */
.mk-glow {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.mk-glow::before,
.mk-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}
.mk-glow::before {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -18%; left: -8%;
  background: radial-gradient(circle, rgba(67,181,115,.42), transparent 68%);
  animation: mk-drift-a 18s var(--mk-ease-in-out-quad) infinite alternate;
}
.mk-glow::after {
  width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
  bottom: -22%; right: -6%;
  background: radial-gradient(circle, rgba(13,27,61,.30), transparent 68%);
  animation: mk-drift-b 22s var(--mk-ease-in-out-quad) infinite alternate;
}
@keyframes mk-drift-a { to { transform: translate3d(9%, 7%, 0) scale(1.12); } }
@keyframes mk-drift-b { to { transform: translate3d(-8%, -6%, 0) scale(1.08); } }

/* =====================================================================
   9. TARJETA CON LEVANTE  (mk-lift)
   El hover de tarjeta del original: sube 4 px y la sombra se abre.
   Sin escala — escalar una tarjeta con texto lo desenfoca.
   ===================================================================== */
.mk-lift {
  transition: transform var(--mk-dur-base) var(--mk-ease-out-quart),
              box-shadow var(--mk-dur-base) var(--mk-ease-out-quart),
              border-color var(--mk-dur-base) var(--mk-ease-out-quart);
}
.mk-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(13,27,61,.12));
  border-color: var(--border-strong, #D1D5DB);
}

/* =====================================================================
   ACCESIBILIDAD: si el usuario pide menos movimiento, todo se apaga y
   el contenido queda visible. Nunca queda algo en opacity 0.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mk-on .mk-reveal > *,
  .mk-on .mk-reveal-self,
  .mk-typed__char { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mk-typed__caret,
  .mk-eyebrow::before,
  .mk-glow::before,
  .mk-glow::after { animation: none !important; }
  .mk-typed__caret { display: none !important; }
  .mk-cursor { display: none !important; }
  .mk-lift:hover { transform: none; }
  [data-mk-scrub] { transform: none !important; }
}