/* ==========================================================================
   Suaza · Motion package (cheap wins 1-5)
   Drop-in layer: no markup rewrites required, hooks via data attributes
   and classes added at integration time.
   Rules: transform/opacity only, ease-out entries, <=300ms UI durations,
   custom curves, hover gated to real pointers, reduced-motion respected.
   Tokens follow design/DESIGN.md: green #1A4A3A, gold #C9A440 / #D4B84A.
   ========================================================================== */

:root {
  --mo-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mo-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --mo-dur-fast: 160ms;
  --mo-dur: 250ms;
  --mo-stagger: 60ms;
}

/* --------------------------------------------------------------------------
   1 · Scroll reveals: [data-reveal] on blocks, [data-reveal-group] on grids.
   JS adds .is-revealed once (IntersectionObserver, fire-once).
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--mo-dur) var(--mo-ease-out),
    transform var(--mo-dur) var(--mo-ease-out);
  transition-delay: var(--mo-delay, 0ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Grid stagger: JS assigns --mo-delay per child (index * --mo-stagger, cap 5) */

/* No-JS and reduced-motion safety: content never stays hidden */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   2 · Nav transition: .nav starts transparent over hero; JS toggles
   .nav--scrolled via a hero sentinel (no scroll listeners).
   Color/backdrop are state changes, not motion: keep them under
   reduced-motion too (comprehension aid), just without the lift.
   -------------------------------------------------------------------------- */
.nav {
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
}
.nav--scrolled {
  background-color: rgba(248, 248, 246, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(26, 74, 58, 0.08), 0 8px 24px -16px rgba(15, 31, 24, 0.25);
}
/* Dark-hero variant: integration may set .nav--scrolled.nav--on-green instead */
.nav--scrolled.nav--on-green {
  background-color: rgba(26, 74, 58, 0.94);
}

/* --------------------------------------------------------------------------
   3 · Card hover: lift + shadow + surface/type color shift (card inverts
   to deep green, type to white, icon chip to gold). Light cards only:
   .wcard (servicios/index) and .cred-card (sobre).
   -------------------------------------------------------------------------- */
.mo-card {
  position: relative;
  transition:
    transform 200ms var(--mo-ease-out),
    background-color 200ms var(--mo-ease-out);
}
.mo-card::before {
  /* pre-rendered hover shadow, faded in */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 12px 32px -12px rgba(15, 31, 24, 0.28);
  opacity: 0;
  transition: opacity 200ms var(--mo-ease-out);
  pointer-events: none;
}
.wcard.mo-card h3,
.wcard.mo-card p,
.wcard.mo-card li,
.wcard.mo-card .arrow-link,
.wcard.mo-card .wcard__ic,
.cred-card.mo-card h3,
.cred-card.mo-card p {
  transition: color 200ms var(--mo-ease-out), background-color 200ms var(--mo-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mo-card:hover {
    transform: translateY(-2px);
  }
  .mo-card:hover::before {
    opacity: 1;
  }
  .wcard.mo-card:hover,
  .cred-card.mo-card:hover {
    background-color: #163E31;
  }
  .wcard.mo-card:hover h3,
  .wcard.mo-card:hover .arrow-link,
  .cred-card.mo-card:hover h3 {
    color: #fff;
  }
  .wcard.mo-card:hover p,
  .wcard.mo-card:hover li,
  .cred-card.mo-card:hover p {
    color: rgba(255, 255, 255, 0.85);
  }
  .wcard.mo-card:hover .wcard__ic {
    background-color: rgba(255, 255, 255, 0.10);
    color: #D4B84A;
  }
  .wcard.mo-card:hover .arrow-link .arr {
    color: #D4B84A;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mo-card,
  .mo-card::before {
    transition: none;
  }
  .mo-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   4 · WhatsApp FAB entrance: hidden until 300px scrolled (JS sentinel),
   scale+fade in, one soft pulse, then still. Press feedback on all buttons.
   -------------------------------------------------------------------------- */
.mo-fab {
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition:
    opacity var(--mo-dur) var(--mo-ease-out),
    transform var(--mo-dur) var(--mo-ease-out);
  pointer-events: none;
}
.mo-fab.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mo-fab.is-suspended,
.wa-fab.is-suspended {
  opacity: 0;
  pointer-events: none;
}
.mo-fab.is-visible::after {
  /* single attention pulse on first appearance, never repeats */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  animation: mo-fab-pulse 900ms var(--mo-ease-out) 350ms 1 both;
  pointer-events: none;
}
@keyframes mo-fab-pulse {
  from { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  to   { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}
.mo-fab:active {
  transform: translateY(0) scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .mo-fab {
    transition: opacity 200ms ease;
    transform: none;
  }
  .mo-fab.is-visible { transform: none; }
  .mo-fab.is-visible::after { animation: none; }
}

/* Generic press feedback for primary actions (integration: .btn, .mo-fab) */
.mo-pressable {
  transition: transform var(--mo-dur-fast) var(--mo-ease-out);
}
.mo-pressable:active {
  transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   5 · Form micro-interactions: pairs with the Phase 2 fake-success fix.
   JS hooks: SuazaMotion.markFieldError / clearFieldError / setButtonState.
   -------------------------------------------------------------------------- */
.mo-field input,
.mo-field select,
.mo-field textarea {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mo-field .mo-field-msg {
  display: block;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 200ms var(--mo-ease-out),
    transform 200ms var(--mo-ease-out);
}
.mo-field.has-error .mo-field-msg {
  opacity: 1;
  transform: translateY(0);
}
.mo-field.has-error input,
.mo-field.has-error select,
.mo-field.has-error textarea {
  border-color: #b3402f;
}

/* Submit button states: [data-state="idle" | "loading" | "success" | "error"]
   Label/spinner/check are stacked children; crossfade with subtle blur. */
.mo-submit {
  position: relative;
}
.mo-submit .mo-submit-label,
.mo-submit .mo-submit-spinner,
.mo-submit .mo-submit-check {
  transition:
    opacity 200ms ease,
    filter 200ms ease;
}
.mo-submit .mo-submit-spinner,
.mo-submit .mo-submit-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.mo-submit[data-state="loading"] .mo-submit-label,
.mo-submit[data-state="success"] .mo-submit-label {
  opacity: 0;
  filter: blur(2px);
}
.mo-submit[data-state="loading"] .mo-submit-spinner { opacity: 1; }
.mo-submit[data-state="success"] .mo-submit-check   { opacity: 1; }
.mo-submit[data-state="loading"] { pointer-events: none; }

.mo-spinner-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: mo-spin 600ms linear infinite; /* fast spin = perceived speed */
}
@keyframes mo-spin { to { transform: rotate(360deg); } }

.mo-submit-check svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.mo-submit[data-state="success"] .mo-submit-check svg path {
  animation: mo-check 300ms var(--mo-ease-out) 80ms forwards;
}
@keyframes mo-check { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mo-field .mo-field-msg {
    transform: none;
    transition: opacity 200ms ease;
  }
  .mo-submit-check svg path {
    stroke-dashoffset: 0;
    animation: none;
  }
}