/* =====================================================================
   Animaciones de texto al pasar el cursor.
   Criterio: pequeñas (2–6 px o un cambio de color), rápidas (≤ 0,45 s) y
   solo donde ayudan a entender qué se puede tocar o qué es importante.
   - Solo en dispositivos con ratón (hover real): en móvil no hay nada.
   - Se desactivan con "reducir movimiento".
   ===================================================================== */
/* Al terminar la entrada del titular, las palabras dejan de recortarse (para poder subir al pasar el cursor) */
.words-done .wd{overflow:visible}

@media (hover:hover) and (pointer:fine){

  /* 1 · Titulares: el subrayado amarillo de la palabra en fino "se rellena" */
  .lt{transition:background-size .45s cubic-bezier(.2,.7,.2,1),background-position .45s cubic-bezier(.2,.7,.2,1)}
  h1:hover .lt,h2:hover .lt{background-size:100% 80%;background-position:0 50%}

  /* 2 · Titular principal: la palabra bajo el cursor sube un poco */
  .words-done .wd > span{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .words-done .wd:hover > span{transform:translateY(-.05em)}

  /* 3 · Menú: subrayado que crece de izquierda a derecha */
  .nav-links a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1.5px;background-position:0 100%;padding-bottom:3px;transition:background-size .3s ease,color .2s}
  .nav-links a:hover{background-size:100% 1.5px}
  .nav-links a[aria-current]{background-size:100% 1.5px;text-decoration:none}

  /* 4 · Flechas de botones y enlaces: se adelantan en la dirección que indican */
  .arr{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  a:hover > .arr,button:hover > .arr{transform:translateX(4px)}
  a:hover > .arr.back,button:hover > .arr.back{transform:translateX(-4px)}

  /* 5 · Proceso: número y título se desplazan juntos */
  .step .n,.step h3{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .step:hover .n,.step:hover h3{transform:translateX(6px)}

  /* 6 · Listas (beneficios, “quién hay detrás”, más allá): el título se desplaza */
  .benefit h4,.mc h4,.checks li{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .benefit:hover h4,.mc:hover h4,.checks li:hover{transform:translateX(4px)}

  /* 7 · Cifras: crecen ligeramente */
  .stat .big{transition:transform .4s cubic-bezier(.2,.7,.2,1);transform-origin:left bottom}
  .stat:hover .big{transform:scale(1.04)}

  /* 8 · Casos: el número sube */
  .case .n{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .case:hover .n{transform:translateY(-6px)}

  /* 9 · Preguntas frecuentes: la pregunta se adelanta */
  .faq-q{transition:color .2s,padding-left .3s cubic-bezier(.2,.7,.2,1)}
  .faq-q:hover{padding-left:6px}

  /* 10 · Enlaces de texto (pie, legales): subrayado que crece */
  .foot .fc a,.legal a,.doc a,.p-end .mail a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;transition:background-size .3s ease,color .2s}
  .foot .fc a:hover,.legal a:hover,.doc a:hover,.p-end .mail a:hover{background-size:0 1px;background-position:100% 100%}

  /* 11 · Portfolio: pies de foto y datos del proyecto */
  .gallery figcaption{transition:color .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
  .gallery figure:hover figcaption{color:var(--ink,#111);transform:translateX(4px)}
  .meta li span:last-child{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .meta li:hover span:last-child{transform:translateX(4px)}
  .proj-n{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .proj-info:hover .proj-n{transform:translateY(-6px)}
}

@media (prefers-reduced-motion:reduce){
  .lt,.nav-links a,.arr,.step .n,.step h3,.benefit h4,.mc h4,.checks li,.stat .big,.case .n,.faq-q,
  .gallery figcaption,.meta li span:last-child,.proj-n,.words-done .wd > span{transition:none!important;transform:none!important}
}