/*
 * Páginas legais: Aviso de Privacidade, Aviso de Privacidade Geral e
 * Solicitação de Dados.
 *
 * Todos os valores foram medidos nas páginas originais em santillana.com.br
 * (estilos computados e regras dos styled-components), não estimados:
 *
 *   cabeçalho ........ radial-gradient(circle at 88% 0, rgba(0,192,216,.7),
 *                       rgb(0,42,111) 83%) sobre a arte de rede, 150px 0 400px
 *   título ........... TitilliumWeb-Regular 60px/500, line-height 60px,
 *                       letter-spacing -0.3px, rgba(255,255,255,.85)
 *   subtítulo ........ TitilliumWeb-Regular 30px/500, line-height 32.1px, #fff
 *   cartão branco .... margin -300px auto 50px, padding 60px 80px, #fff,
 *                       border-radius 100px, min-height 500px
 *   acordeão ......... 980px, margin 40px 0 20px, padding 23px 20px, #f6f6f6,
 *                       raio 15px, sombra 0 2px 4px rgba(0,0,0,.1)
 *   título da seção .. TitilliumWeb-Medium 18px/500, #212121, à esquerda
 *   seta ............. arrow.b9d0631a.svg, 22x13px, #0095D3, à direita
 *   texto ............ TitilliumWeb-Regular 18px/400, line-height 23px,
 *                       #212121, justificado
 *   botão final ...... 389x50px, #0095CE, raio 25px, TitilliumWeb 20px
 *
 * O cabeçalho e o rodapé continuam sendo os do tema Santillana Educação.
 */

/* Cabeçalho ------------------------------------------------------------- */

section.titulo-page.legal {
  background-color: #002a6f;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 150px 0 400px;
}

section.titulo-page.legal h1 {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -0.3px;
  text-align: center;
}

section.titulo-page.legal .legal-subtitulo {
  max-width: 1008px;
  margin: 20px auto 0;
  color: #fff;
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 32.1px;
  text-align: center;
}

section.titulo-page.legal .breadcrumb {
  justify-content: center;
}

/* O cabeçalho tem fundo escuro, então o breadcrumb precisa de contraste alto. */
section.titulo-page.legal .breadcrumb-item,
section.titulo-page.legal .breadcrumb-item a,
section.titulo-page.legal .breadcrumb-item.active,
section.titulo-page.legal .breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
}

section.titulo-page.legal .breadcrumb-item a:hover,
section.titulo-page.legal .breadcrumb-item a:focus {
  color: #fff;
  text-decoration: underline;
}

section.titulo-page.legal .breadcrumb-item + .breadcrumb-item::before {
  opacity: 0.75;
}

/* Cartão branco que invade o cabeçalho ---------------------------------- */

main > section.conteudo.legal {
  padding: 0 0 80px;
}

.legal-cartao {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  min-height: 500px;
  margin: -300px auto 50px;
  padding: 60px 80px;
  background-color: #fff;
  border-radius: 100px;
}

.legal-abertura {
  max-width: 900px;
  margin: 0 auto 40px;
  color: #212121;
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  text-align: justify;
}

/* Seções em acordeão ---------------------------------------------------- */

.legal-secoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.legal-secao {
  position: relative;
  width: 980px;
  max-width: 100%;
  margin: 40px 0 20px;
  background-color: #f6f6f6;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.legal-secao__titulo-wrapper {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.legal-secao__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 23px 20px;
  color: #212121;
  font-family: "TitilliumWeb-Medium", "Titillium Web", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Seta: a mesma arte da página original, encostada na borda direita. */
.legal-secao__titulo::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 13px;
  margin: 0 0 0 4px;
  background: url("../../images/legal-arrow.svg") no-repeat center / 22px 13px;
  transition: transform 0.25s ease;
}

.legal-secao.is-open .legal-secao__titulo::after {
  transform: rotate(180deg);
}

.legal-secao__titulo:hover,
.legal-secao__titulo:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(0, 149, 206, 0.35);
  border-radius: 15px;
}

.legal-secao__conteudo {
  display: none;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 30px;
  color: #212121;
}

.legal-secao.is-open .legal-secao__conteudo {
  display: block;
}

/* Tipografia do conteúdo ------------------------------------------------ */

.legal-secao__conteudo,
.legal-bloco p,
.legal-bloco li {
  color: #212121;
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  text-align: justify;
}

.legal-secao__conteudo p {
  margin: 0 0 24px;
}

.legal-secao__conteudo p:last-child {
  margin-bottom: 0;
}

