/* CONFIGURAÇÕES GERAIS */
* {
  margin: 0; /* remove as margens padrão */
  padding: 0; /* remove os espaçamentos internos */
  box-sizing: border-box; /* inclui padding e borda no tamanho total */
}
:root {
  --accent: #2b2bb8; /* define a cor principal do site */
}
body {
  font-family: Arial, Helvetica, sans-serif; /* fonte principal */
  background: #07080f; /* fundo escuro */
  color: #f5f5f5; /* cor padrão dos textos */
}
/* TÍTULO EM DESTAQUE DO BANNER */
.titulo-destaque {
  display: block; /* coloca o destaque em sua própria linha */
  font-size: 80px; /* define o tamanho no computador */
  font-weight: 700; /* deixa o texto em negrito */
  white-space: nowrap; /* evita quebra de linha no computador */
  letter-spacing: 2px; /* separa levemente as letras */
  color: #3b82ff; /* define a cor azul */
  text-shadow:0 0 10px rgba(59, 130, 255, 0.5),0 0 20px rgba(59, 130, 255, 0.3); /* cria o brilho azul */
}
/* FOTO DA SEDE */
.sede-equipe {
  margin-bottom: 25px; /* espaço abaixo da sede */
  border-radius: 15px; /* arredonda a área */
  overflow: hidden; /* impede conteúdo de ultrapassar */
  background: #12182b; /* fundo escuro */
  border: 1px solid #273454; /* borda discreta */
}

.foto-sede {
  width: 100%; /* ocupa toda a largura */
  height: 230px; /* altura da fotografia */
  object-fit: cover; /* preenche sem deformar */
  display: block; /* remove espaço extra */
}

/* INFORMAÇÕES DA SEDE */

.sede-informacoes {
  display: grid; /* organiza em grade */
  grid-template-columns: repeat(2, 1fr); /* duas colunas */
  gap: 15px; /* distância entre informações */
  padding: 18px; /* espaço interno */
}

.sede-informacoes div {
  display: flex; /* organiza os textos */
  flex-direction: column; /* coloca um abaixo do outro */
  gap: 6px; /* espaço entre os textos */
}

.sede-informacoes span {
  font-size: 12px; /* tamanho do rótulo */
  color: #9da8bd; /* cinza claro */
  letter-spacing: 1px; /* espaço entre letras */
}

.sede-informacoes strong {
  font-size: 15px; /* tamanho da informação */
  color: white; /* texto branco */
}

/* ÁREA DOS PILOTOS */

.pilotos-equipe {
  display: grid; /* organiza em grade */
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  ); /* dois pilotos lado a lado */
  gap: 15px; /* espaço entre pilotos */
}

/* CARD INDIVIDUAL DO PILOTO */

.piloto-card {
  background: #12182b; /* fundo escuro */
  border: 1px solid #273454; /* borda */
  border-radius: 15px; /* cantos arredondados */
  overflow: hidden; /* recorta a imagem */
  display: flex; /* organiza o conteúdo */
  flex-direction: column; /* coloca textos abaixo da foto */
  padding-bottom: 15px; /* espaço inferior */
  transition: 0.3s; /* suaviza a animação */
  position: relative; /* permite posicionar o número sobre a foto */
}

.piloto-card img {
  width: 100%; /* ocupa a largura */
  height: 190px; /* altura da foto */
  object-fit: cover; /* evita deformações */
  object-position: center top; /* destaca o rosto */
  margin-bottom: 12px; /* espaço abaixo da foto */
}

.piloto-card strong {
  font-size: 16px; /* tamanho do nome */
  color: white; /* nome branco */
  padding: 0 12px; /* espaço lateral */
}

.piloto-card span:not(.numero-piloto) {
  font-size: 12px; /* tamanho do país */
  color: #9da8bd; /* texto cinza */
  padding: 5px 12px 0; /* espaçamento */
}
/* NÚMERO DO PILOTO SOBRE A FOTO */

