/* ============================
   Bloco 5 — estilos (bloco5.css)
   Classes prefixadas com bl5- para evitar conflitos
   ============================ */

/* Tipografia base (ajuste se necessário) */
:root{
  --bl5-white: #ffffff;
  --bl5-white-alpha: rgba(255,255,255,0.75);
  --bl5-accent: #fe2b2b;
  --bl5-focus: rgb(151, 7, 7);
  --bl5-transition: 0.3s ease;
  --font-sans: "Inter-Regular", Inter, Helvetica, Arial, sans-serif;
  --font-sans-bold: "Inter-Bold", Inter, Helvetica, Arial, sans-serif;
  --font-display: "Montserrat-SemiBold", "Montserrat-Regular", Helvetica, Arial, sans-serif;
}

/* Contêiner principal do bloco 5 */
.bl5-principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 150px 0 200px 0;
  position: relative;
  box-sizing: border-box;
}

/* Conteúdo central (constrain width) */
.bl5-conteudo {
  display: flex;
  flex-direction: column;
  width: 946px;
  align-items: center;
  gap: 96px;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Cabeçalho / descrição dos serviços */
.bl5-cabecalho-servicos {
  display: flex;
  flex-direction: column;
  width: 497px;
  align-items: center;
  gap: 52px;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.bl5-descricao-servicos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 19px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Título principal */
.bl5-titulo-principal {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--font-display);
  font-weight: 600;
  color: transparent; /* mantém a intenção original — o conteúdo colorido é separado em spans */
  font-size: 48px;
  text-align: center;
  letter-spacing: 0;
  line-height: 52.7px;
  box-sizing: border-box;
}

/* Barra / caractere em destaque antes do título */
.bl5-sinal-barra {
  color: var(--bl5-accent);
}

/* Texto do título (o texto real aparece aqui) */
.bl5-texto-titulo {
  color: var(--bl5-white);
}

/* Parágrafo de descrição */
.bl5-texto-descritivo {
  position: relative;
  align-self: stretch;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--bl5-white-alpha);
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  box-sizing: border-box;
}

/* Possíveis splits de frase (separados no HTML) */
.bl5-frase-1,
.bl5-frase-2 {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--bl5-white-alpha);
  font-size: 20px;
  letter-spacing: 0;
}

/* se quiser tornar a segunda frase mais forte */
.bl5-frase-2 {
  font-family: var(--font-sans-bold);
  font-weight: 700;
  color: var(--bl5-white);
}

/* Botão de ação — contêiner e botão */
.bl5-acao-solicitar {
  display: flex;
  flex-direction: column;
  width: 336px;
  height: 67px;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  position: relative;
  border-radius: 44px;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

/* Botão real */
.bl5-botao-solicitar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
  margin-right: 0;
  padding: 18px 71px;
  border-radius: 44px;
  border: 1px solid var(--bl5-white);
  background: transparent;
  cursor: pointer;
  transition: all var(--bl5-transition);
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* Hover / active / focus do botão */
.bl5-botao-solicitar:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.bl5-botao-solicitar:active {
  transform: translateY(0);
}

.bl5-botao-solicitar:focus {
  outline: 2px solid var(--bl5-focus);
  outline-offset: 2px;
  border-radius: 44px;
}

/* Logo dentro do botão */
.bl5-logo {
  position: relative;
  width: 25px;
  height: 25px;
  display: inline-block;
  box-sizing: border-box;
}

.bl5-logo-svg {
  position: absolute;
  top: 4px;
  left: 0;
  width: 19px;
  height: 19px;
  display: block;
}

/* Texto do botão */
.bl5-texto-botao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 167px;
  height: 28px;
  margin-top: -1px;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--bl5-white);
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  box-sizing: border-box;
}

/* Lista de serviços (estrutura em colunas) */
.bl5-lista-servicos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 94px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Grupo de serviços — cada "linha" (duas colunas por linha) */
.bl5-grupo-servicos {
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}


