/* Vitrina de certificados de curso: contenido breve y detalles bajo demanda. */
#course-certificate {
  font-family: "Segoe UI", Arial, sans-serif;
  gap: 24px;
  padding: clamp(20px, 3vw, 32px);
  background: #fff;
}

#course-certificate::before { display: none; }
#course-certificate .course-deliverables-copy { display: block; }
#course-certificate .section-title { margin: 0; }
#course-certificate .section-title > span {
  color: #58708d;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
}
#course-certificate .section-title h3 {
  color: #163e78;
  font-size: clamp(25px, 2.5vw, 30px);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 7px 0 0;
}

#course-certificate .course-certification-grid {
  border: 0;
  gap: 20px;
  padding: 0;
}
#course-certificate .course-certification-grid.is-single {
  grid-template-columns: minmax(0, 520px);
}
#course-certificate .course-certification-choice {
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgb(26 54 89 / 4%);
  padding: 20px;
}
#course-certificate .course-certification-choice::before { display: none; }
#course-certificate .course-certification-choice:hover {
  border-color: #b7cbe3;
  box-shadow: 0 8px 26px rgb(26 54 89 / 7%);
  transform: none;
}
#course-certificate .course-certification-choice.is-cip {
  background: #fffdfa;
  border-color: #e6dbc7;
}
#course-certificate .course-certification-choice-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  min-height: 30px;
}
#course-certificate .course-certification-choice-header > div {
  flex: 1 1 140px;
  min-width: 0;
}
#course-certificate .course-certification-choice-header strong {
  color: #163e78;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
#course-certificate .is-cip .course-certification-choice-header strong { color: #702735; }
#course-certificate .course-certification-badge {
  border: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 7px 10px;
  text-transform: none;
}
#course-certificate .course-certification-badge.is-included {
  background: #edf4ff;
  color: #224f8b;
}
#course-certificate .course-certification-badge.is-optional {
  background: #f6eddf;
  color: #702735;
}

#course-certificate :is(.course-certificate-showcase, .course-cip-preview-frame) {
  background: #f1f5fa;
  border: 0;
  border-radius: 10px;
  margin: 0;
  padding: 12px;
}
#course-certificate .course-cip-preview-frame { background: #f4efe6; }
#course-certificate :is(.course-certificate-face, .course-cip-preview) {
  border: 1px solid #dbe3ec;
  border-radius: 4px;
  box-shadow: 0 5px 12px rgb(20 42 70 / 8%);
}
#course-certificate .course-cip-preview { border-color: #e2d4bd; }
#course-certificate .course-cip-preview > span {
  background: #702735;
  border-radius: 3px;
  bottom: 7px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .045em;
  right: 7px;
}
#course-certificate .course-certification-choice-summary {
  flex: 1 0 auto;
  margin: 17px 0 18px;
}
#course-certificate .course-certification-choice-summary > p {
  color: #4c6077;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
#course-certificate .course-certification-choice-summary > small {
  color: #6d5360;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 7px;
}
#course-certificate .course-certification-choice-summary > .course-certificate-meta {
  color: #566c85;
  display: block;
}
#course-certificate .course-certification-details { margin-top: 5px; }
#course-certificate .course-certification-details summary {
  align-items: center;
  color: #702735;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
}
#course-certificate .course-certification-details summary::-webkit-details-marker { display: none; }
#course-certificate .course-certification-details summary > span {
  color: inherit;
  font-size: 17px;
  font-weight: 400;
}
#course-certificate .course-certification-details[open] summary > span { transform: rotate(45deg); }
#course-certificate .course-certification-details[open] {
  border-top: 1px solid #e8dfd0;
  padding-top: 5px;
}
#course-certificate .course-deliverables-price-copy { display: grid; gap: 7px; }
#course-certificate .course-deliverables-price-copy strong {
  color: #702735;
  font-size: 12px;
  font-weight: 600;
}
#course-certificate .course-deliverables-price-copy span,
#course-certificate .course-certification-details > p {
  color: #5a626f;
  font-size: 12px;
  line-height: 1.65;
}
#course-certificate .course-certification-details > p { margin: 8px 0 0; }

#course-certificate .course-certificate-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: auto;
}
#course-certificate .course-certificate-actions button,
#course-certificate .course-cip-preview-action {
  background: #fff;
  border: 1px solid #d6e1ee;
  border-radius: 8px;
  color: #244e84;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  gap: 7px;
  justify-content: center;
  line-height: 1.4;
  min-height: 44px;
  padding: 10px 8px;
}
#course-certificate .course-cip-preview-action { border-color: #dfcfb5; color: #702735; }
#course-certificate .course-certificate-actions button:hover { background: #edf4ff; transform: none; }
#course-certificate .course-cip-preview-action:hover { background: #f6eddf; }
#course-certificate :is(button, summary):focus-visible { outline: 3px solid #76a9e5; outline-offset: 3px; }

@media (max-width: 680px) {
  #course-certificate { gap: 20px; padding: 20px 16px; }
  #course-certificate .course-certification-grid { gap: 16px; grid-template-columns: minmax(0, 1fr); }
  #course-certificate .course-certification-choice { padding: 17px; }
  #course-certificate .course-certification-choice-header { margin-bottom: 16px; }
  #course-certificate .course-certification-choice-summary { margin-bottom: 16px; }
}