.piloto-card .numero-piloto {
  position: absolute; /* posiciona sobre a imagem */
  top: 12px; /* distância do topo */
  right: 12px; /* distância da direita */

  font-family: "Oswald", sans-serif; /* fonte esportiva */
  font-size: 75px; /* tamanho grande */
  font-weight: 700; /* negrito */
  font-style: italic; /* estilo de corrida */
  line-height: 1; /* remove espaço vertical extra */

  color: rgba(255, 255, 255, 0.65); /* branco semitransparente */
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.6); /* destaca sobre o fundo */

  z-index: 2; /* coloca o número na frente da imagem */
  pointer-events: none; /* não interfere no mouse */

  transition: transform 0.3s ease; /* suaviza a animação */
}

/* ANIMAÇÃO DO NÚMERO */

.piloto-card:hover .numero-piloto {
  transform: scale(1.08); /* aumenta levemente o número */
}
/* ANIMAÇÃO DOS PILOTOS */

.piloto-card:hover {
  transform: translateY(-5px); /* levanta o card */
  border-color: #e10600; /* borda vermelha */
  box-shadow: 0 8px 25px rgba(225, 6, 0, 0.15); /* brilho vermelho */
}

/* BANNER PRINCIPAL */

.banner {
  margin-top: 70px; /* evita que fique atrás do menu */
  height: 420px; /* altura do banner */
  background:
    linear-gradient(
      180deg,
      rgba(7, 8, 15, 0.88) 0%,
      rgba(7, 8, 15, 0.65) 38%,
      rgba(7, 8, 15, 0.88) 100%
    ),
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("../IMAGENS/CARROS/ferraripng.png"); /* imagem com camadas escuras */
  background-size: cover; /* cobre toda a área */
  background-position: center; /* centraliza a imagem */
  display: flex; /* ativa o Flexbox */
  align-items: center; /* centraliza verticalmente */
}

.banner-texto > span {
  font-size: 16px; /* tamanho do subtítulo */
  letter-spacing: 3px; /* espaço entre letras */
  color: var(--accent); /* usa a cor principal */
  text-transform: uppercase; /* deixa em maiúsculas */
}

.banner-texto h1 {
  font-size: 64px; /* tamanho do título */
  font-style: italic; /* deixa em itálico */
  line-height: 1.05; /* altura entre as linhas */
  margin: 18px 0; /* espaço acima e abaixo */
  color: white; /* texto branco */
}

.banner-texto p {
  font-size: 20px; /* tamanho da descrição */
  line-height: 1.8; /* espaço entre linhas */
  max-width: 600px; /* largura máxima do texto */
  color: #dcdcdc; /* cinza claro */
}

.banner-texto {
  margin-left: 80px; /* afasta da borda esquerda */
  max-width: 700px; /* limita a largura */
}

/* ÁREA DOS CARDS DAS EQUIPES */

.equipes-grid {
  width: 100%; /* ocupa a largura disponível */
  max-width: 1450px; /* limita a largura em monitores grandes */
  margin: 50px auto 0; /* centraliza a área dos cards */
  display: grid; /* organiza os cards em grade */
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  ); /* coloca dois cards por linha */
  gap: 30px; /* espaço entre os cards */
  padding: 0 40px 50px; /* espaçamento interno */
  align-items: start; /* cada card com sua propia altura */
}

/* CARDS DAS EQUIPES */

.card-equipe {
  background: rgba(8, 10, 26, 0.98); /* fundo escuro */
  border: 1px solid #273454; /* borda externa mais visível */
  border-radius: 24px; /* arredonda os cantos */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); /* sombra */
  overflow: hidden; /* impede conteúdo de ultrapassar o card */
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease; /* animação suave */
}

.card-equipe:hover {
  transform: translateY(-6px); /* levanta o card */
  border-color: rgba(43, 43, 184, 0.8); /* destaca a borda */
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35); /* aumenta a sombra */
}

/* TOPO DOS CARDS */

.card-topo {
  position: relative; /* permite posicionar elementos internos */
  background: #090b16; /* fundo escuro */
}

/* CORES DAS EQUIPES */