/* Item de serviço (cada cartão/linha) */
.bl5-item-servico {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 492px; /* largura máxima por coluna; ajuste se quiser */
  position: relative;
  box-sizing: border-box;
}

/* Caixa interna que contém texto + ícone */
.bl5-caixa-servico {
  width: 386px;
  justify-content: space-between;
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

/* Zona do texto do serviço */
.bl5-texto-servico {
  display: flex;
  flex-direction: column;
  width: 295px;
  align-items: flex-start;
  gap: 19px;
  position: relative;
  box-sizing: border-box;
}

/* Título do serviço */
.bl5-titulo-servico {
  justify-content: flex-start;
  align-self: stretch;
  height: auto;
  margin-top: -1px;
  font-family: "Montserrat-Regular", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--bl5-white);
  font-size: 20px;
  letter-spacing: 0;
  line-height: 21.6px;
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

/* Linha/divisor (imagem) */
.bl5-linha {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}

/* Link / botão de "saiba mais" (âncora que contém o ícone) */
.bl5-link-saiba-mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--bl5-transition);
  box-sizing: border-box;
  text-decoration: none;
}

/* Ícone SVG interno (usa <img> no HTML refatorado) */


/* Caso queira variações (modificadores) para cada item, os seletores abaixo existem
   mas só têm regras se precisar sobrescrever algo por item. Mantidos para flexibilidade. */

/* Variações específicas: se algum texto precisa de align diferente (ex.: item 4 alinhado à direita) */
.bl5-texto-servico--align-end,
.bl5-texto-servico.align-end {
  align-items: flex-end;
}

/* Interações para os botões/links de seta */
.bl5-link-saiba-mais,
.bl5-botao-solicitar {
  will-change: transform;
}

.bl5-link-saiba-mais:hover,
.bl5-botao-solicitar:hover {
  transform: scale(1.06);
}

.bl5-link-saiba-mais:active,
.bl5-botao-solicitar:active {
  transform: scale(0.96);
}

.bl5-link-saiba-mais:focus {
  outline: 2px solid var(--bl5-focus);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Ajustes para instâncias que originalmente usavam fundo por imagem:
   se quiser reproduzir backgrounds em vez de <img>, usar modificadores:
   .bl5-link-saiba-mais--1 { background-image: url(...); background-size: cover; } etc. */

/* ======= Responsividade básica ======= */
@media (max-width: 1100px) {
  .bl5-conteudo { width: 90%; gap: 56px; }
  .bl5-cabecalho-servicos { width: 100%; }
  .bl5-titulo-principal { font-size: 40px; line-height: 44px; }
  .bl5-lista-servicos { gap: 56px; }
  .bl5-grupo-servicos {
    flex-direction: column;
    gap: 30px;
  }
  .bl5-item-servico { max-width: 100%; }
  .bl5-caixa-servico { width: 100%; justify-content: space-between; }
}

@media (max-width: 520px) {
  .bl5-principal { padding: 80px 12px 120px 12px; }
  .bl5-conteudo { gap: 40px; }
  .bl5-titulo-principal { font-size: 28px; line-height: 32px; text-align: left; }
  .bl5-texto-descritivo, .bl5-frase-1, .bl5-frase-2 { font-size: 16px; text-align: left; }
  .bl5-botao-solicitar { padding: 12px 20px; font-size: 16px; }
  .bl5-caixa-servico { flex-direction: row; gap: 12px; }
}

/* ======= Helpers / reset local ======= */
.bl5-principal *, .bl5-principal *::before, .bl5-principal *::after {
  box-sizing: inherit;
}

/* Caso queira adicionar foco acessível para links que sejam somente ícone */
.bl5-link-saiba-mais:focus-visible,
.bl5-botao-solicitar:focus-visible {
  outline: 2px solid var(--bl5-focus);
  outline-offset: 2px;
}

/* Fim do arquivo bl5 */