.legal-secao__conteudo h3,
.legal-secao__conteudo h4 {
  margin: 28px 0 12px;
  color: #212121;
  font-family: "TitilliumWeb-Medium", "Titillium Web", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.legal-secao__conteudo strong,
.legal-bloco strong {
  font-weight: 600;
  color: #212121;
}

.legal-secao__conteudo a,
.legal-bloco a {
  color: #0095ce;
  text-decoration: underline;
  word-break: break-word;
}

.legal-secao__conteudo ul,
.legal-secao__conteudo ol,
.legal-bloco ul,
.legal-bloco ol {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: disc;
  text-align: left;
}

.legal-secao__conteudo li,
.legal-bloco li {
  margin-bottom: 8px;
  text-align: left;
}

.legal-secao__conteudo table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
}

.legal-secao__conteudo th,
.legal-secao__conteudo td {
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
}

/* Imagens e ícones: centralizados, como na página original --------------- */

.legal-secao__conteudo img,
.legal-bloco img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  text-align: center;
}

/* Ícone grande de destaque: 120px, como no original. */
.legal-secao__conteudo img[src*="settings"],
.legal-bloco img[src*="settings"] {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

/* Setas decorativas entre blocos: 80px. */
.legal-secao__conteudo img[src*="seta_1"],
.legal-bloco img[src*="seta_1"] {
  width: 80px;
  max-width: 80px;
}

/* Ícones pequenos de navegação dentro do texto. */
.legal-secao__conteudo img,
.legal-bloco img {
  max-height: 260px;
}

.legal-secao__conteudo img[src*="seta_6"],
.legal-secao__conteudo img[src*="seta_4"],
.legal-secao__conteudo img[src*="seta_2"],
.legal-bloco img[src*="seta_6"],
.legal-bloco img[src*="seta_4"],
.legal-bloco img[src*="seta_2"] {
  width: 18px;
  height: 18px;
  margin: 0 6px;
  vertical-align: middle;
  object-fit: contain;
}

/* Botão ao final das seções --------------------------------------------- */

.legal-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 389px;
  height: 50px;
  margin: 50px auto 0;
  color: #fff;
  background-color: #0095ce;
  border-radius: 25px;
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.legal-cta:hover,
.legal-cta:focus {
  color: #fff;
  background-color: #0082b3;
}

/* Formulário externo (Solicitação de Dados) ----------------------------- */

.legal-formulario {
  max-width: 1008px;
  margin: 0 auto;
  text-align: center;
}

.legal-formulario h2 {
  margin: 0 0 12px;
  color: #212121;
  font-family: "TitilliumWeb-Medium", "Titillium Web", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.legal-formulario p {
  margin: 0 0 24px;
  color: #212121;
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 18px;
  line-height: 23px;
  text-align: center;
}

.legal-formulario .btn-legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 260px;
  height: 50px;
  padding: 0 28px;
  color: #fff;
  background-color: #0095ce;
  border: 0;
  border-radius: 25px;
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 20px;
  font-weight: 400;
  transition: background-color 0.25s ease;
}

.legal-formulario .btn-legal:hover,
.legal-formulario .btn-legal:focus {
  color: #fff;
  background-color: #0082b3;
}

.legal-formulario iframe {
  width: 100%;
  min-height: 780px;
  margin-top: 30px;
  border: 0;
  background: #fff;
}

.legal-aberta-centralizada {
  max-width: 979px;
  margin: 0 auto 40px;
  color: #807e6a;
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
}

/* ------------------------------------------------------------------
   Variante "Aviso de Privacidade": o titulo fica dentro do cartao branco,
   as secoes viram cartoes centralizados sem seta e a chamada final e uma
   pilula azul.

   Valores medidos na pagina original: titulo #006c9b dentro do cartao,
   texto #807e6a 35px/700 centralizado, cartoes #ececec com raio 15px e
   sem sombra, botao #006c9b com borda #df0076 e raio 50px.
   ------------------------------------------------------------------ */

.legal-cartao.legal-cartao--destaque {
  text-align: center;
}

.legal-titulo-interno {
  margin: 0 0 24px;
  color: #006c9b;
  font-family: "TitilliumWeb-Regular", "Titillium Web", sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -0.3px;
  text-align: center;
}

.legal-cartao--destaque .legal-secao {
  width: 979px;
  margin: 0 0 12px;
  background-color: #ececec;
  box-shadow: none;
}

.legal-cartao--destaque .legal-secao__titulo {
  justify-content: center;
  padding: 23px 20px;
  color: #807e6a;
  text-align: center;
}

.legal-cartao--destaque .legal-secao__titulo::after {
  display: none;
}

.legal-cartao--destaque .legal-secao.is-open {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legal-cartao--destaque .legal-secao__conteudo {
  max-width: 979px;
  padding-top: 20px;
}

.legal-cartao--destaque .legal-secao__conteudo p,
.legal-cartao--destaque .legal-secao__conteudo li {
  color: #807e6a;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
}

.legal-cartao--destaque .legal-secao__conteudo ul,
.legal-cartao--destaque .legal-secao__conteudo ol {
  list-style-position: inside;
  text-align: center;
}

.legal-cartao--destaque .legal-cta {
  max-width: 520px;
  height: auto;
  padding: 30px 20px;
  background-color: #006c9b;
  border: 3px solid #df0076;
  border-radius: 50px;
  font-size: 22px;
}

.legal-cartao--destaque .legal-cta:hover,
.legal-cartao--destaque .legal-cta:focus {
  background-color: #00587c;
}

/* Setas e icones decorativos ganham o mesmo alinhamento centralizado. */
.legal-cartao--destaque .legal-secao__conteudo img,
.legal-cartao--destaque .legal-bloco img {
  width: 180px;
  max-width: 180px;
  height: 180px;
  margin: 28px auto;
  object-fit: contain;
}

/* O icone de alerta e maior, como no original. */
.legal-cartao--destaque .legal-secao__conteudo img[src*="warning"],
.legal-cartao--destaque .legal-bloco img[src*="warning"] {
  width: 120px;
  max-width: 120px;
  height: 120px;
}

/* Responsividade -------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .legal-cartao {
    max-width: calc(100% - 40px);
    padding: 50px 60px;
    border-radius: 80px;
  }
}

@media (max-width: 991.98px) {
  section.titulo-page.legal {
    padding: 110px 0 300px;
  }

  section.titulo-page.legal h1 {
    font-size: 44px;
    line-height: 48px;
  }

  section.titulo-page.legal .legal-subtitulo {
    font-size: 24px;
    line-height: 30px;
  }

  .legal-cartao {
    margin-top: -200px;
    padding: 44px 40px;
    border-radius: 60px;
  }

  .legal-secao {
    width: 100%;
    margin: 24px 0 16px;
  }
}

@media (max-width: 767.98px) {
  section.titulo-page.legal {
    padding: 70px 0 180px;
  }

  section.titulo-page.legal h1 {
    font-size: 32px;
    line-height: 36px;
  }

  section.titulo-page.legal .legal-subtitulo {
    font-size: 20px;
    line-height: 25px;
  }

  main > section.conteudo.legal {
    padding: 0 0 50px;
  }

  .legal-cartao {
    max-width: calc(100% - 24px);
    min-height: 0;
    margin-top: -110px;
    padding: 30px 22px;
    border-radius: 40px;
  }

  .legal-abertura,
  .legal-secao__conteudo,
  .legal-bloco p,
  .legal-bloco li {
    font-size: 16px;
    line-height: 22px;
    text-align: left;
  }

  .legal-secao {
    margin: 16px 0 12px;
    border-radius: 10px;
  }

  .legal-secao__titulo {
    padding: 16px 16px;
    font-size: 16px;
    line-height: 22px;
  }

  .legal-secao__titulo::after {
    width: 18px;
    height: 11px;
    background-size: 18px 11px;
  }

  .legal-secao__conteudo {
    padding: 0 16px 20px;
  }

  /* Ícones acompanham a largura da tela. */
  .legal-secao__conteudo img[src*="settings"],
  .legal-bloco img[src*="settings"] {
    width: 90px;
    height: 90px;
  }

  .legal-secao__conteudo img[src*="seta_1"],
  .legal-bloco img[src*="seta_1"] {
    width: 56px;
    max-width: 56px;
  }

  .legal-titulo-interno {
    font-size: 32px;
    line-height: 36px;
  }

  .legal-aberta-centralizada {
    font-size: 22px;
    line-height: 27px;
  }

  .legal-cartao--destaque .legal-secao__conteudo p,
  .legal-cartao--destaque .legal-secao__conteudo li {
    font-size: 17px;
    line-height: 24px;
  }

  .legal-cartao--destaque .legal-cta {
    padding: 18px 16px;
    font-size: 17px;
  }

  .legal-cta {
    height: auto;
    min-height: 46px;
    padding: 12px 20px;
    font-size: 17px;
  }

  .legal-formulario h2 {
    font-size: 20px;
  }

  .legal-formulario p {
    font-size: 16px;
    line-height: 22px;
  }

  .legal-formulario .btn-legal {
    width: 100%;
    font-size: 17px;
  }

  .legal-formulario iframe {
    min-height: 1100px;
  }
}