@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (min-width: 781px) and (min-height: 651px) and (hover: hover) and (pointer: fine) {
  /* Posicionamiento alternado del GIF y Logo */
  .fondo-arte {
    width: min(600px, 44vw);
    height: auto;
  }

  /* GIF a la IZQUIERDA en Inicio */
  .fondo-arte--inicio {
    --desplazamiento-arte-x: -24vw;
  }

  .fondo-arte--perfil {
    --desplazamiento-arte-y: clamp(10rem, 22vh, 13rem);
    --escala-arte: 0.58;
  }

  /* GIF a la DERECHA en las secciones que intercambian posiciones con Inicio */
  .fondo-arte--proyectos,
  .fondo-arte--perfil,
  .fondo-arte--contacto,
  .fondo-arte--colaboradores,
  .fondo-arte--code {
    --desplazamiento-arte-x: 24vw;
  }

  .fondo-arte--code {
    --desplazamiento-arte-x: 36vw;
    --escala-arte: 0.64;
  }

  /* 1. Vista Inicio (GIF a la IZQUIERDA, Paneles a la DERECHA) */
  .vista-inicio {
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translateY(-50%);
    width: min(40vw, 34rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(5.75rem, auto);
    gap: clamp(0.9rem, 2vh, 1.25rem);
    height: auto;
  }

  .vista-inicio .panel-manifiesto,
  .vista-inicio .panel-herramientas,
  .vista-inicio .panel-code {
    grid-column: 1;
  }

  /* 2. Vista Proyectos (Paneles a la IZQUIERDA, GIF a la DERECHA) */
  .vista-proyectos {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    width: min(46vw, 38rem);
    display: flex;
    flex-direction: column;
    gap: var(--espacio);
    height: auto;
    --entrada-vista-x: clamp(4rem, 18vw, 16rem);
  }

  .vista-proyectos .encabezado-proyectos {
    width: 100%;
  }

  .vista-proyectos .panel-proyecto {
    width: 100%;
  }

  /* 3. Vista Perfil (datos a la IZQUIERDA, GIF a la DERECHA) */
  .vista-perfil {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    width: 92%;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - 6rem);
    --entrada-vista-x: clamp(4rem, 18vw, 16rem);
  }

  .vista-perfil .panel-perfil,
  .vista-perfil .panel-capacidades {
    width: min(54vw, 52rem);
    align-self: flex-start;
  }

  .vista-perfil .perfil-seccion--colaboradores {
    min-height: 0;
  }

  .vista-colaboradores {
    position: absolute;
    top: 50%;
    left: 4%;
    width: min(46vw, 38rem);
    height: auto;
    max-height: calc(100vh - 7rem);
    transform: translateY(-50%);
  }

  /* 4. Vista Contacto (Paneles a la IZQUIERDA, GIF a la DERECHA) */
  .vista-contacto {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    width: min(46vw, 38rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio);
    height: auto;
  }

  .vista-contacto .panel-contacto {
    grid-column: 1 / 3;
  }

  .vista-contacto .panel-disponibilidad {
    grid-column: 1 / 2;
  }

  .vista-contacto .panel-nota {
    grid-column: 2 / 3;
  }
}

@media (min-width: 781px) and (max-height: 650px) and (hover: hover) and (pointer: fine) {
  .vista-perfil {
    position: absolute;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: minmax(6.4rem, 42%) minmax(0, 1fr);
    gap: 0.35rem;
    overflow: hidden;
  }

  .vista-perfil .perfil-firma-github {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .vista-perfil .perfil-contenedor {
    width: min(43vw, 38rem);
    max-height: 100%;
    overflow: hidden;
    scrollbar-width: none;
  }

  .fondo-arte--perfil {
    --desplazamiento-arte-x: 31vw;
    --desplazamiento-arte-y: 34vh;
    --escala-arte: 0.36;
  }

  .fondo-arte--code {
    --desplazamiento-arte-x: 35.5vw;
    --escala-arte: 0.58;
  }
}