/* Trazar, desplegarse y dejar aparecer el color. Movimiento breve y voluntario. */
.site-nav a { position: relative; isolation: isolate; padding: 10px 8px; }
.site-nav a::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 3px 22px 3px 3px; background: var(--nav-paper,#DFE9DF); opacity: 0; }
.site-nav a[data-nav-tone="sage"] { --nav-paper: #DFE9DF; }
.site-nav a[data-nav-tone="lilac"] { --nav-paper: #E7DDEF; }
.site-nav a[data-nav-tone="gold"] { --nav-paper: #F3E4D0; }
.site-nav a:is(:hover,:focus-visible,[aria-current="page"])::before { opacity: 1; }
.nav-label { position: relative; }
.arrival-sheet { scroll-margin-top: 24px; }
.arrival-selected { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.arrival-selected-icon { width: 30px; height: 30px; flex: none; }
.arrival-choice { position: relative; isolation: isolate; }
.arrival-choice::before { content: ''; position: absolute; inset: 5px 0; z-index: -1; border-radius: 2px 24px 2px 2px; background: var(--choice-fill); opacity: 0; }
.arrival-choice:is(:hover,:focus-visible)::before { opacity: .16; }
.arrival-choice:hover svg { transform: none; }
.arrival-enter { animation: none; }


@media(max-width:760px) {
  body:not(.menu-ready) .site-nav a { padding-inline: 0; }
}
@media(prefers-reduced-motion:no-preference) {
  .site-nav a::before { transform-origin: 15px center; transform: scaleX(.22); transition: transform .45s cubic-bezier(.2,.75,.25,1),opacity .25s ease; }
  .site-nav a:is(:hover,:focus-visible,[aria-current="page"])::before { transform: scaleX(1); }
  .motion-ready .site-nav a { animation: nav-arrive .42s ease-out both; }
  .motion-ready .site-nav a:nth-child(2) { animation-delay: .07s; }
  .motion-ready .site-nav a:nth-child(3) { animation-delay: .14s; }
  .arrival-choice::before { transform: scaleX(.15); transform-origin: 24px center; transition: transform .4s ease,opacity .25s ease; }
  .arrival-choice:is(:hover,:focus-visible)::before { transform: scaleX(1); }
  .arrival-awake .arrival-choice svg { animation: feeling-arrive .42s ease-out both; }
  .arrival-awake .arrival-choice:nth-child(2) svg { animation-delay: .05s; }
  .arrival-awake .arrival-choice:nth-child(3) svg { animation-delay: .1s; }
  .arrival-awake .arrival-choice:nth-child(4) svg { animation-delay: .15s; }
  .arrival-awake .arrival-choice:nth-child(5) svg { animation-delay: .2s; }
  .arrival-awake .arrival-choice:nth-child(6) svg { animation-delay: .25s; }
  .arrival-awake .arrival-choice:nth-child(7) svg { animation-delay: .3s; }
  .arrival-choice:is(:hover,:focus-visible) svg path:not(.arrival-icon-accent),
  .arrival-enter .arrival-selected-icon path:not(.arrival-icon-accent) { stroke-dasharray: 1; animation: brand-ink .65s ease-out both; }
  .arrival-enter > :is(.arrival-selected,h2,.arrival-reply) { animation: response-arrive .4s ease-out both; }
  .arrival-enter > h2 { animation-delay: .04s; }
  .arrival-enter > .arrival-reply { animation-delay: .1s; }
  .arrival-enter .arrival-paths a { animation: nav-arrive .46s ease-out both; }
  .arrival-enter .arrival-paths a:nth-child(1) { animation-delay: .14s; }
  .arrival-enter .arrival-paths a:nth-child(2) { animation-delay: .21s; }
  .arrival-enter .arrival-paths a:nth-child(3) { animation-delay: .28s; }
  @keyframes nav-arrive { from { opacity: .45; } to { opacity: 1; } }
  @keyframes feeling-arrive { from { opacity: .45; transform: scale(.86); } to { opacity: 1; transform: none; } }
  @keyframes response-arrive { from { opacity: .45; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes brand-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}