/* ==========================================================================
   OperGama : composicoes de pagina
   ========================================================================== */

/* ---- Hero da pagina inicial ------------------------------------------ */

.og-hero {
  display: flex;
  align-items: center;
  padding-block: var(--og-esp-8);
}

.og-hero__interior {
  width: 100%;
}

.og-hero h1 {
  font-size: var(--og-t-display-xl);
  font-weight: 700;
  max-width: 16ch;
  letter-spacing: -0.03em;
}

.og-hero .og-lead {
  margin-top: var(--og-esp-5);
}

@media (min-width: 1024px) {
  .og-hero {
    min-height: 78vh;
  }
}

/* ---- Hero interior --------------------------------------------------- */

.og-hero-interior {
  padding-block: var(--og-esp-8) var(--og-esp-7);
  background-color: var(--og-ice-crystal);
}

.og-hero-interior h1 {
  max-width: 20ch;
}

.og-hero-interior .og-lead {
  margin-top: var(--og-esp-4);
  color: var(--og-texto-suave);
}

.og-hero-interior .og-figura {
  margin-top: var(--og-esp-7);
}

/* ---- Titulos de nivel display ---------------------------------------- */

.og-titulo-display {
  font-size: var(--og-t-display-l);
  font-weight: 700;
}

/* ---- Pagina de conversao --------------------------------------------- */

.og-conversao {
  padding-block: var(--og-esp-8);
}

.og-conversao__interior {
  max-width: 620px;
}

.og-conversao h1 {
  font-size: var(--og-t-display-l);
  font-weight: 700;
}

.og-conversao .og-lead {
  margin-top: var(--og-esp-4);
  color: var(--og-texto-suave);
}

.og-conversao .og-form {
  margin-top: var(--og-esp-6);
}

.og-passos-curtos {
  display: grid;
  gap: var(--og-esp-3);
  margin-top: var(--og-esp-6);
  padding: 0;
  list-style: none;
}

.og-passos-curtos li {
  display: flex;
  align-items: flex-start;
  gap: var(--og-esp-3);
  font-family: var(--og-fonte-titulo);
  font-size: var(--og-t-pequeno);
}

.og-passos-curtos svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--og-dourado);
}

/* ---- Paginas de texto longo: legal e institucional -------------------- */

.og-documento {
  padding-block: var(--og-esp-7) var(--og-esp-8);
}

.og-documento__interior {
  max-width: 720px;
}

.og-documento h1 {
  margin-bottom: var(--og-esp-3);
}

.og-documento h2 {
  margin-top: var(--og-esp-7);
  margin-bottom: var(--og-esp-3);
  padding-top: var(--og-esp-5);
  border-top: 1px solid var(--og-borda);
}

.og-documento h3 {
  margin-top: var(--og-esp-5);
  margin-bottom: var(--og-esp-2);
}

.og-documento ul,
.og-documento ol {
  margin: var(--og-esp-4) 0;
  padding-left: var(--og-esp-4);
  max-width: var(--og-medida);
}

.og-documento li + li {
  margin-top: var(--og-esp-2);
}

.og-documento .og-ref {
  display: block;
  margin-bottom: var(--og-esp-6);
}

.og-documento .og-nota {
  margin-block: var(--og-esp-5);
}

/* ---- Cabecalho documental da norma OCS -------------------------------- */

.og-doc-cabecalho {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--og-esp-2) var(--og-esp-3);
  align-items: center;
  margin-top: var(--og-esp-4);
  padding: var(--og-esp-3) var(--og-esp-4);
  border: 1px solid var(--og-borda);
  border-left: 3px solid var(--og-dourado);
  border-radius: 0 var(--og-raio-imagem) var(--og-raio-imagem) 0;
  background-color: var(--og-superficie);
  font-family: var(--og-fonte-mono);
  font-size: var(--og-t-pequeno);
}

/* ---- Niveis OCS em linha ---------------------------------------------- */

