/*
  DDSYS — Sección: Certificaciones y Formación Internacional
  Fondo blanco. La sección más tipográfica y "solemne" del sitio —
  sin ilustración, sin ícono, con más aire que el resto y un fade
  deliberadamente más lento y sin desplazamiento (nunca la transición
  estándar de fade+12px que usa el resto del sitio).
*/

.certifications {
  background-color: var(--surface-page);
  padding-block: var(--space-24);
}

.certifications__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;

  /* Fade lento y sin desplazamiento — a propósito distinto del
     scroll-reveal estándar (fade+12px) que usa el resto del sitio. */
  opacity: 0;
  transition: opacity 600ms var(--ease-standard);
}

.certifications__inner.is-revealed {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .certifications__inner {
    transition: none;
    opacity: 1;
  }
}

.certifications__title {
  font-size: var(--text-h2-mobile);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.certifications__subtitle {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.certifications__intro {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.certifications__body {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.certifications__highlights {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
}

.certifications__highlights li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.certifications__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-brand);
}

.certifications__plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.certifications__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.certifications__divider {
  width: 48px;
  height: 1px;
  background-color: var(--surface-card-border);
}

@media (min-width: 768px) {
  .certifications__title {
    font-size: var(--text-h2);
  }

  .certifications__plaque {
    flex-direction: row;
    justify-content: center;
  }

  .certifications__divider {
    width: 1px;
    height: 48px;
  }
}