:root {
  /* Stack de fallback com suporte a iOS/macOS e Windows/Android */
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

body {
  background-color: #dad8d8;
  /* cinza claro */
}

.estilocor {
  color: #121643
    /* azul   #121643 */
}


.certificacoes .cards {
  display: flex;
  justify-content: center;
  /* Centraliza horizontalmente */
  align-items: center;
  /* Alinha verticalmente, útil se as imagens tiverem alturas diferentes */
  gap: 24px;
  /* Espaço entre as imagens */
  flex-wrap: wrap;
  /* Permite quebrar linha no mobile */
}

.certificacoes .card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.certificacoes .card img {
  display: block;
  max-width: 200px;
  /* Ajuste conforme o layout desejado */
  height: auto;
}

.card-grid {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  background: #E6E6E6;
  /* cinza em tudo */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
}

.content {
  background: transparent;
  /* sem fundo individual */
  padding: 20px 24px;
  max-width: 42ch;
  overflow: auto;
  max-height: 100%;
  min-height: 0;
}

/* ===========================
   Seção Documentos / Layout
   =========================== */
.sec-documentos {
  background: #fff;
}

/* Em md+ as colunas esticam para a mesma altura (definida pela imagem) */
@media (min-width: 768px) {
  .doc-row {
    align-items: stretch;
    /* Faz as colunas terem a mesma altura */
  }
}

/* -------- Imagem à esquerda -------- */
.doc-img-wrap {
  width: 100%;
  max-width: 600px;
  /* Em telas pequenas, altura livre; em md+ fixa 600px como você usou */
}

.doc-panel {
  background: #E6E6E6;
  /* cinza do painel */
  padding: 0px 30px;
  border-radius: 0.5rem;
  /* opcional: combina com a imagem arredondada */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: auto;
  /* padrão em telas pequenas */
}

/* Detalhe visualzinho: espaço entre o texto e o link "Baixar" */
.sec-documentos .list-unstyled li a {
  margin-left: 0.25rem;
}

/* ===========================
   Fonte Open Sans personalizada
   =========================== */
/* <weight>: Use a value from 300 to 800 */
/* <uniquifier>: Use a unique and descriptive class name */

/* Texto normal */
.open-sans-texto {
  font-family: var(--font-sans);
  font-weight: 400;
  /* 300–800 disponíveis */
  font-style: normal;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Negrito correto */
.open-sans-texto-bold {
  font-family: var(--font-sans);
  font-weight: 700;
  /* Use 600/700/800 conforme sua hierarquia */
  font-style: normal;
}

/* Itálico */
.open-sans-texto-italic {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: italic;
}

/* Negrito + itálico */
.open-sans-texto-bold-italic {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: italic;
}

/* ===========================
   Seção Documentos / Layout
   =========================== */

@media (min-width: 768px) {
  .doc-img-wrap {
    height: 600px;
  }
}

.doc-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------- Painel cinza à direita -------- */
.doc-panel-outer {
  width: 100%;
  max-width: 500px;
  display: flex;
}

/* Em md+ o painel acompanha a altura da coluna (que iguala a da imagem) */
@media (min-width: 768px) {
  .doc-panel-outer {
    height: 100%;
  }
}

/* Evita que o texto "estoure" a altura da foto em md+; cria scroll interno se necessário */
@media (min-width: 768px) {
  .doc-panel {
    height: 100%;
    overflow: auto;
  }
}