/* Legibilidad ampliada para textos secundarios, tarjetas y controles. */
header .brand,
nav,
.btn,
.sap-offers-access > .sap-offers-button {
  font-size: 14px;
}

.brand small,
.eyebrow {
  font-size: 11px;
}

.hero p:not(.eyebrow) {
  font-size: 17px;
}

.hero small,
.heroquote span,
.ribbon b {
  font-size: 11px;
}

.ribbon span {
  font-size: 14px;
}

.lead {
  font-size: 20px;
}

.introcopy > p:not(.lead),
.sectionhead > p,
.closing p:not(.eyebrow) {
  font-size: 16px;
}

.note p,
.examgrid p,
.careergrid p,
.celebration p:last-child,
.practicelist p,
details p {
  font-size: 14px;
}

.examgrid article > span,
.careergrid article > span,
.cardtop > span:first-child,
.credential > span,
.practiceimage > div {
  font-size: 11px;
}

.examgrid small,
.credential small,
.catalogdisclaimer,
.closing small,
.sourcebar p {
  font-size: 12px;
}

.sourcebar a,
.filters button,
.searchrow label,
.searchrow > span,
.certcard > a,
.practicelist article > span {
  font-size: 13px;
}

.searchrow input {
  font-size: 15px;
}

.certcard > p,
.practice .lead {
  font-size: 15px;
}

summary {
  font-size: 15px;
}

footer .brand,
footer p,
footer > a:last-child {
  font-size: 12px;
}

@media (max-width: 750px) {
  header .brand {
    font-size: 13px;
  }

  .brand small {
    font-size: 9px;
  }

  .navcta,
  .btn,
  .sap-offers-access > .sap-offers-button {
    font-size: 14px;
  }

  .hero .eyebrow,
  .eyebrow {
    font-size: 11px;
  }

  .hero p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.75;
  }

  .hero small {
    font-size: 11px;
  }

  .ribbon span {
    font-size: 13px;
  }

  .ribbon b {
    font-size: 10px;
  }

  .lead {
    font-size: 19px;
  }

  .introcopy > p:not(.lead),
  .sectionhead > p,
  .closing p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.8;
  }

  .note p,
  .examgrid p,
  .careergrid p,
  .celebration p:last-child,
  .practicelist p,
  details p {
    font-size: 15px;
    line-height: 1.8;
  }

  .examgrid small,
  .credential small,
  .catalogdisclaimer,
  .closing small,
  .sourcebar p {
    font-size: 13px;
  }

  .sourcebar a,
  .filters button,
  .searchrow label,
  .searchrow > span,
  .certcard > a,
  .practicelist article > span {
    font-size: 14px;
  }

  .filters button {
    min-height: 46px;
  }

  .searchrow input {
    min-height: 50px;
    font-size: 16px;
  }

  .certcard > p,
  .practice .lead {
    font-size: 15px;
    line-height: 1.8;
  }

  summary {
    font-size: 16px;
  }

  footer .brand,
  footer p,
  footer > a:last-child {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .actions .btn {
    min-height: 50px;
  }

  .certcard > p {
    font-size: 15px;
  }

  .credential small,
  .certcard > a {
    font-size: 13px;
  }
}

/* Tarjetas de certificación con borde dorado luminoso. */
.certcard {
  position: relative;
  border: 1px solid rgba(198, 165, 101, .9);
  background:
    radial-gradient(circle at 100% 0, rgba(216, 187, 130, .13), transparent 34%),
    #fff;
  box-shadow:
    0 0 0 1px rgba(198, 165, 101, .18),
    0 0 18px rgba(198, 165, 101, .22),
    0 12px 28px rgba(76, 56, 20, .08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.certcard::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(243, 201, 105, .85), transparent 26%, transparent 70%, rgba(198, 165, 101, .7));
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.certcard > * {
  position: relative;
  z-index: 1;
}

.certcard:hover {
  transform: translateY(-6px);
  border-color: #e4c477;
  box-shadow:
    0 0 0 1px rgba(243, 201, 105, .4),
    0 0 30px rgba(243, 201, 105, .42),
    0 20px 38px rgba(76, 56, 20, .16);
}

.certcard:focus-within {
  border-color: #f3c969;
  box-shadow:
    0 0 0 3px rgba(243, 201, 105, .22),
    0 0 28px rgba(243, 201, 105, .38);
}

@media (max-width: 750px) {
  .certcard {
    box-shadow:
      0 0 0 1px rgba(198, 165, 101, .2),
      0 0 16px rgba(198, 165, 101, .25),
      0 10px 24px rgba(76, 56, 20, .08);
  }
}

/* Un color luminoso propio para cada certificación. */
.certcard:nth-child(1)  { --glow: #168bff; --glow-rgb: 22, 139, 255; }
.certcard:nth-child(2)  { --glow: #00b8d9; --glow-rgb: 0, 184, 217; }
.certcard:nth-child(3)  { --glow: #00a86b; --glow-rgb: 0, 168, 107; }
.certcard:nth-child(4)  { --glow: #8b5cf6; --glow-rgb: 139, 92, 246; }
.certcard:nth-child(5)  { --glow: #f59e0b; --glow-rgb: 245, 158, 11; }
.certcard:nth-child(6)  { --glow: #ef476f; --glow-rgb: 239, 71, 111; }
.certcard:nth-child(7)  { --glow: #a855f7; --glow-rgb: 168, 85, 247; }
.certcard:nth-child(8)  { --glow: #ec4899; --glow-rgb: 236, 72, 153; }
.certcard:nth-child(9)  { --glow: #06b6d4; --glow-rgb: 6, 182, 212; }
.certcard:nth-child(10) { --glow: #6366f1; --glow-rgb: 99, 102, 241; }
.certcard:nth-child(11) { --glow: #22c55e; --glow-rgb: 34, 197, 94; }
.certcard:nth-child(12) { --glow: #14b8a6; --glow-rgb: 20, 184, 166; }
.certcard:nth-child(13) { --glow: #f97316; --glow-rgb: 249, 115, 22; }
.certcard:nth-child(14) { --glow: #eab308; --glow-rgb: 234, 179, 8; }
.certcard:nth-child(15) { --glow: #3b82f6; --glow-rgb: 59, 130, 246; }

.certcard {
  border-color: rgba(var(--glow-rgb), .88);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--glow-rgb), .12), transparent 36%),
    #fff;
  box-shadow:
    0 0 0 1px rgba(var(--glow-rgb), .17),
    0 0 18px rgba(var(--glow-rgb), .22),
    0 12px 28px rgba(22, 30, 50, .08);
}

.certcard::before {
  background: linear-gradient(125deg, rgba(var(--glow-rgb), .9), transparent 28%, transparent 70%, rgba(var(--glow-rgb), .7));
}

.certcard .cardtop,
.certcard > a {
  color: var(--glow);
}

.certcard .credential {
  border-left-color: var(--glow);
}

.certcard:hover {
  border-color: var(--glow);
  box-shadow:
    0 0 0 1px rgba(var(--glow-rgb), .38),
    0 0 30px rgba(var(--glow-rgb), .4),
    0 20px 38px rgba(22, 30, 50, .14);
}

.certcard:focus-within {
  border-color: var(--glow);
  box-shadow:
    0 0 0 3px rgba(var(--glow-rgb), .2),
    0 0 28px rgba(var(--glow-rgb), .38);
}

@media (max-width: 750px) {
  .certcard {
    box-shadow:
      0 0 0 1px rgba(var(--glow-rgb), .2),
      0 0 17px rgba(var(--glow-rgb), .26),
      0 10px 24px rgba(22, 30, 50, .08);
  }
}