/* Vida: movimiento de la web de Nubo (tarea #14).
 *
 * Criterio: la skill de Emil Kowalski (.claude/skills/). Solo se anima lo que tiene un motivo
 * (confirmar un gesto, que algo no aparezca de golpe, explicar), rápido y sin decoración.
 * Historia (02/10/2026): un paquete decorativo (iconos que giran, tarjetas que se inclinan…) no le
 * gustó a Pau y se quitó (PR #15). Un carrusel que fijaba la sección y movía las 3 tarjetas de lado
 * al hacer scroll tampoco le convenció y se quitó (está en el primer commit del PR #16).
 *
 * Reducir movimiento: se quitan desplazamientos; se quedan solo fundidos cortos de opacidad.
 */
:root{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);     /* entradas y respuestas de la interfaz */
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1); /* algo que se mueve dentro de la pantalla */
}

/* ---------- Cabecera translúcida (cristal esmerilado) al bajar. vida.js pone .con-scroll ---------- */
.site-header.con-scroll{
  background:rgba(255,255,255,.74)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 rgba(28,20,29,.05),0 10px 30px -10px rgba(28,20,29,.12);
}
.site-header{transition:background-color 200ms ease,box-shadow 200ms ease}

/* ---------- 4. Botones: se hunden al pulsar (confirmar que se ha oído el clic) ---------- */
body .button,body .mock-action,body .adapt-trigger{
  transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,border-color 160ms ease}
body .button:active,body .mock-action:active,body .adapt-trigger:active{transform:translateY(2px) scale(.97)}

/* ---------- 1. Menú del móvil: baja desde la cabecera (que se vea de dónde sale) ---------- */
@media (max-width:1000px){
  .desktop-nav{transform-origin:top center;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
  @starting-style{.desktop-nav{opacity:0;transform:translateY(-8px)}}
}
@media (max-width:1000px) and (prefers-reduced-motion:reduce){
  .desktop-nav{transition:opacity 200ms ease}
  @starting-style{.desktop-nav{opacity:0;transform:none}}
}

/* ---------- 3. Preguntas frecuentes: el "+" acompaña al despliegue (la altura la anima vida.js) ---------- */
details summary span{transition:transform 200ms var(--ease-out)}
details.cerrando summary span{transform:none!important}