/* =========================
   A CRIANÇA DOS OLHOS ESCARLATES
========================= */

:root {
  --crianca-preto: #0b0b0c;
  --crianca-preto-suave: #111112;
  --crianca-vermelho: #8f171c;
  --crianca-vermelho-escuro: #4b0d11;
  --crianca-prata: #d4d4d2;
  --crianca-cinza: #858585;
}


/* =========================
   IDENTIDADE GERAL
========================= */

body {
  background-color: var(--crianca-preto);
  color: var(--crianca-prata);
}


/* =========================
   CABEÇALHO
========================= */

.cabecalho {
  background-color: #050506;
  border-bottom: 1px solid rgba(212, 212, 210, 0.12);
}

.logo a {
  color: var(--crianca-prata);
}

.navegacao a {
  color: var(--crianca-cinza);
}

.navegacao a:hover,
.navegacao a.ativo {
  color: var(--crianca-vermelho);
}


/* =========================
   HERO
========================= */

.crianca-hero {
  max-width: 1100px;
  margin: 0 auto;

  min-height: 72vh;
  padding: 12vh 6vw 10vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border-bottom: 1px solid rgba(212, 212, 210, 0.12);
}

.crianca-hero .rotulo {
  color: var(--crianca-vermelho);
}

.crianca-hero h1 {
  max-width: 900px;
  margin: 0;

  color: var(--crianca-prata);

  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: normal;
  line-height: 0.9;
  letter-spacing: -0.03em;
}


/* =========================
   APRESENTAÇÃO
========================= */

.crianca-apresentacao {
  max-width: 1100px;
  margin: 0 auto;

  padding: 7rem 6vw 9rem;

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 6rem;
  align-items: center;
}


/* =========================
   CAPA
========================= */

.crianca-capa {
  display: flex;
  justify-content: center;
}

.crianca-capa img {
  width: 100%;
  max-width: 320px;
  height: auto;

  display: block;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.65);
}


/* =========================
   SINOPSE
========================= */

.crianca-sinopse {
  max-width: 680px;
}

.crianca-sinopse .rotulo {
  color: var(--crianca-vermelho);
}

.crianca-sinopse p:not(.rotulo) {
  margin: 0 0 1.6rem;

  color: var(--crianca-prata);

  font-size: 1.08rem;
  line-height: 1.85;
}

.crianca-sinopse p:last-child {
  margin-bottom: 0;
}


/* =========================
   UNIVERSO
========================= */

.crianca-universo {
  max-width: 900px;
  margin: 0 auto;

  padding: 7rem 6vw 10rem;

  border-top: 1px solid rgba(212, 212, 210, 0.12);
}

.crianca-universo .rotulo {
  color: var(--crianca-vermelho);
}

.crianca-universo h2 {
  max-width: 700px;
  margin: 0;

  color: var(--crianca-prata);

  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: normal;
  line-height: 1;
}

.crianca-universo > p:last-child {
  max-width: 680px;
  margin-top: 2rem;

  color: var(--crianca-cinza);

  font-size: 1.05rem;
  line-height: 1.8;
}


/* =========================
   RODAPÉ
========================= */

footer {
  background-color: #050506;
  color: var(--crianca-cinza);

  border-top: 1px solid rgba(212, 212, 210, 0.12);
}


/* =========================
   RESPONSIVO
========================= */

@media (max-width: 700px) {

  .crianca-hero {
    min-height: 65vh;
    padding-top: 8vh;
  }

  .crianca-hero h1 {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .crianca-apresentacao {
    grid-template-columns: 1fr;
    gap: 4rem;

    padding-top: 5rem;
    padding-bottom: 7rem;
  }

  .crianca-capa {
    justify-content: flex-start;
  }

  .crianca-capa img {
    max-width: 260px;
  }

  .crianca-universo {
    padding-top: 5rem;
    padding-bottom: 7rem;
  }

}