/* BRAND A BRAND — transiciones, keyframes y estados animados */

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.duo__right.reveal { transition-delay: 0.1s; }

.services .reveal:nth-child(2) { transition-delay: 0.05s; }
.services .reveal:nth-child(3) { transition-delay: 0.1s; }
.services .reveal:nth-child(4) { transition-delay: 0.15s; }
.services .reveal:nth-child(5) { transition-delay: 0.2s; }
.services .reveal:nth-child(6) { transition-delay: 0.25s; }

.team .reveal:nth-child(2) { transition-delay: 0.1s; }

/* --- Barra de progreso --- */
.scroll-progress__bar { transition: width 0.12s linear; }

/* --- Nav --- */
.nav { transition: background var(--speed) var(--ease); }

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}

.nav__links a { transition: color 0.35s var(--ease); }
.nav__links a:hover { color: var(--ink); }

.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.wordmark { transition: letter-spacing 0.6s var(--ease); }
.brand:hover .wordmark { letter-spacing: 0.36em; }
.brand:hover .wordmark--stack { letter-spacing: 0.26em; }

.lang__btn { transition: color 0.3s var(--ease); }
.lang__btn:hover { color: var(--ink); }

.link { transition: color 0.3s var(--ease); }
.link:hover { color: var(--steel-mid); }

.footer__nav a,
.footer__text a { transition: color 0.3s var(--ease); }
.footer__nav a:hover { color: var(--paper); }

/* --- Pastillas --- */
.pill {
  transition:
    transform 0.4s var(--ease),
    background 0.4s var(--ease),
    color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.pill__arrow { transition: transform 0.4s var(--ease); }

.pill:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

.pill--solid:hover {
  background: var(--steel);
  border-color: var(--steel);
  box-shadow: var(--shadow-md);
}

.pill:hover .pill__arrow { transform: translate(3px, -3px); }
.pill:active { transform: translateY(0); }

/* --- Servicios --- */
.service { transition: background 0.45s var(--ease), padding-left 0.45s var(--ease); }

.service:hover {
  background: var(--veil-03);
  padding-left: 20px;
}

.service__title { transition: color 0.45s var(--ease); }
.service:hover .service__title { color: var(--steel); }

/* --- Bloques --- */
.step { transition: background 0.45s var(--ease); }
.step:hover { background: var(--paper); }

.member__portrait { transition: transform 0.7s var(--ease); }
.member:hover .member__portrait { transform: translateY(-6px); }

/* --- Campos --- */
.field { transition: border-color 0.35s var(--ease), background 0.35s var(--ease); }
.field:hover { border-color: var(--ink-faint); }

.field:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--white);
}

/* --- Toast --- */
.toast {
  transition:
    transform 0.5s var(--ease),
    opacity 0.5s var(--ease),
    visibility 0.5s var(--ease);
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}

/* --- Aviso de cookies --- */
.cookie {
  transition:
    transform 0.45s var(--ease),
    opacity 0.45s var(--ease);
}

.cookie.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* --- Preferencias de movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pill:hover,
  .service:hover,
  .member:hover .member__portrait { transform: none; }
}