/* ==========================================================================
   vitaralink.com — v7, pulido de interacción (PROPUESTA-UX-V4.md §6)
   Ajustes de easing, duración, estados :active y hover solo con puntero
   fino, sobre los componentes que ya existen en styles.css. Se carga al
   final, en las cuatro páginas -v7. Mismos selectores y especificidad que
   styles.css: gana por orden, nunca por !important.

   Solo movimiento, tiempos y estados: ningún tamaño ni tipografía cambia
   aquí. Solo hay reglas para lo que existe en las páginas -v7 (sin .pick,
   .tabs ni .trio, que la v7 ya no usa). Los selectores citan la línea de
   styles.css que pisan.
   ========================================================================== */

/* 1. Botones (styles.css 388 y 2955) ----------------------------------------
   La respuesta al clic va con ease-out fuerte en 160 ms: se siente al
   instante. opacity/border-color/box-shadow se quedan como estaban.
   .btn:active { transform: scale(0.97) } (styles.css 409) sigue aplicando. */
.btn {
  transition: opacity 0.2s ease, transform 160ms var(--ease-out), border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 2. Botón flotante de WhatsApp (styles.css 3074) ----------------------------
   Nunca ease-in en UI: la salida es más rápida que la entrada (200 ms) y
   arranca de golpe. visibility espera a que termine el fundido. */
.wa-fab.is-oculto {
  transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out), visibility 0s linear 150ms;
}

/* 3. linear → ease-out en las tarjetas de tienda que giran con el mouse
   (styles.css 3729). */
.real {
  transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.25s var(--ease-out);
}

/* La tarjeta también lleva .reveal: la transición de la aparición
   (.js .reveal, especificidad 0,2,0) pisa la del componente (0,1,0) y la
   sombra del hover cambiaba de golpe. Al entrar el cursor manda la del
   componente (con opacity, por si la tarjeta aparece justo bajo el cursor). */
.js .real.reveal.is-visible:hover {
  transition: opacity 0.4s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.25s var(--ease-out);
}

/* 4. Hover decorativo solo con puntero fino ---------------------------------
   Regla: lo que cambia de color en enlaces y botones es esencial y se queda.
   Lo que mueve, levanta o cambia la sombra es decorativo: en táctil el tap
   lo dispara y la tarjeta se queda "levantada". El cambio de póster a 3D en
   las escenas lo decide escena-3d.js con matchMedia('(hover: hover)').

   Sin cursor: todo vuelve a su estado de reposo, también el botón (su
   :hover de styles.css lo dejaba al 90 % tras tocar un ancla #agenda). */
@media (hover: none){
  a:hover .ico--arrow {
    transform: none;
  }

  .case-slot__media--real:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
  }

  .real:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
  }

  .btn:hover {
    opacity: 1;
  }

  .btn--ghost:hover {
    border-color: var(--color-border-light);
  }

  .is-dark .btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.22);
  }
}

/* Con cursor fino: el efecto de styles.css, declarado aquí a propósito para
   que el archivo cuente la historia completa. */
@media (hover: hover) and (pointer: fine){
  a:hover .ico--arrow {
    transform: translateX(4px);
  }

  .case-slot__media--real:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-light);
  }

  .real:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-light);
  }

  /* Mientras main.js inclina la tarjeta, el giro manda (styles.css 3737). */
  .real.is-tilting:hover {
    transform: none;
  }
}

/* Los pasos de "Así trabajamos" no se pueden pulsar: un hover que los
   levanta promete un clic que no lleva a nada. Quietos con cualquier
   puntero (styles.css 2494 y 3109). */
.step:hover {
  transform: none;
  box-shadow: none;
}

.is-dark .step:hover {
  border-color: var(--color-border-dark);
}

/* 5. Respuesta al pulsar (pointer-down, no al soltar) -------------------------
   Solo en lo que de verdad navega. La tarjeta de tienda (.real) no es un
   enlace: responden sus enlaces de dentro, no ella. */
.text-link {
  transition: transform 120ms var(--ease-out);
}

.text-link:active {
  transform: scale(0.98);
}

/* Preguntas (styles.css 3171): la fila ocupa todo el ancho; un cambio de
   opacidad responde sin encoger el texto. */
.faq__item summary {
  transition: color 0.2s var(--ease-out), opacity 120ms var(--ease-out);
}

.faq__item summary:active {
  opacity: 0.8;
}

/* Flechas del carrusel de capturas (styles.css 3600, shopify-v7). */
.capturas__btn {
  transition: border-color 0.2s var(--ease-out), opacity 0.2s var(--ease-out), transform 120ms var(--ease-out);
}

.capturas__btn:active {
  transform: scale(0.94);
}

.capturas__btn:disabled:active {
  transform: none;
}

/* Menú: en móvil las filas van de lado a lado (opacidad); en escritorio son
   píldoras compactas (escala). styles.css 655 y 704. */
.site-nav__link {
  transition: opacity 120ms var(--ease-out);
}

.site-nav__link:active {
  opacity: 0.72;
}
@media (min-width: 900px){
  .site-nav__link {
    transition: color 0.2s var(--ease-out), transform 120ms var(--ease-out);
  }

  .site-nav__link:active {
    opacity: 1;
    transform: scale(0.97);
  }
}

/* 6. Apariciones al hacer scroll (styles.css 1980–2001) ----------------------
   0.4 s y 16 px: por encima de 300 ms la UI se siente lenta. Escalones de
   60 ms, para que "Hoy / después" no muestre la segunda columna vacía. */
.js .reveal {
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.js .reveal--2 {
  transition-delay: 60ms;
}

.js .reveal--3 {
  transition-delay: 120ms;
}

.js .reveal--4 {
  transition-delay: 180ms;
}

/* 7. Píldora del menú (styles.css 546 y 2756) ---------------------------------
   Material translúcido de verdad: styles.css 2756 la volvía blanco sólido y
   el backdrop-filter no tenía nada que desenfocar. Vuelve el blanco al 86 %
   de styles.css 557, sin borde duro: el material y la sombra separan solos.
   El ancho del borde se conserva (transparente) para no mover nada. */
.site-header__pill {
  background: rgba(255, 255, 255, 0.86);
  border-color: transparent;
}

/* Quien pide menos transparencia recibe la píldora sólida. */
@media (prefers-reduced-transparency: reduce){
  .site-header__pill {
    background: var(--color-white);
  }
}

/* 8. Movimiento reducido ------------------------------------------------------
   styles.css ya acorta toda transición a 0.01 ms. Aquí, además, nada de lo
   anterior se desplaza ni se escala; el pulsado se expresa con opacidad. */
@media (prefers-reduced-motion: reduce){
  .wa-fab.is-oculto {
    transform: none;
  }

  a:hover .ico--arrow,
  .case-slot__media--real:hover,
  .real:hover {
    transform: none;
  }

  .text-link:active,
  .capturas__btn:active,
  .site-nav__link:active {
    transform: none;
    opacity: 0.72;
  }
}