.card-equipe.ferrari .card-topo {
  background: linear-gradient(
    180deg,
    rgba(225, 16, 0, 0.22) 0%,
    rgba(9, 11, 22, 0.65) 100%
  ); /* degradê vermelho Ferrari */
}
.card-equipe.mercedes .card-topo {
  background: linear-gradient(
    180deg,
    rgba(0, 161, 156, 0.18) 0%,
    rgba(9, 11, 22, 0.65) 100%
  ); /* degradê verde Mercedes */
}
.card-equipe.redbull .card-topo {
  background: linear-gradient(
    180deg,
    rgba(0, 31, 143, 0.18) 0%,
    rgba(9, 11, 22, 0.65) 100%
  ); /* degradê azul Red Bull */
}
.card-equipe.mclaren .card-topo {
  background: linear-gradient(
    180deg,
    rgba(255, 128, 0, 0.938) 0%,
    rgba(9, 11, 22, 0.65) 100%
  ); /* degradê laranja McLaren */
}

/* IMAGENS DOS CARROS */

.card-topo .carro-equipe {
  width: 100%; /* ocupa toda a largura do card */
  height: 280px; /* padroniza a altura das imagens */
  display: block; /* remove espaços extras */
  object-fit: cover; /* preenche a área sem deformar */
  object-position: center; /* centraliza o carro */
  transition: transform 0.5s ease; /* suaviza a animação */
}

/* ANIMAÇÃO DO CARRO */

.card-equipe:hover .carro-equipe {
  transform: scale(1.05); /* aumenta levemente a imagem */
}

/* CORPO DOS CARDS */

.card-body {
  padding: 24px; /* espaço interno */
}

.topo-card {
  display: flex; /* organiza os elementos lado a lado */
  align-items: center; /* centraliza verticalmente */
  gap: 18px; /* espaço entre elementos */
}

.logo-equipe {
  width: 64px; /* largura da logo */
  flex-shrink: 0; /* impede a logo de diminuir */
}

/* INFORMAÇÕES DAS EQUIPES */

.info-equipe h2 {
  font-size: 22px; /* tamanho do nome */
  margin-bottom: 10px; /* espaço abaixo */
  text-transform: uppercase; /* deixa em maiúsculas */
  letter-spacing: 1px; /* espaço entre letras */
}

/* ESTATÍSTICAS DAS EQUIPES */

.estatisticas {
  display: grid; /* organiza as estatísticas em grade */
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  ); /* cria três colunas iguais */
  gap: 10px; /* separa os quadradinhos */
  margin-top: 15px; /* afasta as estatísticas do nome */
  width: 100%; /* ocupa o espaço disponível */
}

/* QUADRADINHOS DAS ESTATÍSTICAS */

.estatisticas span {
  display: flex; /* organiza ícone e texto lado a lado */
  align-items: center; /* centraliza verticalmente */
  justify-content: center; /* centraliza horizontalmente */
  gap: 7px; /* espaço entre ícone e texto */
  background: #12182b; /* fundo azul escuro */
  border: 1px solid #273454; /* recupera a borda */
  border-radius: 12px; /* arredonda os cantos */
  padding: 12px 10px; /* espaço interno */
  min-height: 48px; /* mantém a altura dos quadradinhos */
  color: #f5f5f5; /* cor do texto */
  font-size: 14px; /* tamanho do texto */
  white-space: nowrap; /* mantém o texto na mesma linha */
  transition: 0.3s ease; /* suaviza a animação */
}

/* ESTILO DOS ÍCONES */

.estatisticas .material-symbols-outlined {
  font-size: 20px; /* tamanho dos ícones */
  font-weight: 400; /* espessura */
  flex-shrink: 0; /* impede o ícone de diminuir */
  transition: transform 0.3s ease; /* animação suave */
}

/* EFEITO AO PASSAR O MOUSE */

.estatisticas span:hover .material-symbols-outlined {
  transform: scale(1.2); /* aumenta levemente o ícone */
}

/* FERRARI */

.card-equipe.ferrari .estatisticas i {
  color: #ff3333; /* vermelho */
}

/* MERCEDES */

.card-equipe.mercedes .estatisticas i {
  color: #00d2be; /* verde-turquesa */
}

/* RED BULL */

.card-equipe.redbull .estatisticas i {
  color: #478bff; /* azul */
}

/* MCLAREN */

.card-equipe.mclaren .estatisticas i {
  color: #ff8700; /* laranja */
}
/* EFEITO HOVER INDIVIDUAL DAS EQUIPES */

