/* Contacto Avatar Mágico CSS (Anexo para contacto.css) */
.contact-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.contact-avatar-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--spacing-md);
  border: 4px solid var(--color-bg-base);
  box-shadow: 0 15px 35px -5px rgba(0,0,0,0.5), 0 0 0 3px var(--color-primary-light);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.contact-profile:hover .contact-avatar-img {
  transform: scale(1.05) rotate(3deg);
}

@media (min-width: 992px) {
  .contact-profile {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
  }
  .contact-avatar-img {
    width: 250px;
    height: 250px;
    margin-bottom: var(--spacing-md);
  }
}