.og-niveis {
  display: grid;
  gap: var(--og-esp-4);
  margin-top: var(--og-esp-6);
}

@media (min-width: 900px) {
  .og-niveis--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.og-nivel {
  padding-top: var(--og-esp-4);
  border-top: 1px solid var(--og-dourado);
}

.og-nivel__num {
  display: block;
  font-family: var(--og-fonte-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--og-dourado);
  margin-bottom: var(--og-esp-2);
}

.og-nivel h3 {
  margin-bottom: var(--og-esp-1);
}

.og-nivel p {
  font-family: var(--og-fonte-titulo);
  font-size: var(--og-t-pequeno);
  color: var(--og-texto-suave);
}

/* ---- Blocos de parceiro ----------------------------------------------- */

.og-parceiro {
  padding-block: var(--og-esp-5);
  border-top: 1px solid var(--og-borda);
}

.og-parceiro:first-of-type {
  border-top: none;
  padding-top: 0;
}

.og-parceiro h2 {
  margin-bottom: var(--og-esp-2);
}

.og-parceiro p {
  color: var(--og-texto-suave);
}

/* ---- Camadas societarias ---------------------------------------------- */

.og-societaria {
  display: grid;
  gap: var(--og-esp-4);
  margin-top: var(--og-esp-6);
}

@media (min-width: 640px) {
  .og-societaria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.og-societaria__item {
  padding: var(--og-esp-4);
  background-color: var(--og-superficie);
  border-radius: var(--og-raio-cartao);
  box-shadow: var(--og-sombra-subtil);
}

.og-societaria__item h3 {
  margin-bottom: var(--og-esp-2);
}

.og-societaria__item p {
  margin-top: var(--og-esp-3);
  font-family: var(--og-fonte-titulo);
  font-size: var(--og-t-pequeno);
  color: var(--og-texto-suave);
}

/* ---- Preco ------------------------------------------------------------ */

.og-preco {
  display: block;
  margin-block: var(--og-esp-3);
  font-family: var(--og-fonte-mono);
  font-size: 1.75rem;
  font-weight: 500;
  /* O valor transporta informacao, ao contrario dos numeros decorativos dos
     passos, pelo que usa o Dourado de texto: 7.17:1 sobre Branco. */
  color: var(--og-dourado-texto);
}

.og-duas-listas {
  display: grid;
  gap: var(--og-esp-6);
  margin-top: var(--og-esp-6);
}

@media (min-width: 768px) {
  .og-duas-listas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.og-duas-listas h3 {
  padding-bottom: var(--og-esp-3);
  border-bottom: 1px solid var(--og-dourado);
}

/* ---- Contactos --------------------------------------------------------- */

.og-contactos {
  display: grid;
  gap: var(--og-esp-5);
  margin-top: var(--og-esp-6);
}

@media (min-width: 640px) {
  .og-contactos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.og-contactos__item h3 {
  margin-bottom: var(--og-esp-2);
}

.og-contactos__item a {
  font-family: var(--og-fonte-titulo);
  font-size: var(--og-t-pequeno);
  word-break: break-word;
}

/* ---- 404 --------------------------------------------------------------- */

.og-404 {
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding-block: var(--og-esp-8);
  text-align: center;
}

.og-404 .og-metrica {
  display: block;
  margin-bottom: var(--og-esp-4);
}

.og-404 h1 {
  max-width: 24ch;
  margin-inline: auto;
}

.og-404 p {
  margin-inline: auto;
  margin-top: var(--og-esp-4);
  max-width: 48ch;
  color: var(--og-texto-suave);
}

.og-404 .og-botoes {
  justify-content: center;
}

/* ---- Retrato do fundador ----------------------------------------------- */

.og-retrato {
  margin: var(--og-esp-5) 0 0;
  max-width: 320px;
}

.og-retrato img {
  width: 100%;
  height: auto;
  border-radius: var(--og-raio-cartao);
  box-shadow: var(--og-sombra-padrao);
}