.card-equipe.ferrari:hover {
  border-color: #e10600; /* borda vermelha */
  box-shadow: 0 15px 40px rgba(225, 6, 0, 0.25); /* brilho vermelho */
}

.card-equipe.mercedes:hover {
  border-color: #00a19c; /* borda verde */
  box-shadow: 0 15px 40px rgba(0, 161, 156, 0.25); /* brilho verde */
}

.card-equipe.redbull:hover {
  border-color: #245cff; /* borda azul */
  box-shadow: 0 15px 40px rgba(36, 92, 255, 0.25); /* brilho azul */
}

.card-equipe.mclaren:hover {
  border-color: #ff8000; /* borda laranja */
  box-shadow: 0 15px 40px rgba(255, 128, 0, 0.25); /* brilho laranja */
}
/* FICHA DE DETALHES DAS EQUIPES */

.ficha-equipe {
  padding: 5px 0; /* espaçamento interno */
}

.ficha-equipe h3 {
  font-family: "Oswald", sans-serif; /* fonte dos títulos */
  font-size: 25px; /* tamanho do título */
  margin-bottom: 20px; /* distância das informações */
  color: white; /* texto branco */
}

/* FICHA TÉCNICA DAS EQUIPES */
.dados-tecnicos {
  display: grid; /* organiza os dados em colunas */
  grid-template-columns: repeat(3, 1fr); /* três colunas iguais */
  gap: 10px; /* espaço entre os dados */
  margin: 15px 0 25px; /* espaçamento externo */
}

/* CARD DE CADA INFORMAÇÃO */

.dado-tecnico {
  background: #12182b; /* fundo escuro */
  border: 1px solid #273454; /* borda azul discreta */
  border-radius: 12px; /* cantos arredondados */
  padding: 15px 10px; /* espaçamento interno */
  display: flex; /* organiza os textos */
  flex-direction: column; /* um texto abaixo do outro */
  gap: 8px; /* distância entre título e informação */
  transition: 0.3s ease; /* suaviza o hover */
}

/* TÍTULO DA INFORMAÇÃO */
.dado-tecnico span {
  color: #9da8bd; /* cinza claro */
  font-size: 10px; /* título pequeno */
  letter-spacing: 1px; /* espaçamento entre letras */
  text-transform: uppercase; /* letras maiúsculas */
}

/* VALOR DA INFORMAÇÃO */
.dado-tecnico strong {
  color: white; /* texto branco */
  font-size: 13px; /* tamanho da informação */
  font-weight: 600; /* destaque */
}

/* ANIMAÇÃO AO PASSAR O MOUSE */
.dado-tecnico:hover {
  transform: translateY(-3px); /* levanta levemente */
  border-color: #3b82f6; /* destaca a borda */
}

/* TÍTULO DA HISTÓRIA */
.ficha-equipe h4 {
  color: #e10600; /* vermelho Ferrari */
  font-size: 17px; /* tamanho do subtítulo */
  margin-bottom: 12px; /* distância do parágrafo */
}
/* MERCEDES */

.card-equipe.mercedes .ficha-equipe h4 {
  color: #00a19c; /* verde Mercedes */
}

.card-equipe.mercedes .piloto-card:hover {
  border-color: #00a19c;
  box-shadow: 0 8px 25px rgba(0, 161, 156, 0.2);
}

/* RED BULL */

.card-equipe.redbull .ficha-equipe h4 {
  color: #3671c6; /* azul Red Bull */
}

.card-equipe.redbull .piloto-card:hover {
  border-color: #3671c6;
  box-shadow: 0 8px 25px rgba(54, 113, 198, 0.2);
}

/* MCLAREN */

.card-equipe.mclaren .ficha-equipe h4 {
  color: #ff8000; /* laranja McLaren */
}

.card-equipe.mclaren .piloto-card:hover {
  border-color: #ff8000;
  box-shadow: 0 8px 25px rgba(255, 128, 0, 0.2);
}

/* ANIMAÇÃO DAS ESTATÍSTICAS */

.estatisticas span:hover {
  transform: translateY(-3px); /* levanta o quadradinho */
  background: #1b2540; /* clareia o fundo */
}

/* BORDA DAS EQUIPES */

