/* ==========================================================================
   VIVENTIA - MOTION
   --------------------------------------------------------------------------
   Capa separada a propósito: si algo se rompe, se saca este archivo del
   enqueue y el sitio queda exactamente como estaba. No define layout.

   Reglas que se respetan en todo el archivo:
   - Solo `transform` y `opacity`. Nada que dispare layout o paint.
   - Ninguna animación sobre `.section`: un transform ahí crearía un contexto
     de apilamiento y rompería el desborde de Dimensiones y Equipo.
   - Todo hover va detrás de `@media (hover: hover)`: en táctil el hover queda
     pegado después del tap.
   - `prefers-reduced-motion` lo resuelve design-system.css, que anula
     duraciones globalmente. Acá no hace falta repetirlo.

   Público del sitio: adultos mayores y sus familias. Las amplitudes son
   deliberadamente cortas y las duraciones, largas para UI pero tranquilas.
   ========================================================================== */

:root {
  --dur-press:  140ms;  /* respuesta al click: por debajo de 160ms */
  --dur-hover:  180ms;
  --dur-reveal: 500ms;  /* reveal es marketing, puede pasar de 300ms */
  --reveal-shift: 1rem;
  --stagger: 60ms;
}


/* --------------------------------------------------------------------------
   1. ENTRADA DEL HERO
   Tier: primera vez. Propósito: jerarquía — el orden de aparición explica qué
   leer primero. Es el único lugar del sitio donde se gasta presupuesto de
   delight.
   -------------------------------------------------------------------------- */

@keyframes viventia-entrada {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow,
.hero__title,
.hero__lead,
.hero .btn {
  animation: viventia-entrada 600ms var(--ease-out) both;
}

.hero__eyebrow { animation-delay: 0ms; }
.hero__title   { animation-delay: 80ms; }
.hero__lead    { animation-delay: 160ms; }
.hero .btn     { animation-delay: 240ms; }


/* --------------------------------------------------------------------------
   2. REVEAL POR SCROLL
   Tier: ocasional. Propósito: delight, en contexto de página de marketing.

   Mejora progresiva: el estado oculto solo existe bajo `.js-motion`, que el
   script agrega únicamente si hay IntersectionObserver. Sin JS, con JS roto o
   en un navegador viejo, no se oculta nada.
   -------------------------------------------------------------------------- */

.js-motion .is-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}

.js-motion .is-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Escalonado dentro de una fila: las cards de una misma fila entran casi a la
   vez y sin esto se lee como un bloque que parpadea. */
.js-motion .grid > .is-reveal:nth-child(3n + 2),
.js-motion .equipo__grid > .is-reveal:nth-child(2) { transition-delay: var(--stagger); }
.js-motion .grid > .is-reveal:nth-child(3n + 3) { transition-delay: calc(var(--stagger) * 2); }

@media (max-width: 1024px) {
  /* En 2 columnas el escalonado de a 3 desordena el orden de lectura. */
  .js-motion .grid > .is-reveal:nth-child(3n + 2),
  .js-motion .grid > .is-reveal:nth-child(3n + 3) { transition-delay: 0ms; }
  .js-motion .grid > .is-reveal:nth-child(2n) { transition-delay: var(--stagger); }
}


/* --------------------------------------------------------------------------
   3. BOTONES
   Tier: ocasional. Propósito: feedback.
   El transform baja a 140ms: la respuesta al click tiene que ser inmediata,
   mientras que el color puede tomarse 180ms.
   -------------------------------------------------------------------------- */

.btn,
.elementor-widget-button .elementor-button {
  transition: background-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .elementor-widget-button .elementor-button:hover { transform: translateY(-2px); }
}

.btn:active,
.elementor-widget-button .elementor-button:active { transform: translateY(0); }


/* --------------------------------------------------------------------------
   4. CARDS DE ARTÍCULO
   Tier: decenas por día. Propósito: feedback — son enlaces, y el movimiento
   confirma que se puede hacer click.

   Las cards de "Dimensiones del cuidado" NO se animan: no son interactivas y
   un hover ahí insinuaría una acción que no existe.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .card--post { transition: transform var(--dur-hover) var(--ease-out); }
  .card--post:hover { transform: translateY(-4px); }

  .card--post img { transition: transform 400ms var(--ease-out); }
  .card--post:hover img { transform: scale(1.04); }
}


/* --------------------------------------------------------------------------
   5. ENLACES DE NAVEGACIÓN E ICONOS
   Tier: decenas por día. Solo color, sin movimiento: a esta frecuencia
   cualquier desplazamiento cansa.
   -------------------------------------------------------------------------- */

.nav-link,
.elementor-widget-nav-menu .elementor-item,
.social .elementor-social-icon,
.icon-btn {
  transition: color var(--dur-hover) var(--ease-out);
}