/* =======================================================
   bloco_1_servicos - versão compacta e ajustável
   - Variáveis CSS para ajuste rápido:
     --bloco1-padding-vertical   : padding vertical do bloco
     --bloco1-logo-size         : largura do contêiner do logo
     --bloco1-logo-max-height   : altura máxima que o SVG/IMG poderá ocupar
   - Utilitárias: .logo-size--sm / --md / --lg
   ======================================================= */

.bloco1-servicos {
  box-sizing: border-box;

  /* variáveis padrão (substitua inline ou por classes utilitárias) */
  --bloco1-padding-vertical: 36px;
  --bloco1-logo-size: 190px;
  --bloco1-logo-max-height: 160px;
  --bloco1-gap: 12px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bloco1-gap);
  padding: 260px 0px 300px 0px;
  position: relative;
  min-height: 120px;
  width: 100%;
  overflow: hidden;
  transition: padding 180ms ease, min-height 180ms ease;
}

/* Container interno */
.bloco1-servicos__container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 1052px;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  flex: 0 0 auto;
  position: relative;
}

/* Seção que segura logo + conteúdo (linha única em desktops) */
.bloco1-servicos__secao {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex-wrap: nowrap;
    position: relative;
    flex-direction: row;
    justify-content: center;
}

/* Logo: usa variável para largura e max-height para limitar altura */
.bloco1-servicos__logo {
  position: relative;
  width: var(--bloco1-logo-size);
  height: auto;
  max-height: var(--bloco1-logo-max-height);
  flex: 0 0 auto;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
}

/* Se usar <img> dentro do logo (recomendado se não for SVG inline) */
.bloco1-servicos__logo-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--bloco1-logo-max-height);
  object-fit: contain;
}

/* Se usar SVG inline, garanta que o svg ocupe 100% do contêiner */
.bloco1-servicos__logo svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Imagens/vetores posicionados (se ainda usar camadas absolutas) */
.bloco1-servicos__imagem,
.bloco1-servicos__vetor-2,
.bloco1-servicos__vetor-3 {
  position: absolute;
  pointer-events: none;
}

/* Conteúdo ao lado do logo - ocupa o restante do espaço */
.bloco1-servicos__conteudo {
  position: relative;
  width: calc(100% - (var(--bloco1-logo-size) + 20px)); /* 20 = gap entre logo e conteúdo */
  max-width: 735px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

/* Coluna interna: acento + título */
.bloco1-servicos__coluna {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: 6px;
  position: relative;
}

/* Acento decorativo menor */
.bloco1-servicos__acento {
  width: 40px;
  height: 4px;
  display: block;
}

/* Título principal responsivo e limitado em linhas */
.bloco1-servicos__titulo {
  margin: 0;
  font-family: "Montserrat-SemiBold", Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #ffffff;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: 0;
  display: block;
  max-height: 3.45em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   Utilitárias para tamanhos
   - Aplique no elemento .bloco1-servicos (ou no body/:root se preferir)
   Ex.: <div class="bloco1-servicos logo-size--lg"> ... </div>
   ========================= */
.logo-size--sm  { --bloco1-logo-size: 96px;  --bloco1-logo-max-height: 96px; }
.logo-size--md  { --bloco1-logo-size: 140px; --bloco1-logo-max-height: 110px; }
.logo-size--lg  { --bloco1-logo-size: 220px; --bloco1-logo-max-height: 180px; }

/* Utilitárias para alterar padding vertical rapidamente */
.padding-compact  { --bloco1-padding-vertical: 12px; }
.padding-default  { --bloco1-padding-vertical: 36px; }
.padding-spacious { --bloco1-padding-vertical: 80px; }

/* =========================
   Media queries - adaptações para telas pequenas
   ========================= */
@media (max-width: 760px) {
  .bloco1-servicos {
    padding: 20px 0;
    min-height: auto;
  }

  .bloco1-servicos__secao {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  /* no mobile, definimos logo em tamanho relativo para não estourar */
  .bloco1-servicos__logo {
    width: min(45vw, calc(var(--bloco1-logo-size)));
    max-height: calc(var(--bloco1-logo-max-height) * 0.9);
  }

  .bloco1-servicos__conteudo {
    width: 100%;
    max-width: 100%;
    text-align: center;
    align-items: center;
  }

  .bloco1-servicos__coluna {
    align-items: center;
  }

  .bloco1-servicos__titulo {
    font-size: clamp(18px, 4.5vw, 26px);
  }
}

/* =========================
   Notas de uso rápido (não é necessário alterar abaixo)
   - Para regular o tamanho do SVG numa instância específica:
     <div class="bloco1-servicos" style="--bloco1-logo-size:180px; --bloco1-logo-max-height:150px;">
       ...
     </div>

   - Para usar utilitária:
     <div class="bloco1-servicos logo-size--lg padding-compact"> ... </div>

   - SVG inline é preferível (melhor qualidade, acessibilidade e fácil estilização).
   ========================= */