.card-equipe.ferrari .estatisticas span:hover {
  border-color: #e10600;
}
.card-equipe.mercedes .estatisticas span:hover {
  border-color: #00d2be;
}
.card-equipe.redbull .estatisticas span:hover {
  border-color: #478bff;
}
.card-equipe.mclaren .estatisticas span:hover {
  border-color: #ff8700;
}

/* BOTÃO SAIBA MAIS */

.botao {
  margin-top: 22px; /* espaço acima */
  width: 100%; /* ocupa toda a largura */
  padding: 15px; /* espaço interno */
  border: 1px solid rgba(255, 255, 255, 0.14); /* borda discreta */
  border-radius: 12px; /* arredonda os cantos */
  background: rgba(255, 255, 255, 0.05); /* fundo transparente suave */
  color: white; /* texto branco */
  font-size: 16px; /* tamanho do texto */
  font-weight: bold; /* deixa em negrito */
  cursor: pointer; /* cursor de clique */
  transition: 0.3s; /* suaviza os efeitos */
}

/* BOTÃO DO BANNER */

.botao-banner {
  display: inline-block; /* permite definir espaçamentos */
  margin-top: 25px; /* espaço acima */
  padding: 14px 30px; /* espaço interno */
  background: rgb(1, 6, 139); /* fundo azul */
  color: white; /* texto branco */
  text-decoration: none; /* remove sublinhado */
  border-radius: 8px; /* arredonda os cantos */
  font-weight: bold; /* deixa em negrito */
  transition: 0.3s; /* suaviza os efeitos */
}

.botao-banner:hover {
  background: #245cff; /* muda o fundo para azul mais claro */
}

.botao:hover {
  background: rgba(43, 43, 184, 0.2); /* destaca ao passar o mouse */
}

/* DESCRIÇÃO DAS EQUIPES */

.descricao {
  display: grid; /* permite animar a altura da descrição */
  grid-template-rows: 0fr; /* inicia fechada */
  opacity: 0; /* inicia invisível */
  visibility: hidden; /* esconde o conteúdo fechado */
  margin-top: 0; /* remove espaço quando fechada */
  border-top: none; /* remove a linha horizontal */
  background: transparent; /* remove o fundo da caixa */
}
.descricao p {
  font-size: 15px; /* tamanho do texto */
  line-height: 1.8; /* espaço entre linhas */
  text-align: justify; /* alinha nas duas margens */
  color: #dcdcdc; /* texto cinza claro */
}

/* CONTEÚDO INTERNO */
.descricao > .ficha-equipe {
  min-height: 0; /* permite recolher completamente */
  overflow: hidden; /* esconde o conteúdo durante a animação */
}

/* DESCRIÇÃO ABERTA */
.descricao.aberta {
  grid-template-rows: 1fr; /* mantém a animação */
  opacity: 1; /* deixa visível */
  visibility: visible; /* permite visualizar */
  margin-top: 25px; /* mantém o espaçamento */
  border: none; /* remove as linhas da descrição */
}

/* ESPAÇAMENTO DA FICHA ABERTA */
.descricao.aberta > .ficha-equipe {
  padding-top: 25px; /* separa a ficha da linha divisória */
}


/* RESPONSIVIDADE - EQUIPES */
@media (max-width: 820px) {
  /* LISTA DE EQUIPES */

  .equipes-grid {
    grid-template-columns: 1fr; /* coloca uma equipe por linha */
    width: 100%; /* ocupa toda a largura disponível */
    max-width: 650px; /* limita a largura máxima */
    padding: 0 15px 30px; /* adiciona espaço nas laterais e embaixo */
    gap: 25px; /* separa os cards das equipes */
  }

  /* TOPO DOS CARDS */

  .topo-card {
    flex-direction: row; /* mantém logo e informações lado a lado */
    align-items: center; /* centraliza os elementos verticalmente */
  }

  /* INFORMAÇÕES DAS EQUIPES */
  .info-equipe {
    flex: 1; /* ocupa o espaço disponível */
    min-width: 0; /* impede o conteúdo de ultrapassar o card */
  }

  /* BANNER PRINCIPAL */
  .banner {
    height: auto; /* adapta a altura ao conteúdo */
    padding: 60px 0 80px; /* cria espaço acima e abaixo */
  }

  /* TEXTO DO BANNER */
  .banner-texto {
    margin-left: 30px; /* adapta a margem esquerda */
  }
  .banner-texto h1 {
    font-size: 44px; /* diminui o tamanho do título */
  }
}

