/* Animaciones sutiles de Hito. Todo el movimiento vive dentro de
   prefers-reduced-motion: no-preference; sin esa preferencia la web queda estática. */

.page-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.art * { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {

  /* ── Ilustraciones ─────────────────────────────────────────────── */
  .art .a-blob     { animation: hito-breathe 9s ease-in-out infinite; }
  .art .a-dash     { animation: hito-flow 2.4s linear infinite; }
  .art .a-pulse    { animation: hito-pulse 2.2s ease-in-out infinite; }
  .art .a-flag     { transform-origin: left center; animation: hito-wave 2.6s ease-in-out infinite; }
  .art .a-bob      { animation: hito-bob 3.6s ease-in-out infinite; }
  .art .a-float    { animation: hito-float 6s ease-in-out infinite; }
  .art .a-twinkle  { animation: hito-twinkle 3.2s ease-in-out infinite; }
  .art .a-sway     { transform-origin: center bottom; animation: hito-sway 4.8s ease-in-out infinite; }
  .art .a-point    { transform-origin: left center; animation: hito-point 3s ease-in-out infinite; }
  .art .a-write    { animation: hito-write 3.4s ease-in-out infinite; }
  .art .a-fly      { animation: hito-fly 5s ease-in-out infinite; }
  .art .a-fit      { animation: hito-fit-l 4.8s ease-in-out infinite; }
  .art .a-fit-r    { animation: hito-fit-r 4.8s ease-in-out infinite; }
  .art .a-confetti { animation: hito-confetti 3.4s ease-in-out infinite; }
  .art .a-burst    { animation: hito-burst 2.8s ease-out infinite; }

  /* Entrada única: las piezas aparecen escalonadas y luego quedan quietas. */
  .art .a-pop  { animation: hito-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
  .art .a-grow { transform-origin: center bottom; animation: hito-grow .9s cubic-bezier(.22, 1, .36, 1) both; }

  .art .a-d1 { animation-delay: .15s; }
  .art .a-d2 { animation-delay: .35s; }
  .art .a-d3 { animation-delay: .55s; }
  .art .a-d4 { animation-delay: .75s; }
  .art .a-bob.a-d2, .art .a-float.a-d2, .art .a-twinkle.a-d2 { animation-delay: -1.2s; }
  .art .a-bob.a-d3, .art .a-float.a-d3, .art .a-twinkle.a-d3 { animation-delay: -2.1s; }
  .art .a-float.a-d1 { animation-delay: -.6s; }

  /* La figura entra suave al cargar la página. */
  .page-art { animation: hito-rise .8s cubic-bezier(.22, 1, .36, 1) both; }
  .page-art svg { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
  .page-art:hover svg { transform: translateY(-4px) rotate(-.6deg); }

  /* ── Tarjeta de ruta del inicio ────────────────────────────────── */
  .route-list li.active .node { animation: hito-node 2.2s ease-in-out infinite; }
  .route-list li { transition: transform .25s ease; }
  .route-list li:hover { transform: translateX(4px); }

  /* ── Botones y enlaces ─────────────────────────────────────────── */
  .button, .nav-cta {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
                transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
  }
  .button:hover, .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(36, 33, 31, .45); }
  .button:active, .nav-cta:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .08s; }
  .button span[aria-hidden="true"] { display: inline-block; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
  .button:hover span[aria-hidden="true"] { transform: translate(3px, -3px); }

  .nav a:not(.nav-cta) { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
    background-position: 50% calc(100% - 6px); background-size: 0 2px; transition: background-size .25s ease, color .2s ease; }
  .nav a:not(.nav-cta):hover, .nav a[aria-current="page"] { background-size: calc(100% - 1rem) 2px; }

  a, .menu-toggle { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
  :focus-visible { transition: outline-offset .15s ease; }

  /* ── Tarjetas y bloques ────────────────────────────────────────── */
  .feature { transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease; }
  .feature:hover { transform: translateY(-3px); }
  .feature .number { display: inline-block; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .2s ease; }
  .feature:hover .number { transform: scale(1.15); color: var(--action); }
  .hero-art { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
  .hero-art:hover { transform: rotate(0deg) translateY(-3px); }

  /* ── Formularios ───────────────────────────────────────────────── */
  input, select, textarea { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(232, 96, 13, .15); }
  .check input { transition: transform .15s ease; }
  .check input:active { transform: scale(.9); }

  /* ── FAQ ───────────────────────────────────────────────────────── */
  details > summary { transition: color .2s ease; }
  details[open] > *:not(summary) { animation: hito-fade-down .3s ease both; }

  /* ── Aparición al hacer scroll (solo con JS; sin JS todo es visible) ── */
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .grid > .reveal:nth-child(2) { transition-delay: .08s; }
  .js .grid > .reveal:nth-child(3) { transition-delay: .16s; }
  .js .grid > .reveal:nth-child(4) { transition-delay: .24s; }
}

@keyframes hito-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.04) rotate(-2deg); } }
@keyframes hito-flow { to { stroke-dashoffset: -32; } }
@keyframes hito-pulse { 0%, 100% { transform: scale(1); opacity: .18; } 50% { transform: scale(1.45); opacity: .05; } }
@keyframes hito-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-7deg) scaleX(.94); } }
@keyframes hito-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hito-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hito-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .45; } }
@keyframes hito-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes hito-point { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes hito-write { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-6px, 4px) rotate(-3deg); } 50% { transform: translate(-2px, 8px) rotate(1deg); } 75% { transform: translate(-8px, 6px) rotate(-2deg); } }
@keyframes hito-fly { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(8px, -10px) rotate(-4deg); } }
@keyframes hito-fit-l { 0%, 15%, 85%, 100% { transform: translateX(0); } 45%, 60% { transform: translateX(-10px); } }
@keyframes hito-fit-r { 0%, 15%, 85%, 100% { transform: translateX(0); } 45%, 60% { transform: translateX(10px); } }
@keyframes hito-confetti { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(40deg); } }
@keyframes hito-burst { 0% { transform: scale(.85); opacity: .4; } 40% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: .85; } }
@keyframes hito-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hito-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hito-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hito-node { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 96, 13, .45); } 50% { box-shadow: 0 0 0 10px rgba(232, 96, 13, 0); } }
@keyframes hito-fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }