/* ==========================================================================
   sections/about.css
   "Detrás de impulso.online": foto con borde animado, texto y certificados.
   ========================================================================== */
.about__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.about__photo {
  position: relative; width: min(70%, 340px); margin-inline: auto; aspect-ratio: 1;
  border-radius: var(--r-xl); padding: 4px;
  background: conic-gradient(from var(--ang), var(--naranja), transparent 30%, transparent 55%, var(--naranja-2), var(--naranja));
  animation: angRotate 5s linear infinite;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-xl) - 4px); }
.about__photo::after {
  content: "<nacho />"; position: absolute; left: -10px; bottom: 24px;
  padding: 0.4rem 0.8rem; border-radius: var(--r-sm);
  background: var(--negro); border: 1px solid var(--linea-2);
  font-family: var(--font-code); font-size: var(--fs-xs); color: var(--naranja);
}
.about__text p { color: var(--blanco); opacity: 0.88; font-size: var(--fs-base); }
.about__text p + p { margin-top: 0.75rem; }
.about__text strong { color: var(--naranja); font-weight: 700; opacity: 1; }
.certs { margin-top: 1.5rem; }
.certs__label { font-family: var(--font-code); font-size: var(--fs-xs); color: var(--gris); margin-bottom: 1rem; }
.certs__stack { position: relative; height: clamp(150px, 30vw, 190px); max-width: 380px; }
.cert {
  position: absolute; width: 70%; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--linea-2); box-shadow: var(--sombra);
  transition: transform 0.5s var(--ease-out);
}
.cert img { width: 100%; height: auto; }
.cert:nth-child(1) { left: 0; top: 10px; transform: rotate(-6deg); z-index: 1; }
.cert:nth-child(2) { right: 0; top: 36px; transform: rotate(5deg); }
.cert:hover, .cert:focus-visible { transform: rotate(0) scale(1.06) translateY(-8px); z-index: 3; }
.cert__tag {
  position: absolute; left: 8px; bottom: 8px; padding: 0.2rem 0.6rem; border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.88); font-size: 0.68rem; font-weight: 700; color: var(--blanco);
}
@media (min-width: 900px) { .about__grid { grid-template-columns: 0.9fr 1.1fr; } }