/* CELULARES */

@media (max-width: 480px) {
  /* EVITAR ROLAGEM HORIZONTAL */

  html,
  body {
    width: 100%; /* respeita a largura da tela */
    overflow-x: clip; /* impede a rolagem horizontal */
  }

  /* LISTA DE EQUIPES */

  .equipes-grid {
    padding: 0 12px 30px; /* diminui as margens laterais */
  }

  /* CARD DA EQUIPE */

  .card-equipe {
    width: 100%; /* ocupa toda a largura disponível */
    min-width: 0; /* impede que ultrapasse a tela */
  }

  /* CONTEÚDO DO CARD */

  .card-body {
    padding: 15px; /* reduz o espaço interno */
  }

  /* IMAGEM DO CARRO */

  .card-topo .carro-equipe {
    height: 190px; /* adapta a altura da imagem do carro */
  }

  /* TOPO DO CARD */

  .topo-card {
    gap: 10px; /* aproxima a logo das informações */
  }

  /* LOGO DA EQUIPE */

  .logo-equipe {
    width: 45px; /* diminui a largura da logo */
  }

  /* NOME DA EQUIPE */

  .info-equipe h2 {
    font-size: 19px; /* adapta o tamanho do nome */
  }

  /* ESTATÍSTICAS */
  .estatisticas {
    grid-template-columns: repeat(
      3,
      minmax(0, 1fr)
    ); /* mantém três estatísticas por linha */
    gap: 5px; /* diminui o espaço entre elas */
  }

  .estatisticas span {
    padding: 8px 4px; /* diminui o espaço interno */
    font-size: 10px; /* reduz os textos */
    gap: 3px; /* aproxima ícones e textos */
    white-space: normal; /* permite quebrar os textos */
    text-align: center; /* centraliza o conteúdo */
  }

  /* ÍCONES DAS ESTATÍSTICAS */

  .estatisticas .material-symbols-outlined {
    font-size: 16px; /* diminui o tamanho dos ícones */
  }

  /* PILOTOS DAS EQUIPES */
  .pilotos-equipe {
    gap: 10px; /* aproxima os cards dos pilotos */
  }

  /* FOTOS DOS PILOTOS */
  .piloto-card img {
    height: 160px; /* adapta a altura das fotos */
  }

  /* NÚMERO DO PILOTO */

  .piloto-card .numero-piloto {
    font-size: 55px; /* diminui o número */
    top: 8px; /* ajusta a distância do topo */
    right: 8px; /* ajusta a distância da direita */
  }

  /* NOME DO PILOTO */
  .piloto-card strong {
    font-size: 13px; /* adapta o tamanho do nome */
  }

  /* INFORMAÇÕES DA SEDE */
  .sede-informacoes {
    gap: 10px; /* aproxima os elementos */
    padding: 12px; /* reduz o espaço interno */
  }

  /* DADOS TÉCNICOS */
  .dados-tecnicos {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    ); /* mantém dois dados por linha */
  }


  /* FOTO DA SEDE */
  .foto-sede {
    height: 170px; /* adapta a altura da imagem da sede */
  }

  /* TÍTULO DO BANNER */

  .banner-texto h1 {
    font-size: 30px; /* diminui o tamanho do título */
    line-height: 1.2; /* melhora a quebra de linha */
    white-space: normal; /* permite quebrar as linhas */
    max-width: 100%; /* respeita a largura disponível */
    overflow-wrap: anywhere; /* impede ultrapassar a tela */
  }

  /* TÍTULO EM DESTAQUE */

  .titulo-destaque {
    display: block; /* coloca o destaque em sua própria linha */
    width: 100%; /* ocupa toda a largura disponível */
    max-width: 100%; /* impede ultrapassar a tela */
    font-size: 30px; /* adapta o texto azul */
    white-space: normal; /* permite quebrar as linhas */
    overflow-wrap: anywhere; /* evita cortes laterais */
    letter-spacing: 0; /* remove o espaçamento extra entre letras */
  }
}